Implement data auto-refresh

src/App.vue

@@ -1,5 +1,20 @@
+<template>
+  <RouterView />
+</template>
+
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 import { RouterView } from 'vue-router';
+import { useDataStore } from '@/stores/data';
+import { useTimeStore } from '@/stores/time.mjs';
+
+const time = useTimeStore();
+onMounted(() => time.startUpdatingNow());
+onUnmounted(() => time.stopUpdatingNow());
+
+const data = useDataStore();
+onMounted(() => data.startUpdating());
+onUnmounted(() => data.stopUpdating());
 
 try {
   // Detect mobile browsers
@@ -11,10 +26,6 @@ try {
 }
 </script>
 
-<template>
-  <RouterView />
-</template>
-
 <style>
 @import '@/assets/css/base.css';
 </style>

src/layouts/MainLayout.vue

@@ -53,8 +53,6 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
-import { useTimeStore } from '../stores/time';
 import NavButtons from '../components/NavButtons.vue';
 import TimeOffsetSelector from '@/components/Debug/TimeOffsetSelector.vue';
 
@@ -62,11 +60,6 @@ const props = defineProps({
   title: String,
 });
 
-const time = useTimeStore();
-
-onMounted(() => time.startUpdatingNow());
-onUnmounted(() => time.stopUpdatingNow());
-
 const isDev = import.meta.env.DEV;
 </script>
 

src/layouts/ScreenshotLayout.vue

@@ -12,7 +12,7 @@
           </div>
           <div class="flex items-center space-x-8">
             <div class="text-3xl text-zinc-50">
-              {{ header }}
+              {{ props.header }}
             </div>
             <div>
               <img src="@/assets/img/twitter-white.png" width="20" height="20" class="inline" />
@@ -32,9 +32,8 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, watchEffect } from 'vue';
+import { watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
-import { useDataStore } from '../stores/data';
 import { useTimeStore } from '../stores/time';
 
 const props = defineProps({
@@ -44,14 +43,11 @@ const props = defineProps({
 })
 
 const route = useRoute();
-
 const time = useTimeStore();
-const data = useDataStore();
-
-onMounted(() => data.updateAll());
 
 watchEffect(() => {
   if (route.query.time) {
+    time.stopUpdatingNow();
     time.setNow(route.query.time);
   }
 });

src/stores/data.mjs

@@ -47,6 +47,7 @@ export const useDataStore = defineStore('data', () => {
     schedules: useSchedulesDataStore(),
     gear: useGearDataStore(),
   };
+  let updateDataTimer;
 
   function updateAll() {
     return Promise.all(Object.values(stores).map(s => s.update()));
@@ -54,9 +55,42 @@ export const useDataStore = defineStore('data', () => {
 
   const isUpdating = computed(() => Object.values(stores).some(s => s.isUpdating));
 
+  function startUpdating() {
+    if (updateDataTimer) {
+      return;
+    }
+
+    updateAll();
+
+    let date = new Date;
+
+    // If we're more than 20 seconds past the current hour, schedule the update for the next hour
+    if (date.getMinutes() !== 0 || date.getSeconds() >= 20)
+    date.setHours(date.getHours() + 1);
+    date.setMinutes(0);
+
+    // Random number of seconds past the hour (so all open browsers don't hit the server at the same time)
+    let minSec = 25;
+    let maxSec = 60;
+    date.setSeconds(Math.floor(Math.random() * (maxSec - minSec + 1)) + minSec);
+
+    // Set the timeout
+    updateDataTimer = setTimeout(() => {
+      updateDataTimer = null;
+      startUpdating();
+    }, (date - new Date));
+  }
+
+  function stopUpdating() {
+    clearInterval(updateDataTimer);
+    updateDataTimer = null;
+  }
+
   return {
     updateAll,
     isUpdating,
+    startUpdating,
+    stopUpdating,
     schedules: computed(() => stores.schedules.data),
     gear: computed(() => stores.gear.data),
   }

src/views/GearView.vue

@@ -18,11 +18,6 @@
 
 <script setup>
 import MainLayout from '@/layouts/MainLayout.vue'
-import { useDataStore } from '../stores/data';
-import { onMounted } from 'vue';
 import DailyDropGear from '../components/gear/DailyDropGear.vue';
 import RegularGear from '../components/gear/RegularGear.vue';
-
-const data = useDataStore();
-onMounted(() => data.updateAll());
 </script>

src/views/HomeView.vue

@@ -14,10 +14,5 @@
 
 <script setup>
 import MainLayout from '@/layouts/MainLayout.vue'
-import { useDataStore } from '../stores/data';
-import { onMounted } from 'vue';
 import ScheduleBox from '../components/ScheduleBox.vue';
-
-const data = useDataStore();
-onMounted(() => data.updateAll());
 </script>