137 lines
5.6 KiB
HTML
137 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
|
|
<title>IntuiClock Config</title>
|
|
<link rel="stylesheet" href="css/slate.min.css">
|
|
<script type="text/javascript" src="js/slate.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<form id="main-form">
|
|
<div class="item-container">
|
|
<div class="item-container-header">Time & Date</div>
|
|
<div class="item-container-content">
|
|
<label class="item">
|
|
Seconds Hand
|
|
<input id="input-seconds-hand" type="checkbox" class="item-toggle" name="seconds-hand" checked>
|
|
</label>
|
|
<label class="item">
|
|
Date Format
|
|
<select id="input-date-format" name="date-format" class="item-select">
|
|
<option class="item-select-option" selected value="t">10 Aug 2015</option>
|
|
<option class="item-select-option" value="d">10/08/2015</option>
|
|
<option class="item-select-option" value="m">08/10/2015</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="item-container-footer">Disable the seconds hand to reduce battery use.</div>
|
|
</div>
|
|
|
|
<div class="item-container">
|
|
<div class="item-container-header">Appearance</div>
|
|
<div class="item-container-content">
|
|
<label class="item">
|
|
Battery Indicator
|
|
<input id="input-battery-indicator" type="checkbox" class="item-toggle" name="battery-indicator" checked>
|
|
</label>
|
|
<label class="item">
|
|
Wide Window
|
|
<input id="input-wide-layout" type="checkbox" class="item-toggle" name="wide-layout">
|
|
</label>
|
|
<label class="item">
|
|
XEN Style
|
|
<input id="input-xen-style" type="checkbox" class="item-toggle" name="xen-style">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-container">
|
|
<div class="button-container">
|
|
<input id="button-submit" type="button" class="item-button" value="SAVE">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
|
|
<script>
|
|
function getConfigData() {
|
|
var input_seconds_hand = document.getElementById('input-seconds-hand'),
|
|
input_battery_indicator = document.getElementById('input-battery-indicator'),
|
|
input_date_format = document.getElementById('input-date-format'),
|
|
input_wide_layout = document.getElementById('input-wide-layout'),
|
|
input_xen_style = document.getElementById('input-xen-style');
|
|
|
|
var options = {
|
|
'seconds_hand': input_seconds_hand.checked,
|
|
'battery_indicator': input_battery_indicator.checked,
|
|
'date_format': input_date_format.value,
|
|
'wide_layout': input_wide_layout.checked,
|
|
'xen_style': input_xen_style.checked
|
|
};
|
|
|
|
// Save for next launch
|
|
localStorage['seconds_hand'] = options['seconds_hand'];
|
|
localStorage['battery_indicator'] = options['battery_indicator'];
|
|
localStorage['date_format'] = options['date_format'];
|
|
localStorage['wide_layout'] = options['wide_layout'];
|
|
localStorage['xen_style'] = options['xen_style'];
|
|
|
|
// console.log('Got options: ' + JSON.stringify(options));
|
|
return options;
|
|
}
|
|
|
|
function getQueryParam(variable, defaultValue) {
|
|
var query = location.search.substring(1),
|
|
vars = query.split('&');
|
|
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split('=');
|
|
if (pair[0] === variable) {
|
|
return decodeURIComponent(pair[1]);
|
|
}
|
|
}
|
|
|
|
return defaultValue || false;
|
|
}
|
|
|
|
var button_submit = document.getElementById('button-submit');
|
|
button_submit.addEventListener('click', function() {
|
|
// console.log('Submit');
|
|
|
|
// Set the return URL depending on the runtime environment
|
|
var return_to = getQueryParam('return_to', 'pebblejs://close#');
|
|
document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
|
|
});
|
|
|
|
(function() {
|
|
var input_seconds_hand = document.getElementById('input-seconds-hand'),
|
|
input_battery_indicator = document.getElementById('input-battery-indicator'),
|
|
input_date_format = document.getElementById('input-date-format'),
|
|
input_wide_layout = document.getElementById('input-wide-layout'),
|
|
input_xen_style = document.getElementById('input-xen-style');
|
|
|
|
if (localStorage['seconds_hand']) {
|
|
input_seconds_hand.checked = JSON.parse(localStorage['seconds_hand']);
|
|
}
|
|
|
|
if (localStorage['battery_indicator']) {
|
|
input_battery_indicator.checked = JSON.parse(localStorage['battery_indicator']);
|
|
}
|
|
|
|
if (localStorage['date_format']) {
|
|
input_date_format.value = localStorage['date_format'];
|
|
}
|
|
|
|
if (localStorage['wide_layout']) {
|
|
input_wide_layout.checked = JSON.parse(localStorage['wide_layout']);
|
|
}
|
|
|
|
if (localStorage['xen_style']) {
|
|
input_xen_style.checked = JSON.parse(localStorage['xen_style']);
|
|
}
|
|
})();
|
|
</script>
|
|
</html>
|