Fixed clearInterval is not working within configuration

donaldzou · Aug 3, 2024 · 52989c8 · 52989c8
1 parent b64ba2e
commit 52989c8
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 36 deletions.
diff --git a/src/static/app/dist/assets/index.css b/src/static/app/dist/assets/index.css
diff --git a/src/static/app/dist/assets/index.js b/src/static/app/dist/assets/index.js
diff --git a/src/static/app/src/components/configurationComponents/peerCreate.vue b/src/static/app/src/components/configurationComponents/peerCreate.vue
@@ -55,14 +55,15 @@ export default {
 	}, 
 	methods: {
 		peerCreate(){
+			this.saving = true
 			fetchPost("/api/addPeers/" + this.$route.params.id, this.data, (res) => {
 				if (res.status){
 					this.$router.push(`/configuration/${this.$route.params.id}/peers`)
 					this.dashboardStore.newMessage("Server", "Peer create successfully", "success")
 				}else{
 					this.dashboardStore.newMessage("Server", res.message, "danger")
 				}
-				
+				this.saving = false;
 			})
 		}	
 	},
@@ -132,10 +133,11 @@ export default {
 			</div>
 			<div class="d-flex mt-2">
 				<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
-				        :disabled="!this.allRequireFieldsFilled"
+				        :disabled="!this.allRequireFieldsFilled || this.saving"
 				        @click="this.peerCreate()"
 				>
-					<i class="bi bi-plus-circle-fill me-2"></i>Add
+					<i class="bi bi-plus-circle-fill me-2" v-if="!this.saving"></i>
+					{{this.saving ? 'Saving...': 'Add'}}
 				</button>
 			</div>
 		</div>

diff --git a/src/static/app/src/components/configurationComponents/peerJobs.vue b/src/static/app/src/components/configurationComponents/peerJobs.vue
@@ -2,6 +2,7 @@
 import ScheduleDropdown from "@/components/configurationComponents/peerScheduleJobsComponents/scheduleDropdown.vue";
 import SchedulePeerJob from "@/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {v4} from "uuid";
 export default {
 	name: "peerJobs",
 	setup(){
@@ -26,7 +27,7 @@ export default {
 		},
 		addJob(){
 			this.selectedPeer.jobs.unshift(JSON.parse(JSON.stringify({
-				JobID: crypto.randomUUID(),
+				JobID: v4().toString(),
 				Configuration: this.selectedPeer.configuration.Name,
 				Peer: this.selectedPeer.id,
 				Field: this.store.PeerScheduleJobs.dropdowns.Field[0].value,

diff --git a/src/static/app/src/components/configurationComponents/peerList.vue b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -39,6 +39,7 @@ import PeerCreate from "@/components/configurationComponents/peerCreate.vue";
 import PeerJobs from "@/components/configurationComponents/peerJobs.vue";
 import PeerJobsAllModal from "@/components/configurationComponents/peerJobsAllModal.vue";
 import PeerJobsLogsModal from "@/components/configurationComponents/peerJobsLogsModal.vue";
+import {ref} from "vue";
 
 Chart.register(
 	ArcElement,
@@ -74,7 +75,8 @@ export default {
 	setup(){
 		const dashboardConfigurationStore = DashboardConfigurationStore();
 		const wireguardConfigurationStore = WireguardConfigurationsStore();
-		return {dashboardConfigurationStore, wireguardConfigurationStore}
+		const interval = ref(undefined)
+		return {dashboardConfigurationStore, wireguardConfigurationStore, interval}
 	},
 	data(){
 		return {
@@ -139,24 +141,29 @@ export default {
 		'$route': {
 			immediate: true,
 			handler(){
-				clearInterval(this.interval)
+				console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
+				clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
+				console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
+				
 				this.loading = true;
 				let id = this.$route.params.id;
 				this.configurationInfo = [];
 				this.configurationPeers = [];
 				if (id){
 					this.getPeers(id)
-					this.setInterval();
+					console.log("Changed..")
+					this.setPeerInterval();
 				}
 			}
 		},
 		'dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval'(){
-			clearInterval(this.interval);
-			this.setInterval();
-		}
+			console.log("Changed?")
+			clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
+			this.setPeerInterval();
+		},
 	},
 	beforeRouteLeave(){
-		clearInterval(this.interval)
+		clearInterval(this.dashboardConfigurationStore.Peers.RefreshInterval);
 	},
 	methods:{
 		toggle(){
@@ -237,11 +244,12 @@ export default {
 					}
 				});
 		},
-		setInterval(){
-			this.interval = setInterval(() => {
+		setPeerInterval(){
+			this.dashboardConfigurationStore.Peers.RefreshInterval = setInterval(() => {
 				this.getPeers()
 			}, parseInt(this.dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval))
-		}
+			console.log(this.dashboardConfigurationStore.Peers.RefreshInterval)
+		},
 	},
 	computed: {
 		configurationSummary(){

diff --git a/src/static/app/src/stores/DashboardConfigurationStore.js b/src/static/app/src/stores/DashboardConfigurationStore.js
@@ -8,7 +8,8 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
 		Configuration: undefined,
 		Messages: [],
 		Peers: {
-			Selecting: false
+			Selecting: false,
+			RefreshInterval: undefined
 		}
 	}),
 	actions: {