Webhooks feature is done #669

src/static/app/src/components/settingsComponent/dashboardWebHooks.vue

@@ -4,8 +4,6 @@ import { fetchGet } from "@/utilities/fetch.js"
 import {onMounted, ref} from "vue";
 import AddWebHook from "@/components/settingsComponent/dashboardWebHooksComponents/addWebHook.vue";
 import WebHookSessions from "@/components/settingsComponent/dashboardWebHooksComponents/webHookSessions.vue";
-import ClientGroup from "@/components/clientComponents/clientGroup.vue";
-import ClientSettings from "@/components/clientComponents/clientSettings.vue";
 const webHooks = ref([])
 const webHooksLoaded = ref(false)
 
@@ -34,14 +32,14 @@ const view = ref("edit")
 						<i class="bi bi-plug-fill me-2"></i>
 						<LocaleText t="Webhooks"></LocaleText>
 					</h6>
-					<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm ms-auto"
+					<button class="btn btn-sm bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm ms-auto"
 							@click="addWebHook = true; selectedWebHook = undefined"
 							v-if="!addWebHook"
 					>
 						<i class="bi bi-plus-circle-fill me-2"></i>
 						<LocaleText t="Webhook"></LocaleText>
 					</button>
-					<button class="btn bg-secondary-subtle text-secondary-emphasis border-1 border-secondary-subtle rounded-3 shadow-sm ms-auto"
+					<button class="btn btn-sm bg-secondary-subtle text-secondary-emphasis border-1 border-secondary-subtle rounded-3 shadow-sm ms-auto"
 							@click="addWebHook = false"
 							v-else
 					>
@@ -105,7 +103,6 @@ const view = ref("edit")
 							:webHook="selectedWebHook" @refresh="getWebHooks()" ></AddWebHook>
 						<Suspense v-else-if="view === 'sessions'">
 							<WebHookSessions
-
 								:key="selectedWebHook"
 								:webHook="selectedWebHook"></WebHookSessions>
 							<template #fallback>

src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/addWebHook.vue

@@ -31,7 +31,8 @@ const Actions = ref({
 	'peer_updated': "Peer Updated"
 })
 const emits = defineEmits(['refresh', 'delete'])
-
+import { DashboardConfigurationStore } from "@/stores/DashboardConfigurationStore"
+const store = DashboardConfigurationStore()
 const alert = ref(false)
 const alertMsg = ref("")
 const submitting = ref(false)
@@ -41,9 +42,11 @@ const submitWebHook = async (e) => {
 	await fetchPost("/api/webHooks/updateWebHook", newWebHook.value, (res) => {
 		if (res.status){
 			emits('refresh')
+			store.newMessage("Server", "Webhook saved", "success")
 		}else{
 			alert.value = true
 			alertMsg.value = res.message
+			store.newMessage("Server", "Webhook failed to save", "danger")
 		}
 		submitting.value = false
 	})
@@ -54,9 +57,11 @@ const deleteWebHook = async () => {
 	await fetchPost("/api/webHooks/deleteWebHook", newWebHook.value, (res) => {
 		if (res.status){
 			emits('delete')
+			store.newMessage("Server", "Webhook deleted", "success")
 		}else{
 			alert.value = true
 			alertMsg.value = res.message
+			store.newMessage("Server", "Webhook failed to delete", "danger")
 		}
 		submitting.value = false
 	})

src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/webHookSession.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 
 import LocaleText from "@/components/text/localeText.vue";
+import {computed} from "vue";
 const props = defineProps(['session'])
-
+const formattedBody = computed(() => {
+	return JSON.stringify(props.session.Data, null, 4)
+})
 </script>
 
 <template>
@@ -94,7 +97,7 @@ const props = defineProps(['session'])
 			<LocaleText t="Data"></LocaleText>
 		</h6>
 		<div class="bg-body-tertiary p-3 rounded-3">
-			<pre class="mb-0"><code>{{ JSON.stringify(session.Data, null, 4) }}</code></pre>
+			<pre class="mb-0"><code>{{ formattedBody }}</code></pre>
 		</div>
 	</div>
 </div>

src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/webHookSessions.vue

@@ -27,13 +27,6 @@ const latestSession = computed(() => {
 	return sessions.value[0]
 })
 
-// watch(() => latestSession.value.Status, () => {
-// 	if (latestSession.value.Status > -1) clearInterval(refreshInterval.value)
-// })
-
-// if (latestSession.value.Status === -1){
-//
-// }
 refreshInterval.value = setInterval(() => {
 	getSessions()
 }, 5000)
@@ -48,7 +41,8 @@ onBeforeUnmount(() => {
 			<h6 class="mb-3">
 				<LocaleText t="Latest Session"></LocaleText>
 			</h6>
-			<WebHookSession :session="latestSession" :key="latestSession.WebHookSessionID"></WebHookSession>
+			<WebHookSession :session="latestSession"
+							:key="latestSession.WebHookID"></WebHookSession>
 		</div>
 		<div class="border-top p-3" v-if="sessions.length > 1">
 			<h6>