From e6c954456e60fc3bff4f4cbc3ae203725cefc26d Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sun, 17 Apr 2022 14:26:55 +0200
Subject: [PATCH] webapp: finally show alert

---
 webapp/src/components/NetworkAdminView.vue    |  34 ++--
 .../components/partials/BootstrapAlert.vue    | 145 ++++++++++--------
 2 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index baeea94..6f3012a 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -3,9 +3,9 @@
     <div class="page-header">
       <h1>Network Settings</h1>
     </div>
-    <!--<BootstrapAlert v-bind:variant="this.infoType" v-bind:show="this.infoShow">-->
-      {{ this.infoMessage }}
-    <!--</BootstrapAlert>-->
+    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+      {{ this.alertMessage }}
+    </BootstrapAlert>
     <form @submit="saveNetworkConfig">
       <div class="card">
         <div class="card-header text-white bg-primary">WiFi Configuration</div>
@@ -172,9 +172,9 @@ export default {
     return {
       networkConfigList: [],
       test: {},
-      infoMessage: "",
-      infoType: "info",
-      infoShow: false,
+      alertMessage: "",
+      alertType: "info",
+      showAlert: false,
     };
   },
   created() {
@@ -196,20 +196,18 @@ export default {
         method: "POST",
         body: formData,
       })
+        .then(function (response) {
+          if (response.status != 200) {
+            throw response.status;
+          } else {
+            return response.json();
+          }
+        })
         .then(
           function (response) {
-            if (response.status != 200) {
-              throw response.status;
-            } else {
-              return response.json();
-            }
-          }.bind(this)
-        )
-        .then(
-          function (response) {
-            this.infoMessage = response.message;
-            this.infoType = response.type;
-            this.infoShow = true;
+            this.alertMessage = response.message;
+            this.alertType = response.type;
+            this.showAlert = true;
           }.bind(this)
         );
     },
diff --git a/webapp/src/components/partials/BootstrapAlert.vue b/webapp/src/components/partials/BootstrapAlert.vue
index 3c9a836..b73f2cd 100644
--- a/webapp/src/components/partials/BootstrapAlert.vue
+++ b/webapp/src/components/partials/BootstrapAlert.vue
@@ -1,5 +1,11 @@
 <template>
-  <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
+  <div
+    v-if="isAlertVisible"
+    ref="element"
+    class="alert"
+    role="alert"
+    :class="classes"
+  >
     <slot />
     <button
       v-if="dismissible"
@@ -13,92 +19,109 @@
 </template>
 
 <script>
-import {computed, defineComponent, onBeforeUnmount, ref, watch} from 'vue'
-import Alert from 'bootstrap/js/dist/alert'
+import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
+import Alert from "bootstrap/js/dist/alert";
+
+export const toInteger = (value, defaultValue = NaN) => {
+  return Number.isInteger(value) ? value : defaultValue;
+};
+
 export default defineComponent({
-  name: 'BAlert',
+  name: "BAlert",
   props: {
-    dismissLabel: {type: String, default: 'Close'},
-    dismissible: {type: Boolean, default: false},
-    fade: {type: Boolean, default: false},
-    modelValue: {type: [Boolean, Number], default: false},
-    show: {type: Boolean, default: false},
-    variant: {type: String, default: 'info'},
+    dismissLabel: { type: String, default: "Close" },
+    dismissible: { type: Boolean, default: false },
+    fade: { type: Boolean, default: false },
+    modelValue: { type: [Boolean, Number], default: false },
+    show: { type: Boolean, default: false },
+    variant: { type: String, default: "info" },
   },
-  emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
-  setup(props, {emit}) {
-    const element = 0; // = ref<HTMLElement>()
-    const instance = 0; // = ref<Alert>()
+  emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
+  setup(props, { emit }) {
+    const element = undefined;
+    let instance = undefined;
     const classes = computed(() => ({
       [`alert-${props.variant}`]: props.variant,
-      'show': props.modelValue,
-      'alert-dismissible': props.dismissible,
-      'fade': props.modelValue,
-    }))
-    let _countDownTimeout = 0
+      show: props.modelValue,
+      "alert-dismissible": props.dismissible,
+      fade: props.modelValue,
+    }));
+
+    let _countDownTimeout = 0;
+
     const parseCountDown = (value) => {
-      if (typeof value === 'boolean') {
-        return 0
+      if (typeof value === "boolean") {
+        return 0;
       }
-      const numberValue = value || 0
-      return numberValue > 0 ? numberValue : 0
-    }
+
+      const numberValue = toInteger(value, 0);
+      return numberValue > 0 ? numberValue : 0;
+    };
+
     const clearCountDownInterval = () => {
-      if (_countDownTimeout === undefined) return
-      clearTimeout(_countDownTimeout)
-      _countDownTimeout = undefined
-    }
-    const countDown = ref(parseCountDown(props.modelValue))
-    const isAlertVisible = computed(() => props.modelValue || props.show)
+      if (_countDownTimeout === undefined) return;
+      clearTimeout(_countDownTimeout);
+      _countDownTimeout = undefined;
+    };
+
+    const countDown = ref(parseCountDown(props.modelValue));
+    const isAlertVisible = computed(() => props.modelValue || props.show);
+
     onBeforeUnmount(() => {
-      clearCountDownInterval()
-      instance.value?.dispose()
-      instance.value = undefined
-    })
+      clearCountDownInterval();
+      instance?.dispose();
+      instance = undefined;
+    });
+
     const parsedModelValue = computed(() => {
       if (props.modelValue === true) {
-        return true
+        return true;
       }
-      if (props.modelValue === false) return false
-      if ((props.modelValue || 0) < 1) {
+      if (props.modelValue === false) return false;
+
+      if (toInteger(props.modelValue, 0) < 1) {
         // Boolean will always return false for the above comparison
-        return false
+        return false;
       }
-      return !!props.modelValue
-    })
+      return !!props.modelValue;
+    });
+
     const handleShowAndModelChanged = () => {
-      countDown.value = parseCountDown(props.modelValue)
-      if ((parsedModelValue.value || props.show) && !instance.value)
-        instance.value = new Alert(element.value)
-    }
+      countDown.value = parseCountDown(props.modelValue);
+      if ((parsedModelValue.value || props.show) && !instance)
+        instance = new Alert(element);
+    };
+
     const dismissClicked = () => {
-      if (typeof props.modelValue === 'boolean') {
-        emit('update:modelValue', false)
+      if (typeof props.modelValue === "boolean") {
+        emit("update:modelValue", false);
       } else {
-        emit('update:modelValue', 0)
+        emit("update:modelValue", 0);
       }
-      emit('dismissed')
-    }
-    watch(() => props.modelValue, handleShowAndModelChanged)
-    watch(() => props.show, handleShowAndModelChanged)
+      emit("dismissed");
+    };
+
+    watch(() => props.modelValue, handleShowAndModelChanged);
+    watch(() => props.show, handleShowAndModelChanged);
+
     watch(countDown, (newValue) => {
-      clearCountDownInterval()
-      if (typeof props.modelValue === 'boolean') return
-      emit('dismiss-count-down', newValue)
-      if (newValue === 0 && props.modelValue > 0) emit('dismissed')
-      if (props.modelValue !== newValue) emit('update:modelValue', newValue)
+      clearCountDownInterval();
+      if (typeof props.modelValue === "boolean") return;
+      emit("dismiss-count-down", newValue);
+      if (newValue === 0 && props.modelValue > 0) emit("dismissed");
+      if (props.modelValue !== newValue) emit("update:modelValue", newValue);
       if (newValue > 0) {
         _countDownTimeout = setTimeout(() => {
-          countDown.value--
-        }, 1000)
+          countDown.value--;
+        }, 1000);
       }
-    })
+    });
     return {
       dismissClicked,
       isAlertVisible,
       element,
       classes,
-    }
+    };
   },
-})
+});
 </script>
\ No newline at end of file