aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-09 09:43:26 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit2b87580fc132872266c07b76455192539953b697 (patch)
tree2a0f5e591aaa84a5dc2b76d52826f031fbb52c5b /src
parent29051c70c53999fa9beec83fbd09ec17fd244539 (diff)
FUNCT Add date & time configuration as mockup
Diffstat (limited to 'src')
-rw-r--r--src/index.js3
-rw-r--r--src/js/date.js93
-rw-r--r--src/templates/date.template.html99
-rw-r--r--src/templates/main.template.html2
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">