poprawki pobierania danych

This commit is contained in:
2023-06-11 21:47:50 +02:00
parent d9f5edb4fe
commit 4ffb79d62b
6 changed files with 128 additions and 120 deletions
+18 -4
View File
@@ -95,13 +95,18 @@
<script setup lang="ts"> <script setup lang="ts">
import axios from 'axios'; import axios from 'axios';
import { computed, reactive, ref } from 'vue'; import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData'; import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
import { URLs } from '../../scripts/utils/apiURLs'; import { URLs } from '../../scripts/utils/apiURLs';
import StorageManager from '../../scripts/managers/storageManager';
const intervalId = ref(-1); const intervalId = ref(-1);
const emit = defineEmits<{
(e: 'toggleStatsOpen', value: boolean): void;
}>();
const data = reactive({ const data = reactive({
statsStatus: DataStatus.Loading, statsStatus: DataStatus.Loading,
@@ -158,17 +163,26 @@ async function fetchDailyTimetableStats() {
function startFetchingDailyStats() { function startFetchingDailyStats() {
fetchDailyTimetableStats(); fetchDailyTimetableStats();
if (intervalId.value != -1) return;
intervalId.value = setInterval(fetchDailyTimetableStats, 60000); intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
} }
function stopFetchingDailyStats() { function stopFetchingDailyStats() {
clearInterval(intervalId.value); clearInterval(intervalId.value);
intervalId.value = -1;
} }
defineExpose({ onActivated(() => {
startFetchingDailyStats, startFetchingDailyStats();
stopFetchingDailyStats, emit('toggleStatsOpen', true);
}); });
onDeactivated(() => {
stopFetchingDailyStats();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
+17 -23
View File
@@ -6,6 +6,8 @@
class="btn--filled" class="btn--filled"
:data-selected="tab.name == store.currentStatsTab && areStatsOpen" :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
:data-inactive="tab.inactive" :data-inactive="tab.inactive"
:data-disabled="tab.inactive"
:disabled="tab.inactive"
@click="onTabButtonClick(tab.name)" @click="onTabButtonClick(tab.name)"
> >
{{ $t(tab.titlePath) }} {{ $t(tab.titlePath) }}
@@ -14,7 +16,7 @@
<div class="stats-tab" v-show="areStatsOpen"> <div class="stats-tab" v-show="areStatsOpen">
<keep-alive> <keep-alive>
<JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" /> <JournalDailyStats v-if="store.currentStatsTab == 'daily'" @toggleStatsOpen="toggleStatsOpen" />
<JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" /> <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
</keep-alive> </keep-alive>
</div> </div>
@@ -22,19 +24,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, KeepAlive, onActivated, onDeactivated, onMounted, reactive, Ref, ref, watch } from 'vue'; import { computed, KeepAlive, onMounted, reactive, ref, watch } from 'vue';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import JournalDailyStats from './DailyStats.vue'; import JournalDailyStats from './DailyStats.vue';
import JournalDriverStats from './JournalDriverStats.vue'; import JournalDriverStats from './JournalDriverStats.vue';
import StorageManager from '../../scripts/managers/storageManager'; import StorageManager from '../../scripts/managers/storageManager';
import { DataStatus } from '../../scripts/enums/DataStatus';
// Types // Types
type TStatTab = 'daily' | 'driver'; type TStatTab = 'daily' | 'driver';
// Variables // Variables
const store = useStore(); const store = useStore();
const dailyStatsComp: Ref<InstanceType<typeof JournalDailyStats> | null> = ref(null);
const lastDailyStatsOpen = ref(false); const lastDailyStatsOpen = ref(false);
const areStatsOpen = ref(false); const areStatsOpen = ref(false);
@@ -59,32 +59,19 @@ function onTabButtonClick(tab: TStatTab) {
if (lastClickedTab.value == tab || !areStatsOpen.value) areStatsOpen.value = !areStatsOpen.value; if (lastClickedTab.value == tab || !areStatsOpen.value) areStatsOpen.value = !areStatsOpen.value;
if (tab == 'daily') { if (tab == 'daily') {
lastDailyStatsOpen.value = areStatsOpen.value;
StorageManager.setBooleanValue('dailyStatsOpen', areStatsOpen.value); StorageManager.setBooleanValue('dailyStatsOpen', areStatsOpen.value);
lastDailyStatsOpen.value = areStatsOpen.value;
if (areStatsOpen.value) dailyStatsComp.value?.startFetchingDailyStats();
} }
store.currentStatsTab = tab; store.currentStatsTab = tab;
lastClickedTab.value = tab; lastClickedTab.value = tab;
if (areStatsOpen.value == false) store.currentStatsTab = null;
} }
onMounted(() => { function toggleStatsOpen(open: boolean) {
if (StorageManager.getBooleanValue('dailyStatsOpen')) { areStatsOpen.value = open;
dailyStatsComp.value?.startFetchingDailyStats(); }
areStatsOpen.value = true;
}
}),
onActivated(async () => {
if (StorageManager.getBooleanValue('dailyStatsOpen')) {
dailyStatsComp.value?.startFetchingDailyStats();
areStatsOpen.value = true;
}
});
onDeactivated(() => {
dailyStatsComp.value?.stopFetchingDailyStats();
});
watch( watch(
computed(() => store.driverStatsData), computed(() => store.driverStatsData),
@@ -96,6 +83,13 @@ watch(
if (!statsData) areStatsOpen.value = lastDailyStatsOpen.value; if (!statsData) areStatsOpen.value = lastDailyStatsOpen.value;
} }
); );
onMounted(() => {
if (StorageManager.getBooleanValue('dailyStatsOpen')) {
areStatsOpen.value = true;
store.currentStatsTab = 'daily';
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
+1 -1
View File
@@ -34,7 +34,7 @@ export interface StoreState {
chosenModalTrainId?: string; chosenModalTrainId?: string;
currentStatsTab: 'daily' | 'driver'; currentStatsTab: 'daily' | 'driver' | null;
dataStatuses: { dataStatuses: {
connection: DataStatus; connection: DataStatus;
+1 -1
View File
@@ -54,7 +54,7 @@ export const useStore = defineStore('store', {
trains: DataStatus.Loading, trains: DataStatus.Loading,
}, },
currentStatsTab: 'daily', currentStatsTab: null,
blockScroll: false, blockScroll: false,
listenerLaunched: false, listenerLaunched: false,
+1 -1
View File
@@ -134,6 +134,7 @@ export default defineComponent({
provide('sorterActive', sorterActive); provide('sorterActive', sorterActive);
provide('journalFilterActive', journalFilterActive); provide('journalFilterActive', journalFilterActive);
provide('searchersValues', searchersValues); provide('searchersValues', searchersValues);
provide('filterList', reactive([]));
const scrollElement: Ref<HTMLElement | null> = ref(null); const scrollElement: Ref<HTMLElement | null> = ref(null);
@@ -287,4 +288,3 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../styles/JournalSection.scss'; @import '../styles/JournalSection.scss';
</style> </style>
+1 -1
View File
@@ -14,7 +14,7 @@
optionsType="timetables" optionsType="timetables"
/> />
<JournalStats v-if="dataStatus == DataStatus.Loaded" /> <JournalStats />
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<transition name="status-anim" mode="out-in"> <transition name="status-anim" mode="out-in">