mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 05:18:10 +00:00
Poprawki bugów; cleanup i restrukturyzacja kodu
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pojazdownik",
|
"name": "pojazdownik",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
|
|||||||
+23
-968
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,420 @@
|
|||||||
|
<template>
|
||||||
|
<section class="inputs">
|
||||||
|
<div class="input inputs_loco">
|
||||||
|
<div class="input_container">
|
||||||
|
<h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
|
||||||
|
<div class="input_radio">
|
||||||
|
<label v-for="label in locoLabels" :for="label.id" :key="label.id">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="loco"
|
||||||
|
:id="label.id"
|
||||||
|
:value="label.id"
|
||||||
|
:checked="store.chosenLocoPower == label.id"
|
||||||
|
@change="onLocoPowerChange(label.id)"
|
||||||
|
v-model="store.chosenLocoPower"
|
||||||
|
/>
|
||||||
|
<span>{{ label.title }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input_list type">
|
||||||
|
<select
|
||||||
|
id="loco-select"
|
||||||
|
v-model="store.chosenLoco"
|
||||||
|
@change="onLocoTypeChange"
|
||||||
|
>
|
||||||
|
<option :value="null" disabled>Wybierz pojazd z listy</option>
|
||||||
|
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
|
||||||
|
{{ loco.type }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button @click="addVehicle">
|
||||||
|
<img :src="icons.add" alt="add vehicle" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input_checkbox">
|
||||||
|
<label for="supporter">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="supporter"
|
||||||
|
v-model="store.showSupporter"
|
||||||
|
/>
|
||||||
|
<span>Pokaż pojazdy dla supporterów</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="input inputs_car"
|
||||||
|
:class="{
|
||||||
|
disabled:
|
||||||
|
store.chosenLocoPower == 'loco-ezt' ||
|
||||||
|
store.chosenLocoPower == 'loco-szt',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="input_container">
|
||||||
|
<h2 class="input_header">RODZAJ WAGONU</h2>
|
||||||
|
<div class="input_radio">
|
||||||
|
<label v-for="label in carLabels" :for="label.id" :key="label.id">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="car"
|
||||||
|
:id="label.id"
|
||||||
|
:checked="store.chosenCarUseType == label.id"
|
||||||
|
:value="label.id"
|
||||||
|
v-model="store.chosenCarUseType"
|
||||||
|
@change="onCarUseTypeChange(label.id)"
|
||||||
|
/>
|
||||||
|
<span>{{ label.title }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input_list type">
|
||||||
|
<select
|
||||||
|
id="car-select"
|
||||||
|
v-model="store.chosenCar"
|
||||||
|
@change="onCarTypeChange"
|
||||||
|
>
|
||||||
|
<option :value="null" disabled>Wybierz wagon z listy</option>
|
||||||
|
<option v-for="car in carOptions" :value="car" :key="car.type">
|
||||||
|
{{ car.type }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button @click="addVehicle">
|
||||||
|
<img :src="icons.add" alt="add vehicle" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input_list cargo">
|
||||||
|
<select
|
||||||
|
id="cargo-select"
|
||||||
|
:disabled="
|
||||||
|
(store.chosenCar && !store.chosenCar.loadable) ||
|
||||||
|
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
|
||||||
|
!store.chosenCar
|
||||||
|
"
|
||||||
|
v-model="store.chosenCargo"
|
||||||
|
>
|
||||||
|
<option :value="null">brak</option>
|
||||||
|
<option
|
||||||
|
v-for="cargo in store.chosenCar?.cargoList"
|
||||||
|
:value="cargo"
|
||||||
|
:key="cargo.id"
|
||||||
|
>
|
||||||
|
{{ cargo.id }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { ICarWagon, ILocomotive, IStore } from "@/types";
|
||||||
|
import { defineComponent, inject } from "vue";
|
||||||
|
import { computed } from "@vue/reactivity";
|
||||||
|
|
||||||
|
import statsMixin from "@/mixins/StatsMixin";
|
||||||
|
|
||||||
|
function isILocomotive(
|
||||||
|
vehicle: ILocomotive | ICarWagon
|
||||||
|
): vehicle is ILocomotive {
|
||||||
|
return (vehicle as ILocomotive).power !== undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [statsMixin],
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const store = inject("Store") as IStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
store,
|
||||||
|
totalMass: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) =>
|
||||||
|
acc +
|
||||||
|
(stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
totalLength: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) => acc + stock.length * stock.count,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
maxSpeed: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) =>
|
||||||
|
stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
icons: {
|
||||||
|
add: require("@/assets/add-icon.svg"),
|
||||||
|
},
|
||||||
|
locoLabels: [
|
||||||
|
{
|
||||||
|
id: "loco-e",
|
||||||
|
title: "ELEKTROWÓZ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "loco-s",
|
||||||
|
title: "SPALINOWÓZ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "loco-ezt",
|
||||||
|
title: "EZT",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "loco-szt",
|
||||||
|
title: "SZT",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
carLabels: [
|
||||||
|
{
|
||||||
|
id: "car-passenger",
|
||||||
|
title: "PASAŻERSKI",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "car-cargo",
|
||||||
|
title: "TOWAROWY",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
locoOptions() {
|
||||||
|
return this.locoDataList
|
||||||
|
.filter((loco) => loco.power == this.store.chosenLocoPower)
|
||||||
|
.sort((a, b) => (a.type > b.type ? -1 : 1));
|
||||||
|
},
|
||||||
|
|
||||||
|
carOptions() {
|
||||||
|
return this.carDataList
|
||||||
|
.filter((car) => car.useType == this.store.chosenCarUseType)
|
||||||
|
.sort((a, b) => (a.type > b.type ? 1 : -1));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onLocoPowerChange(inputId: string) {
|
||||||
|
this.store.chosenLoco = null;
|
||||||
|
this.store.imageLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
onCarUseTypeChange(inputId: string) {
|
||||||
|
this.store.chosenCar = null;
|
||||||
|
|
||||||
|
if (inputId == "car-passenger") this.store.chosenCargo = null;
|
||||||
|
|
||||||
|
this.store.imageLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
onCarTypeChange() {
|
||||||
|
this.store.chosenCargo = null;
|
||||||
|
this.store.chosenLoco = null;
|
||||||
|
|
||||||
|
this.store.imageLoading = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
onLocoTypeChange() {
|
||||||
|
this.store.chosenCargo = null;
|
||||||
|
this.store.chosenCar = null;
|
||||||
|
|
||||||
|
this.store.imageLoading = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
addVehicle() {
|
||||||
|
const vehicle = this.store.chosenCar || this.store.chosenLoco;
|
||||||
|
|
||||||
|
if (!vehicle) return;
|
||||||
|
|
||||||
|
if (vehicle.length + this.totalLength > 650) {
|
||||||
|
alert("Maksymalna długość składu to 650m!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const previousStock =
|
||||||
|
this.store.stockList.length > 0
|
||||||
|
? this.store.stockList[this.store.stockList.length - 1]
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (
|
||||||
|
isILocomotive(vehicle) &&
|
||||||
|
previousStock &&
|
||||||
|
previousStock.type == vehicle.type
|
||||||
|
) {
|
||||||
|
this.store.stockList[this.store.stockList.length - 1].count++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
!isILocomotive(vehicle) &&
|
||||||
|
previousStock &&
|
||||||
|
previousStock.type == vehicle.type &&
|
||||||
|
previousStock.cargo?.id == this.store.chosenCargo?.id
|
||||||
|
) {
|
||||||
|
this.store.stockList[this.store.stockList.length - 1].count++;
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const stockObj = {
|
||||||
|
type: vehicle.type,
|
||||||
|
length: vehicle.length,
|
||||||
|
mass: vehicle.mass,
|
||||||
|
maxSpeed: vehicle.maxSpeed,
|
||||||
|
isLoco: isILocomotive(vehicle),
|
||||||
|
cargo:
|
||||||
|
!isILocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
|
||||||
|
? this.store.chosenCargo
|
||||||
|
: undefined,
|
||||||
|
count: 1,
|
||||||
|
imgSrc: vehicle.imageSrc,
|
||||||
|
useType: isILocomotive(vehicle) ? vehicle.power : vehicle.useType,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
isILocomotive(vehicle) &&
|
||||||
|
this.store.stockList.length > 0 &&
|
||||||
|
!this.store.stockList[0].isLoco
|
||||||
|
)
|
||||||
|
this.store.stockList.unshift(stockObj);
|
||||||
|
else this.store.stockList.push(stockObj);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.onLocoPowerChange("loco-e");
|
||||||
|
this.onCarUseTypeChange("car-passenger");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../styles/global";
|
||||||
|
|
||||||
|
.inputs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&_car {
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.75;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
&_header {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_radio {
|
||||||
|
label span {
|
||||||
|
padding: 0.25em 0.55em;
|
||||||
|
border: 2px solid white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_checkbox {
|
||||||
|
label span {
|
||||||
|
/* padding: 0.25em 0.55em; */
|
||||||
|
/* border: 2px solid white; */
|
||||||
|
color: #aaa;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
width: 1.5ex;
|
||||||
|
height: 1.5ex;
|
||||||
|
background: #aaa;
|
||||||
|
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + span::before {
|
||||||
|
background-color: $accentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_radio,
|
||||||
|
&_checkbox {
|
||||||
|
margin: 1em 0;
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:checked + span {
|
||||||
|
border-color: $accentColor;
|
||||||
|
color: $accentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_list {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_list button {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
border-color: $accentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 2px solid white;
|
||||||
|
padding: 0.25em;
|
||||||
|
|
||||||
|
height: 2.35em;
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin: 1em 0;
|
||||||
|
|
||||||
|
&_header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_radio,
|
||||||
|
&_list,
|
||||||
|
&_checkbox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,438 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bottom">
|
||||||
|
<section class="image">
|
||||||
|
<div class="image__wrapper">
|
||||||
|
<div class="image__content">
|
||||||
|
<div class="no-img" v-if="!store.chosenCar && !store.chosenLoco">
|
||||||
|
POGLĄD WYBRANEGO POJAZDU
|
||||||
|
</div>
|
||||||
|
<div class="empty-message" v-if="store.imageLoading">
|
||||||
|
ŁADOWANIE OBRAZU...
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="store.chosenLoco && !store.chosenCar"
|
||||||
|
:src="store.chosenLoco.imageSrc"
|
||||||
|
:alt="store.chosenLoco.type"
|
||||||
|
@load="onImageLoad"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="store.chosenCar"
|
||||||
|
:src="store.chosenCar.imageSrc"
|
||||||
|
:alt="store.chosenCar.type"
|
||||||
|
@load="onImageLoad"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="spacer"></section>
|
||||||
|
|
||||||
|
<section class="stock-list">
|
||||||
|
<div class="stock-list_buttons">
|
||||||
|
<button class="btn btn--copy" @click="downloadStock">
|
||||||
|
POBIERZ SKŁAD
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="stock-list_specs">
|
||||||
|
Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
|
||||||
|
<span class="text--accent">{{ totalLength }}</span>
|
||||||
|
m | Vmax składu:
|
||||||
|
<span class="text--accent">{{ maxSpeed }} </span> km/h
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li v-if="store.stockList.length == 0" class="list-empty">
|
||||||
|
<div class="item-content">Lista pojazdów jest pusta!</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
v-for="(stock, i) in store.stockList"
|
||||||
|
:key="stock.type + i"
|
||||||
|
:class="{ loco: stock.isLoco }"
|
||||||
|
:data-id="i"
|
||||||
|
tabindex="0"
|
||||||
|
@focus="onListItemFocus(i)"
|
||||||
|
:ref="`item-${i}`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="item-content"
|
||||||
|
@dragstart="onDragStart(i)"
|
||||||
|
@drop="onDrop($event, i)"
|
||||||
|
@dragover="allowDrop"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="stock.cargo"> ({{ stock.cargo?.id }}) </span>
|
||||||
|
|
||||||
|
<span> {{ stock.length }}m</span>
|
||||||
|
|
||||||
|
<span>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-actions">
|
||||||
|
<div class="count">
|
||||||
|
<button class="action-btn" @click="subStock(i)">
|
||||||
|
<img :src="icons.sub" alt="subtract vehicle count" />
|
||||||
|
</button>
|
||||||
|
<span>{{ stock.count }} </span>
|
||||||
|
<button class="action-btn" @click="addStock(i)">
|
||||||
|
<img :src="icons.add" alt="add vehicle count" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="action-btn" @click="moveUpStock(i)">
|
||||||
|
<img :src="icons.higher" alt="move up vehicle" />
|
||||||
|
</button>
|
||||||
|
<button class="action-btn" @click="moveDownStock(i)">
|
||||||
|
<img :src="icons.lower" alt="move down vehicle" />
|
||||||
|
</button>
|
||||||
|
<button class="action-btn" @click="removeStock(i)">
|
||||||
|
<img :src="icons.remove" alt="remove vehicle" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, inject } from "vue";
|
||||||
|
import { IStore } from "@/types";
|
||||||
|
|
||||||
|
import { computed } from "@vue/reactivity";
|
||||||
|
|
||||||
|
import statsMixin from "@/mixins/StatsMixin";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [statsMixin],
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const store = inject("Store") as IStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
store,
|
||||||
|
totalMass: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) =>
|
||||||
|
acc +
|
||||||
|
(stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
totalLength: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) => acc + stock.length * stock.count,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
maxSpeed: computed(() =>
|
||||||
|
store.stockList.reduce(
|
||||||
|
(acc, stock) =>
|
||||||
|
stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
icons: {
|
||||||
|
add: require("@/assets/add-icon.svg"),
|
||||||
|
sub: require("@/assets/sub-icon.svg"),
|
||||||
|
remove: require("@/assets/remove-icon.svg"),
|
||||||
|
lower: require("@/assets/lower-icon.svg"),
|
||||||
|
higher: require("@/assets/higher-icon.svg"),
|
||||||
|
},
|
||||||
|
|
||||||
|
draggedVehicleID: -1,
|
||||||
|
}),
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onListItemFocus(vehicleID: number) {
|
||||||
|
const vehicle = this.store.stockList[vehicleID];
|
||||||
|
|
||||||
|
if (vehicle.isLoco) {
|
||||||
|
this.store.chosenLocoPower = vehicle.useType;
|
||||||
|
|
||||||
|
this.store.chosenLoco =
|
||||||
|
this.locoDataList.find((v) => v.type == vehicle.type) || null;
|
||||||
|
|
||||||
|
this.store.chosenCar = null;
|
||||||
|
this.store.chosenCargo = null;
|
||||||
|
|
||||||
|
// this.store.onLocoPowerChange(vehicle.useType);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.store.chosenCarUseType = vehicle.useType;
|
||||||
|
|
||||||
|
this.store.chosenLoco = null;
|
||||||
|
this.store.chosenCar =
|
||||||
|
this.carDataList.find((v) => v.type == vehicle.type) || null;
|
||||||
|
this.store.chosenCargo = vehicle.cargo || null;
|
||||||
|
|
||||||
|
// this.chose = vehicle.useType;
|
||||||
|
},
|
||||||
|
|
||||||
|
getCarSpecFromType(typeStr: string) {
|
||||||
|
const specArray = typeStr.split("_");
|
||||||
|
|
||||||
|
if (specArray.length == 0) return null;
|
||||||
|
|
||||||
|
/* 111a_Grafitti_1 */
|
||||||
|
if (specArray.length == 3)
|
||||||
|
return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
|
||||||
|
|
||||||
|
/* 111a_PKP_Bnouz_01 */
|
||||||
|
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
|
||||||
|
},
|
||||||
|
|
||||||
|
addStock(index: number) {
|
||||||
|
if (this.store.stockList[index].length + this.totalLength > 650) {
|
||||||
|
alert("Maksymalna długość składu to 650m!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.store.stockList[index].count++;
|
||||||
|
},
|
||||||
|
|
||||||
|
subStock(index: number) {
|
||||||
|
if (this.store.stockList[index].count < 2) return;
|
||||||
|
|
||||||
|
this.store.stockList[index].count--;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeStock(index: number) {
|
||||||
|
this.store.stockList = this.store.stockList.filter(
|
||||||
|
(stock, i) => i != index
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
moveUpStock(index: number) {
|
||||||
|
if (index < 1) return;
|
||||||
|
|
||||||
|
const tempStock = this.store.stockList[index];
|
||||||
|
|
||||||
|
this.store.stockList[index] = this.store.stockList[index - 1];
|
||||||
|
this.store.stockList[index - 1] = tempStock;
|
||||||
|
},
|
||||||
|
|
||||||
|
moveDownStock(index: number) {
|
||||||
|
if (index > this.store.stockList.length - 2) return;
|
||||||
|
|
||||||
|
const tempStock = this.store.stockList[index];
|
||||||
|
|
||||||
|
this.store.stockList[index] = this.store.stockList[index + 1];
|
||||||
|
this.store.stockList[index + 1] = tempStock;
|
||||||
|
},
|
||||||
|
|
||||||
|
downloadStock() {
|
||||||
|
const fileName = prompt("Nazwij plik:", "sklad");
|
||||||
|
|
||||||
|
if (!fileName) return;
|
||||||
|
|
||||||
|
const stockString = this.store.stockList
|
||||||
|
.map((stock) => {
|
||||||
|
let s =
|
||||||
|
stock.isLoco || !stock.cargo
|
||||||
|
? stock.type
|
||||||
|
: `${stock.type}:${stock.cargo.id}`;
|
||||||
|
|
||||||
|
let final = s;
|
||||||
|
for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
|
||||||
|
|
||||||
|
return final;
|
||||||
|
})
|
||||||
|
.join(";");
|
||||||
|
|
||||||
|
const blob = new Blob([stockString]);
|
||||||
|
const file = fileName + ".con";
|
||||||
|
|
||||||
|
var e = document.createEvent("MouseEvents"),
|
||||||
|
a = document.createElement("a");
|
||||||
|
a.download = file;
|
||||||
|
a.href = window.URL.createObjectURL(blob);
|
||||||
|
a.dataset.downloadurl = ["", a.download, a.href].join(":");
|
||||||
|
e.initEvent("click", true, false);
|
||||||
|
a.dispatchEvent(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
onDragStart(vehicleIndex: number) {
|
||||||
|
this.draggedVehicleID = vehicleIndex;
|
||||||
|
},
|
||||||
|
|
||||||
|
onDrop(e: DragEvent, vehicleIndex: number) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let targetEl: Element | null = this.$refs[
|
||||||
|
`item-${vehicleIndex}`
|
||||||
|
] as Element;
|
||||||
|
|
||||||
|
if (!targetEl) return;
|
||||||
|
|
||||||
|
const dataID = targetEl.attributes.getNamedItem("data-id")?.textContent;
|
||||||
|
|
||||||
|
if (!dataID) return;
|
||||||
|
|
||||||
|
const tempVehicle = this.store.stockList[Number(dataID)];
|
||||||
|
|
||||||
|
this.store.stockList[Number(dataID)] =
|
||||||
|
this.store.stockList[this.draggedVehicleID];
|
||||||
|
this.store.stockList[this.draggedVehicleID] = tempVehicle;
|
||||||
|
},
|
||||||
|
|
||||||
|
allowDrop(e: DragEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
|
|
||||||
|
onImageLoad(ev: Event) {
|
||||||
|
this.store.imageLoading = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../styles/global";
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
margin-top: 2.5em;
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 0 2em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
flex: 2 1 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
flex-grow: 2;
|
||||||
|
padding: 0 1em 0 0;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
max-width: 380px;
|
||||||
|
width: 22em;
|
||||||
|
height: 13em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
border: 1px solid white;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-message,
|
||||||
|
.no-img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-message {
|
||||||
|
background: rgba(#000, 0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-list {
|
||||||
|
flex-grow: 3;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&_buttons {
|
||||||
|
button {
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0.4em 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.list-empty {
|
||||||
|
border: 1px solid whitesmoke;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus .item-content {
|
||||||
|
color: $accentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
/* background: whitesmoke; */
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 1em 0;
|
||||||
|
|
||||||
|
margin-right: 0.5em;
|
||||||
|
|
||||||
|
/* max-width: 200px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-right: 0.5em;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin: 0 0.5em;
|
||||||
|
/* font-size: 1.25em; */
|
||||||
|
|
||||||
|
color: $accentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
width: 1.3em;
|
||||||
|
height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+21
-1
@@ -1,4 +1,24 @@
|
|||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
|
||||||
createApp(App).mount("#app");
|
import { ICargo, ICarWagon, ILocomotive, IStock, IStore } from "./types";
|
||||||
|
import { reactive } from "@vue/reactivity";
|
||||||
|
|
||||||
|
const Store: IStore = reactive({
|
||||||
|
chosenCar: null as ICarWagon | null,
|
||||||
|
chosenLoco: null as ILocomotive | null,
|
||||||
|
chosenCargo: null as ICargo | null,
|
||||||
|
|
||||||
|
showSupporter: false,
|
||||||
|
imageLoading: false,
|
||||||
|
|
||||||
|
chosenLocoPower: "loco-e",
|
||||||
|
chosenCarUseType: "car-passenger",
|
||||||
|
|
||||||
|
stockList: [] as IStock[],
|
||||||
|
cargoOptions: [] as any[][],
|
||||||
|
})
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.provide('Store', Store)
|
||||||
|
.mount("#app");
|
||||||
|
|||||||
@@ -0,0 +1,147 @@
|
|||||||
|
import { IVehicleData, ILocomotive, ICarWagon, IStore } from "@/types";
|
||||||
|
import { defineComponent, inject } from "@vue/runtime-core";
|
||||||
|
import { computed } from "@vue/reactivity";
|
||||||
|
|
||||||
|
import vehicleDataJSON from "@/data/vehicleData.json";
|
||||||
|
import vehiclePropsJSON from "@/data/vehicleProps.json";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
store: inject("Store") as IStore
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
locoDataList() {
|
||||||
|
return Object.keys(vehicleDataJSON).reduce(
|
||||||
|
(acc, vehicleTypeKey) => {
|
||||||
|
if (!vehicleTypeKey.startsWith("loco")) return acc;
|
||||||
|
|
||||||
|
const locoVehiclesData = (vehicleDataJSON as IVehicleData)[
|
||||||
|
vehicleTypeKey
|
||||||
|
];
|
||||||
|
|
||||||
|
locoVehiclesData.forEach((loco) => {
|
||||||
|
if (loco[4] && !this.store.showSupporter) return;
|
||||||
|
|
||||||
|
const locoType = loco[0] as string;
|
||||||
|
|
||||||
|
let length = 0,
|
||||||
|
mass = 0;
|
||||||
|
|
||||||
|
// Elektrowozy
|
||||||
|
if (vehicleTypeKey.startsWith("loco-e")) {
|
||||||
|
// 32m dla ET41, reszta 16
|
||||||
|
length = locoType.startsWith("ET") ? 32 : 16;
|
||||||
|
|
||||||
|
// 80t dla wszystkich EU06, EP08
|
||||||
|
mass = 80;
|
||||||
|
|
||||||
|
// 83t dla: EU07 o nr większych niż 300 & dla wszystkich EP07 oprócz nr 135,242,1002,1048
|
||||||
|
const locoNumber = Number(locoType.split("-")[1]);
|
||||||
|
|
||||||
|
if (
|
||||||
|
(locoType.startsWith("EU") && locoNumber > 300) ||
|
||||||
|
(locoType.startsWith("EP") &&
|
||||||
|
![242, 135, 1002, 1048].includes(locoNumber))
|
||||||
|
) {
|
||||||
|
mass = 83;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Spalinowozy
|
||||||
|
if (vehicleTypeKey.startsWith("loco-s")) {
|
||||||
|
length = 14;
|
||||||
|
mass = 74;
|
||||||
|
}
|
||||||
|
|
||||||
|
// EZT
|
||||||
|
if (vehicleTypeKey.startsWith("loco-ezt")) {
|
||||||
|
// EN57
|
||||||
|
length = 65;
|
||||||
|
mass = 126;
|
||||||
|
|
||||||
|
// EN71
|
||||||
|
if (locoType.startsWith("EN71")) {
|
||||||
|
length = 86;
|
||||||
|
mass = 182;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2xEN57
|
||||||
|
if (locoType.startsWith("2EN57")) {
|
||||||
|
length = 130;
|
||||||
|
mass = 253;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// SZT
|
||||||
|
if (vehicleTypeKey.startsWith("loco-szt")) {
|
||||||
|
length = 14;
|
||||||
|
mass = 23;
|
||||||
|
}
|
||||||
|
|
||||||
|
acc.push({
|
||||||
|
power: vehicleTypeKey,
|
||||||
|
type: loco[0] as string,
|
||||||
|
constructionType: loco[1] as string,
|
||||||
|
cabinType: loco[2] as string,
|
||||||
|
maxSpeed: Number(loco[3] as string),
|
||||||
|
supportersOnly: loco[4] as boolean,
|
||||||
|
imageSrc: loco[5] as string,
|
||||||
|
|
||||||
|
length,
|
||||||
|
mass,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
[] as ILocomotive[]
|
||||||
|
);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
carDataList() {
|
||||||
|
return Object.keys(vehicleDataJSON).reduce(
|
||||||
|
(acc, vehicleTypeKey) => {
|
||||||
|
if (!vehicleTypeKey.startsWith("car")) return acc;
|
||||||
|
|
||||||
|
const carVehiclesData = (vehicleDataJSON as IVehicleData)[
|
||||||
|
vehicleTypeKey
|
||||||
|
];
|
||||||
|
|
||||||
|
carVehiclesData.forEach((car) => {
|
||||||
|
if (car[3] && !this.store.showSupporter) return;
|
||||||
|
|
||||||
|
const carPropsData = vehiclePropsJSON.find((v) =>
|
||||||
|
car[0].toString().includes(v.type)
|
||||||
|
);
|
||||||
|
|
||||||
|
acc.push({
|
||||||
|
useType: vehicleTypeKey,
|
||||||
|
type: car[0] as string,
|
||||||
|
constructionType: car[1] as string,
|
||||||
|
loadable: car[2] as boolean,
|
||||||
|
supportersOnly: car[3] as boolean,
|
||||||
|
maxSpeed: Number(car[4] as string),
|
||||||
|
imageSrc: car[5] as string,
|
||||||
|
cargoList:
|
||||||
|
carPropsData?.cargo.split(";").map((cargo) => ({
|
||||||
|
id: cargo.split(":")[0],
|
||||||
|
totalMass: Number(cargo.split(":")[1]),
|
||||||
|
})) || [],
|
||||||
|
|
||||||
|
mass: carPropsData?.mass || 0,
|
||||||
|
length: carPropsData?.length || 0,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
[] as ICarWagon[]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
export interface IStore {
|
||||||
|
chosenCar: ICarWagon | null;
|
||||||
|
chosenLoco: ILocomotive | null;
|
||||||
|
chosenCargo: ICargo | null;
|
||||||
|
|
||||||
|
showSupporter: boolean;
|
||||||
|
imageLoading: boolean;
|
||||||
|
|
||||||
|
chosenLocoPower: string;
|
||||||
|
chosenCarUseType: string;
|
||||||
|
|
||||||
|
stockList: IStock[];
|
||||||
|
cargoOptions: any[][];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IVehicleData {
|
||||||
|
[key: string]: (string | boolean)[][];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ILocomotive {
|
||||||
|
type: string;
|
||||||
|
power: string;
|
||||||
|
constructionType: string;
|
||||||
|
cabinType: string;
|
||||||
|
maxSpeed: number;
|
||||||
|
supportersOnly: boolean;
|
||||||
|
imageSrc: string;
|
||||||
|
|
||||||
|
mass: number;
|
||||||
|
length: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ICarWagon {
|
||||||
|
//"203V_PKPC_Fll_01","203V",true,false,"100",img
|
||||||
|
type: string;
|
||||||
|
useType: string;
|
||||||
|
constructionType: string;
|
||||||
|
loadable: boolean;
|
||||||
|
supportersOnly: boolean;
|
||||||
|
maxSpeed: number;
|
||||||
|
imageSrc: string;
|
||||||
|
|
||||||
|
mass: number;
|
||||||
|
length: number;
|
||||||
|
cargoList: { id: string; totalMass: number }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ICargo {
|
||||||
|
id: string;
|
||||||
|
totalMass: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IStock {
|
||||||
|
useType: string;
|
||||||
|
type: string;
|
||||||
|
length: number;
|
||||||
|
mass: number;
|
||||||
|
maxSpeed: number;
|
||||||
|
cargo?: { id: string; totalMass: number };
|
||||||
|
isLoco: boolean;
|
||||||
|
count: number;
|
||||||
|
imgSrc: string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user