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

miniaturki c.d.

Browse Source
This commit is contained in:
Spythere
2023-10-03 21:31:06 +02:00
parent d5bc90f668
commit 5b35fac512
31 changed files with 569 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Global/StockList.vue
+107
View File
@@ -0,0 +1,107 @@
<template>
<div class="stock-list">
<ul>
<li v-for="(stockName, i) in trainStockList">
<p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
<span>
<img
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${/^EN/.test(stockName) ? 'rb' : ''}.png`"
@error="onImageError($event, stockName)"
width="400"
height="60"
/>
<img
v-if="/^(EN|2EN)/.test(stockName)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
/>
<img
class="train-thumbnail"
v-if="/^EN71/.test(stockName)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
/>
<img
class="train-thumbnail"
v-if="/^(EN|2EN)/.test(stockName)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')"
/>
</span>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
import { useStore } from '../../store/store';
import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
import imageMixin from '../../mixins/imageMixin';
export default defineComponent({
mixins: [imageMixin],
props: {
trainStockList: {
type: Array as PropType<string[]>,
required: true,
},
},
data() {
return {
store: useStore(),
};
},
methods: {
onImageError(event: Event, stockName: string) {
const fallbackName =
Object.keys(this.store.rollingStockData!.info).find((type) => {
return this.store.rollingStockData!.info[type as keyof RollingStockInfo].find((v) => v[0] === stockName.split(':')[0]);
}) || 'vehicle-unknown';
(event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
},
},
});
</script>
<style lang="scss" scoped>
.stock-list {
display: flex;
justify-content: center;
}
.stock-list ul {
display: flex;
align-items: flex-end;
overflow: auto;
margin: 1em auto;
padding-bottom: 1em;
}
ul > li > span {
display: flex;
align-items: flex-end;
}
img {
max-height: 60px;
width: auto;
height: auto;
}
p {
text-align: center;
color: #aaa;
font-size: 0.9em;
margin-bottom: 1em;
}
</style>
src/components/Global/TrainThumbnail.vue
+4 -28
View File
@@ -1,37 +1,15 @@
<template>
<img class="train-thumbnail" :src="placeholderUrl" v-if="!isLoaded || isNotFound" />
<img class="train-thumbnail" :src="placeholderUrl" v-if="isNotFound" />
<img
class="train-thumbnail"
v-if="!isNotFound"
v-show="isLoaded"
v-else
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${stockType == 'loco-ezt' ? 'rb' : ''}.png`"
@error="onImageError"
@load="onImageLoad"
width="220"
height="60"
/>
<!-- Handling członów EZT -->
<img
class="train-thumbnail"
v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`"
/>
<img
class="train-thumbnail"
v-if="!onlyFirstSegment && isLoaded && /^EN71/.test(name)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`"
/>
<img
class="train-thumbnail"
v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}ra.png`"
/>
<img class="train-thumbnail" v-if="!onlyFirstSegment && !isLoaded && /^2EN/.test(name)" :src="placeholderUrl" />
</template>
<script lang="ts">
@@ -41,8 +19,6 @@ import { useStore } from '../../store/store';
import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
export default defineComponent({
mixins: [imageMixin],
props: {
name: {
type: String,
@@ -58,8 +34,8 @@ export default defineComponent({
data() {
return {
store: useStore(),
isLoaded: false,
isNotFound: false,
isLoaded: false,
};
},
@@ -69,7 +45,7 @@ export default defineComponent({
},
placeholderUrl() {
return this.getImage(`icon-${this.stockType}.png`);
return `/images/icon-${this.stockType}.png`;
},
stockType() {
src/components/JournalView/JournalTimetables/TimetableExtra.vue
+15 -6
View File
@@ -39,12 +39,18 @@
</button>
</div>
<ul class="stock-list">
<li v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" :key="i">
<TrainThumbnail :name="stockName" />
<!-- <StockList :trainStockList="currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" /> -->
<StockList :trainStockList="timetable.stockString?.split(';')" />
<!-- <ul class="stock-list">
<li
v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')"
:key="i"
>
<div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
<TrainThumbnail :name="stockName" />
</li>
</ul>
</ul> -->
</div>
</template>
@@ -53,6 +59,7 @@ import { PropType, defineComponent } from 'vue';
import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
import imageMixin from '../../../mixins/imageMixin';
import TrainThumbnail from '../../Global/TrainThumbnail.vue';
import StockList from '../../Global/StockList.vue';
export default defineComponent({
mixins: [imageMixin],
@@ -96,7 +103,7 @@ export default defineComponent({
imageEl.src = this.getImage('unknown.png');
},
},
components: { TrainThumbnail },
components: { TrainThumbnail, StockList },
});
</script>
@@ -144,10 +151,12 @@ ul.stock-list {
display: flex;
align-items: flex-end;
overflow: auto;
padding-bottom: 0.5em;
margin-top: 1em;
li > div {
margin: 1em 0;
text-align: center;
color: #aaa;
font-size: 0.9em;
src/components/TrainsView/TrainSchedule.vue
+9 -31
View File
@@ -1,13 +1,15 @@
<template>
<div class="train-schedule" @click="toggleShowState">
<div class="train-stock">
<ul class="stock-list">
<StockList :trainStockList="train.stockList" />
<!-- <div class="train-stock"> -->
<!-- <ul>
<li v-for="(stockName, i) in train.stockList" :key="i">
<TrainThumbnail :name="stockName" />
<p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
<TrainThumbnail :name="stockName" />
</li>
</ul>
</div>
</ul> -->
<!-- </div> -->
<div class="schedule-wrapper" v-if="train.timetableData">
<ul class="stop_list">
@@ -65,9 +67,10 @@ import TrainStop from '../../scripts/interfaces/TrainStop';
import { useStore } from '../../store/store';
import StopDate from '../Global/StopDate.vue';
import TrainThumbnail from '../Global/TrainThumbnail.vue';
import StockList from '../Global/StockList.vue';
export default defineComponent({
components: { StopDate, TrainThumbnail },
components: { StopDate, TrainThumbnail, StockList },
props: {
train: {
type: Object as PropType<Train>,
@@ -155,31 +158,6 @@ $stopNameClr: #22a8d1;
padding: 0 0.25em;
}
.train-stock {
padding: 0.25em 0.5em;
display: flex;
justify-content: center;
}
ul.stock-list {
display: flex;
align-items: flex-end;
overflow: auto;
padding-bottom: 1em;
li > p {
text-align: center;
color: #aaa;
font-size: 0.9em;
margin-top: 0.5em;
}
img {
height: 60px;
}
}
.schedule-wrapper {
overflow-y: auto;
width: 100%;