WIP

Author: marickvantuil

dashboard/dist/assets/index.481c4ac3.js

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script type="module" crossorigin src="/assets/index.481c4ac3.js"></script>
+    <script type="module" crossorigin src="/assets/index.643ccf47.js"></script>
     <link rel="modulepreload" href="/assets/vendor.f52c9be3.js">
     <link rel="stylesheet" href="/assets/index.1ecbaa60.css">
   </head>

dashboard/dist/assets/index.643ccf47.js

@@ -1,6 +1,6 @@
 {
   "index.html": {
-    "file": "assets/index.481c4ac3.js",
+    "file": "assets/index.643ccf47.js",
     "src": "index.html",
     "isEntry": true,
     "imports": [

dashboard/dist/index.html

@@ -2,20 +2,28 @@ import { onUnmounted, watch } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
 
 export async function fetchTasks(into, query = {}) {
+  let paused = false
+
   const f = async function (into) {
+    if (paused) {
+      return
+    }
+
     const url = new URL(window.location.href)
     const queryParams = new URLSearchParams(url.search)
 
     for (const [name, value] of Object.entries(query)) {
       queryParams.append(name, value)
     }
 
+    paused = true
     fetch(
-      `http://localhost:8000/cloud-tasks-api/tasks?${queryParams.toString()}`
+      `${import.meta.env.VITE_API_URL}/cloud-tasks-api/tasks?${queryParams.toString()}`
     )
       .then((response) => response.json())
       .then((response) => {
         into.value = response
+        paused = false
       })
   }
 
@@ -42,5 +50,6 @@ export async function fetchTasks(into, query = {}) {
   onUnmounted(() => {
     clearInterval(interval)
     document.removeEventListener('visibilitychange', onVisibilityChange)
+    paused = false
   })
 }

dashboard/dist/manifest.json

@@ -16,7 +16,7 @@ const dashboard = ref({
 
 const tsLoaded = Math.floor(Date.now() / 1000)
 
-fetch('http://localhost:8000/cloud-tasks-api/dashboard')
+fetch(`${import.meta.env.VITE_API_URL}/cloud-tasks-api/dashboard`)
   .then((response) => response.json())
   .then((response) => (dashboard.value = response))
 </script>

dashboard/package-lock.json

@@ -23,7 +23,7 @@
       v-model="status"
       class="bg-white py-2 px-3 w-full rounded border"
     >
-      <option :value="null">List default</option>
+      <option value="">List default</option>
       <option value="queued">Queued</option>
       <option value="running">Running</option>
       <option value="successful">Successful</option>

dashboard/src/api.js

@@ -11,7 +11,7 @@ const task = ref({
   status: 'loading',
 })
 
-fetch(`http://localhost:8000/cloud-tasks-api/task/${route.params.uuid}`)
+fetch(`${import.meta.env.VITE_API_URL}/cloud-tasks-api/task/${route.params.uuid}`)
   .then((response) => response.json())
   .then((response) => (task.value = response))
 

dashboard/src/components/Dashboard.vue

@@ -10,15 +10,12 @@
 use Google\Protobuf\Timestamp;
 use Illuminate\Contracts\Queue\Queue as QueueContract;
 use Illuminate\Queue\Queue as LaravelQueue;
-use Illuminate\Support\InteractsWithTime;
 use Illuminate\Support\Str;
 use function Safe\json_encode;
 use function Safe\json_decode;
 
 class CloudTasksQueue extends LaravelQueue implements QueueContract
 {
-    use InteractsWithTime;
-
     /**
      * @var CloudTasksClient
      */