mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 11:45:34 +00:00
section improvements; hotfixes
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -1,89 +1,66 @@
|
||||
<template>
|
||||
<section class="train-image-section">
|
||||
<div class="train-image__wrapper">
|
||||
<div
|
||||
class="train-image__content"
|
||||
:class="{ supporter: store.chosenVehicle?.supportersOnly }"
|
||||
>
|
||||
<transition name="img-message-anim">
|
||||
<div
|
||||
class="empty-message"
|
||||
v-if="store.imageLoading && store.chosenVehicle?.imageSrc"
|
||||
>
|
||||
{{ $t("preview.loading") }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
|
||||
<img
|
||||
v-if="store.chosenVehicle"
|
||||
tabindex="0"
|
||||
:src="getThumbnailURL(store.chosenVehicle.type, 'small')"
|
||||
@click="onImageClick"
|
||||
@keydown.enter="onImageClick"
|
||||
@error="onImageError"
|
||||
type="image/jpeg"
|
||||
/>
|
||||
|
||||
<div class="no-img" v-if="!store.chosenVehicle">
|
||||
{{ $t("preview.title") }}
|
||||
</div>
|
||||
|
||||
<img
|
||||
v-if="store.chosenVehicle"
|
||||
:src="getThumbnailURL(store.chosenVehicle.type, 'small')"
|
||||
:alt="store.chosenVehicle.type"
|
||||
@load="onImageLoad"
|
||||
@click="onImageClick"
|
||||
/>
|
||||
|
||||
<!-- <div class="empty-message" v-if="store.chosenVehicle && !store.chosenVehicle.imageSrc">Ten pojazd nie ma jeszcze podglądu!</div> -->
|
||||
</div>
|
||||
|
||||
<div class="train-image__info" v-if="store.chosenVehicle">
|
||||
<b class="text--accent">{{ store.chosenVehicle.type }}</b> •
|
||||
<b style="color: #ccc">
|
||||
{{
|
||||
$t(
|
||||
`preview.${
|
||||
isLocomotive(store.chosenVehicle)
|
||||
? store.chosenVehicle.power
|
||||
: store.chosenVehicle.useType
|
||||
}`,
|
||||
)
|
||||
}}
|
||||
</b>
|
||||
|
||||
<div style="color: #ccc">
|
||||
<div>
|
||||
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t
|
||||
| {{ store.chosenVehicle.maxSpeed }} km/h
|
||||
</div>
|
||||
|
||||
<div v-if="isLocomotive(store.chosenVehicle)">
|
||||
{{ $t("preview.cabin") }} {{ store.chosenVehicle.cabinType }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{
|
||||
store.chosenVehicle.useType == "car-cargo" // ? store.stockData?.usage[store.chosenVehicle.constructionType]
|
||||
? $t(`usage.${store.chosenVehicle.constructionType}`)
|
||||
: `${$t("preview.construction")} ${
|
||||
store.chosenVehicle.constructionType
|
||||
}`
|
||||
}}
|
||||
</div>
|
||||
|
||||
<b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{
|
||||
$t("preview.sponsor-only")
|
||||
}}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="train-image__info" v-else>{{ $t("preview.desc") }}</div>
|
||||
<img v-else src="images/placeholder.jpg" alt="placeholder" />
|
||||
</div>
|
||||
|
||||
<div class="train-image__info" v-if="store.chosenVehicle">
|
||||
<b class="text--accent">{{ store.chosenVehicle.type }}</b> •
|
||||
<b style="color: #ccc">
|
||||
{{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
|
||||
</b>
|
||||
|
||||
<div style="color: #ccc">
|
||||
<div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
|
||||
|
||||
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
|
||||
|
||||
<div v-else>
|
||||
{{
|
||||
store.chosenVehicle.useType == 'car-cargo'
|
||||
? $t(`usage.${store.chosenVehicle.constructionType}`)
|
||||
: `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
|
||||
}}
|
||||
</div>
|
||||
|
||||
<b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
|
||||
$t('preview.sponsor-only', [
|
||||
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
|
||||
])
|
||||
}}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "vue";
|
||||
import { useStore } from "../../store";
|
||||
import { isLocomotive } from "../../utils/vehicleUtils";
|
||||
import { ILocomotive, Vehicle } from "../../types";
|
||||
import imageMixin from "../../mixins/imageMixin";
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { useStore } from '../../store';
|
||||
import { isLocomotive } from '../../utils/vehicleUtils';
|
||||
import { ILocomotive, Vehicle } from '../../types';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [imageMixin],
|
||||
|
||||
data() {
|
||||
return {
|
||||
noImageAvailable: false,
|
||||
};
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
@@ -106,88 +83,74 @@ export default defineComponent({
|
||||
this.store.imageLoading = false;
|
||||
},
|
||||
|
||||
onImageError(e: Event) {
|
||||
const el = e.target as HTMLImageElement;
|
||||
if (el.src == '/images/placeholder.jpg') return;
|
||||
|
||||
el.src = '/images/placeholder.jpg';
|
||||
},
|
||||
|
||||
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
|
||||
return isLocomotive(vehicle);
|
||||
},
|
||||
|
||||
onImageClick() {
|
||||
onImageClick(e: Event) {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
const chosenVehicle = this.store.chosenVehicle;
|
||||
|
||||
if (!chosenVehicle) return;
|
||||
|
||||
this.store.vehiclePreviewSrc = this.getThumbnailURL(
|
||||
chosenVehicle.type,
|
||||
"large",
|
||||
);
|
||||
this.store.lastFocusedElement = target;
|
||||
this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/global.scss";
|
||||
@import '../../styles/global.scss';
|
||||
|
||||
.train-image-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
|
||||
margin-top: 2em;
|
||||
margin-top: 1em;
|
||||
height: 22em;
|
||||
}
|
||||
|
||||
.train-image {
|
||||
&__wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
border: 1px solid white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 22em;
|
||||
height: 13em;
|
||||
margin: 0 auto;
|
||||
|
||||
&.supporter {
|
||||
&.sponsor img {
|
||||
border: 1px solid salmon;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid white;
|
||||
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.empty-message,
|
||||
.no-img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
padding: 0.3em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
background: rgba(#000, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.train-image__info {
|
||||
margin: 1em 0;
|
||||
font-size: 1.1em;
|
||||
padding: 0 1em;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em auto;
|
||||
line-height: 1.35;
|
||||
|
||||
b {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
|
||||
div {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
background-color: $secondaryColor;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Transition animations
|
||||
|
||||
Reference in New Issue
Block a user