mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
poprawki pobierania danych
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user