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

section improvements; hotfixes

Browse Source
This commit is contained in:
Spythere
2023-10-26 21:35:42 +02:00
parent 45b2bd01a2
commit 2bbf9a8ac3
28 changed files with 495 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/InputsSection.vue
+83 -68
View File
@@ -1,7 +1,7 @@
<template>
<section class="inputs-section">
<div class="input_container">
<h2 class="input_header">{{ $t("inputs.title") }}</h2>
<h2 class="input_header">{{ $t('inputs.title') }}</h2>
<div class="input_list type">
<div class="vehicle-types locos">
@@ -25,11 +25,9 @@
@keydown.backspace="removeVehicle"
>
<option :value="null" disabled>
{{ $t("inputs.input-vehicle") }}
</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}<b v-if="loco.supportersOnly">*</b>
{{ $t('inputs.input-vehicle') }}
</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b></option>
</select>
</div>
@@ -55,23 +53,19 @@
@keydown.backspace="removeVehicle"
>
<option :value="null" disabled>
{{ $t("inputs.input-carwagon") }}
{{ $t('inputs.input-carwagon') }}
</option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}<b v-if="car.supportersOnly">*</b>
</option>
<option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
</select>
</div>
<div class="input_list cargo">
<label for="cargo-select">{{ $t("inputs.cargo-title") }}</label>
<label for="cargo-select">{{ $t('inputs.cargo-title') }}</label>
<select
id="cargo-select"
:disabled="
(store.chosenCar && !store.chosenCar.loadable) ||
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
!store.chosenCar
(store.chosenCar && !store.chosenCar.loadable) || (store.chosenCar && store.chosenCar.useType == 'car-passenger') || !store.chosenCar
"
data-select="cargo"
data-ignore-outside="1"
@@ -81,49 +75,30 @@
@keydown.enter.prevent="addOrSwitchVehicle"
@keydown.backspace="removeVehicle"
>
<option
:value="null"
v-if="!store.chosenCar || !store.chosenCar.loadable"
>
{{ $t("inputs.no-cargo-available") }}
<option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">
{{ $t('inputs.no-cargo-available') }}
</option>
<option :value="null" v-else>{{ $t("inputs.cargo-empty") }}</option>
<option :value="null" v-else>{{ $t('inputs.cargo-empty') }}</option>
<option
v-for="cargo in store.chosenCar?.cargoList"
:value="cargo"
:key="cargo.id"
>
<option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
{{ cargo.id }}
</option>
</select>
</div>
<div class="input_actions">
<button
class="btn"
@click="addVehicle(store.chosenVehicle, store.chosenCargo)"
>
{{ $t("inputs.action-add") }}
<button class="btn" @click="addVehicle(store.chosenVehicle, store.chosenCargo)">
{{ $t('inputs.action-add') }}
</button>
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
{{ $t("inputs.action-swap") }}
<button class="btn" @click="switchVehicles" :disabled="store.chosenStockListIndex == -1" :data-disabled="store.chosenStockListIndex == -1">
{{ $t('inputs.action-swap') }}
<b class="text--accent">
{{
store.chosenStockListIndex == -1
? ""
: `${store.chosenStockListIndex + 1}.`
}}
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
</b>
</button>
<button class="btn" @click="store.isRealStockListCardOpen = true">
<b>{{ $t("inputs.real-stock") }}</b>
<b>{{ $t('inputs.real-stock') }}</b>
</button>
</div>
</div>
@@ -131,54 +106,63 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
import imageMixin from "../../mixins/imageMixin";
import { useStore } from "../../store";
import stockPreviewMixin from "../../mixins/stockPreviewMixin";
import stockMixin from "../../mixins/stockMixin";
import imageMixin from '../../mixins/imageMixin';
import { useStore } from '../../store';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import stockMixin from '../../mixins/stockMixin';
export default defineComponent({
mixins: [imageMixin, stockPreviewMixin, stockMixin],
data: () => ({
store: useStore(),
locomotiveTypeList: [
{
id: "loco-e",
desc: "ELEKTRYCZNE",
id: 'loco-e',
desc: 'ELEKTRYCZNE',
},
{
id: "loco-s",
desc: "SPALINOWE",
id: 'loco-s',
desc: 'SPALINOWE',
},
{
id: "loco-ezt",
desc: "ELEKTR. ZESPOŁY TRAKCYJNE",
id: 'loco-ezt',
desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
},
{
id: "loco-szt",
desc: "SPAL. ZESPOŁY TRAKCYJNE",
id: 'loco-szt',
desc: 'SPAL. ZESPOŁY TRAKCYJNE',
},
],
carTypeList: [
{
id: "car-passenger",
desc: "PASAŻERSKIE",
id: 'car-passenger',
desc: 'PASAŻERSKIE',
},
{
id: "car-cargo",
desc: "TOWAROWE",
id: 'car-cargo',
desc: 'TOWAROWE',
},
],
}),
setup() {
const store = useStore();
computed: {
locoOptions() {
return this.store.locoDataList
.slice()
.sort((a, b) => (a.type > b.type ? 1 : -1))
.filter((loco) => loco.power == this.store.chosenLocoPower);
},
return {
store,
};
carOptions() {
return this.store.carDataList
.slice()
.sort((a, b) => (a.type > b.type ? 1 : -1))
.filter((car) => car.useType == this.store.chosenCarUseType);
},
},
methods: {
@@ -189,8 +173,7 @@ export default defineComponent({
addOrSwitchVehicle() {
if (!this.store.chosenVehicle) return;
if (this.store.chosenStockListIndex == -1)
this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
else this.switchVehicles();
},
@@ -213,12 +196,35 @@ export default defineComponent({
const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
this.store.stockList[this.store.chosenStockListIndex] = stockObject;
},
selectLocoType(locoTypeId: string) {
this.store.chosenLocoPower = locoTypeId;
this.store.chosenVehicle = this.locoOptions[0];
this.store.chosenLoco = this.locoOptions[0];
},
selectCarWagonType(carWagonTypeId: string) {
this.store.chosenCarUseType = carWagonTypeId;
this.store.chosenVehicle = this.carOptions[0];
this.store.chosenCar = this.carOptions[0];
this.store.chosenCargo = null;
},
previewVehicleByType(type: 'loco' | 'car' | 'cargo') {
this.$nextTick(() => {
if (!this.store.chosenLoco && !this.store.chosenCar) return;
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
this.store.chosenCargo = this.store.chosenCar?.cargoList.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
});
},
},
});
</script>
<style lang="scss" scoped>
@import "../../styles/global";
@import '../../styles/global';
.inputs-section {
display: flex;
@@ -228,6 +234,11 @@ export default defineComponent({
grid-column: 1;
}
.input_container {
width: 100%;
max-width: 380px;
}
.input_header {
margin-bottom: 1em;
}
@@ -236,7 +247,7 @@ button.btn--choice {
font-size: 0.9em;
padding: 0.3em 0.6em;
&[data-selected="true"] {
&[data-selected='true'] {
background-color: $accentColor;
color: black;
}
@@ -247,6 +258,10 @@ button.btn--choice {
.input_list {
margin: 0.5em 0;
select {
width: 100%;
}
label {
display: block;