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

cleanup c.d.

Browse Source
This commit is contained in:
Spythere
2023-09-29 16:49:37 +02:00
parent d28d600833
commit 6aec1a75c9
10 changed files with 126 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchersList.vue
+11 -9
View File
@@ -82,13 +82,12 @@
</tbody>
</table>
<button
class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.length > 15"
@click="addHistoryData"
>
{{ $t('journal.load-data') }}
</button>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
</div>
</transition>
@@ -113,9 +112,10 @@ import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue';
import { regions } from '../../data/options.json';
import AddDataButton from '../Global/AddDataButton.vue';
export default defineComponent({
components: { Loading },
components: { Loading, AddDataButton },
mixins: [dateMixin, styleMixin, imageMixin],
@@ -195,6 +195,8 @@ table.scenery-history-table {
position: relative;
text-align: center;
margin-bottom: 1em;
thead {
position: sticky;
top: 0;
@@ -208,7 +210,7 @@ table.scenery-history-table {
tr {
background-color: var(--_bg-row);
border-bottom: 2px solid black;
&:last-child {
border: none;
}
src/components/JournalView/JournalTimetablesList.vue → src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+14 -16
View File
@@ -1,5 +1,5 @@
<template>
<div class="journal-list">
<div>
<transition name="status-anim" mode="out-in">
<div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline">
@@ -17,17 +17,13 @@
</div>
<div v-else>
<ul>
<ListItem :timetableHistory="timetableHistory" />
</ul>
<!-- <transition-group tag="ul" name="list-anim"> -->
<!-- </transition-group> -->
<TimetableHistoryList :timetableHistory="timetableHistory" />
<!-- AddDataButton -->
<AddDataButton
:list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
</div>
@@ -40,16 +36,17 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue';
import ProgressBar from '../Global/ProgressBar.vue';
import ListItem from './JournalTimetables/ListItem.vue';
import AddDataButton from '../Global/AddDataButton.vue';
import { DataStatus } from '../../../scripts/enums/DataStatus';
import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
import { useStore } from '../../../store/store';
import Loading from '../../Global/Loading.vue';
import ProgressBar from '../../Global/ProgressBar.vue';
import AddDataButton from '../../Global/AddDataButton.vue';
import TimetableHistoryList from './TimetableHistoryList.vue';
export default defineComponent({
components: { ProgressBar, Loading, ListItem, AddDataButton },
components: { ProgressBar, Loading, AddDataButton, TimetableHistoryList },
props: {
timetableHistory: {
@@ -80,5 +77,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../../styles/JournalSection.scss';
@import '../../../styles/animations.scss';
</style>
src/components/JournalView/JournalTimetables/ListItem.vue
-124
View File
@@ -1,124 +0,0 @@
<template>
<li
v-for="{ timetable, showExtraInfo} in computedTimetableHistory"
class="journal_item"
:key="timetable.id"
@click="showExtraInfo.value = !showExtraInfo.value"
>
<div class="journal_item-info">
<!-- Item General -->
<ItemGeneral :timetable="timetable" />
<!-- Item Route -->
<span class="item-route">
<b>{{ timetable.route.replace('|', ' - ') }}</b>
</span>
<hr />
<!-- Item Stops -->
<ItemStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
<!-- Item Status -->
<ItemStatus :timetable="timetable" />
<button class="btn--option btn--show">
{{ $t('journal.stock-info') }}
<img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
</button>
<!-- Item Extra -->
<ItemExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
</div>
</li>
</template>
<script lang="ts">
import { PropType, defineComponent, ref } from 'vue';
import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
import imageMixin from '../../../mixins/imageMixin';
import ItemGeneral from './ItemGeneral.vue';
import ItemStops from './ItemStops.vue';
import ItemStatus from './ItemStatus.vue';
import ItemExtra from './ItemExtra.vue';
export default defineComponent({
mixins: [imageMixin],
props: {
timetableHistory: {
type: Array as PropType<TimetableHistory[]>,
required: true,
},
},
computed: {
computedTimetableHistory() {
return this.timetableHistory.map((timetable) => ({
timetable,
showExtraInfo: ref(false),
}));
},
},
methods: {},
components: { ItemGeneral, ItemStops, ItemStatus, ItemExtra },
});
</script>
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/responsive.scss';
.btn--show {
display: flex;
font-weight: bold;
padding: 0.2em 0.45em;
img {
height: 1.3em;
}
}
.journal_item {
cursor: pointer;
}
.journal_item,
.journal_warning {
background-color: #1a1a1a;
padding: 1em;
margin-bottom: 1em;
}
hr {
margin: 0.25em 0;
}
// badge.scss
.badges {
display: flex;
gap: 0.25em;
}
@include smallScreen {
.journal_item-info {
text-align: center;
}
.item-route {
display: flex;
justify-content: center;
}
.btn--show {
margin: 1em auto 0 auto;
}
.info-general,
.general-train,
.stock-specs,
.stock-history {
justify-content: center;
}
}
</style>
src/components/JournalView/JournalTimetables/ItemExtra.vue → src/components/JournalView/JournalTimetables/TimetableExtra.vue
View File
src/components/JournalView/JournalTimetables/ItemGeneral.vue → src/components/JournalView/JournalTimetables/TimetableGeneral.vue
View File
src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
+96
View File
@@ -0,0 +1,96 @@
<template>
<ul class="journal-list">
<li
v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
class="journal_item"
:key="timetable.id"
@click="showExtraInfo.value = !showExtraInfo.value"
>
<div class="journal_item-info">
<!-- General -->
<TimetableGeneral :timetable="timetable" />
<!-- Route -->
<span class="item-route">
<b>{{ timetable.route.replace('|', ' - ') }}</b>
</span>
<hr />
<!-- Stops -->
<TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
<!-- Status -->
<TimetableStatus :timetable="timetable" />
<button class="btn--option btn--show">
{{ $t('journal.stock-info') }}
<img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
</button>
<!-- Extra -->
<TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
</div>
</li>
</ul>
</template>
<script lang="ts">
import { PropType, defineComponent, ref } from 'vue';
import imageMixin from '../../../mixins/imageMixin';
import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
import TimetableGeneral from './TimetableGeneral.vue';
import TimetableStops from './TimetableStops.vue';
import TimetableStatus from './TimetableStatus.vue';
import TimetableExtra from './TimetableExtra.vue';
export default defineComponent({
mixins: [imageMixin],
props: {
timetableHistory: {
type: Array as PropType<TimetableHistory[]>,
required: true,
},
},
computed: {
computedTimetableHistory() {
return this.timetableHistory.map((timetable) => ({
timetable,
showExtraInfo: ref(false),
}));
},
},
methods: {},
components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
});
</script>
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/responsive.scss';
@import '../../../styles/JournalSection.scss';
.btn--show {
display: flex;
font-weight: bold;
padding: 0.2em 0.45em;
img {
height: 1.3em;
}
}
hr {
margin: 0.25em 0;
}
@include smallScreen {
.journal_item-info {
text-align: center;
}
.item-route {
display: flex;
justify-content: center;
}
.btn--show {
margin: 1em auto 0 auto;
}
}
</style>
src/components/JournalView/JournalTimetables/ItemStatus.vue → src/components/JournalView/JournalTimetables/TimetableStatus.vue
View File
src/components/JournalView/JournalTimetables/ItemStops.vue → src/components/JournalView/JournalTimetables/TimetableStops.vue
View File