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

Zmiany w designie dziennika rozkładów jazdy

Browse Source
This commit is contained in:
Spythere
2022-09-01 01:56:16 +02:00
parent 951afcedeb
commit 76d0ff88f1
3 changed files with 236 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetablesHistory.vue
+118 -118
View File
@@ -1,118 +1,118 @@
<template>
<section class="scenery-timetables-history scenery-section">
<Loading v-if="dataStatus != 2" />
<div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
<ul class="history-list" v-else>
<li class="list-item" v-for="historyItem in sceneryHistoryList">
<div>
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
{{ localeTime(historyItem.beginDate, $i18n.locale) }}
</div>
<div>
<router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
<span class="text--grayed"> #{{ historyItem.timetableId }} </span>
<b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
<div>{{ historyItem.driverName }}</div>
</router-link>
</div>
<div>{{ historyItem.route.replace('|', ' -> ') }}</div>
<!-- <div>{{ historyItem.routeDistance }} km</div> -->
<div>
{{ $t('scenery.timetable-author-title') }}:
<b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
</div>
<!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
</li>
</ul>
</section>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import Station from '../../scripts/interfaces/Station';
import { URLs } from '../../scripts/utils/apiURLs';
import Loading from '../Global/Loading.vue';
export default defineComponent({
name: 'SceneryTimetablesHistory',
mixins: [dateMixin],
props: {
station: {
type: Object as PropType<Station>,
required: true,
},
},
data() {
return {
sceneryHistoryList: [] as TimetableHistory[],
dataStatus: DataStatus.Loading,
};
},
mounted() {
this.fetchAPIData();
},
methods: {
async fetchAPIData(countFrom = 0, countLimit = 15) {
try {
const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
this.sceneryHistoryList = historyAPIData.sceneryTimetables;
this.dataStatus = DataStatus.Loaded;
} catch (error) {
console.error(error);
}
},
},
components: { Loading },
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/SceneryView/styles.scss';
.list-warning {
padding: 1em 0.5em;
background-color: #444;
font-size: 1.2em;
}
.history-list {
padding: 0 0.5em;
}
.list-item {
display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr;
gap: 1em;
align-items: center;
background-color: #353535;
padding: 0.5em;
margin: 0.5em 0;
line-height: 1.5em;
}
@include smallScreen {
.history-list {
font-size: 1.1em;
}
.list-item {
grid-template-columns: 1fr 1fr;
font-size: 1.05em;
}
}
</style>
<template>
<section class="scenery-timetables-history scenery-section">
<Loading v-if="dataStatus != 2" />
<div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
<ul class="history-list" v-else>
<li class="list-item" v-for="historyItem in sceneryHistoryList">
<div>
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
{{ localeTime(historyItem.beginDate, $i18n.locale) }}
</div>
<div>
<router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
<span class="text--grayed"> #{{ historyItem.timetableId }} </span>
<b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
<div>{{ historyItem.driverName }}</div>
</router-link>
</div>
<div>{{ historyItem.route.replace('|', ' -> ') }}</div>
<!-- <div>{{ historyItem.routeDistance }} km</div> -->
<div>
{{ $t('scenery.timetable-author-title') }}:
<b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
</div>
<!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
</li>
</ul>
</section>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import Station from '../../scripts/interfaces/Station';
import { URLs } from '../../scripts/utils/apiURLs';
import Loading from '../Global/Loading.vue';
export default defineComponent({
name: 'SceneryTimetablesHistory',
mixins: [dateMixin],
props: {
station: {
type: Object as PropType<Station>,
required: true,
},
},
data() {
return {
sceneryHistoryList: [] as TimetableHistory[],
dataStatus: DataStatus.Loading,
};
},
mounted() {
this.fetchAPIData();
},
methods: {
async fetchAPIData(countFrom = 0, countLimit = 15) {
try {
const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
this.sceneryHistoryList = historyAPIData.sceneryTimetables;
this.dataStatus = DataStatus.Loaded;
} catch (error) {
console.error(error);
}
},
},
components: { Loading },
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/SceneryView/styles.scss';
.list-warning {
padding: 1em 0.5em;
background-color: #444;
font-size: 1.2em;
}
.history-list {
padding: 0 0.5em;
}
.list-item {
display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr;
gap: 1em;
align-items: center;
background-color: #353535;
padding: 0.5em;
margin: 0.5em 0;
line-height: 1.5em;
}
@include smallScreen {
.history-list {
font-size: 1.1em;
}
.list-item {
grid-template-columns: 1fr 1fr;
font-size: 1.05em;
}
}
</style>