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

feature: miniaturki składu

Browse Source
This commit is contained in:
Spythere
2023-02-06 15:21:43 +01:00
parent 067173a684
commit 190f026b91
12 changed files with 85 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -2
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pl"> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -7,7 +7,6 @@
<title>Pojazdownik</title> <title>Pojazdownik</title>
<meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" /> <meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
<meta name="keywords" content="pojazdownik td2 train driver stacjownik spythere" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
public/images/car-cargo-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 B

public/images/car-passenger-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 953 B

public/images/loco-e-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

public/images/loco-ezt-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/images/loco-s-unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

public/images/unknown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

src/components/InputsSection.vue
+12 -6
View File
@@ -7,7 +7,7 @@
<div class="vehicle-types locos"> <div class="vehicle-types locos">
<button <button
v-for="locoType in locomotiveTypeList" v-for="locoType in locomotiveTypeList"
class="btn--choice" class="btn btn--choice"
:data-selected="locoType.id == store.chosenLocoPower" :data-selected="locoType.id == store.chosenLocoPower"
@click="selectLocoType(locoType.id)" @click="selectLocoType(locoType.id)"
> >
@@ -34,7 +34,7 @@
<div class="vehicle-types carwagons"> <div class="vehicle-types carwagons">
<button <button
v-for="carType in carTypeList" v-for="carType in carTypeList"
class="btn--choice" class="btn btn--choice"
:data-selected="carType.id == store.chosenCarUseType" :data-selected="carType.id == store.chosenCarUseType"
@click="selectCarWagonType(carType.id)" @click="selectCarWagonType(carType.id)"
> >
@@ -274,11 +274,10 @@ export default defineComponent({
margin-bottom: 1em; margin-bottom: 1em;
} }
.btn--choice { button.btn--choice {
margin-right: 0.5em;
font-weight: bold; font-weight: bold;
font-size: 0.9em;
background-color: #444; padding: 0.15em 0.6em;
&[data-selected='true'] { &[data-selected='true'] {
background-color: $accentColor; background-color: $accentColor;
@@ -314,6 +313,9 @@ export default defineComponent({
} }
.vehicle-types { .vehicle-types {
display: flex;
gap: 0.25em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@@ -326,6 +328,10 @@ export default defineComponent({
.input_actions { .input_actions {
justify-content: center; justify-content: center;
} }
.vehicle-types {
justify-content: center;
}
} }
</style> </style>
src/components/StockListTab.vue
+65 -19
View File
@@ -14,7 +14,7 @@
<div class="count"> <div class="count">
<button <button
class="action-btn" class="btn action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="subStock(store.chosenStockListIndex)" @click="subStock(store.chosenStockListIndex)"
> >
@@ -34,7 +34,7 @@
<input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" /> <input v-else id="stock-count" type="number" value="0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" />
<button <button
class="action-btn" class="btn action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="addStock(store.chosenStockListIndex)" @click="addStock(store.chosenStockListIndex)"
> >
@@ -44,7 +44,7 @@
</div> </div>
<button <button
class="action-btn" class="btn action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)" @click="moveUpStock(store.chosenStockListIndex)"
> >
@@ -53,7 +53,7 @@
</button> </button>
<button <button
class="action-btn" class="btn action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)" @click="moveDownStock(store.chosenStockListIndex)"
> >
@@ -62,7 +62,7 @@
</button> </button>
<button <button
class="action-btn" class="btn action-btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)" @click="removeStock(store.chosenStockListIndex)"
> >
@@ -91,6 +91,22 @@
</span> </span>
</div> </div>
<div class="stock_thumbnails" ref="thumbnails">
<div v-for="(stock, stockIndex) in store.stockList" :data-selected="store.chosenStockListIndex == stockIndex">
<img
v-for="i in stock.count"
@click="onListItemClick(stockIndex)"
:key="stock.id"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
:alt="stock.type"
:title="stock.type"
@error="stockImageError($event, stock)"
/>
<!-- <b>{{ stock.type }}</b> -->
</div>
</div>
<div class="stock_warnings"> <div class="stock_warnings">
<div class="warning" v-if="locoNotSuitable"> <div class="warning" v-if="locoNotSuitable">
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego! Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
@@ -173,6 +189,7 @@ import { useStore } from '../store';
import warningsMixin from '../mixins/warningsMixin'; import warningsMixin from '../mixins/warningsMixin';
import imageMixin from '../mixins/imageMixin'; import imageMixin from '../mixins/imageMixin';
import stockPreviewMixin from '../mixins/stockPreviewMixin'; import stockPreviewMixin from '../mixins/stockPreviewMixin';
import { IStock } from '../types';
export default defineComponent({ export default defineComponent({
name: 'stock-list', name: 'stock-list',
@@ -194,6 +211,16 @@ export default defineComponent({
draggedVehicleID: -1, draggedVehicleID: -1,
}), }),
watch: {
'store.chosenStockListIndex': {
handler(id: number) {
(this.$refs['thumbnails'] as HTMLElement)
.querySelector(`div:nth-child(${id + 1})`)
?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
},
},
},
computed: { computed: {
stockString() { stockString() {
return this.store.stockList return this.store.stockList
@@ -218,6 +245,10 @@ export default defineComponent({
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable; return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
}, },
stockImageError(e: Event, stock: IStock): void {
(e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
},
copyToClipboard() { copyToClipboard() {
// if (this.stockHasWarnings()) { // if (this.stockHasWarnings()) {
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!'); // alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
@@ -381,10 +412,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../styles/global'; @import '../styles/global';
.stock_warnings {
margin-top: 1em;
}
.warning { .warning {
padding: 0.25em; padding: 0.25em;
background: $accentColor; background: $accentColor;
@@ -403,12 +430,12 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5em;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0; margin: 1em 0;
border: 1px solid white; padding: 0.5em;
background-color: #353a57;
padding: 0 0.3em;
&[data-disabled='true'] { &[data-disabled='true'] {
opacity: 0.8; opacity: 0.8;
@@ -430,12 +457,7 @@ export default defineComponent({
} }
button { button {
margin: 0.25em; padding: 0.25em 0.5em;
padding: 0.25em;
&:focus-visible {
outline: 1px solid white;
}
img { img {
vertical-align: text-bottom; vertical-align: text-bottom;
@@ -467,7 +489,6 @@ ul {
overflow: auto; overflow: auto;
height: 70vh; height: 70vh;
margin-top: 1em;
} }
ul > li { ul > li {
@@ -560,6 +581,31 @@ li > .stock-info {
} }
} }
.stock_thumbnails {
display: flex;
margin: 1em 0;
overflow: auto;
background-color: #353a57;
div {
display: flex;
align-items: flex-end;
&[data-selected='true'] {
background-color: rebeccapurple;
}
}
img {
margin: 0.5em 0;
// max-width: 150px;
max-height: 60px;
}
}
@media screen and (max-width: $breakpointMd) { @media screen and (max-width: $breakpointMd) {
ul { ul {
min-height: auto; min-height: auto;
src/components/StockSection.vue
+4 -3
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="stock-section"> <section class="stock-section">
<transition name="tab-change" mode="out-in"> <transition name="tab-change" mode="out-in">
<keep-alive> <keep-alive>
<component :is="chosenSectionComponent" :key="chosenSectionComponent"></component> <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
</keep-alive> </keep-alive>
</transition> </transition>
</div> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -56,6 +56,8 @@ export default defineComponent({
.stock-section { .stock-section {
grid-row: 1 / 4; grid-row: 1 / 4;
grid-column: 2; grid-column: 2;
overflow: hidden;
} }
// Stock tabs styles // Stock tabs styles
@@ -70,7 +72,6 @@ export default defineComponent({
width: 100%; width: 100%;
} }
} }
} }
</style> </style>
src/components/TrainImageSection.vue
-2
View File
@@ -83,8 +83,6 @@ export default defineComponent({
watch: { watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) { chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
console.log(vehicle);
if (vehicle && vehicle.type != prevVehicle?.type) { if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true; this.store.imageLoading = true;
} }
src/styles/global.scss
+3 -10
View File
@@ -3,7 +3,7 @@
$breakpointMd: 960px; $breakpointMd: 960px;
$breakpointSm: 550px; $breakpointSm: 550px;
$bgColor: #2c3149; $bgColor: #2b3552;
$textColor: #fff; $textColor: #fff;
$secondaryColor: #222; $secondaryColor: #222;
$accentColor: #e4c428; $accentColor: #e4c428;
@@ -86,6 +86,8 @@ button.btn {
outline: none; outline: none;
background-color: #222; background-color: #222;
border-radius: 8px;
font-weight: bold;
transition: all 250ms; transition: all 250ms;
@@ -120,15 +122,6 @@ button.btn {
outline: 1px solid white; outline: 1px solid white;
} }
} }
&--choice {
padding: 0.25em 0.3em;
background-color: #222;
&:focus-visible {
outline: 1px solid white;
}
}
} }
select, select,