From 3f069e6d22b5f3afddb2cab9830a358d7c5aca16 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 12 Apr 2023 08:49:29 +1000
Subject: [PATCH] removed depreciated progressbar

---
 resources/js/components/SMProgress.vue |  86 -----------------
 resources/js/helpers/api.ts            |   7 --
 resources/js/router/index.js           |   8 +-
 resources/js/store/ProgressStore.ts    | 124 -------------------------
 resources/js/views/App.vue             |   2 -
 5 files changed, 1 insertion(+), 226 deletions(-)
 delete mode 100644 resources/js/components/SMProgress.vue
 delete mode 100644 resources/js/store/ProgressStore.ts

diff --git a/resources/js/components/SMProgress.vue b/resources/js/components/SMProgress.vue
deleted file mode 100644
index 19a9115..0000000
--- a/resources/js/components/SMProgress.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <div>
-        <div
-            class="sm-progress-container"
-            :style="{ opacity: `${progressStore.opacity || 0}` }">
-            <div
-                class="sm-progress"
-                :style="{
-                    width: `${(progressStore.status || 0) * 100}%`,
-                }"></div>
-        </div>
-        <div class="sm-spinner">
-            <div
-                class="sm-spinner-icon"
-                :style="{ opacity: `${progressStore.spinner || 0}` }"></div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useProgressStore } from "../store/ProgressStore";
-
-const progressStore = useProgressStore();
-</script>
-
-<style lang="scss">
-.sm-progress-container {
-    position: fixed;
-    background-color: $border-color;
-    height: 2px;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2000;
-    transition: opacity 0.2s ease-in-out;
-
-    .sm-progress {
-        background-color: $primary-color-dark;
-        width: 0%;
-        height: 100%;
-        transition: width 0.2s ease-in-out;
-        box-shadow: 0 0 10px $primary-color-dark, 0 0 4px $primary-color-dark;
-        opacity: 1;
-    }
-}
-
-.sm-spinner {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    opacity: 0.5;
-
-    .sm-spinner-icon {
-        width: 18px;
-        height: 18px;
-        box-sizing: border-box;
-
-        border: solid 2px transparent;
-        border-top-color: #29d;
-        border-left-color: #29d;
-        border-radius: 50%;
-
-        transition: opacity 0.2s ease-in-out;
-
-        -webkit-animation: sm-progress-spinner 500ms linear infinite;
-        animation: sm-progress-spinner 500ms linear infinite;
-    }
-}
-
-@-webkit-keyframes sm-progress-spinner {
-    0% {
-        -webkit-transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-    }
-}
-@keyframes sm-progress-spinner {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>
diff --git a/resources/js/helpers/api.ts b/resources/js/helpers/api.ts
index 77f430a..d3d9888 100644
--- a/resources/js/helpers/api.ts
+++ b/resources/js/helpers/api.ts
@@ -1,4 +1,3 @@
-import { useProgressStore } from "../store/ProgressStore";
 import { useUserStore } from "../store/UserStore";
 import { ImportMetaExtras } from "../../../import-meta";
 
@@ -165,9 +164,6 @@ export const api = {
                     fetchOptions.body = options.body;
                 }
 
-                const progressStore = useProgressStore();
-                progressStore.start();
-
                 fetch(url, fetchOptions)
                     .then(async (response) => {
                         let data: string | object = "";
@@ -218,9 +214,6 @@ export const api = {
                             ...rest,
                             response: response && response.json(),
                         });
-                    })
-                    .finally(() => {
-                        progressStore.finish();
                     });
             }
         });
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 49be6ff..a77030d 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -2,7 +2,6 @@ import { useUserStore } from "@/store/UserStore";
 import { createRouter, createWebHistory } from "vue-router";
 import { api } from "../helpers/api";
 import { useApplicationStore } from "../store/ApplicationStore";
-import { useProgressStore } from "../store/ProgressStore";
 import { updateSEOTags } from "../helpers/seo";
 
 export const routes = [
@@ -370,9 +369,6 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
     const userStore = useUserStore();
     const applicationStore = useApplicationStore();
-    const progressStore = useProgressStore();
-
-    progressStore.start();
 
     applicationStore.clearDynamicTitle();
 
@@ -472,7 +468,6 @@ router.beforeEach(async (to, from, next) => {
     // }
 
     if (to.meta.middleware == "authenticated" && !userStore.id) {
-        progressStore.finish();
         next({ name: "login", query: { redirect: to.fullPath } });
     } else {
         next();
@@ -480,8 +475,7 @@ router.beforeEach(async (to, from, next) => {
 });
 
 router.afterEach((to, from) => {
-    const progressStore = useProgressStore();
-    progressStore.finish();
+    // empty
 });
 
 export default router;
diff --git a/resources/js/store/ProgressStore.ts b/resources/js/store/ProgressStore.ts
deleted file mode 100644
index d03cb97..0000000
--- a/resources/js/store/ProgressStore.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { defineStore } from "pinia";
-import { clamp } from "../helpers/utils";
-
-export interface ProgressStore {
-    spinner: number;
-    status: number;
-    opacity: number;
-    queue: number;
-    timeoutID: number | null;
-}
-
-export const useProgressStore = defineStore({
-    id: "progress",
-    state: (): ProgressStore => ({
-        spinner: 0,
-        status: 0,
-        opacity: 0,
-        queue: 0,
-        timeoutID: null,
-    }),
-
-    actions: {
-        start() {
-            if (this.queue == 0 && this.opacity == 0) {
-                this.set(0);
-
-                const work = () => {
-                    window.setTimeout(() => {
-                        if (this.status < 1) {
-                            this._trickle();
-                            work();
-                        }
-                    }, 200);
-                };
-
-                work();
-
-                if (this.opacity == 0) {
-                    if (this.timeoutID != null) {
-                        window.clearTimeout(this.timeoutID);
-                    }
-
-                    this.timeoutID = window.setTimeout(() => {
-                        this._show();
-                        this.timeoutID = null;
-                    }, 2000);
-                }
-
-                if (this.spinner == 0) {
-                    this.spinner = 1;
-                }
-            }
-
-            ++this.queue;
-        },
-
-        set(number: number) {
-            const n = clamp(number, 0.08, 1);
-            this.status = n;
-        },
-
-        finish() {
-            if (this.queue > 0) {
-                --this.queue;
-            }
-        },
-
-        _trickle() {
-            const n = this.status;
-
-            if (this.queue == 0) {
-                if (this.opacity == 0 && this.timeoutID != null) {
-                    this._hide();
-                    window.clearTimeout(this.timeoutID);
-                    this.timeoutID = null;
-                } else if (this.timeoutID == null) {
-                    this.timeoutID = window.setTimeout(() => {
-                        this.set(1);
-                        this.timeoutID = null;
-
-                        this.timeoutID = window.setTimeout(() => {
-                            this._hide();
-                            this.timeoutID = null;
-
-                            window.setTimeout(() => {
-                                this.status = 0;
-                            }, 150);
-                        }, 500);
-                    }, 500);
-                }
-            }
-
-            if (n > 0 && n < 1) {
-                let amount = 0;
-
-                if (n >= 0 && n < 0.2) {
-                    amount = 0.1;
-                } else if (n >= 0.2 && n < 0.5) {
-                    amount = 0.04;
-                } else if (n >= 0.5 && n < 0.8) {
-                    amount = 0.02;
-                } else if (n >= 0.8 && n < 0.99) {
-                    amount = 0.005;
-                } else {
-                    amount = 0;
-                }
-
-                this.set(clamp(n + amount, 0, 0.994));
-            }
-        },
-
-        _show() {
-            this.opacity = 1;
-        },
-
-        _hide() {
-            this.opacity = 0;
-
-            if (this.spinner == 1) {
-                this.spinner = 0;
-            }
-        },
-    },
-});
diff --git a/resources/js/views/App.vue b/resources/js/views/App.vue
index 425a7e3..61b6f46 100644
--- a/resources/js/views/App.vue
+++ b/resources/js/views/App.vue
@@ -12,7 +12,6 @@
     <footer>
         <SMFooter />
     </footer>
-    <SMProgress />
     <SMToastList />
     <SMDialogList />
 </template>
@@ -20,7 +19,6 @@
 <script setup lang="ts">
 import SMNavbar from "../components/SMNavbar.vue";
 import SMFooter from "../components/SMFooter.vue";
-import SMProgress from "../components/SMProgress.vue";
 import SMToastList from "../components/SMToastList.vue";
 import SMDialogList from "../components/SMDialog";
 </script>