From e30c43a66a31d3a6bbc7f08cb0a3ea4ccd2ab1dd Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sun, 17 Apr 2022 04:03:54 +0200
Subject: [PATCH] webapp: first try of post implementation (not working)

---
 webapp/src/components/NetworkAdminView.vue    |  43 +++++++-
 .../components/partials/BootstrapAlert.vue    | 104 ++++++++++++++++++
 2 files changed, 145 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/partials/BootstrapAlert.vue

diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index 44c5775..baeea94 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -3,7 +3,10 @@
     <div class="page-header">
       <h1>Network Settings</h1>
     </div>
-    <form>
+    <!--<BootstrapAlert v-bind:variant="this.infoType" v-bind:show="this.infoShow">-->
+      {{ this.infoMessage }}
+    <!--</BootstrapAlert>-->
+    <form @submit="saveNetworkConfig">
       <div class="card">
         <div class="card-header text-white bg-primary">WiFi Configuration</div>
         <div class="card-body">
@@ -153,16 +156,25 @@
           </div>
         </div>
       </div>
+      <button type="submit" class="btn btn-primary mb-3">Save</button>
     </form>
-    {{ networkConfigList }}
   </div>
 </template>
 
 <script>
+import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
+
 export default {
+  components: {
+    BootstrapAlert,
+  },
   data() {
     return {
       networkConfigList: [],
+      test: {},
+      infoMessage: "",
+      infoType: "info",
+      infoShow: false,
     };
   },
   created() {
@@ -174,6 +186,33 @@ export default {
         .then((response) => response.json())
         .then((data) => (this.networkConfigList = data));
     },
+    saveNetworkConfig(e) {
+      e.preventDefault();
+
+      let formData = new FormData();
+      formData.append("data", JSON.stringify(this.networkConfigList));
+
+      fetch("/api/network/config", {
+        method: "POST",
+        body: formData,
+      })
+        .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;
+          }.bind(this)
+        );
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/partials/BootstrapAlert.vue b/webapp/src/components/partials/BootstrapAlert.vue
new file mode 100644
index 0000000..3c9a836
--- /dev/null
+++ b/webapp/src/components/partials/BootstrapAlert.vue
@@ -0,0 +1,104 @@
+<template>
+  <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
+    <slot />
+    <button
+      v-if="dismissible"
+      type="button"
+      class="btn-close"
+      data-bs-dismiss="alert"
+      :aria-label="dismissLabel"
+      @click="dismissClicked"
+    />
+  </div>
+</template>
+
+<script>
+import {computed, defineComponent, onBeforeUnmount, ref, watch} from 'vue'
+import Alert from 'bootstrap/js/dist/alert'
+export default defineComponent({
+  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'},
+  },
+  emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
+  setup(props, {emit}) {
+    const element = 0; // = ref<HTMLElement>()
+    const instance = 0; // = ref<Alert>()
+    const classes = computed(() => ({
+      [`alert-${props.variant}`]: props.variant,
+      'show': props.modelValue,
+      'alert-dismissible': props.dismissible,
+      'fade': props.modelValue,
+    }))
+    let _countDownTimeout = 0
+    const parseCountDown = (value) => {
+      if (typeof value === 'boolean') {
+        return 0
+      }
+      const numberValue = 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)
+    onBeforeUnmount(() => {
+      clearCountDownInterval()
+      instance.value?.dispose()
+      instance.value = undefined
+    })
+    const parsedModelValue = computed(() => {
+      if (props.modelValue === true) {
+        return true
+      }
+      if (props.modelValue === false) return false
+      if ((props.modelValue || 0) < 1) {
+        // Boolean will always return false for the above comparison
+        return false
+      }
+      return !!props.modelValue
+    })
+    const handleShowAndModelChanged = () => {
+      countDown.value = parseCountDown(props.modelValue)
+      if ((parsedModelValue.value || props.show) && !instance.value)
+        instance.value = new Alert(element.value)
+    }
+    const dismissClicked = () => {
+      if (typeof props.modelValue === 'boolean') {
+        emit('update:modelValue', false)
+      } else {
+        emit('update:modelValue', 0)
+      }
+      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)
+      if (newValue > 0) {
+        _countDownTimeout = setTimeout(() => {
+          countDown.value--
+        }, 1000)
+      }
+    })
+    return {
+      dismissClicked,
+      isAlertVisible,
+      element,
+      classes,
+    }
+  },
+})
+</script>
\ No newline at end of file