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

eslint & prettier update; api fetching from static server

Browse Source
This commit is contained in:
Spythere
2024-03-27 16:10:53 +01:00
parent f9276f6c71
commit 337425d21c
37 changed files with 636 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/InputsSection.vue
+21 -6
View File
@@ -27,7 +27,9 @@
<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.isSponsorsOnly">*</b></option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}<b v-if="loco.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -56,7 +58,9 @@
{{ $t('inputs.input-carwagon') }}
</option>
<option v-for="car in carOptions" :value="car" :key="car.type">{{ car.type }}<b v-if="car.isSponsorsOnly">*</b></option>
<option v-for="car in carOptions" :value="car" :key="car.type">
{{ car.type }}<b v-if="car.isSponsorsOnly">*</b>
</option>
</select>
</div>
@@ -65,7 +69,9 @@
<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"
@@ -90,7 +96,12 @@
<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">
<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}.` }}
@@ -173,7 +184,8 @@ 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();
},
@@ -216,7 +228,10 @@ export default defineComponent({
this.store.chosenVehicle = type == 'loco' ? this.store.chosenLoco : this.store.chosenCar;
this.store.chosenCargo = this.store.chosenCar?.cargoTypes.find((cargo) => cargo.id == this.store.chosenCargo?.id) || null;
this.store.chosenCargo =
this.store.chosenCar?.cargoTypes.find(
(cargo) => cargo.id == this.store.chosenCargo?.id
) || null;
});
},
},
src/components/sections/LogoSection.vue
+9 -13
View File
@@ -1,10 +1,6 @@
<template>
<section class="logo-section">
<img
:src="`/logo-${$i18n.locale}.svg`"
alt="logo pojazdownik"
@click="navigate"
/>
<img :src="`/logo-${$i18n.locale}.svg`" alt="logo pojazdownik" @click="navigate" />
<div class="actions">
<button
@@ -26,31 +22,31 @@ export default {
return {
localeActions: [
{
name: "POLSKI",
locale: "pl",
name: 'POLSKI',
locale: 'pl',
},
{
name: "ENGLISH",
locale: "en",
name: 'ENGLISH',
locale: 'en',
},
],
};
},
methods: {
navigate() {
window.location.pathname = "";
window.location.pathname = '';
},
chooseLocale(locale: string) {
this.$i18n.locale = locale;
window.localStorage.setItem("locale", locale);
window.localStorage.setItem('locale', locale);
},
},
};
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.logo-section {
grid-row: 1;
@@ -69,7 +65,7 @@ export default {
display: flex;
gap: 0.5em;
button[data-selected="true"] {
button[data-selected='true'] {
font-weight: bold;
color: $accentColor;
text-decoration: underline;
src/components/sections/StockSection.vue
+19 -19
View File
@@ -23,12 +23,12 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "../../store";
import StockListTab from "../tabs/StockListTab.vue";
import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
import WikiListTab from "../tabs/WikiListTab.vue";
import { computed, onMounted, ref } from 'vue';
import { useStore } from '../../store';
import StockListTab from '../tabs/StockListTab.vue';
import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
import WikiListTab from '../tabs/WikiListTab.vue';
const sectionButtonRefs = ref([]);
@@ -36,36 +36,36 @@ const store = useStore();
type SectionMode = typeof store.stockSectionMode;
const sectionModes: SectionMode[] = [
"stock-list",
"wiki-list",
"number-generator",
"stock-generator",
'stock-list',
'wiki-list',
'number-generator',
'stock-generator',
];
onMounted(() => {
window.addEventListener("keydown", (e) => {
window.addEventListener('keydown', (e) => {
if (e.target instanceof HTMLInputElement) return;
if (/[1234]/.test(e.key)) {
const keyNum = Number(e.key);
store.stockSectionMode = sectionModes[keyNum - 1];
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
(sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
}
});
});
const chosenSectionComponent = computed(() => {
switch (store.stockSectionMode) {
case "stock-list":
case 'stock-list':
return StockListTab;
case "wiki-list":
case 'wiki-list':
return WikiListTab;
case "stock-generator":
case 'stock-generator':
return StockGeneratorTab;
case "number-generator":
case 'number-generator':
return NumberGeneratorTab;
default:
@@ -79,7 +79,7 @@ function chooseSection(sectionId: SectionMode) {
</script>
<style lang="scss">
@import "../../styles/global.scss";
@import '../../styles/global.scss';
// Tab change animation
.tab-change {
@@ -121,14 +121,14 @@ function chooseSection(sectionId: SectionMode) {
left: 50%;
transform: translateX(-50%);
content: "";
content: '';
width: 0;
height: 2px;
transition: all 100ms;
background-color: $accentColor;
}
&[data-selected="true"]::after {
&[data-selected='true']::after {
width: 100%;
}
}
src/components/sections/TrainImageSection.vue
+23 -8
View File
@@ -3,7 +3,11 @@
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
<img
tabindex="0"
:src="store.chosenVehicle ? getThumbnailURL(store.chosenVehicle.type, 'small') : '/images/placeholder.jpg'"
:src="
store.chosenVehicle
? getThumbnailURL(store.chosenVehicle.type, 'small')
: '/images/placeholder.jpg'
"
@click="onImageClick"
@keydown.enter="onImageClick"
@error="onImageError"
@@ -14,13 +18,22 @@
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
{{
$t(
`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`
)
}}
</b>
<div style="color: #ccc">
<div>{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
<div>
{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t
| {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
<div v-if="isLocomotive(store.chosenVehicle)">
{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
</div>
<div v-else>
{{
@@ -32,7 +45,9 @@
<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'),
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString(
$i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
),
])
}}</b>
</div>
@@ -46,7 +61,7 @@
import { computed, defineComponent } from 'vue';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../../types';
import { ILocomotive, IVehicle } from '../../types';
import imageMixin from '../../mixins/imageMixin';
export default defineComponent({
@@ -68,7 +83,7 @@ export default defineComponent({
},
watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) {
if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true;
}
@@ -87,7 +102,7 @@ export default defineComponent({
el.src = '/images/placeholder.jpg';
},
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
return isLocomotive(vehicle);
},