Added date and time settings

Change-Id: I5dda4007a46a2eb945304b78d33a468aef8a829b
Signed-off-by: Jimmy Huang <jimmy.huang@intel.com>

diff --git a/css/style.css b/css/style.css
index 1792026..6854ec3 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -71,6 +71,10 @@
        max-width: 150px;
     text-align: center;
 }
+/* Date and Time */
+#button_datetime_apply, #button_datetime_cancel{
+    display: none;
+}
 /* make the button text so that it doesn't add the ellipsis */
 .device-action-button .ui-btn-inner {
     text-overflow: initial;

diff --git a/index.html b/index.html
index a423c61..00ae2a7 100644 (file)
--- a/index.html
+++ b/index.html
@@ -22,8 +22,10 @@
     <script type="text/javascript" src="./js/websocket.js"></script>
     <script type="text/javascript" src="./js/api-wifi.js"></script>
     <script type="text/javascript" src="./js/api-bluetooth.js"></script>
+    <script type="text/javascript" src="./js/api-datetime.js"></script>
     <script type="text/javascript" src="./js/panel-wifi.js"></script>
     <script type="text/javascript" src="./js/panel-bluetooth.js"></script>
+    <script type="text/javascript" src="./js/panel-datetime.js"></script>
     <link rel="stylesheet" href="./css/style.css" />
 </head>
 
@@ -50,6 +52,19 @@
                                </div>
                    </div>
                </div>
+
+               <div data-role="collapsible-set">
+                   <div data-role="collapsible" id="col_system" data-collapsed="false">
+                       <h3>System</h3>
+                               <div data-role="content">
+                                   <ul data-role="listview">
+                               <li>
+                                   <a href="#page_datetime" id="button_datetime_settings">Date and Time</a>
+                               </li>
+                                   </ul>
+                               </div>
+                   </div>
+               </div>
        </div>
 
        <!-- Wi-Fi Settings -->
@@ -168,6 +183,128 @@
         <div data-role="content" id="page_bluetooth_detail_content">
         </div>
     </div>
+
+       <!--  Date and Time Settings -->
+       <div data-role="page" id="page_datetime">
+               <div data-role="header" data-position="fixed">
+                       <a href="#main" id="page_datetime_button_back" data-icon="back">Back</a>
+                       <h1>Date and Time</h1>
+               </div>
+
+               <div data-role="content">
+                       <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
+                               <li data-role="fieldcontain">
+                                       <label for="input_time">Time:</label>
+                                       <input type="time" data-clear-btn="false" name="input_time" id="input_time" value="">
+                               </li>
+                       </ul>
+            <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
+                <li data-role="fieldcontain">
+                    <label for="input_date">Date:</label>
+                    <input type="date" data-clear-btn="false" name="input_date" id="input_date" value="">
+                </li>
+            </ul>
+                       <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
+                               <li data-role="fieldcontain">
+                                       <label for="select_timezone" class="select">Time zone:</label>
+                                       <select name="select_timezone" id="select_timezone">
+                                               <option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
+                                               <option value="America/Adak">(GMT-10:00) Hawaii-Aleutian</option>
+                                               <option value="Etc/GMT+10">(GMT-10:00) Hawaii</option>
+                                               <option value="Pacific/Marquesas">(GMT-09:30) Marquesas Islands</option>
+                                               <option value="Pacific/Gambier">(GMT-09:00) Gambier Islands</option>
+                                               <option value="America/Anchorage">(GMT-09:00) Alaska</option>
+                                               <option value="America/Ensenada">(GMT-08:00) Tijuana, Baja California</option>
+                                               <option value="Etc/GMT+8">(GMT-08:00) Pitcairn Islands</option>
+                                               <option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
+                                               <option value="America/Denver">(GMT-07:00) Mountain Time (US & Canada)</option>
+                                               <option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
+                                               <option value="America/Dawson_Creek">(GMT-07:00) Arizona</option>
+                                               <option value="America/Belize">(GMT-06:00) Saskatchewan, Central America</option>
+                                               <option value="America/Cancun">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
+                                               <option value="Chile/EasterIsland">(GMT-06:00) Easter Island</option>
+                                               <option value="America/Chicago">(GMT-06:00) Central Time (US & Canada)</option>
+                                               <option value="America/New_York">(GMT-05:00) Eastern Time (US & Canada)</option>
+                                               <option value="America/Havana">(GMT-05:00) Cuba</option>
+                                               <option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
+                                               <option value="America/Caracas">(GMT-04:30) Caracas</option>
+                                               <option value="America/Santiago">(GMT-04:00) Santiago</option>
+                                               <option value="America/La_Paz">(GMT-04:00) La Paz</option>
+                                               <option value="Atlantic/Stanley">(GMT-04:00) Faukland Islands</option>
+                                               <option value="America/Campo_Grande">(GMT-04:00) Brazil</option>
+                                               <option value="America/Goose_Bay">(GMT-04:00) Atlantic Time (Goose Bay)</option>
+                                               <option value="America/Glace_Bay">(GMT-04:00) Atlantic Time (Canada)</option>
+                                               <option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
+                                               <option value="America/Araguaina">(GMT-03:00) UTC-3</option>
+                                               <option value="America/Montevideo">(GMT-03:00) Montevideo</option>
+                                               <option value="America/Miquelon">(GMT-03:00) Miquelon, St. Pierre</option>
+                                               <option value="America/Godthab">(GMT-03:00) Greenland</option>
+                                               <option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
+                                               <option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
+                                               <option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
+                                               <option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
+                                               <option value="Atlantic/Azores">(GMT-01:00) Azores</option>
+                                               <option value="Europe/Belfast">(GMT) Greenwich Mean Time : Belfast</option>
+                                               <option value="Europe/Dublin">(GMT) Greenwich Mean Time : Dublin</option>
+                                               <option value="Europe/Lisbon">(GMT) Greenwich Mean Time : Lisbon</option>
+                                               <option value="Europe/London">(GMT) Greenwich Mean Time : London</option>
+                                               <option value="Africa/Abidjan">(GMT) Monrovia, Reykjavik</option>
+                                               <option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
+                                               <option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
+                                               <option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
+                                               <option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
+                                               <option value="Africa/Windhoek">(GMT+01:00) Windhoek</option>
+                                               <option value="Asia/Beirut">(GMT+02:00) Beirut</option>
+                                               <option value="Africa/Cairo">(GMT+02:00) Cairo</option>
+                                               <option value="Asia/Gaza">(GMT+02:00) Gaza</option>
+                                               <option value="Africa/Blantyre">(GMT+02:00) Harare, Pretoria</option>
+                                               <option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
+                                               <option value="Europe/Minsk">(GMT+02:00) Minsk</option>
+                                               <option value="Asia/Damascus">(GMT+02:00) Syria</option>
+                                               <option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
+                                               <option value="Africa/Addis_Ababa">(GMT+03:00) Nairobi</option>
+                                               <option value="Asia/Tehran">(GMT+03:30) Tehran</option>
+                                               <option value="Asia/Dubai">(GMT+04:00) Abu Dhabi, Muscat</option>
+                                               <option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
+                                               <option value="Asia/Kabul">(GMT+04:30) Kabul</option>
+                                               <option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
+                                               <option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
+                                               <option value="Asia/Kolkata">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
+                                               <option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
+                                               <option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
+                                               <option value="Asia/Novosibirsk">(GMT+06:00) Novosibirsk</option>
+                                               <option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
+                                               <option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
+                                               <option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
+                                               <option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
+                                               <option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
+                                               <option value="Australia/Perth">(GMT+08:00) Perth</option>
+                                               <option value="Australia/Eucla">(GMT+08:45) Eucla</option>
+                                               <option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
+                                               <option value="Asia/Seoul">(GMT+09:00) Seoul</option>
+                                               <option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
+                                               <option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
+                                               <option value="Australia/Darwin">(GMT+09:30) Darwin</option>
+                                               <option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
+                                               <option value="Australia/Hobart">(GMT+10:00) Hobart</option>
+                                               <option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
+                                               <option value="Australia/Lord_Howe">(GMT+10:30) Lord Howe Island</option>
+                                               <option value="Etc/GMT-11">(GMT+11:00) Solomon Is., New Caledonia</option>
+                                               <option value="Asia/Magadan">(GMT+11:00) Magadan</option>
+                                               <option value="Pacific/Norfolk">(GMT+11:30) Norfolk Island</option>
+                                               <option value="Asia/Anadyr">(GMT+12:00) Anadyr, Kamchatka</option>
+                                               <option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
+                                               <option value="Etc/GMT-12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
+                                               <option value="Pacific/Chatham">(GMT+12:45) Chatham Islands</option>
+                                               <option value="Pacific/Tongatapu">(GMT+13:00) Nuku\'alofa</option>
+                                               <option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
+                                       </select>
+                               </li>
+                       </ul>
+                       <div data-role="button" id="button_datetime_apply">Apply</div>
+                       <div data-role="button" id="button_datetime_cancel">Cancel</div>
+               </div>
+       </div>
        
 </body>
 </html>

diff --git a/js/api-datetime.js b/js/api-datetime.js
new file mode 100644 (file)
index 0000000..a36e668
--- /dev/null
+++ b/js/api-datetime.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2013, Intel Corporation.
+ *
+ * This program is licensed under the terms and conditions of the
+ * Apache License, version 2.0.  The full text of the Apache License is at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+/* Namespace */
+var settings = settings || {};
+settings.datetime = settings.datetime || {};
+
+/* Module */
+settings.datetime = (function() {
+
+    function setTime(new_time, success_cb, error_cb) {
+        wsAPI.sendRequest(WS_REQUEST_TYPE.DATETIME, 'setTime', new_time, success_cb, error_cb);
+    }
+
+    function setTimezone(new_timezone, success_cb, error_cb) {
+        wsAPI.sendRequest(WS_REQUEST_TYPE.DATETIME, 'setTimezone', new_timezone, success_cb, error_cb);
+    }
+
+    return {
+        setTime: setTime,
+        setTimezone: setTimezone
+    };
+})();
\ No newline at end of file

diff --git a/js/main.js b/js/main.js
index 8641ed9..f90d1c9 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -33,11 +33,13 @@
                 /* TODO: unsubscribe events if neccessary */
                 if (data.prevPage.attr('id') === 'page_wifi') console.log('Wi-Fi settings exited');
                 else if (data.prevPage.attr('id') === 'page_bluetooth') console.log('Bluetooth settings exited');
+                else if (data.prevPage.attr('id') === 'page_datetime') console.log('Date and Time settings exited');
             });
 
             /* Different sub panels */
             wifiPanelInit();
             bluetoothPanelInit();
+            datetimePanelInit();
         } catch (e) {
             showMsg('Error', 'Javascript Exception Caught: ' + e);
         }

diff --git a/js/panel-datetime.js b/js/panel-datetime.js
new file mode 100644 (file)
index 0000000..a818c53
--- /dev/null
+++ b/js/panel-datetime.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright (c) 2013, Intel Corporation.
+ *
+ * This program is licensed under the terms and conditions of the
+ * Apache License, version 2.0.  The full text of the Apache License is at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+function datetimePanelInit() {
+    var clockTimer = null;
+    var timeChanged = false;
+    var timezoneChanged = false;
+
+    /* Display Settings Panel */
+    $('#page_datetime').on('pageshow', function() {
+        console.log('Date and time settings entered');
+        datetimePageReload();
+    });
+
+    $('#input_time').on('change', function(event, data) {
+        timeChanged = true;
+        var time = this.value;
+        console.log('time value changed: ' + time);
+        datetimeStopTimer();
+        datetimeShowOption();
+    });
+
+    $('#input_time').on('focus', function(event, data) {
+        datetimeStopTimer();
+        datetimeShowOption();
+    });
+
+    $('#input_date').on('change', function(event, data) {
+        timeChanged = true;
+        var date = this.value;
+        console.log('date value changed: ' + date);
+        datetimeShowOption();
+    });
+
+    $('#select_timezone').on('change', function(event, data) {
+        /* ignore change due to getLocalTimezone() */
+        if (data === false) return;
+
+        timezoneChanged = true;
+        var timezone = this.value;
+        console.log('timezone value changed: ' + timezone);
+        datetimeShowOption();
+    });
+
+    $('#button_datetime_apply').on('click', function(event, data) {
+        if (timeChanged) {
+            timeChanged = false;
+            updateSystemTime();
+        }
+        if (timezoneChanged) {
+            timezoneChanged = false;
+            updateSystemTimezone();
+        }
+
+        dateChanged = false;
+        datetimeHideOption();
+    });
+
+    $('#button_datetime_cancel').on('click', function(event, data) {
+        datetimePageReload();
+    });
+
+    $('#page_datetime_button_back').on('click', function() {
+        datetimeStopTimer();
+    });
+}
+
+function datetimePageReload() {
+    var current = null;
+    timeChanged = false;
+    timezoneChanged = false;
+
+    datetimeHideOption();
+
+    current = new Date();
+    console.log('Local datetime is ' + current.toISOString());
+
+    timeStr = datetimeGetStr(current.getHours()) + ':';
+    timeStr += datetimeGetStr(current.getMinutes()) + ':';
+    timeStr += datetimeGetStr(current.getSeconds());
+    $('#input_time').val(timeStr);
+
+    dateStr = datetimeGetStr(current.getFullYear()) + '-';
+    dateStr += datetimeGetStr(current.getMonth()) + '-';
+    dateStr += datetimeGetStr(current.getDate());
+    $('#input_date').val(dateStr);
+
+    datetimeStartTimer();
+
+    if (tizen.time) {
+        var alltimezones = tizen.time.getAvailableTimezones();
+        console.log('Supports ' + alltimezones.length + ' time zones.');
+        console.log('Local timezone: ' + tizen.time.getLocalTimezone());
+        if (alltimezones.length > 0) {
+            $('#select_timezone').empty();
+            for (var i = 0; i < alltimezones.length; i++) {
+                $('#select_timezone').append(new Option(alltimezones[i], alltimezones[i]));
+            }
+        }
+        $('#select_timezone').val(tizen.time.getLocalTimezone()).trigger('change', false);
+    }
+}
+
+function datetimeShowOption() {
+    $('#button_datetime_apply').show();
+    $('#button_datetime_cancel').show();
+}
+
+function datetimeHideOption() {
+    $('#button_datetime_apply').hide();
+    $('#button_datetime_cancel').hide();
+}
+
+function datetimeStartTimer() {
+    console.log('Start clock timer');
+    clockTimer = setInterval(dateTimeUpdateClock, 1000);
+}
+
+function datetimeStopTimer() {
+    if (clockTimer) {
+        console.log('Stop clock timer');
+        clearInterval(clockTimer);
+    }
+}
+
+function dateTimeUpdateClock() {
+    var current = new Date();
+
+    var timeStr = datetimeGetStr(current.getHours()) + ':';
+    timeStr += datetimeGetStr(current.getMinutes()) + ':';
+    timeStr += datetimeGetStr(current.getSeconds());
+    $('#input_time').val(timeStr);
+}
+
+function updateSystemTime() {
+    var time = $('#input_date').val() + ' ' + $('#input_time').val();
+
+    var new_time = new Date(time);
+    console.log('System time set to: ' + time);
+
+    settings.datetime.setTime(new_time, function() {
+        console.log('System time set successfully');
+    }, function(e) {
+        showMsg('Error', 'Cannot set system time: ' + e);
+    });
+}
+
+function updateSystemTimezone() {
+    var value = $('#select_timezone').val();
+    settings.datetime.setTimezone(value, function() {
+        console.log('System timezone is set to: ' + value);
+    }, function(e) {
+        showMsg('Error', 'Cannot set system timezone: ' + e);
+    });
+}
+
+function datetimeGetStr(value) {
+    if (0 < value && value < 10) {
+        return '0' + value;
+    } else {
+        return '' + value;
+    }
+}
\ No newline at end of file

diff --git a/js/websocket.js b/js/websocket.js
index bd4aa12..b8e4d4e 100644 (file)
--- a/js/websocket.js
+++ b/js/websocket.js
@@ -303,9 +303,10 @@ var wsAPI = (function() {
                                 return;
                             }
                             break;
+                        case WS_REQUEST_TYPE.DATETIME:
+                            break;
                         case WS_REQUEST_TYPE.DISPLAY:
                         case WS_REQUEST_TYPE.SOUND:
-                        case WS_REQUEST_TYPE.DATETIME:
                         case WS_REQUEST_TYPE.LOCALE:
                             call.errorCB('Request not implemented');
                             return;