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

Wersja 1.10.3

Browse Source 
Wersja 1.10.3
This commit is contained in:
Spythere
2022-09-04 01:14:24 +02:00
committed by GitHub
parent 951afcedeb 30ad3ad4f2
commit ee0d9e7ed4
9 changed files with 465 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "stacjownik", "name": "stacjownik",
"version": "1.10.2", "version": "1.10.3",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
src/App.vue
+1 -1
View File
@@ -66,7 +66,7 @@
<main class="app_main"> <main class="app_main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive> <keep-alive>
<component :is="Component" :key="$route.path" /> <component :is="Component" :key="$route.name" />
</keep-alive> </keep-alive>
</router-view> </router-view>
</main> </main>
src/components/JournalView/JournalTimetables.vue
+216 -123
View File
@@ -25,111 +25,119 @@
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div class="journal_warning" v-else-if="historyList.length == 0"> <div class="journal_warning" v-else-if="computedTimetableHistory.length == 0">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<ul v-else> <ul v-else>
<transition-group name="journal-list-anim"> <transition-group name="journal-list-anim">
<li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId"> <li
<div class="journal_item-top"> v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
<span> class="journal_item"
:key="timetable.timetableId"
>
<div class="journal_item-info">
<div class="info-top">
<span <span
tabindex="0" tabindex="0"
@click="navigateToTimetable(item)" @click="showTimetable(timetable)"
@keydown.enter="navigateToTimetable(item)" @keydown.enter="showTimetable(timetable)"
style="cursor: pointer" style="cursor: pointer"
> >
<b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b> <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
<b>{{ item.trainNo }}</b> <b>{{ timetable.trainNo }}</b>
| <span>{{ item.driverName }}</span> | | <span>{{ timetable.driverName }}</span> |
<span class="text--grayed">#{{ item.timetableId }}</span> <span class="text--grayed">#{{ timetable.timetableId }}</span>
</span> </span>
<div> <span>
<b>{{ item.route.replace('|', ' - ') }}</b> <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
</div> <b
class="info-status"
<hr style="margin: 0.25em 0" /> :class="{
fulfilled:
<div class="scenery-list"> timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
<span terminated: timetable.terminated && !timetable.fulfilled,
v-for="(scenery, i) in getSceneryList(item)" active: !timetable.terminated,
:key="scenery.name" }"
:class="{ confirmed: scenery.confirmed }"
> >
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }} {{
</span> !timetable.terminated
</div> ? $t('journal.timetable-active')
: timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
<div class="schedule-dates"> ? $t('journal.timetable-fulfilled')
<!-- Data odjazdu ze stacji początkowej --> : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
<b>{{ item.route.split('|')[0] }}:</b> }}
<s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
{{ localeTime(item.beginDate, $i18n.locale) }}
</s>
<span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
<!-- Data przyjazdu na stację końcową / porzucenia -->
<b v-if="(item.fulfilled && item.terminated) || !item.terminated">
{{ item.route.split('|').slice(-1)[0] }}:
</b> </b>
<i v-else>{{ $t('journal.timetable-abandoned') }} </i> </span>
</div>
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed"> <div class="info-route">
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }} <b>{{ timetable.route.replace('|', ' - ') }}</b>
</s> </div>
<span
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
</span>
</div>
</span>
<b <hr style="margin: 0.25em 0" />
class="journal_item-status"
:class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled,
active: !item.terminated,
}"
>
{{
!item.terminated
? $t('journal.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('journal.timetable-fulfilled')
: $t('journal.timetable-abandoned')
}}
</b>
</div>
<div style="margin-top: 1em"> <div class="scenery-list">
<div> <span
{{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b> v-for="(scenery, i) in sceneryList"
:key="scenery.name"
:class="{ confirmed: scenery.confirmed }"
>
<span v-if="i > 0"> &gt;</span>
{{ scenery.name }}
<!-- Data odjazdu ze stacji początkowej -->
<span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
<!-- Data przyjazdu do stacji końcowej -->
<span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
</span>
</div>
<!-- Status RJ -->
<div style="margin: 0.5em 0">
<span>
<b>{{ $t('journal.route-length') }}</b>
{{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
{{ timetable.routeDistance }} km
</span>
&bull;
<span>
<b>{{ $t('journal.station-count') }}</b>
{{ timetable.confirmedStopsCount }} /
{{ timetable.allStopsCount }}
</span>
</div> </div>
<!-- Nick dyżurnego --> <!-- Nick dyżurnego -->
<div v-if="item.authorName"> <div v-if="timetable.authorName">
<b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b> <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
<router-link <router-link
class="dispatcher-link" class="dispatcher-link"
:to="`/journal/dispatchers?dispatcherName=${item.authorName}`" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`"
>{{ item.authorName }}</router-link
> >
</div> <b>{{ timetable.authorName }}</b>
</div> </router-link>
<div style="margin-top: 1em">
<div>
<b>{{ $t('journal.route-length') }}</b>
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
{{ item.routeDistance }} km
</div> </div>
<div> <button class="btn--option btn--show" @click="item.showStock.value = !item.showStock.value">
<b>{{ $t('journal.station-count') }}</b> {{ item.showStock.value ? 'UKRYJ' : 'POKAŻ' }} SKŁAD
{{ item.confirmedStopsCount }} / <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
{{ item.allStopsCount }} </button>
<div class="info-extended" v-show="item.showStock.value">
<ul class="stock-list" v-if="timetable.stockString">
<li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
<img
@error="onImageError"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
:alt="car"
/>
<div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
</li>
</ul>
</div> </div>
</div> </div>
</li> </li>
@@ -161,16 +169,15 @@ import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData
import { URLs } from '../../scripts/utils/apiURLs'; import { URLs } from '../../scripts/utils/apiURLs';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import JournalOptions from './JournalOptions.vue'; import JournalOptions from './JournalOptions.vue';
import { JournalTimetableSearcher } from '../../types/JournalTimetablesTypes';
import modalTrainMixin from '../../mixins/modalTrainMixin';
import imageMixin from '../../mixins/imageMixin';
const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`; const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
type JournalTimetableSearcher = {
[key in 'search-driver' | 'search-train']: string;
};
export default defineComponent({ export default defineComponent({
components: { DriverStats, Loading, JournalOptions }, components: { DriverStats, Loading, JournalOptions },
mixins: [dateMixin, routerMixin], mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
name: 'JournalTimetables', name: 'JournalTimetables',
@@ -188,6 +195,8 @@ export default defineComponent({
showReturnButton: false, showReturnButton: false,
statsCardOpen: false, statsCardOpen: false,
timetableHistory: [] as TimetableHistory[],
journalTimetableFilters, journalTimetableFilters,
}), }),
@@ -215,7 +224,6 @@ export default defineComponent({
const scrollElement: Ref<HTMLElement | null> = ref(null); const scrollElement: Ref<HTMLElement | null> = ref(null);
return { return {
historyList: ref([]) as Ref<TimetableHistory[]>,
historyDataStatus, historyDataStatus,
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading), isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
@@ -252,24 +260,67 @@ export default defineComponent({
window.removeEventListener('wheel', this.handleScroll); window.removeEventListener('wheel', this.handleScroll);
}, },
methods: { computed: {
navigateToTimetable(historyItem: TimetableHistory) { computedTimetableHistory() {
if (historyItem.terminated) return; return this.timetableHistory.map((timetable) => ({
timetable,
sceneryList: this.getSceneryList(timetable),
showStock: ref(false),
}));
},
},
this.navigateTo('/trains', { methods: {
trainNo: historyItem.trainNo, showTimetable(timetable: TimetableHistory) {
driverName: historyItem.driverName, if (timetable.terminated) return;
});
this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
// this.navigateTo('/trains', {
// trainNo: timetable.trainNo,
// driverName: timetable.driverName,
// });
}, },
closeCard() { closeCard() {
this.statsCardOpen = false; this.statsCardOpen = false;
}, },
getSceneryList(historyItem: TimetableHistory) { getSceneryList(timetable: TimetableHistory) {
return historyItem.sceneriesString return timetable.sceneriesString.split('%').map((name, i) => {
.split('%') const beginDateHTML =
.map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount })); ' (o. ' +
(timetable.beginDate != timetable.scheduledBeginDate
? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
: '') +
`<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
const endDateHTML =
' (p. ' +
(timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
? `<s class='text--grayed'>${this.localeTime(
timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
this.$i18n.locale
)}</s> `
: '') +
`<span>${this.localeTime(
timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
? timetable.scheduledEndDate
: timetable.endDate,
this.$i18n.locale
)}</span>)`;
const abandonedDateHTML = ` (porz. ${this.localeTime(
timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
this.$i18n.locale
)})`;
return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
});
},
onImageError(e: Event) {
const imageEl = e.target as HTMLImageElement;
imageEl.src = this.getImage('unknown.png');
}, },
handleScroll() { handleScroll() {
@@ -303,7 +354,7 @@ export default defineComponent({
async addHistoryData() { async addHistoryData() {
this.scrollDataLoaded = false; this.scrollDataLoaded = false;
const countFrom = this.historyList.length; const countFrom = this.timetableHistory.length;
const responseData: TimetableHistory[] = await ( const responseData: TimetableHistory[] = await (
await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`) await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
@@ -316,7 +367,7 @@ export default defineComponent({
return; return;
} }
this.historyList.push(...responseData); this.timetableHistory.push(...responseData);
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
@@ -377,12 +428,12 @@ export default defineComponent({
if (!responseData) return; if (!responseData) return;
// Response data exists // Response data exists
this.historyList = responseData; this.timetableHistory = responseData;
// Stats display // Stats display
this.store.driverStatsName = this.store.driverStatsName =
this.historyList.length > 0 && this.searchersValues['search-driver'].trim() this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
? this.historyList[0].driverName ? this.timetableHistory[0].driverName
: ''; : '';
this.historyDataStatus.status = DataStatus.Loaded; this.historyDataStatus.status = DataStatus.Loaded;
@@ -399,41 +450,83 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/JournalSection.scss'; @import '../../styles/JournalSection.scss';
@import '../../styles/responsive.scss';
.journal_item { .info {
&-top { &-date {
display: flex; margin-right: 0.5em;
justify-content: space-between;
padding: 0.2em 0;
.scenery-list {
span {
color: #adadad;
&.confirmed {
color: #a3eba3;
}
}
}
} }
&-status { &-status {
padding: 0.05em 0.35em;
color: black;
&.terminated { &.terminated {
color: salmon; background-color: salmon;
} }
&.fulfilled { &.fulfilled {
color: lightgreen; background-color: lightgreen;
} }
&.active { &.active {
color: lightblue; background-color: lightblue;
} }
} }
&-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
&-route {
margin: 0.25em 0;
}
} }
.dispatcher-link { ul.stock-list {
display: flex;
align-items: flex-end;
overflow: auto;
padding-bottom: 0.5em;
margin-top: 1em;
li > div {
text-align: center;
color: #aaa;
font-size: 0.9em;
}
}
.scenery-list {
color: #adadad;
span.confirmed {
color: #a3eba3;
}
}
.btn--show {
display: flex;
margin-top: 0.5em;
font-weight: bold; font-weight: bold;
img {
height: 1.3em;
}
}
@include smallScreen {
.info-top {
flex-direction: column;
span {
margin: 0.1em auto;
}
}
.info-route {
display: flex;
justify-content: center;
}
} }
</style> </style>
src/components/SceneryView/SceneryTimetablesHistory.vue
+118 -118
View File
@@ -1,118 +1,118 @@
<template> <template>
<section class="scenery-timetables-history scenery-section"> <section class="scenery-timetables-history scenery-section">
<Loading v-if="dataStatus != 2" /> <Loading v-if="dataStatus != 2" />
<div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div> <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
<ul class="history-list" v-else> <ul class="history-list" v-else>
<li class="list-item" v-for="historyItem in sceneryHistoryList"> <li class="list-item" v-for="historyItem in sceneryHistoryList">
<div> <div>
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b> <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
{{ localeTime(historyItem.beginDate, $i18n.locale) }} {{ localeTime(historyItem.beginDate, $i18n.locale) }}
</div> </div>
<div> <div>
<router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`"> <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
<span class="text--grayed"> #{{ historyItem.timetableId }} </span> <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
<b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b> <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
<div>{{ historyItem.driverName }}</div> <div>{{ historyItem.driverName }}</div>
</router-link> </router-link>
</div> </div>
<div>{{ historyItem.route.replace('|', ' -> ') }}</div> <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
<!-- <div>{{ historyItem.routeDistance }} km</div> --> <!-- <div>{{ historyItem.routeDistance }} km</div> -->
<div> <div>
{{ $t('scenery.timetable-author-title') }}: {{ $t('scenery.timetable-author-title') }}:
<b v-if="historyItem.authorName">{{ historyItem.authorName }}</b> <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i> <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
</div> </div>
<!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> --> <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
</li> </li>
</ul> </ul>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import axios from 'axios'; import axios from 'axios';
import { defineComponent, PropType } from 'vue'; import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData'; import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import Station from '../../scripts/interfaces/Station'; import Station from '../../scripts/interfaces/Station';
import { URLs } from '../../scripts/utils/apiURLs'; import { URLs } from '../../scripts/utils/apiURLs';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
export default defineComponent({ export default defineComponent({
name: 'SceneryTimetablesHistory', name: 'SceneryTimetablesHistory',
mixins: [dateMixin], mixins: [dateMixin],
props: { props: {
station: { station: {
type: Object as PropType<Station>, type: Object as PropType<Station>,
required: true, required: true,
}, },
}, },
data() { data() {
return { return {
sceneryHistoryList: [] as TimetableHistory[], sceneryHistoryList: [] as TimetableHistory[],
dataStatus: DataStatus.Loading, dataStatus: DataStatus.Loading,
}; };
}, },
mounted() { mounted() {
this.fetchAPIData(); this.fetchAPIData();
}, },
methods: { methods: {
async fetchAPIData(countFrom = 0, countLimit = 15) { async fetchAPIData(countFrom = 0, countLimit = 15) {
try { try {
const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`; const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data; const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
this.sceneryHistoryList = historyAPIData.sceneryTimetables; this.sceneryHistoryList = historyAPIData.sceneryTimetables;
this.dataStatus = DataStatus.Loaded; this.dataStatus = DataStatus.Loaded;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}, },
}, },
components: { Loading }, components: { Loading },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
@import '../../styles/SceneryView/styles.scss'; @import '../../styles/SceneryView/styles.scss';
.list-warning { .list-warning {
padding: 1em 0.5em; padding: 1em 0.5em;
background-color: #444; background-color: #444;
font-size: 1.2em; font-size: 1.2em;
} }
.history-list { .history-list {
padding: 0 0.5em; padding: 0 0.5em;
} }
.list-item { .list-item {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr; grid-template-columns: 1fr 2fr 2fr 1fr;
gap: 1em; gap: 1em;
align-items: center; align-items: center;
background-color: #353535; background-color: #353535;
padding: 0.5em; padding: 0.5em;
margin: 0.5em 0; margin: 0.5em 0;
line-height: 1.5em; line-height: 1.5em;
} }
@include smallScreen { @include smallScreen {
.history-list { .history-list {
font-size: 1.1em; font-size: 1.1em;
} }
.list-item { .list-item {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
font-size: 1.05em; font-size: 1.05em;
} }
} }
</style> </style>
src/components/TrainsView/TrainInfo.vue
-4
View File
@@ -253,10 +253,6 @@ export default defineComponent({
.train-stats { .train-stats {
font-size: 1.1em; font-size: 1.1em;
img {
display: none;
}
} }
.train_general { .train_general {
src/scripts/interfaces/api/TimetablesAPIData.ts
+44 -35
View File
@@ -1,35 +1,44 @@
export interface TimetableHistory { export interface TimetableHistory {
timetableId: number; timetableId: number;
trainNo: number; trainNo: number;
trainCategoryCode: string; trainCategoryCode: string;
driverId: number; driverId: number;
driverName: string; driverName: string;
route: string; route: string;
twr: number; twr: number;
skr: number; skr: number;
sceneriesString: string; sceneriesString: string;
routeDistance: number; routeDistance: number;
currentDistance: number; currentDistance: number;
confirmedStopsCount: number; confirmedStopsCount: number;
allStopsCount: number; allStopsCount: number;
beginDate: string; beginDate: string;
endDate: string; endDate: string;
scheduledBeginDate: string; scheduledBeginDate: string;
scheduledEndDate: string; scheduledEndDate: string;
terminated: boolean; terminated: boolean;
fulfilled: boolean; fulfilled: boolean;
authorName?: string; authorName?: string;
authorId?: number; authorId?: number;
}
stockString?: string;
export interface SceneryTimetableHistory { stockMass?: number;
sceneryTimetables: TimetableHistory[]; stockLength?: number;
totalCount: number; maxSpeed?: number;
sceneryName: string;
} hashesString?: string;
currentSceneryName?: string;
currentSceneryHash?: string;
}
export interface SceneryTimetableHistory {
sceneryTimetables: TimetableHistory[];
totalCount: number;
sceneryName: string;
}
src/styles/JournalSection.scss
+67 -65
View File
@@ -1,65 +1,67 @@
@import 'responsive.scss'; @import 'responsive.scss';
// Animations // Animations
.warning { .warning {
&-enter-from, &-enter-from,
&-leave-to { &-leave-to {
opacity: 0; opacity: 0;
} }
&-enter-active { &-enter-active {
transition: all 150ms ease-out; transition: all 150ms ease-out;
} }
&-leave-active { &-leave-active {
transition: all 150ms ease-out; transition: all 150ms ease-out;
} }
} }
//Styles //Styles
.journal-wrapper { .journal-wrapper {
width: 1350px; max-width: 1350px;
padding: 1em 0; width: 100%;
}
padding: 1em 0;
.journal_warning { }
text-align: center;
font-size: 1.3em; .journal_warning {
text-align: center;
&.error { font-size: 1.3em;
background-color: var(--clr-error);
} &.error {
} background-color: var(--clr-error);
}
.schedule-dates > * { }
margin-right: 0.25em;
} .schedule-dates > * {
margin-right: 0.25em;
.journal_item, }
.journal_warning {
background: #202020; .journal_item,
padding: 1em; .journal_warning {
margin: 1em 0; background: #202020;
} padding: 1em;
margin: 1em 0;
.journal_top-bar { }
display: flex;
justify-content: space-between; .journal_top-bar {
align-items: center; display: flex;
} justify-content: space-between;
align-items: center;
button.btn { }
padding: 0.5em 0.7em;
} button.btn {
padding: 0.5em 0.7em;
@include smallScreen() { }
.journal-wrapper {
font-size: 1.25em; @include smallScreen() {
} .journal-wrapper {
font-size: 1.25em;
.journal_top-bar { }
justify-content: center;
flex-wrap: wrap; .journal_top-bar {
} justify-content: center;
} flex-wrap: wrap;
}
}
src/styles/global.scss
+15
View File
@@ -282,3 +282,18 @@ ul {
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
@include smallScreen {
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
&-track {
background-color: #222;
}
&-thumb {
background-color: #777;
}
}
}
src/types/JournalTimetablesTypes.ts
+3
View File
@@ -0,0 +1,3 @@
export type JournalTimetableSearcher = {
[key in 'search-driver' | 'search-train']: string;
};