manual/auto refresh control

Author: PhilBastian

src/Frontend/src/components/RefreshConfig.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import OnOffSwitch from "./OnOffSwitch.vue";
+
+const props = defineProps<{
+  id: string;
+  initialTimeout?: number;
+  onChange: (newValue: number | null) => void;
+  onManualRefresh: () => void;
+}>();
+
+const autoRefresh = ref(props.initialTimeout != null);
+const refreshTimeout = ref(props.initialTimeout ?? 5);
+
+function toggleRefresh() {
+  autoRefresh.value = !autoRefresh.value;
+  updateTimeout();
+}
+
+function updateTimeout() {
+  validateTimeout();
+  props.onChange(autoRefresh.value ? refreshTimeout.value * 1000 : null);
+}
+
+function validateTimeout() {
+  refreshTimeout.value = Math.max(1, Math.min(600, refreshTimeout.value));
+}
+</script>
+
+<template>
+  <div class="refresh-config">
+    <button class="fa" title="refresh" @click="() => onManualRefresh()">
+      <i class="fa fa-lg fa-refresh" />
+    </button>
+    <span>|</span>
+    <label>Auto-Refresh:</label>
+    <div>
+      <OnOffSwitch :id="id" @toggle="toggleRefresh" :value="autoRefresh" />
+    </div>
+    <input type="number" v-model="refreshTimeout" min="1" max="600" v-on:change="updateTimeout" />
+    <span class="unit">s</span>
+  </div>
+</template>
+
+<style scoped>
+.refresh-config {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.refresh-config .unit {
+  margin-left: -0.45em;
+}
+
+.refresh-config label {
+  margin: 0;
+}
+
+.refresh-config input {
+  width: 3.5em;
+}
+
+.refresh-config button {
+  background: none;
+  border: none;
+  width: 2em;
+}
+
+.refresh-config button .fa {
+  transition: all 0.15s ease-in-out;
+  transition: rotate 0.05s ease-in-out;
+  transform-origin: center;
+}
+
+.refresh-config button:hover .fa {
+  color: #00a3c4;
+  transform: scale(1.1);
+}
+
+.refresh-config button:active .fa {
+  transform: rotate(25deg);
+  text-shadow: #929e9e 0.25px 0.25px;
+}
+</style>

src/Frontend/src/components/audit/AuditList.vue

@@ -8,6 +8,7 @@ import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
 import { useFormatTime } from "@/composables/formatter";
+import RefreshConfig from "../RefreshConfig.vue";
 
 const route = useRoute();
 const store = useAuditStore();
@@ -64,6 +65,7 @@ function formatDotNetTimespan(timespan: string) {
 </script>
 
 <template>
+  <RefreshConfig id="auditListRefresh" @change="store.updateRefreshTimer" @manual-refresh="store.refresh" />
   <section role="table" aria-label="endpoint-instances">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">

src/Frontend/src/composables/autoRefresh.ts

@@ -1,13 +1,11 @@
-import { ref } from "vue";
-
 /**
  * Enables refresh functionality, either auto or manual
  * @param refreshAction The action to perform (by default) when refreshing
  * @param defaultTimeout The time between refreshes in ms or null if no auto-refresh is desired
  */
 export default function useAutoRefresh(refreshAction: () => Promise<void>, defaultTimeout: number | null, startImmediately = true) {
   let refreshInterval: number | null = null;
-  const timeout = ref(defaultTimeout);
+  const timeout = { value: defaultTimeout };
 
   function stopTimer() {
     if (refreshInterval !== null) {
@@ -38,7 +36,7 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, defau
    * Updates the timeout interval between refreshes
    * @param updatedTimeout The new time between refreshes in ms or null if no auto-refresh is desired
    */
-  async function updateTimeout(updatedTimeout: number) {
+  async function updateTimeout(updatedTimeout: number | null) {
     timeout.value = updatedTimeout;
     await executeAndResetTimer();
   }