webapp: Added ntp settings screen

webapp/src/components/NavBar.vue

@@ -35,6 +35,11 @@
                   >Network Settings</router-link
                 >
               </li>
+              <li>
+                <router-link class="dropdown-item" to="/settings/ntp"
+                  >NTP Settings</router-link
+                >
+              </li>
             </ul>
           </li>
           <li class="nav-item dropdown">

webapp/src/components/NtpAdminView.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>NTP Settings</h1>
+    </div>
+    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+      {{ this.alertMessage }}
+    </BootstrapAlert>
+    <form @submit="saveNtpConfig">
+      <div class="card">
+        <div class="card-header text-white bg-primary">NTP Configuration</div>
+        <div class="card-body">
+          <div class="row mb-3">
+            <label for="inputNtpServer" class="col-sm-2 col-form-label"
+              >Time Server:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputNtpServer"
+                maxlength="32"
+                placeholder="Time Server"
+                v-model="ntpConfigList.ntp_server"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputTimezone" class="col-sm-2 col-form-label"
+              >Timezone:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputTimezone"
+                maxlength="32"
+                placeholder="Timezone"
+                v-model="ntpConfigList.ntp_timezone"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary mb-3">Save</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
+
+export default {
+  components: {
+    BootstrapAlert,
+  },
+  data() {
+    return {
+      ntpConfigList: [],
+      alertMessage: "",
+      alertType: "info",
+      showAlert: false,
+    };
+  },
+  created() {
+    this.getNtpConfig();
+  },
+  methods: {
+    getNtpConfig() {
+      fetch("/api/ntp/config")
+        .then((response) => response.json())
+        .then((data) => (this.ntpConfigList = data));
+    },
+    saveNtpConfig(e) {
+      e.preventDefault();
+
+      let formData = new FormData();
+      formData.append("data", JSON.stringify(this.ntpConfigList));
+
+      fetch("/api/ntp/config", {
+        method: "POST",
+        body: formData,
+      })
+        .then(function (response) {
+          if (response.status != 200) {
+            throw response.status;
+          } else {
+            return response.json();
+          }
+        })
+        .then(
+          function (response) {
+            this.alertMessage = response.message;
+            this.alertType = response.type;
+            this.showAlert = true;
+          }.bind(this)
+        );
+    },
+  },
+};
+</script>

webapp/src/router/index.js

@@ -5,6 +5,7 @@ import NetworkInfoView from '@/components/NetworkInfoView'
 import SystemInfoView from '@/components/SystemInfoView'
 import NtpInfoView from '@/components/NtpInfoView'
 import NetworkAdminView from '@/components/NetworkAdminView'
+import NtpAdminView from '@/components/NtpAdminView'
 
 const routes = [{
         path: '/',
@@ -35,6 +36,11 @@ const routes = [{
         path: '/settings/network',
         name: 'Network Settings',
         component: NetworkAdminView
+    },
+    {
+        path: '/settings/ntp',
+        name: 'NTP Settings',
+        component: NtpAdminView
     }
 ];