diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 3 | ||||
| -rw-r--r-- | src/js/date.js | 93 | ||||
| -rw-r--r-- | src/templates/date.template.html | 99 | ||||
| -rw-r--r-- | src/templates/main.template.html | 2 |
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"> |