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:
+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 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