Add auto-refresh functionality for hourly view every 30 seconds

Author: abyabraham93

dist/dark.css

@@ -61,11 +61,12 @@ import BlankView from './BlankView.vue';
 import TabList from '../components/TabList.vue';
 import TopSitesPieChart from './TopSitesPieChart.vue';
 import { TypeOfList } from '../utils/enums';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, onUnmounted, watch } from 'vue';
 import Browser from 'webextension-polyfill';
 
 const { t } = useI18n();
 const chart = ref<TypeOfChart>();
+const refreshTimer = ref<number | null>(null);
 
 enum TypeOfChart {
   Horly,
@@ -90,16 +91,60 @@ onMounted(async () => {
       // Default to hourly view
       chart.value = TypeOfChart.Horly;
     }
+    
+    // Start refresh timer if hourly view is active
+    if (chart.value === TypeOfChart.Horly) {
+      startRefreshTimer();
+    }
   } catch (error) {
     console.error('Error loading chart preference:', error);
     // Default to hourly view if error
     chart.value = TypeOfChart.Horly;
+    startRefreshTimer();
   }
 });
 
+// Clean up timer when component is unmounted
+onUnmounted(() => {
+  stopRefreshTimer();
+});
+
+// Create a simple event bus for component communication
+const refreshEvent = new CustomEvent('refresh-data');
+
+// Function to emit the refresh event to child components
+function emitRefreshEvent() {
+  window.dispatchEvent(refreshEvent);
+}
+
+// Start the refresh timer for hourly view
+function startRefreshTimer() {
+  if (refreshTimer.value === null) {
+    // Set timer to refresh every 30 seconds (30000 ms)
+    refreshTimer.value = window.setInterval(() => {
+      emitRefreshEvent();
+    }, 30000);
+  }
+}
+
+// Stop the refresh timer
+function stopRefreshTimer() {
+  if (refreshTimer.value !== null) {
+    window.clearInterval(refreshTimer.value);
+    refreshTimer.value = null;
+  }
+}
+
 async function openChart(type: TypeOfChart) {
   chart.value = type;
   
+  // Start or stop refresh timer based on chart type
+  if (type === TypeOfChart.Horly) {
+    startRefreshTimer();
+  } else {
+    stopRefreshTimer();
+  }
+  
   // Save preference to storage
   try {
     await Browser.storage.local.set({ [CHART_PREFERENCE_KEY]: type });

dist/dark.js

@@ -21,7 +21,7 @@ import {
   LinearScale,
   CategoryScale,
 } from 'chart.js';
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { injectStorage } from '../storage/inject-storage';
 import { StorageDeserializeParam } from '../storage/storage-params';
 import { TimeInterval } from '../entity/time-interval';
@@ -210,5 +210,19 @@ async function buildChart() {
   isLoaded.value = true;
 }
 
-onMounted(async () => await buildChart());
+// Handler for refresh events
+function handleRefresh() {
+  buildChart();
+}
+
+onMounted(async () => {
+  await buildChart();
+  
+  // Listen for refresh events from parent component
+  window.addEventListener('refresh-data', handleRefresh);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('refresh-data', handleRefresh);
+});
 </script>

dist/dashboard.css

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import TabItem from '../components/TabItem.vue';
 import TabItemHeader from '../components/TabItemHeader.vue';
@@ -144,9 +144,23 @@ function getItem(tab: Tab): CurrentTabItem {
   };
 }
 
+// Handler for refresh events
+function handleRefresh() {
+  if (props.type === TypeOfList.Today || props.type === TypeOfList.Dashboard) {
+    loadList(SortingBy.UsageTime);
+  }
+}
+
 onMounted(async () => {
   isLoading.value = true;
   await loadList(SortingBy.UsageTime);
+  
+  // Listen for refresh events from parent component
+  window.addEventListener('refresh-data', handleRefresh);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('refresh-data', handleRefresh);
 });
 </script>
 

dist/general.js

@@ -30,7 +30,7 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { injectStorage } from '../storage/inject-storage';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
 import { useTodayTabListSummary } from '../functions/useTodayTabListSummary';
 import { SortingBy } from '../utils/enums';
@@ -132,10 +132,23 @@ function setupChartData(labels: string[], timeValues: number[]) {
   };
 }
 
+// Handler for refresh events
+function handleRefresh() {
+  processTabsData();
+}
+
 onMounted(async () => {
   darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
   ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
   await processTabsData();
+  
+  // Listen for refresh events from parent component
+  window.addEventListener('refresh-data', handleRefresh);
+});
+
+// Clean up event listener when component is unmounted
+onUnmounted(() => {
+  window.removeEventListener('refresh-data', handleRefresh);
 });
 </script>