STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

removed depreciated progressbar

Browse Source
This commit is contained in:
James Collins
2023-04-12 08:49:29 +10:00
parent 12e7269591
commit 3f069e6d22
5 changed files with 1 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/js/components/SMProgress.vue
View File

@@ -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>

7
resources/js/helpers/api.ts
View File

@@ -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();
});
}
});

8
resources/js/router/index.js
View File

@@ -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;

124
resources/js/store/ProgressStore.ts
View File

@@ -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;
}
},
},
});

2
resources/js/views/App.vue
View File

@@ -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>