Merge pull request #19 from rumd3x/feature/current-time

Display current server time on dashboard

Author: rumd3x

README.md

@@ -45,6 +45,12 @@ Retrieve information about crontab.
 http://your-host/api/info
 ```
 
+- `GET` Time<br/>
+Get current server date and time information.
+```
+http://your-host/api/time
+```
+
 - `GET` Jobs<br/>
 Retrieve a list of existing jobs.
 ```
@@ -106,7 +112,7 @@ http://your-host/api/jobs/{id}
 | active      | Boolean | If the job is enabled or not.            |
 
 ## To Do
-- Add current container time to web interface
+- Have more ideas...
 
 ## License
 

docs/dashboard.png

@@ -34,6 +34,7 @@
         <!-- Topbar -->
         <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
             <span class="navbar-brand">Docker Cronjob Manager</span>
+            <small>Server Time: {{ currentTime }}</small>
         </nav>
         <!-- End of Topbar -->
 
@@ -250,7 +251,7 @@ <h5 class="modal-title" id="exampleModalLabel">Job Management</h5>
                 <input beth-bind="formObject.cron" type="text" class="form-control" id="txtJobSchedule" name="cron" aria-describedby="jobScheduleHelp" placeholder="* * * * *">
                 <small id="jobScheduleHelp" class="form-text text-muted">The crontab schedule for this job. Click <a href="https://crontab.guru/" target="_blank">here</a> to create a crontab.</small>
             </div>
-            
+
             <div class="form-check">
               <input beth-bind="formObject.active" type="checkbox" class="form-check-input" id="ckbJobActive" name="active">
               <label class="form-check-label" for="ckbJobActive">Enable Job</label>
@@ -290,12 +291,14 @@ <h5 class="modal-title" id="exampleModalLabel">Job Management</h5>
   <script src="js/sb-admin-2.js"></script>
 
   <!-- Dashboard -->
+  <script src="modules/commons.js"></script>
   <script src="modules/dashboard/info.js"></script>
   <script src="modules/dashboard/find.js"></script>
   <script src="modules/dashboard/list.js"></script>
   <script src="modules/dashboard/form.js"></script>
   <script src="modules/dashboard/logs.js"></script>
   <script src="modules/dashboard/delete.js"></script>
+  <script src="modules/dashboard/time.js"></script>
 </body>
 
 </html>

public/index.html

@@ -47,18 +47,3 @@
   });
 
 })(jQuery); // End of use strict
-
-const makeToast = (type, message) => {
-  $.toast({
-      text: message,
-      icon: type,
-      showHideTransition: 'fade',
-      allowToastClose: false,
-      hideAfter: 3000,
-      stack: 50,
-      position: 'top-right',
-      textAlign: 'left',
-      loader: true,
-      loaderBg: '#FFFFFF',
-  });
-}

public/js/sb-admin-2.js

@@ -0,0 +1,22 @@
+const makeToast = (type, message) => {
+    $.toast({
+        text: message,
+        icon: type,
+        showHideTransition: 'fade',
+        allowToastClose: false,
+        hideAfter: 3000,
+        stack: 50,
+        position: 'top-right',
+        textAlign: 'left',
+        loader: true,
+        loaderBg: '#FFFFFF',
+    });
+}
+
+const formatDateTimeString = (date) => {
+    return new Date(Date.parse(date)).toLocaleString();
+}
+
+const formatServerTime = (date) => {
+    return new Date(Date.parse(date)).toLocaleString([], {hour: '2-digit', minute:'2-digit'});
+}

public/modules/commons.js

@@ -1,6 +1,5 @@
 const deleteJob = (job_id) => {
     findJobById(job_id, (job) => {
-        console.log(job);
         Swal.fire({
             title: `Deleting job: ${job.name} (id: ${job.id})`,
             text: "You are about to delete this job.",

public/modules/dashboard/delete.js

@@ -15,8 +15,4 @@ const getJobsList = () => {
     });
 }
 
-const formatDateTimeString = (date) => {
-    return new Date(Date.parse(date)).toLocaleString();
-}
-
 getJobsList();

public/modules/dashboard/list.js

@@ -0,0 +1,13 @@
+var currentTime = "";
+
+const getCurrentTime = () => {
+    $.get(`api/time`, (response) => {
+        currentTime = formatServerTime(response.data);
+    }).fail((xhr) => {
+        makeToast('error', xhr.responseJSON.message);
+    });
+
+    setTimeout(getCurrentTime, 60000);
+}
+
+getCurrentTime();

public/modules/dashboard/time.js

@@ -18,6 +18,11 @@ const register = (app) => {
         res.json({message: err.message});
     });
 
+    app.get("/api/time", async (req, res) => {
+        res.status(200);
+        res.json({"data": new Date(), "message": ""});
+    });
+
     app.get("/api/jobs", async (req, res) => {
         let jobs = await jobDao.list();