From 855ee19cdeafd4ead9b4dac36677b11582a2973d Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sun, 17 Apr 2022 23:53:11 +0200
Subject: [PATCH] webapp: added info page to show current time settings

---
 webapp/src/components/NavBar.vue      |  5 ++
 webapp/src/components/NtpInfoView.vue | 79 +++++++++++++++++++++++++++
 webapp/src/router/index.js            |  9 ++-
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/NtpInfoView.vue

diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 6eaea40..7487ea1 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -59,6 +59,11 @@
                   >Network</router-link
                 >
               </li>
+              <li>
+                <router-link class="dropdown-item" to="/info/ntp"
+                  >NTP</router-link
+                >
+              </li>
             </ul>
           </li>
           <li class="nav-item">
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
new file mode 100644
index 0000000..bbc1e66
--- /dev/null
+++ b/webapp/src/components/NtpInfoView.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>NTP Info</h1>
+    </div>
+    <div class="bg-light p-5 rounded">
+      <div class="card">
+        <div class="card-header text-white bg-primary">
+          Configuration Summary
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <table class="table table-hover table-condensed">
+              <tbody>
+                <tr>
+                  <th>Server</th>
+                  <td>{{ ntpDataList.ntp_server }}</td>
+                </tr>
+                <tr>
+                  <th>Timezone</th>
+                  <td>{{ ntpDataList.ntp_timezone }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header text-white bg-primary">Current Time</div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <table class="table table-hover table-condensed">
+              <tbody>
+                <tr>
+                  <th>Status</th>
+                  <td
+                    class="badge"
+                    :class="{
+                      'bg-danger': !ntpDataList.ntp_status,
+                      'bg-success': ntpDataList.ntp_status,
+                    }"
+                  >
+                    <span v-if="ntpDataList.ntp_status">synced</span>
+                    <span v-else>not synced</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Local Time</th>
+                  <td>{{ ntpDataList.ntp_localtime }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ntpDataList: [],
+    };
+  },
+  created() {
+    this.getNtpInfo();
+  },
+  methods: {
+    getNtpInfo() {
+      fetch("/api/ntp/status")
+        .then((response) => response.json())
+        .then((data) => (this.ntpDataList = data));
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index bc85ab6..abe159f 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -3,10 +3,10 @@ import HomeView from '@/components/HomeView'
 import AboutView from '@/components/AboutView'
 import NetworkInfoView from '@/components/NetworkInfoView'
 import SystemInfoView from '@/components/SystemInfoView'
+import NtpInfoView from '@/components/NtpInfoView'
 import NetworkAdminView from '@/components/NetworkAdminView'
 
-const routes = [
-    {
+const routes = [{
         path: '/',
         name: 'Home',
         component: HomeView
@@ -26,6 +26,11 @@ const routes = [
         name: 'System',
         component: SystemInfoView
     },
+    {
+        path: '/info/ntp',
+        name: 'NTP',
+        component: NtpInfoView
+    },
     {
         path: '/settings/network',
         name: 'Network Settings',