Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-04 22:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scroll lock przy otwartym modalu

Browse Source
This commit is contained in:
Spythere
2022-08-29 19:12:19 +02:00
parent 03950eef66
commit 96de3f0dcc
8 changed files with 1015 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+26 -1
View File
@@ -82,7 +82,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, provide, ref } from 'vue'; import { computed, defineComponent, provide, ref, watch } from 'vue';
import Clock from './components/App/Clock.vue'; import Clock from './components/App/Clock.vue';
@@ -163,6 +163,31 @@ export default defineComponent({
async mounted() { async mounted() {
this.updateStorage(); this.updateStorage();
this.setReleaseURL(); this.setReleaseURL();
function preventScroll(e: Event) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
watch(
() => this.store.blockScroll,
(value) => {
if (value) {
document.body.classList.add('no-scroll');
// document.querySelector('#app')!.addEventListener('wheel', preventScroll, { passive: false, });
// document.querySelector('#app')!.addEventListener('touchmove', preventScroll, { passive: false });
return;
}
document.body.classList.remove('no-scroll');
// document.querySelector('#app')!.removeEventListener('wheel', preventScroll);
// document.querySelector('#app')!.removeEventListener('touchmove', preventScroll);
}
);
}, },
methods: { methods: {
src/components/JournalView/JournalDispatchers.vue
+425 -425
View File
@@ -1,425 +1,425 @@
<template> <template>
<section class="journal-timetables"> <section class="journal-timetables">
<div class="journal-wrapper"> <div class="journal-wrapper">
<div class="journal_top-bar"> <div class="journal_top-bar">
<JournalOptions <JournalOptions
@on-filter-change="search" @on-filter-change="search"
@on-input-change="search" @on-input-change="search"
@on-sorter-change="search" @on-sorter-change="search"
:sorter-option-ids="['timestampFrom', 'duration']" :sorter-option-ids="['timestampFrom', 'duration']"
/> />
<!-- <DispatcherStats /> --> <!-- <DispatcherStats /> -->
</div> </div>
<div class="journal-list"> <div class="journal-list">
<div class="list-wrapper" ref="scrollElement"> <div class="list-wrapper" ref="scrollElement">
<transition name="warning" mode="out-in"> <transition name="warning" mode="out-in">
<div :key="historyDataStatus.status"> <div :key="historyDataStatus.status">
<Loading v-if="isDataLoading || isDataInit" /> <Loading v-if="isDataLoading || isDataInit" />
<div v-else-if="isDataError" class="journal_warning error"> <div v-else-if="isDataError" class="journal_warning error">
{{ $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="historyList.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="(doc, i) in computedHistoryList" :key="doc.id"> <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
<div class="journal_day" v-if="isAnotherDay(i - 1, i)"> <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
<span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span> <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
</div> </div>
<div <div
class="journal_item" class="journal_item"
:class="{ online: doc.isOnline }" :class="{ online: doc.isOnline }"
@click="navigateToScenery(doc.stationName, doc.isOnline)" @click="navigateToScenery(doc.stationName, doc.isOnline)"
@keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)" @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
tabindex="0" tabindex="0"
> >
<span> <span>
<b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b> <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
<span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span> <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
<span class="region-badge" :class="doc.region">PL1</span> <span class="region-badge" :class="doc.region">PL1</span>
</span> </span>
<span> <span>
<span :data-status="doc.isOnline"> <span :data-status="doc.isOnline">
{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
</span> </span>
<span> <span>
{{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }} {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
</span> </span>
<span v-if="doc.currentDuration && doc.isOnline"> <span v-if="doc.currentDuration && doc.isOnline">
({{ calculateDuration(doc.currentDuration) }}) ({{ calculateDuration(doc.currentDuration) }})
</span> </span>
<span v-if="doc.timestampTo"> <span v-if="doc.timestampTo">
&gt; &gt;
{{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }} {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }}) ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
</span> </span>
</span> </span>
</div> </div>
</li> </li>
</transition-group> </transition-group>
</ul> </ul>
</div> </div>
</transition> </transition>
</div> </div>
</div> </div>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div> <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div> <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
</div> </div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue'; import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
import axios from 'axios'; import axios from 'axios';
import ActionButton from '../../components/Global/ActionButton.vue'; import ActionButton from '../../components/Global/ActionButton.vue';
import JournalOptions from '../../components/JournalView/JournalOptions.vue'; import JournalOptions from '../../components/JournalView/JournalOptions.vue';
import DispatcherStats from '../../components/JournalView/DispatcherStats.vue'; import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
import SearchBox from '../Global/SearchBox.vue'; import SearchBox from '../Global/SearchBox.vue';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
import { URLs } from '../../scripts/utils/apiURLs'; import { URLs } from '../../scripts/utils/apiURLs';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`; const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
interface DispatcherHistoryItem { interface DispatcherHistoryItem {
id: string; id: string;
stationName: string; stationName: string;
stationHash: string; stationHash: string;
region: string; region: string;
dispatcherName: string; dispatcherName: string;
dispatcherId: number; dispatcherId: number;
timestampFrom: number; timestampFrom: number;
timestampTo?: number; timestampTo?: number;
currentDuration?: number; currentDuration?: number;
lastOnlineTimestamp: number; lastOnlineTimestamp: number;
isOnline: boolean; isOnline: boolean;
} }
type JournalDispatcherSearcher = { type JournalDispatcherSearcher = {
[key in 'search-dispatcher' | 'search-station']: string; [key in 'search-dispatcher' | 'search-station']: string;
}; };
export default defineComponent({ export default defineComponent({
components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading }, components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
mixins: [dateMixin], mixins: [dateMixin],
name: 'JournalDispatchers', name: 'JournalDispatchers',
props: { props: {
sceneryName: { sceneryName: {
type: String, type: String,
required: false, required: false,
}, },
dispatcherName: { dispatcherName: {
type: String, type: String,
required: false, required: false,
}, },
}, },
data: () => ({ data: () => ({
currentQuery: '', currentQuery: '',
scrollDataLoaded: true, scrollDataLoaded: true,
scrollNoMoreData: false, scrollNoMoreData: false,
showReturnButton: false, showReturnButton: false,
statsCardOpen: false, statsCardOpen: false,
}), }),
setup() { setup() {
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({ const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
status: DataStatus.Loading, status: DataStatus.Loading,
error: null, error: null,
}); });
const sorterActive = ref({ id: 'timestampFrom', dir: -1 }); const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
const journalFilterActive = ref({}); const journalFilterActive = ref({});
const searchersValues = reactive({ const searchersValues = reactive({
'search-dispatcher': '', 'search-dispatcher': '',
'search-station': '', 'search-station': '',
} as JournalDispatcherSearcher); } as JournalDispatcherSearcher);
const countFromIndex = ref(0); const countFromIndex = ref(0);
const countLimit = 15; const countLimit = 15;
provide('sorterActive', sorterActive); provide('sorterActive', sorterActive);
provide('journalFilterActive', journalFilterActive); provide('journalFilterActive', journalFilterActive);
provide('searchersValues', searchersValues); provide('searchersValues', searchersValues);
const scrollElement: Ref<HTMLElement | null> = ref(null); const scrollElement: Ref<HTMLElement | null> = ref(null);
return { return {
store: useStore(), store: useStore(),
historyList: ref([]) as Ref<DispatcherHistoryItem[]>, historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
historyDataStatus, historyDataStatus,
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading), isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error), isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized), isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
sorterActive, sorterActive,
searchersValues, searchersValues,
countFromIndex, countFromIndex,
countLimit, countLimit,
scrollElement, scrollElement,
maxCount: ref(15), maxCount: ref(15),
}; };
}, },
computed: { computed: {
computedHistoryList() { computedHistoryList() {
return this.historyList.filter( return this.historyList.filter(
(doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000) (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
); );
}, },
}, },
activated() { activated() {
if (this.sceneryName || this.dispatcherName) { if (this.sceneryName || this.dispatcherName) {
this.searchersValues['search-station'] = this.sceneryName?.toString() || ''; this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || ''; this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
this.search(); this.search();
} }
window.addEventListener('scroll', this.handleScroll); window.addEventListener('wheel', this.handleScroll);
}, },
mounted() { mounted() {
if (!this.sceneryName && !this.dispatcherName) { if (!this.sceneryName && !this.dispatcherName) {
this.search(); this.search();
} }
}, },
deactivated() { deactivated() {
window.removeEventListener('scroll', this.handleScroll); window.removeEventListener('wheel', this.handleScroll);
}, },
methods: { methods: {
closeDispatcherStatsCard() { closeDispatcherStatsCard() {
this.statsCardOpen = false; this.statsCardOpen = false;
}, },
navigateToScenery(name: string, isOnline: boolean) { navigateToScenery(name: string, isOnline: boolean) {
if (!isOnline) return; if (!isOnline) return;
this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`); this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
}, },
isAnotherDay(prevIndex: number, currIndex: number) { isAnotherDay(prevIndex: number, currIndex: number) {
if (currIndex == 0) return true; if (currIndex == 0) return true;
return ( return (
new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() != new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
new Date(this.computedHistoryList[currIndex].timestampFrom).getDate() new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
); );
}, },
handleScroll() { handleScroll() {
this.showReturnButton = window.scrollY > window.innerHeight; this.showReturnButton = window.scrollY > window.innerHeight;
const element = this.$refs.scrollElement as HTMLElement; const element = this.$refs.scrollElement as HTMLElement;
if ( if (
element.getBoundingClientRect().bottom * 0.85 < window.innerHeight && element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
this.scrollDataLoaded && this.scrollDataLoaded &&
!this.scrollNoMoreData && !this.scrollNoMoreData &&
this.historyDataStatus.status == DataStatus.Loaded this.historyDataStatus.status == DataStatus.Loaded
) )
this.addHistoryData(); this.addHistoryData();
}, },
scrollToTop() { scrollToTop() {
window.scrollTo({ top: 0 }); window.scrollTo({ top: 0 });
}, },
search() { search() {
this.fetchHistoryData({ this.fetchHistoryData({
searchers: this.searchersValues, searchers: this.searchersValues,
}); });
this.scrollNoMoreData = false; this.scrollNoMoreData = false;
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async addHistoryData() { async addHistoryData() {
this.scrollDataLoaded = false; this.scrollDataLoaded = false;
const countFrom = this.historyList.length; const countFrom = this.historyList.length;
const responseData: DispatcherHistoryItem[] = await ( const responseData: DispatcherHistoryItem[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`) await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
).data; ).data;
if (!responseData) return; if (!responseData) return;
if (responseData.length == 0) { if (responseData.length == 0) {
this.scrollNoMoreData = true; this.scrollNoMoreData = true;
return; return;
} }
this.historyList.push(...responseData); this.historyList.push(...responseData);
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async fetchHistoryData( async fetchHistoryData(
props: { props: {
searchers?: JournalDispatcherSearcher; searchers?: JournalDispatcherSearcher;
filter?: JournalFilter; filter?: JournalFilter;
} = {} } = {}
) { ) {
this.historyDataStatus.status = DataStatus.Loading; this.historyDataStatus.status = DataStatus.Loading;
const queries: string[] = []; const queries: string[] = [];
// const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim(); // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
// const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim(); // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
const dispatcher = props.searchers?.['search-dispatcher'].trim(); const dispatcher = props.searchers?.['search-dispatcher'].trim();
const station = props.searchers?.['search-station'].trim(); const station = props.searchers?.['search-station'].trim();
if (dispatcher) queries.push(`dispatcherName=${dispatcher}`); if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
if (station) queries.push(`stationName=${station}`); if (station) queries.push(`stationName=${station}`);
// Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance']; // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom'); if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration'); else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
else queries.push('sortBy=timestampFrom'); else queries.push('sortBy=timestampFrom');
queries.push('countLimit=15'); queries.push('countLimit=15');
this.currentQuery = queries.join('&'); this.currentQuery = queries.join('&');
try { try {
const responseData: DispatcherHistoryItem[] = await ( const responseData: DispatcherHistoryItem[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`) await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
).data; ).data;
if (!responseData) { if (!responseData) {
this.historyDataStatus.status = DataStatus.Error; this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Brak danych!'; this.historyDataStatus.error = 'Brak danych!';
return; return;
} }
if (!responseData) return; if (!responseData) return;
// Response data exists // Response data exists
this.historyList = responseData; this.historyList = responseData;
// Stats display // Stats display
this.store.dispatcherStatsName = this.store.dispatcherStatsName =
this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim() this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
? this.historyList[0].dispatcherName ? this.historyList[0].dispatcherName
: ''; : '';
this.historyDataStatus.status = DataStatus.Loaded; this.historyDataStatus.status = DataStatus.Loaded;
} catch (error) { } catch (error) {
this.historyDataStatus.status = DataStatus.Error; this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!'; this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
} }
}, },
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/JournalSection.scss'; @import '../../styles/JournalSection.scss';
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
.region-badge { .region-badge {
padding: 0.1em 0.5em; padding: 0.1em 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
font-weight: bold; font-weight: bold;
&.eu { &.eu {
background-color: forestgreen; background-color: forestgreen;
} }
} }
.list-wrapper { .list-wrapper {
margin-top: 1em; margin-top: 1em;
} }
.journal_item { .journal_item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
&.online { &.online {
cursor: pointer; cursor: pointer;
} }
span[data-status='true'] { span[data-status='true'] {
color: springgreen; color: springgreen;
} }
span[data-status='false'] { span[data-status='false'] {
color: salmon; color: salmon;
} }
} }
.journal_day { .journal_day {
position: relative; position: relative;
text-align: center; text-align: center;
background-color: #4d4d4d; background-color: #4d4d4d;
span { span {
position: relative; position: relative;
background-color: #4d4d4d; background-color: #4d4d4d;
z-index: 10; z-index: 10;
padding: 0 0.5em; padding: 0 0.5em;
} }
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
z-index: 0; z-index: 0;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
height: 3px; height: 3px;
width: 60%; width: 60%;
min-width: 200px; min-width: 200px;
background-color: white; background-color: white;
} }
} }
@include smallScreen() { @include smallScreen() {
.journal_item { .journal_item {
flex-direction: column; flex-direction: column;
span { span {
margin-top: 0.25em; margin-top: 0.25em;
text-align: center; text-align: center;
} }
} }
} }
</style> </style>
src/components/JournalView/JournalTimetables.vue
+439 -439
View File
@@ -1,439 +1,439 @@
<template> <template>
<section class="journal-timetables"> <section class="journal-timetables">
<keep-alive> <keep-alive>
<DriverStats v-if="statsCardOpen" @close-card="closeCard" /> <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
</keep-alive> </keep-alive>
<div class="journal-wrapper"> <div class="journal-wrapper">
<div class="journal_top-bar"> <div class="journal_top-bar">
<JournalOptions <JournalOptions
@on-input-change="search" @on-input-change="search"
@on-filter-change="search" @on-filter-change="search"
@on-sorter-change="search" @on-sorter-change="search"
:sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']" :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
:filters="journalTimetableFilters" :filters="journalTimetableFilters"
/> />
</div> </div>
<div class="journal-list"> <div class="journal-list">
<div class="list-wrapper" ref="scrollElement"> <div class="list-wrapper" ref="scrollElement">
<transition name="warning" mode="out-in"> <transition name="warning" mode="out-in">
<div :key="historyDataStatus.status"> <div :key="historyDataStatus.status">
<Loading v-if="isDataLoading || isDataInit" /> <Loading v-if="isDataLoading || isDataInit" />
<div v-else-if="isDataError" class="journal_warning error"> <div v-else-if="isDataError" class="journal_warning error">
{{ $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="historyList.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 v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
<div class="journal_item-top"> <div class="journal_item-top">
<span> <span>
<span <span
tabindex="0" tabindex="0"
@click="navigateToTimetable(item)" @click="navigateToTimetable(item)"
@keydown.enter="navigateToTimetable(item)" @keydown.enter="navigateToTimetable(item)"
style="cursor: pointer" style="cursor: pointer"
> >
<b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b> <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
<b>{{ item.trainNo }}</b> <b>{{ item.trainNo }}</b>
| <span>{{ item.driverName }}</span> | | <span>{{ item.driverName }}</span> |
<span class="text--grayed">#{{ item.timetableId }}</span> <span class="text--grayed">#{{ item.timetableId }}</span>
</span> </span>
<div> <div>
<b>{{ item.route.replace('|', ' - ') }}</b> <b>{{ item.route.replace('|', ' - ') }}</b>
</div> </div>
<hr style="margin: 0.25em 0" /> <hr style="margin: 0.25em 0" />
<div class="scenery-list"> <div class="scenery-list">
<span <span
v-for="(scenery, i) in getSceneryList(item)" v-for="(scenery, i) in getSceneryList(item)"
:key="scenery.name" :key="scenery.name"
:class="{ confirmed: scenery.confirmed }" :class="{ confirmed: scenery.confirmed }"
> >
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }} {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
</span> </span>
</div> </div>
<div class="schedule-dates"> <div class="schedule-dates">
<!-- Data odjazdu ze stacji początkowej --> <!-- Data odjazdu ze stacji początkowej -->
<b>{{ item.route.split('|')[0] }}:</b> <b>{{ item.route.split('|')[0] }}:</b>
<s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed"> <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
{{ localeTime(item.beginDate, $i18n.locale) }} {{ localeTime(item.beginDate, $i18n.locale) }}
</s> </s>
<span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull; <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
<!-- Data przyjazdu na stację końcową / porzucenia --> <!-- Data przyjazdu na stację końcową / porzucenia -->
<b v-if="(item.fulfilled && item.terminated) || !item.terminated"> <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
{{ item.route.split('|').slice(-1)[0] }}: {{ item.route.split('|').slice(-1)[0] }}:
</b> </b>
<i v-else>{{ $t('journal.timetable-abandoned') }} </i> <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed"> <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }} {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
</s> </s>
<span <span
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }} >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
</span> </span>
</div> </div>
</span> </span>
<b <b
class="journal_item-status" class="journal_item-status"
:class="{ :class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9, fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled, terminated: item.terminated && !item.fulfilled,
active: !item.terminated, active: !item.terminated,
}" }"
> >
{{ {{
!item.terminated !item.terminated
? $t('journal.timetable-active') ? $t('journal.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9 : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('journal.timetable-fulfilled') ? $t('journal.timetable-fulfilled')
: $t('journal.timetable-abandoned') : $t('journal.timetable-abandoned')
}} }}
</b> </b>
</div> </div>
<div style="margin-top: 1em"> <div style="margin-top: 1em">
<div> <div>
{{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b> {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
</div> </div>
<!-- Nick dyżurnego --> <!-- Nick dyżurnego -->
<div v-if="item.authorName"> <div v-if="item.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=${item.authorName}`"
>{{ item.authorName }}</router-link >{{ item.authorName }}</router-link
> >
</div> </div>
</div> </div>
<div style="margin-top: 1em"> <div style="margin-top: 1em">
<div> <div>
<b>{{ $t('journal.route-length') }}</b> <b>{{ $t('journal.route-length') }}</b>
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }} {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
{{ item.routeDistance }} km {{ item.routeDistance }} km
</div> </div>
<div> <div>
<b>{{ $t('journal.station-count') }}</b> <b>{{ $t('journal.station-count') }}</b>
{{ item.confirmedStopsCount }} / {{ item.confirmedStopsCount }} /
{{ item.allStopsCount }} {{ item.allStopsCount }}
</div> </div>
</div> </div>
</li> </li>
</transition-group> </transition-group>
</ul> </ul>
</div> </div>
</transition> </transition>
</div> </div>
</div> </div>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div> <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div> <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
</div> </div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue'; import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
import axios from 'axios'; import axios from 'axios';
import DriverStats from './DriverStats.vue'; import DriverStats from './DriverStats.vue';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
import { journalTimetableFilters } from '../../data/journalFilters'; import { journalTimetableFilters } from '../../data/journalFilters';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import routerMixin from '../../mixins/routerMixin'; import routerMixin from '../../mixins/routerMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { JournalFilterType } from '../../scripts/enums/JournalFilterType'; import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData'; 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';
const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`; const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
type JournalTimetableSearcher = { type JournalTimetableSearcher = {
[key in 'search-driver' | 'search-train']: string; [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],
name: 'JournalTimetables', name: 'JournalTimetables',
props: { props: {
timetableId: { timetableId: {
type: String, type: String,
}, },
}, },
data: () => ({ data: () => ({
currentQuery: '', currentQuery: '',
scrollDataLoaded: true, scrollDataLoaded: true,
scrollNoMoreData: false, scrollNoMoreData: false,
showReturnButton: false, showReturnButton: false,
statsCardOpen: false, statsCardOpen: false,
journalTimetableFilters, journalTimetableFilters,
}), }),
setup() { setup() {
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({ const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
status: DataStatus.Loading, status: DataStatus.Loading,
error: null, error: null,
}); });
const sorterActive = ref({ id: 'timetableId', dir: -1 }); const sorterActive = ref({ id: 'timetableId', dir: -1 });
const journalFilterActive = ref(journalTimetableFilters[0]); const journalFilterActive = ref(journalTimetableFilters[0]);
const searchersValues = reactive({ const searchersValues = reactive({
'search-train': '', 'search-train': '',
'search-driver': '', 'search-driver': '',
} as JournalTimetableSearcher); } as JournalTimetableSearcher);
const countFromIndex = ref(0); const countFromIndex = ref(0);
const countLimit = 15; const countLimit = 15;
provide('searchersValues', searchersValues); provide('searchersValues', searchersValues);
provide('sorterActive', sorterActive); provide('sorterActive', sorterActive);
provide('journalFilterActive', journalFilterActive); provide('journalFilterActive', journalFilterActive);
const scrollElement: Ref<HTMLElement | null> = ref(null); const scrollElement: Ref<HTMLElement | null> = ref(null);
return { return {
historyList: ref([]) as Ref<TimetableHistory[]>, historyList: ref([]) as Ref<TimetableHistory[]>,
historyDataStatus, historyDataStatus,
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading), isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error), isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized), isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
sorterActive, sorterActive,
journalFilterActive, journalFilterActive,
searchersValues, searchersValues,
countFromIndex, countFromIndex,
countLimit, countLimit,
scrollElement, scrollElement,
maxCount: ref(15), maxCount: ref(15),
store: useStore(), store: useStore(),
}; };
}, },
activated() { activated() {
window.addEventListener('scroll', this.handleScroll); window.addEventListener('wheel', this.handleScroll);
if (this.timetableId) { if (this.timetableId) {
this.searchersValues['search-train'] = `#${this.timetableId}`; this.searchersValues['search-train'] = `#${this.timetableId}`;
this.search(); this.search();
} }
}, },
mounted() { mounted() {
if (!this.timetableId) this.search(); if (!this.timetableId) this.search();
}, },
deactivated() { deactivated() {
window.removeEventListener('scroll', this.handleScroll); window.removeEventListener('wheel', this.handleScroll);
}, },
methods: { methods: {
navigateToTimetable(historyItem: TimetableHistory) { navigateToTimetable(historyItem: TimetableHistory) {
if (historyItem.terminated) return; if (historyItem.terminated) return;
this.navigateTo('/trains', { this.navigateTo('/trains', {
trainNo: historyItem.trainNo, trainNo: historyItem.trainNo,
driverName: historyItem.driverName, driverName: historyItem.driverName,
}); });
}, },
closeCard() { closeCard() {
this.statsCardOpen = false; this.statsCardOpen = false;
}, },
getSceneryList(historyItem: TimetableHistory) { getSceneryList(historyItem: TimetableHistory) {
return historyItem.sceneriesString return historyItem.sceneriesString
.split('%') .split('%')
.map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount })); .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
}, },
handleScroll() { handleScroll() {
this.showReturnButton = window.scrollY > window.innerHeight; this.showReturnButton = window.scrollY > window.innerHeight;
const element = this.$refs.scrollElement as HTMLElement; const element = this.$refs.scrollElement as HTMLElement;
if ( if (
element.getBoundingClientRect().bottom * 0.85 < window.innerHeight && element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
this.scrollDataLoaded && this.scrollDataLoaded &&
!this.scrollNoMoreData && !this.scrollNoMoreData &&
this.historyDataStatus.status == DataStatus.Loaded this.historyDataStatus.status == DataStatus.Loaded
) )
this.addHistoryData(); this.addHistoryData();
}, },
scrollToTop() { scrollToTop() {
window.scrollTo({ top: 0 }); window.scrollTo({ top: 0 });
}, },
search() { search() {
this.fetchHistoryData({ this.fetchHistoryData({
searchers: this.searchersValues, searchers: this.searchersValues,
filter: this.journalFilterActive, filter: this.journalFilterActive,
}); });
this.scrollNoMoreData = false; this.scrollNoMoreData = false;
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async addHistoryData() { async addHistoryData() {
this.scrollDataLoaded = false; this.scrollDataLoaded = false;
const countFrom = this.historyList.length; const countFrom = this.historyList.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}`)
).data; ).data;
if (!responseData) return; if (!responseData) return;
if (responseData.length == 0) { if (responseData.length == 0) {
this.scrollNoMoreData = true; this.scrollNoMoreData = true;
return; return;
} }
this.historyList.push(...responseData); this.historyList.push(...responseData);
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async fetchHistoryData( async fetchHistoryData(
props: { props: {
searchers?: JournalTimetableSearcher; searchers?: JournalTimetableSearcher;
filter?: JournalFilter; filter?: JournalFilter;
} = {} } = {}
) { ) {
this.historyDataStatus.status = DataStatus.Loading; this.historyDataStatus.status = DataStatus.Loading;
const queries: string[] = []; const queries: string[] = [];
const driver = props.searchers?.['search-driver'].trim(); const driver = props.searchers?.['search-driver'].trim();
const train = props.searchers?.['search-train'].trim(); const train = props.searchers?.['search-train'].trim();
if (driver) queries.push(`driverName=${driver}`); if (driver) queries.push(`driverName=${driver}`);
if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`); if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
// Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance']; // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance'); if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount'); else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate'); else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
else queries.push('sortBy=timetableId'); else queries.push('sortBy=timetableId');
queries.push('countLimit=15'); queries.push('countLimit=15');
switch (props.filter?.id) { switch (props.filter?.id) {
case JournalFilterType.abandoned: case JournalFilterType.abandoned:
queries.push('fulfilled=0', 'terminated=1'); queries.push('fulfilled=0', 'terminated=1');
break; break;
case JournalFilterType.active: case JournalFilterType.active:
queries.push('terminated=0'); queries.push('terminated=0');
break; break;
case JournalFilterType.fulfilled: case JournalFilterType.fulfilled:
queries.push('fulfilled=1'); queries.push('fulfilled=1');
break; break;
default: default:
break; break;
} }
this.currentQuery = queries.join('&'); this.currentQuery = queries.join('&');
try { try {
const responseData: TimetableHistory[] = await ( const responseData: TimetableHistory[] = await (
await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`) await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
).data; ).data;
if (!responseData) { if (!responseData) {
this.historyDataStatus.status = DataStatus.Error; this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Brak danych!'; this.historyDataStatus.error = 'Brak danych!';
return; return;
} }
if (!responseData) return; if (!responseData) return;
// Response data exists // Response data exists
this.historyList = responseData; this.historyList = responseData;
// Stats display // Stats display
this.store.driverStatsName = this.store.driverStatsName =
this.historyList.length > 0 && this.searchersValues['search-driver'].trim() this.historyList.length > 0 && this.searchersValues['search-driver'].trim()
? this.historyList[0].driverName ? this.historyList[0].driverName
: ''; : '';
this.historyDataStatus.status = DataStatus.Loaded; this.historyDataStatus.status = DataStatus.Loaded;
} catch (error) { } catch (error) {
this.historyDataStatus.status = DataStatus.Error; this.historyDataStatus.status = DataStatus.Error;
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!'; this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
console.error(error); console.error(error);
} }
}, },
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/JournalSection.scss'; @import '../../styles/JournalSection.scss';
.journal_item { .journal_item {
&-top { &-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.2em 0; padding: 0.2em 0;
.scenery-list { .scenery-list {
span { span {
color: #adadad; color: #adadad;
&.confirmed { &.confirmed {
color: #a3eba3; color: #a3eba3;
} }
} }
} }
} }
&-status { &-status {
&.terminated { &.terminated {
color: salmon; color: salmon;
} }
&.fulfilled { &.fulfilled {
color: lightgreen; color: lightgreen;
} }
&.active { &.active {
color: lightblue; color: lightblue;
} }
} }
} }
.dispatcher-link { .dispatcher-link {
font-weight: bold; font-weight: bold;
} }
</style> </style>
src/mixins/modalTrainMixin.ts
+5
View File
@@ -17,10 +17,15 @@ export default defineComponent({
methods: { methods: {
selectModalTrain(trainId: string) { selectModalTrain(trainId: string) {
this.store.chosenModalTrainId = trainId; this.store.chosenModalTrainId = trainId;
document.body.classList.add('no-scroll');
}, },
closeModal() { closeModal() {
this.store.chosenModalTrainId = undefined; this.store.chosenModalTrainId = undefined;
setTimeout(() => {
document.body.classList.remove('no-scroll');
}, 150);
}, },
}, },
}); });
src/mixins/returnBtnMixin.ts
+34 -34
View File
@@ -1,34 +1,34 @@
import { defineComponent, h } from 'vue'; import { defineComponent, h } from 'vue';
import imageMixin from './imageMixin'; import imageMixin from './imageMixin';
export default defineComponent({ export default defineComponent({
mixins: [imageMixin], mixins: [imageMixin],
data() { data() {
return { return {
icons: { icons: {
arrow: this.getIcon('arrow-asc'), arrow: this.getIcon('arrow-asc'),
}, },
showReturnButton: false, showReturnButton: false,
}; };
}, },
methods: { methods: {
scrollToTop() { scrollToTop() {
window.scrollTo({ top: 0 }); window.scrollTo({ top: 0 });
}, },
handleScroll() { handleScroll() {
this.showReturnButton = window.scrollY > window.innerHeight * 0.35; this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
}, },
}, },
activated() { activated() {
window.addEventListener('scroll', this.handleScroll); window.addEventListener('wheel', this.handleScroll);
}, },
deactivated() { deactivated() {
window.removeEventListener('scroll', this.handleScroll); window.removeEventListener('wheel', this.handleScroll);
}, },
}); });
src/store/store.ts
+1 -1
View File
@@ -51,6 +51,7 @@ export const useStore = defineStore('store', {
trains: DataStatus.Loading, trains: DataStatus.Loading,
}, },
blockScroll: false,
listenerLaunched: false, listenerLaunched: false,
} as StoreState), } as StoreState),
@@ -395,4 +396,3 @@ export const useStore = defineStore('store', {
}, },
}, },
}); });
src/store/storeTypes.ts
+72 -71
View File
@@ -1,71 +1,72 @@
import { Socket } from 'socket.io-client'; import { Socket } from 'socket.io-client';
import { DataStatus } from '../scripts/enums/DataStatus'; import { DataStatus } from '../scripts/enums/DataStatus';
import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData'; import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData'; import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
import StationAPIData from '../scripts/interfaces/api/StationAPIData'; import StationAPIData from '../scripts/interfaces/api/StationAPIData';
import TrainAPIData from '../scripts/interfaces/api/TrainAPIData'; import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
import Station from '../scripts/interfaces/Station'; import Station from '../scripts/interfaces/Station';
import Train from '../scripts/interfaces/Train'; import Train from '../scripts/interfaces/Train';
export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
export interface StoreState { export interface StoreState {
stationList: Station[]; stationList: Station[];
trainList: Train[]; trainList: Train[];
apiData: APIData; apiData: APIData;
lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[]; lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
sceneryData: any[][]; sceneryData: any[][];
region: { id: string; value: string }; region: { id: string; value: string };
trainCount: number; trainCount: number;
stationCount: number; stationCount: number;
webSocket?: Socket; webSocket?: Socket;
dispatcherStatsName: string; dispatcherStatsName: string;
dispatcherStatsData?: DispatcherStatsAPIData; dispatcherStatsData?: DispatcherStatsAPIData;
driverStatsName: string; driverStatsName: string;
driverStatsData?: DriverStatsAPIData; driverStatsData?: DriverStatsAPIData;
chosenModalTrainId?: string; chosenModalTrainId?: string;
dataStatuses: { dataStatuses: {
connection: DataStatus; connection: DataStatus;
sceneries: DataStatus; sceneries: DataStatus;
timetables: DataStatus; timetables: DataStatus;
dispatchers: DataStatus; dispatchers: DataStatus;
trains: DataStatus; trains: DataStatus;
}; };
listenerLaunched: boolean; listenerLaunched: boolean;
} blockScroll: boolean;
}
export interface APIData {
stations?: StationAPIData[]; export interface APIData {
dispatchers?: string[][]; stations?: StationAPIData[];
trains?: TrainAPIData[]; dispatchers?: string[][];
} trains?: TrainAPIData[];
}
export interface StationJSONData {
name: string; export interface StationJSONData {
url: string; name: string;
lines: string; url: string;
project: string; lines: string;
project: string;
reqLevel: number;
reqLevel: number;
signalType: string;
controlType: string; signalType: string;
controlType: string;
SUP: boolean;
SUP: boolean;
routes: string;
checkpoints: string | null; routes: string;
authors?: string; checkpoints: string | null;
authors?: string;
availability: Availability;
} availability: Availability;
}
src/styles/global.scss
+13 -5
View File
@@ -25,6 +25,15 @@ body {
padding: 0; padding: 0;
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
overflow-y: scroll; overflow-y: scroll;
&.no-scroll {
overflow-y: hidden;
padding-right: 17px;
@include smallScreen() {
padding: 0;
}
}
} }
*:focus-visible { *:focus-visible {
@@ -37,16 +46,15 @@ body {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.5rem; width: 17px;
height: 0.5rem; height: 17px;
&-track { &-track {
background: #222; background-color: #222;
} }
&-thumb { &-thumb {
border-radius: 1rem; background-color: #777;
background: #777;
} }
} }