Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-05 04:28:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki widoków modali/kart

Browse Source
This commit is contained in:
Spythere
2022-08-12 15:55:08 +02:00
parent 83c091a572
commit 4b870245c5
23 changed files with 321 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+19 -10
View File
@@ -7,14 +7,21 @@
<div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
<keep-alive>
<RandomizerCard v-if="store.isRandomizerCardOpen" />
<transition name="card-appear">
<RandomizerCard />
</transition>
</keep-alive>
<keep-alive>
<transition name="card-appear">
<RealStockCard />
</transition>
</keep-alive>
<div class="app_container">
<header>
<img :src="logoImage" alt="logo pojazdownik" />
</header>
<main>
<LogoSection />
<InputsSection />
<TrainImageSection />
@@ -47,10 +54,11 @@ import { defineComponent } from 'vue';
import InputsSection from './components/InputsSection.vue';
import ListSection from './components/ListSection.vue';
import logoImage from './assets/logo.svg';
import { useStore } from './store';
import TrainImageSection from './components/TrainImageSection.vue';
import RandomizerCard from './components/RandomizerCard.vue';
import LogoSection from './components/LogoSection.vue';
import RandomizerCard from './components/cards/RandomizerCard.vue';
import RealStockCard from './components/cards/RealStockCard.vue';
export default defineComponent({
components: {
@@ -58,12 +66,14 @@ export default defineComponent({
InputsSection,
TrainImageSection,
RandomizerCard,
LogoSection,
RealStockCard,
RandomizerCard,
RealStockCard,
},
data: () => ({
VERSION: packageInfo.version,
logoImage,
}),
setup() {
@@ -147,7 +157,6 @@ h2 {
/* MAIN SECTION */
main {
margin-top: 2em;
display: grid;
gap: 1em 3em;
@@ -156,7 +165,7 @@ main {
min-height: 75vh;
grid-template-columns: 1fr 2fr;
grid-template-rows: 330px minmax(400px, 1fr);
grid-template-rows: auto 360px minmax(400px, 1fr);
padding: 0.5em;
}
src/assets/EIC.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 B

src/assets/IC.svg
-28
View File
@@ -1,28 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="791.32538"
height="340"
id="svg2">
<defs
id="defs4" />
<g
transform="translate(-6.31e-4,-712.36218)"
id="layer1">
<g
transform="translate(-35.785713,150.35711)"
id="g2239">
<g
transform="translate(0,-50)"
id="g2288">
<path
d="M 242.05316,862.5559 L 409.15371,612.00507 L 827.1117,611.95328 L 769.48955,698.50507 L 497.34525,699.01219 L 391.64564,861.99747 L 657.77165,862.08805 L 599.72093,952.00507 L 329.35483,952.00507 L 242.05316,862.5559 z M 35.786344,861.91508 L 204.55316,612.08342 L 346.18935,612.00507 L 123.4711,951.99662 L 35.786344,861.91508 z "
style="fill:rgb(170,170,170)"
id="path2290" />
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 972 B

src/assets/TLK.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 560 B

src/assets/add-icon.svg
-4
View File
@@ -1,4 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0653076 6.00002L11.9347 6.00001" stroke="white" stroke-width="2"/>
<path d="M5.93835 12L6.06169 1.62558e-05" stroke="white" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 258 B

src/assets/higher-icon.svg
-3
View File
@@ -1,3 +0,0 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L7.5 2L14 11" stroke="white" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 165 B

src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

src/assets/logo.svg
-15
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

src/assets/lower-icon.svg
-3
View File
@@ -1,3 +0,0 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1L7.5 10L1 0.999999" stroke="white" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 171 B

src/assets/randomize-icon.svg
-10
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

src/assets/remove-icon.svg
-4
View File
@@ -1,4 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.00012 13L13.0001 1" stroke="white" stroke-width="2"/>
<path d="M13 13L1.00007 1.00002" stroke="white" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 236 B

src/assets/sub-icon.svg
-3
View File
@@ -1,3 +0,0 @@
<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L13 1" stroke="white" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 155 B

src/assets/swap-icon.svg
-5
View File
@@ -1,5 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.12308 1V3.58625V6.06907L13 3.58625L9.12308 1Z" fill="white"/>
<path d="M5.24615 7.9309V10.4137V13L1 10.4137L5.24615 7.9309Z" fill="white"/>
<path d="M1 3.58623C2.73032 3.58623 5.43077 3.58623 5.43077 3.58623L9.12308 3.58625M9.12308 3.58625V1L13 3.58625L9.12308 6.06907V3.58625ZM13 10.4137H6.16923H5.24615M5.24615 10.4137V7.9309L1 10.4137L5.24615 13V10.4137Z" stroke="white" stroke-width="0.714286"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 515 B

src/components/InputsSection.vue
+2 -12
View File
@@ -98,8 +98,7 @@
</b>
</button>
<button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
<ready-stock-list />
<button class="btn" @click="store.isRealStockListCardOpen = true"><b>REALNE ZESTAWIENIA</b></button>
</div>
</div>
</section>
@@ -108,7 +107,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import ReadyStockList from './ReadyStockList.vue';
import { IStock } from '../types';
import imageMixin from '../mixins/imageMixin';
import { useStore } from '../store';
@@ -121,10 +119,6 @@ interface ILocoType {
}
export default defineComponent({
components: {
ReadyStockList,
},
mixins: [imageMixin],
data: () => ({
@@ -205,10 +199,6 @@ export default defineComponent({
this.store.swapVehicles = true;
},
setReadyStockList(bool = false) {
this.store.isRealStockListCardOpen = bool;
},
onVehicleSelect(type: 'loco' | 'car') {
this.$nextTick(() => {
if (!this.store.chosenLoco && !this.store.chosenCar) return;
@@ -310,7 +300,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
grid-row: 1;
grid-row: 2;
grid-column: 1;
}
src/components/ListSection.vue
+10 -30
View File
@@ -19,7 +19,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="subStock(store.chosenStockListIndex)"
>
<img :src="icons.sub" alt="subtract vehicle count" />
<img :src="getIconURL('sub')" alt="subtract vehicle count" />
1
</button>
@@ -39,7 +39,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="addStock(store.chosenStockListIndex)"
>
<img :src="icons.add" alt="add vehicle count" />
<img :src="getIconURL('add')" alt="add vehicle count" />
1
</button>
</div>
@@ -49,7 +49,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<img :src="icons.higher" alt="move up vehicle" />
<img :src="getIconURL('higher')" alt="move up vehicle" />
Przenieś wyżej
</button>
@@ -58,7 +58,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<img :src="icons.lower" alt="move down vehicle" />
<img :src="getIconURL('lower')" alt="move down vehicle" />
Przenieś niżej
</button>
@@ -67,7 +67,7 @@
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<img :src="icons.remove" alt="remove vehicle" />
<img :src="getIconURL('remove')" alt="remove vehicle" />
Usuń
</button>
</div>
@@ -81,7 +81,7 @@
<div class="stock_specs">
<b class="real-stock-info" v-if="store.chosenRealStock">
<span class="text--accent">
<img :src="icons[store.chosenRealStock.type]" :alt="store.chosenRealStock.type" />
<img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
{{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}</span
>
</b>
@@ -168,25 +168,16 @@
<script lang="ts">
import { defineComponent } from 'vue';
import RandomizerCard from './RandomizerCard.vue';
import TrainImage from './TrainImageSection.vue';
import addIcon from '../assets/add-icon.svg';
import subIcon from '../assets/sub-icon.svg';
import removeIcon from '../assets/remove-icon.svg';
import lowerIcon from '../assets/lower-icon.svg';
import higherIcon from '../assets/higher-icon.svg';
import TLKIcon from '../assets/TLK.png';
import EICIcon from '../assets/EIC.png';
import ICIcon from '../assets/IC.svg';
import { useStore } from '../store';
import warningsMixin from '../mixins/warningsMixin';
import imageMixin from '../mixins/imageMixin';
export default defineComponent({
components: { RandomizerCard, TrainImage },
components: { TrainImage },
mixins: [warningsMixin],
mixins: [warningsMixin, imageMixin],
setup() {
const store = useStore();
@@ -197,17 +188,6 @@ export default defineComponent({
},
data: () => ({
icons: {
add: addIcon,
sub: subIcon,
remove: removeIcon,
lower: lowerIcon,
higher: higherIcon,
TLK: TLKIcon,
EIC: EICIcon,
IC: ICIcon,
} as { [key: string]: string },
imageOffsetY: 0,
draggedVehicleID: -1,
@@ -437,7 +417,7 @@ export default defineComponent({
}
.stock-list-section {
grid-row: 1 / 3;
grid-row: 1 / 4;
grid-column: 2;
}
src/components/LogoSection.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<section class="logo-section">
<img src="/images/logo.svg" alt="logo pojazdownik" />
</section>
</template>
<script lang="ts">
export default {
setup() {
return {};
},
};
</script>
<style lang="scss" scoped>
.logo-section {
grid-row: 1;
grid-column: 1;
margin-bottom: 1.5em;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 25em;
}
</style>
src/components/TrainImageSection.vue
+1 -1
View File
@@ -112,7 +112,7 @@ export default defineComponent({
@import '../styles/global.scss';
.train-image-section {
grid-row: 2;
grid-row: 3;
grid-column: 1;
margin-top: 2em;
src/components/RandomizerCard.vue → src/components/cards/RandomizerCard.vue
+171 -173
View File
@@ -1,169 +1,175 @@
<template>
<div class="card">
<transition name="slide-top">
<div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
</transition>
<div class="randomizer-card g-card" v-if="store.isRandomizerCardOpen">
<div class="g-card_bg" @click="store.isRandomizerCardOpen = false"></div>
<div class="card_wrapper" ref="cardWrapper" tabindex="0">
<h1><img :src="getIcon('randomize-icon')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
<div class="card_content">
<transition name="slide-top">
<div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
</transition>
<div class="random-stock-selections">
<div class="first-row">
<h3>WŁAŚCIWOŚCI SKŁADU</h3>
<div class="card_wrapper" ref="cardWrapper" tabindex="0">
<h1><img :src="getIconURL('randomize')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
<div class="max-values">
<span>
<label for="stock-mass">Maks. masa (t)</label>
<input type="number" id="stock-mass" v-model="maxStockMass" />
</span>
<span>
<label for="stock-mass">Maks. długość (m)</label>
<input type="number" id="stock-mass" v-model="maxStockLength" />
</span>
<span>
<label for="stock-count">Maks. liczba wagonów</label>
<input type="number" id="stock-count" v-model="maxStockCount" />
</span>
</div>
</div>
<div class="second-row">
<div class="select-box locos">
<h3>LOKOMOTYWA</h3>
<select
v-model="chosenLocomotive"
@change="onLocomotivePreviewSelect()"
@focus="onLocomotivePreviewSelect()"
>
<option :value="undefined">Wybierz lokomotywę</option>
<option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
{{ loco.type }}
</option>
</select>
</div>
<div class="car-preview">
<div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
<span class="preview-message" v-if="!previewVehicle">
WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
</span>
<img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
<span class="preview-message info" v-if="previewVehicle">
<button @click="prevPreviewIndex">&lt;</button>
<div class="random-stock-selections">
<div class="first-row">
<h3>WŁAŚCIWOŚCI SKŁADU</h3>
<div class="max-values">
<span>
{{ previewVehicle.type }}
{{
isLocomotive(previewVehicle) ? '' : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
}}
<label for="stock-mass">Maks. masa (t)</label>
<input type="number" id="stock-mass" v-model="maxStockMass" />
</span>
<span>
<label for="stock-mass">Maks. długość (m)</label>
<input type="number" id="stock-mass" v-model="maxStockLength" />
</span>
<span>
<label for="stock-count">Maks. liczba wagonów</label>
<input type="number" id="stock-count" v-model="maxStockCount" />
</span>
</div>
</div>
<div class="second-row">
<div class="select-box locos">
<h3>LOKOMOTYWA</h3>
<select
v-model="chosenLocomotive"
@change="onLocomotivePreviewSelect()"
@focus="onLocomotivePreviewSelect()"
>
<option :value="undefined">Wybierz lokomotywę</option>
<option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
{{ loco.type }}
</option>
</select>
</div>
<div class="car-preview">
<div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
<span class="preview-message" v-if="!previewVehicle">
WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
</span>
<button @click="nextPreviewIndex">&gt;</button>
</span>
<img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
<span class="preview-message info" v-if="previewVehicle">
<button @click="prevPreviewIndex">&lt;</button>
<span>
{{ previewVehicle.type }}
{{
isLocomotive(previewVehicle)
? ''
: `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
}}
</span>
<button @click="nextPreviewIndex">&gt;</button>
</span>
</div>
</div>
<div class="select-box carwagons">
<h3>
WAGONY
<button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
</h3>
<div class="rules" v-if="showRules">
<ul>
<li>
<b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
<i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
</li>
<li>
<b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
towarowego (zakładając, że je posiada)
</li>
<li>
<b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu.
Im większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
</li>
<li>
<b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania
danego typu
</li>
</ul>
</div>
<div class="list-wrapper">
<ul class="carwagon-list">
<li class="text--accent" style="font-weight: bold">
<div>Typ wagonu</div>
<div>Ładunek</div>
<div>Szansa</div>
<div>Warianty</div>
<div>Usuń</div>
</li>
<li v-for="(stockWagon, i) in chosenCarWagonList">
<div>
<input
class="carwagon-type g-input"
type="text"
list="types-datalist"
v-model="stockWagon.stockString"
@input="onCarWagonTypeInput(stockWagon)"
@focus="onCarWagonTypeFocus(stockWagon)"
placeholder="Kliknij, aby dodać wagon..."
/>
<datalist id="types-datalist">
<option value="">Wybierz wagon</option>
<option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
{{ carOptionType }}
</option>
</datalist>
</div>
<div>
<select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
<option :value="undefined">brak</option>
<option
:value="{ id: 'random', totalMass: 0 }"
v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
>
losowy
</option>
<option v-for="cargo in stockWagon.availableCargo" :value="cargo">
{{ cargo.id }}
</option>
</select>
</div>
<div>
<span class="carwagon-chance">
<input type="number" v-model="stockWagon.chance" max="100" min="1" />
</span>
</div>
<div class="variant-count">{{ stockWagon.availableCars.length }}</div>
<div class="carwagon-remove">
<button @click="removeFromRandomStockList(i)">
<img :src="getIconURL('remove')" alt="remove" />
</button>
</div>
</li>
</ul>
</div>
<button class="btn btn--outline" @click="addToRandomStockList">+ NOWY WAGON</button>
</div>
</div>
<div class="select-box carwagons">
<h3>
WAGONY
<button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
</h3>
<div class="rules" v-if="showRules">
<ul>
<li>
<b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
<i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
</li>
<li>
<b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
towarowego (zakładając, że je posiada)
</li>
<li>
<b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu. Im
większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
</li>
<li>
<b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania danego
typu
</li>
</ul>
</div>
<div class="list-wrapper">
<ul class="carwagon-list">
<li class="text--accent" style="font-weight: bold">
<div>Typ wagonu</div>
<div>Ładunek</div>
<div>Szansa</div>
<div>Warianty</div>
<div>Usuń</div>
</li>
<li v-for="(stockWagon, i) in chosenCarWagonList">
<div>
<input
class="carwagon-type g-input"
type="text"
list="types-datalist"
v-model="stockWagon.stockString"
@input="onCarWagonTypeInput(stockWagon)"
@focus="onCarWagonTypeFocus(stockWagon)"
placeholder="Kliknij, aby dodać wagon..."
/>
<datalist id="types-datalist">
<option value="">Wybierz wagon</option>
<option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
{{ carOptionType }}
</option>
</datalist>
</div>
<div>
<select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
<option :value="undefined">brak</option>
<option
:value="{ id: 'random', totalMass: 0 }"
v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
>
losowy
</option>
<option v-for="cargo in stockWagon.availableCargo" :value="cargo">
{{ cargo.id }}
</option>
</select>
</div>
<div>
<span class="carwagon-chance">
<input type="number" v-model="stockWagon.chance" max="100" min="1" />
</span>
</div>
<div class="variant-count">{{ stockWagon.availableCars.length }}</div>
<div class="carwagon-remove">
<button @click="removeFromRandomStockList(i)">
<img :src="getIcon('remove-icon')" alt="remove" />
</button>
</div>
</li>
</ul>
</div>
<button class="btn btn--outline" @click="addToRandomStockList">+ NOWY WAGON</button>
<div class="stock-actions">
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
LOSUJ SKŁAD!
</button>
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
ZAMKNIJ
</button>
</div>
</div>
<div class="stock-actions">
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
LOSUJ SKŁAD!
</button>
<button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
ZAMKNIJ
</button>
</div>
</div>
</div>
</template>
@@ -171,11 +177,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { ICargo, ICarWagon, ILocomotive, IStock, IVehicleData, Vehicle } from '../types';
import { ICargo, ICarWagon, ILocomotive, Vehicle } from '../../types';
import { useStore } from '../store';
import stockMixin from '../mixins/stockMixin';
import { isLocomotive } from '../utils/vehicleUtils';
import { useStore } from '../../store';
import stockMixin from '../../mixins/stockMixin';
import imageMixin from '../../mixins/imageMixin';
import { isLocomotive } from '../../utils/vehicleUtils';
interface RandomStockCarWagon {
stockString: string;
@@ -195,7 +202,7 @@ export default defineComponent({
};
},
mixins: [stockMixin, stockMixin],
mixins: [stockMixin, imageMixin],
activated() {
(this.$refs['cardWrapper'] as any).focus();
@@ -399,16 +406,12 @@ export default defineComponent({
return { carWagon: randCarWagon!, cargo: randCargo };
},
getIcon(name: string) {
return new URL(`../assets/${name}.svg`, import.meta.url).href;
},
},
});
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@import '../../styles/global.scss';
h1 {
display: flex;
@@ -429,15 +432,10 @@ h3 {
margin: 0 0 0.5em 0;
}
.card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
.card_content {
overflow-y: hidden;
border: 2px solid white;
width: 95vw;
@@ -446,10 +444,12 @@ h3 {
height: 90vh;
max-height: 900px;
background: #111;
background-color: #111;
border-radius: 1em;
z-index: 99;
.card_wrapper {
display: flex;
flex-direction: column;
@@ -474,8 +474,6 @@ h3 {
text-align: center;
padding: 0.25em;
border-radius: 1em 1em 0 0;
background-color: #b2222288;
}
src/components/ReadyStockList.vue → src/components/cards/RealStockCard.vue
+47 -56
View File
@@ -1,56 +1,59 @@
<template>
<div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
<div class="top-sticky">
<button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
<div class="real-stock-card g-card" v-if="store.isRealStockListCardOpen">
<div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
<div class="header">
<h1>
REALNE ZESTAWIENIA
<div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
</h1>
<p>
Pełne informacje o zestawieniach dostępne na stronie
<a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
listopad 2021r.)
</p>
<div class="card_content">
<div class="top-sticky">
<button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
<input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
<div class="header">
<h1>
REALNE ZESTAWIENIA
<div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
</h1>
<p>
Pełne informacje o zestawieniach dostępne na stronie
<a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
listopad 2021r.)
</p>
<input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
</div>
</div>
<ul v-if="responseStatus == 'loaded'">
<li
v-for="(stock, key) in computedReadyStockList"
:key="key"
tabindex="0"
@click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
@keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
>
<img :src="getIconURL(stock.type)" :alt="stock.type" />
<b class="text--accent"> {{ stock.name }}</b>
<div>{{ stock.number }}</div>
</li>
</ul>
</div>
<ul v-if="responseStatus == 'loaded'">
<li
v-for="(stock, key) in computedReadyStockList"
:key="key"
tabindex="0"
@click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
@keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
>
<img v-if="stock.type != 'iR' && stock.type != 'RE'" :src="icons[stock.type]" alt="" />
<span v-else>{{ stock.type }}</span>
<b class="text--accent"> {{ stock.name }}</b>
<div>{{ stock.number }}</div>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Vehicle, IStock, IReadyStockList } from '../types';
import { Vehicle, IStock, IReadyStockList } from '../../types';
import iconEIC from '../assets/EIC.png';
import iconIC from '../assets/IC.svg';
import iconTLK from '../assets/TLK.png';
import { useStore } from '../store';
import { isLocomotive } from '../utils/vehicleUtils';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import imageMixin from '../../mixins/imageMixin';
interface ResponseJSONData {
[key: string]: string;
}
export default defineComponent({
mixins: [imageMixin],
setup() {
return {
store: useStore(),
@@ -62,12 +65,6 @@ export default defineComponent({
isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
searchedReadyStockName: '',
icons: {
EIC: iconEIC,
IC: iconIC,
TLK: iconTLK,
} as { [key: string]: string },
}),
computed: {
@@ -177,8 +174,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
.exit {
padding: 1em 0;
font-size: 1.2em;
}
@@ -191,16 +189,8 @@ input {
}
}
.ready-stock-list {
position: fixed;
z-index: 101;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
.card_content {
background-color: #1c1c1c;
border-radius: 1em;
height: 85vh;
@@ -210,11 +200,12 @@ input {
padding: 0 1em;
overflow-y: auto;
z-index: 100;
.top-sticky {
position: sticky;
top: 0;
background: #333;
background: #1c1c1c;
}
.header {
@@ -262,10 +253,10 @@ input {
cursor: pointer;
background: #444;
background: #2b2b2b;
img {
max-width: 1.5em;
height: 0.85em;
}
span {
src/mixins/imageMixin.ts
+2 -2
View File
@@ -2,8 +2,8 @@ import { defineComponent } from 'vue';
export default defineComponent({
methods: {
getIcon(name: string) {
return new URL(`./assets/${name}.svg`, import.meta.url).href;
getIconURL(name: string, ext = 'svg'): string {
return `/images/icon-${name}.${ext}`;
},
},
});
src/styles/global.scss
+30 -4
View File
@@ -167,17 +167,31 @@ ul {
}
}
.g-card-dimmer {
.g-card {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000aa;
z-index: 99;
z-index: 200;
&_bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000000aa;
z-index: 10;
}
}
.g-choice {
@@ -218,3 +232,15 @@ ul {
transition: transform 100ms ease-in-out;
}
}
.card-appear {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: all 100ms ease-in-out;
}
}