FUNCT Add date & time configuration as mockup

4 files changed, 196 insertions, 1 deletions

diff --git a/src/index.js b/src/index.js
index 0c34be4..5f640a8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,6 +20,7 @@ import { api } from 'agl-js-api';
 import * as bluetooth from './js/bluetooth';
 import * as wifi from './js/wifi';
 import * as wired from './js/wired';
+import * as date from './js/date';
 
 /* CSS */
 import './styles/app.scss';
@@ -27,9 +28,11 @@ import './styles/app.scss';
 window.bluetooth = bluetooth;
 window.wifi = wifi;
 window.wired = wired;
+window.date = date;
 
 api.init();
 app.init();
 bluetooth.init();
 wifi.init();
 wired.init();
+date.init();
diff --git a/src/js/date.js b/src/js/date.js
new file mode 100644
index 0000000..81f3dbc
--- /dev/null
+++ b/src/js/date.js
@@ -0,0 +1,93 @@
+import Mustache from 'mustache';
+import { load as load_template } from './templates';
+import * as app from './app';
+
+var monthNames = ["January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+
+var template;
+var page = {
+    date: {
+        days: [],
+        months: [],
+        years: [],
+        isDay: function() {
+            var now = new Date();
+            return now.getDate() === this;
+        },
+        getMonthName: function() {
+            return monthNames[this];
+        },
+        isMonth: function() {
+            var now = new Date();
+            return now.getMonth() === this;
+        },
+        isYear: function() {
+            var now = new Date();
+            return now.getFullYear() === this;
+        }
+    },
+    time: {
+        hours: [],
+        minutes: [],
+        ampm: ['AM', 'PM'],
+        isHour: function() {
+            var now = new Date();
+            return now.getHours()%12 === this;
+        },
+        isMinutes: function() {
+            var now = new Date();
+            return now.getMinutes() === this;
+        },
+        isAmpm: function (){
+            var now = new Date();
+            if( this === 'AM' && now.getHours() < 12 ) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+}
+
+function render(){
+    document.body.innerHTML = Mustache.render(template, page);
+}
+
+export function init() {
+    for ( var i=0; i<31; i++) {
+        page.date.days[i] = i+1;
+    };
+
+    for ( var i = 0; i < 50; i++){
+        page.date.years[i] = 2010 + i;
+    };
+
+    for ( var i = 0; i < 12; i++){
+        page.date.months[i] = i;
+    };
+
+    for ( var i=0; i<12; i++ ) {
+        page.time.hours[i] = i+1;
+    };
+
+    for ( var i=0; i<60; i++ ) {
+        page.time.minutes[i] = i
+    }
+
+    load_template('date.template.html').then(function(result) {
+        template = result;
+        Mustache.parse(template);
+    }, function(error) {
+        console.error('ERROR Loading date template', error);
+    });
+}
+
+export function show() {
+    render();
+}
+
+export function hide() {
+    app.show();
+}
\ No newline at end of file
diff --git a/src/templates/date.template.html b/src/templates/date.template.html
new file mode 100644
index 0000000..72d9b3c
--- /dev/null
+++ b/src/templates/date.template.html
@@ -0,0 +1,99 @@
+<div class="container">
+        <h2 class="my-5">
+            <div class="row">
+                <div class="col-1" onclick="date.hide()">
+                    <i class="fas fa-chevron-left"></i>
+                </div>
+                <div class="col-11">
+                    Date & Time
+                </div>
+            </div>
+        </h2>
+        <div clas="row">
+            <div class="col-12 my-5">
+                Date
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <form>
+                    <div class="form-row">
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #date.months }}
+                                    <option {{ #date.isMonth }}selected{{ /date.isMonth }} value="{{ . }}">
+                                        {{ date.getMonthName }}
+                                    </option>
+                                {{ /date.months }}
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #date.days }}
+                                    <option {{ #date.isDay }}selected{{ /date.isDay }} value="{{ . }}">
+                                        {{ . }}
+                                    </option>
+                                {{ /date.days }}
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #date.years }}
+                                    <option {{ #date.isYear }}selected{{ /date.isYear }} value="{{ . }}">
+                                        {{ . }}
+                                    </option>
+                                {{ /date.years }}
+                            </select>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div clas="row">
+            <div class="col-12 my-5">
+                Time
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <form>
+                    <div class="form-row">
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #time.hours }}
+                                    <option {{ #time.isHour }}selected{{ /time.isHour }} value="{{ . }}">
+                                        {{ . }}
+                                    </option>
+                                {{ /time.hours}}
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #time.minutes }}
+                                    <option {{ #time.isMinutes }}selected{{ /time.isMinutes }} value="{{ . }}">
+                                        {{ . }}
+                                    </option>
+                                {{ /time.minutes}}
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="form-control">
+                                {{ #time.ampm }}
+                                    <option {{ #time.isAmpm }}selected{{ /time.isAmpm }} value="{{ . }}">
+                                        {{ . }}
+                                    </option>
+                                {{ /time.ampm}}
+                            </select>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="row my-5">
+            <div class="col-12">
+                <button type="button" class="btn btn-primary btn-block" onclick="date.hide()">
+                    OK
+                </button>
+            </div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
index f121092..b030710 100644
--- a/src/templates/main.template.html
+++ b/src/templates/main.template.html
@@ -6,7 +6,7 @@
         <div class="col-1">
             <i class="fa fa-clock"></i>
         </div>
-        <div class="col-9">
+        <div class="col-9" onclick="window.date.show()">
             Date & Time
         </div>
         <div class="col-2 text-right">