bckelley/cgm-remote-monitor
1
0
Fork 0
mirror of https://github.com/bckelley/cgm-remote-monitor.git synced 2026-08-24 03:14:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup:

Browse Source 
* Removing duplicate functions.
* Reorganization of ui-utils.js.
* Early preparation for eventual inclusion of server side settings
storage.
* Adding ` />` to `<img>` and `<input>` tags.
This commit is contained in:
Brian Hanifin
2014-07-24 18:32:02 -07:00
parent 79f91b0487
commit fa9e0e55e7
4 changed files with 205 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/drawer.css
+28 -4
View File
@@ -46,18 +46,42 @@ form {
margin: 0;
padding: 0 10px;
}
fieldset.numbers input {
.serverSettings {
display: none;
}
fieldset {
margin: 0.5em 0 1em 0;
}
legend {
font-size: 1.1em;
}
dl {
margin: 0 0 1em 0;
}
dl:last-child {
margin-bottom: 0;
}
dd {
margin-left: 0;
}
dd.numbers input {
text-align: right;
width: 50px;
}
fieldset.numbers label {
display: block;
dd.numbers label {
display: block;
float: left;
width: 50px;
}
h1, h2, h3, h4 {
h1, legend,
#about .appName,
#about .version {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
font-weight: bold;
}
#toolbar {
static/index.html
+39 -44
View File
@@ -54,61 +54,56 @@
<div id="drawer">
<form id="settings-form">
<!--
<h4>Server Defaults</h4>
<fieldset class="numbers">
<legend>Alert Range</legend>
<label for="alertHigh">High</label><input id="alertHigh" name="alertHigh" value="180" type="text">
<label for="alertLow">Low</label> <input id="alertLow" name="alertLow" value="80" type="text">
</fieldset>
-->
<h4>Browser Preferences</h4>
<fieldset class="radio">
<legend>Units</legend>
<input type="radio" name="units-browser" id="mgdl-browser" value="mg/dl" checked><label for="mgdl-browser">mg/dL</label><br />
<input type="radio" name="units-browser" id="mmol-browser" value="mmol"><label for="mmol-browser">mmol/L</label>
</fieldset>
<fieldset class="toggle">
<legend>Night Mode <a class="tip" original-title="When enabled the page will be dimmed from 10pm - 6am."><i class="icon-info-circled"></i></a></legend>
<input type="checkbox" name="nightmode-browser" id="nightmode-browser"><label for="nightmode-browser">Enable</label>
<fieldset class="browserSettings">
<legend>Settings</legend>
<dl class="radio">
<dt>Units</dt>
<dd><input type="radio" name="units-browser" id="mgdl-browser" value="mg/dl" checked /><label for="mgdl-browser">mg/dL</label><br />
<dd><input type="radio" name="units-browser" id="mmol-browser" value="mmol" /><label for="mmol-browser">mmol/L</label>
</dl>
<dl class="toggle">
<dt>Night Mode <a class="tip" original-title="When enabled the page will be dimmed from 10pm - 6am."><i class="icon-info-circled"></i></a></dt>
<dd><input type="checkbox" name="nightmode-browser" id="nightmode-browser" /><label for="nightmode-browser">Enable</label></dd>
</dl>
</fieldset>
<input type="submit" id="save" value="Save">
<input type="submit" id="save" value="Save" />
<div class="experiments">
<h4>Experiments</h4>
<fieldset style="text-align:center; vertical-align:middle;">
<legend>Try a Favicon</legend>
<a class="iconToggle tip" href="#" original-title="round1.png"><img src="/images/round1.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="round2.png"><img src="/images/round2.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="round3.png"><img src="/images/round3.png" style="width:32px; height:32px"></a>
<fieldset class="experiments">
<legend>Experiments</legend>
<div style="text-align:center; vertical-align:middle;">
<b>Try a New Favicon</b><br />
<a class="iconToggle tip" href="#" original-title="round1.png"><img src="/images/round1.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="round2.png"><img src="/images/round2.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="round3.png"><img src="/images/round3.png" style="width:32px; height:32px" /></a>
<br />
<a class="iconToggle tip" href="#" original-title="logo1.png"><img src="/images/logo1.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="logo2.png"><img src="/images/logo2.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="logo1.png"><img src="/images/logo1.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="logo2.png"><img src="/images/logo2.png" style="width:32px; height:32px" /></a>
<br />
<a class="iconToggle tip" href="#" original-title="silhouette.png"><img src="/images/silhouette.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="eyes.png"><img src="/images/eyes.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="silhouette.png"><img src="/images/silhouette.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="eyes.png"><img src="/images/eyes.png" style="width:32px; height:32px" /></a>
<br />
<a class="iconToggle tip" href="#" original-title="drop1.png"><img src="/images/drop1.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="drop2.png"><img src="/images/drop2.png" style="width:32px; height:32px"></a>
<a class="iconToggle tip" href="#" original-title="drop3.png"><img src="/images/drop3.png" style="width:32px; height:32px"></a>
</fieldset>
<a class="iconToggle tip" href="#" original-title="drop1.png"><img src="/images/drop1.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="drop2.png"><img src="/images/drop2.png" style="width:32px; height:32px" /></a>
<a class="iconToggle tip" href="#" original-title="drop3.png"><img src="/images/drop3.png" style="width:32px; height:32px" /></a>
</div>
<fieldset style="text-align:center; vertical-align:middle;">
<legend>Try a Toolbar Icon</legend>
<a class="toolbarIconToggle tip" href="#" original-title="logo1.png"><img src="/images/logo1.png" style="width:32px; height:32px"></a>
<a class="toolbarIconToggle tip" href="#" original-title="logo2.png"><img src="/images/logo2.png" style="width:32px; height:32px"></a>
</fieldset>
</div>
<div style="text-align:center; vertical-align:middle;">
<b>Try a New Logo</b><br />
<a class="toolbarIconToggle tip" href="#" original-title="logo1.png"><img src="/images/logo1.png" style="width:32px; height:32px" /></a>
<a class="toolbarIconToggle tip" href="#" original-title="logo2.png"><img src="/images/logo2.png" style="width:32px; height:32px" /></a>
</div>
</fieldset>
<div id="about">
<span class="appName"></span>
v<span class="version"></span>
<fieldset id="about">
<legend>About</legend>
<div class="appName"></div>
<div>version <span class="version"></span></div>
<br />
<a href="http://nightscout.info"><img src="http://img.shields.io/badge/discuss-nightscout-000000.svg" /></a>
<a href="http://github.com/nightscout/cgm-remote-monitor"><img src="http://img.shields.io/badge/fork_me-on_github-blue.svg" /></a>
<img src="http://img.shields.io/badge/license-mit-999999.svg" />
</div>
</fieldset>
</form>
</div>
static/js/client.js
+2 -16
View File
@@ -1,8 +1,6 @@
(function () {
"use strict";
var browserSettings = getBrowserSettings();
var retrospectivePredictor = true,
latestSGV,
treatments,
@@ -67,19 +65,6 @@
.attr('class', 'y axis');
function getBrowserSettings() {
var storage = $.localStorage;
var settings = {
"units": storage.get("units"),
"nightMode": storage.get("nightMode")
};
// default nightmode to true
if (typeof(settings.nightMode) === 'undefined' || settings.nightMode == null) {
settings.nightMode = true;
}
return settings;
}
// lixgbg: Convert mg/dL BG value to metric mmol
function scaleBg(bg) {
if (browserSettings.units == "mmol") {
@@ -770,7 +755,8 @@
if (querystring.mute != "true") {
audio.play();
} else {
alert("Alarm has muted per your request.")
// Disabled as this displays and alert every minute. :(
//alert("Alarm has muted per your request.");
}
}
static/js/ui-utils.js
+136 -79
View File
@@ -1,4 +1,97 @@
var drawerIsOpen = false;
var browserStorage = $.localStorage;
var defaultSettings = {
"units": "mg/dl",
"nightMode": true
}
var app = {};
$.ajax("/api/v1/status.json", {
success: function (xhr) {
app = {
"name": xhr.name,
"version": xhr.version,
"apiEnabled": xhr.apiEnabled // This isn't defined yet.
}
}
}).done(function() {
$(".appName").text(app.name);
$(".version").text(app.version);
if (app.apiEnabled) {
$(".serverSettings").show();
}
});
function getBrowserSettings(storage) {
var json = {
"units": storage.get("units"),
"nightMode": storage.get("nightMode")
};
// Default browser units to server units if undefined.
json.units = setDefault(json.units, serverSettings.units);
console.log("browserSettings.units: " + json.units);
if (json.units == "mmol") {
$("#mmol-browser").prop("checked", true);
} else {
$("#mgdl-browser").prop("checked", true);
}
json.nightMode = setDefault(json.nightMode, defaultSettings.nightMode);
$("#nightmode-browser").prop("checked", json.nightMode);
return json;
}
function getServerSettings() {
var json = {
"units": Object()
};
json.units = setDefault(json.units, defaultSettings.units);
console.log("serverSettings.units: " + json.units);
if (json.units == "mmol") {
$("#mmol-server").prop("checked", true);
} else {
$("#mgdl-server").prop("checked", true);
}
return json;
}
function setDefault(variable, defaultValue) {
if (typeof(variable) === "object") {
return defaultValue;
}
return variable;
}
function jsonIsNotEmpty(json) {
var jsonAsString = JSON.stringify(json);
jsonAsString.replace(/\s/g, "");
return (jsonAsString != "{}")
}
function storeInBrowser(json, storage) {
if (json.units) storage.set("units", json.units);
if (json.nightMode == true) {
storage.set("nightMode", true)
} else {
storage.set("nightMode", false)
}
event.preventDefault();
}
function storeOnServer(json) {
if (jsonIsNotEmpty(json)) {
alert("TO DO: add storeOnServer() logic.");
// reference: http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
//var dataString = "name="+ name + "&email=" + email + "&phone=" + phone;
//alert (dataString);return false;
/* $.ajax({
type: "POST",
url: "/api/v1/settings",
data: json
});
*/
}
}
function getQueryParms() {
@@ -28,16 +121,6 @@ function openDrawer() {
$("#drawer").animate({right: "0"}, 300);
drawerIsOpen = true;
}
$("#drawerToggle").click(function(event) {
if(drawerIsOpen) {
closeDrawer();
drawerIsOpen = false;
} else {
openDrawer();
drawerIsOpen = true;
}
event.preventDefault();
});
function closeToolbar() {
@@ -50,6 +133,24 @@ function openToolbar() {
$("#toolbar").animate({marginTop: "-0px"}, 200);
});
}
var querystring = getQueryParms();
var serverSettings = getServerSettings();
var browserSettings = getBrowserSettings(browserStorage);
$("#drawerToggle").click(function(event) {
if(drawerIsOpen) {
closeDrawer();
drawerIsOpen = false;
} else {
openDrawer();
drawerIsOpen = true;
}
event.preventDefault();
});
$("#hideToolbar").click(function(event) {
if (drawerIsOpen) {
closeDrawer(function() {
@@ -65,81 +166,37 @@ $("#showToolbar").find("a").click(function(event) {
event.preventDefault();
});
$("input#save").click(function() {
storeInBrowser({
"units": $("input:radio[name=units-browser]:checked").val(),
"nightMode": $("#nightmode-browser").prop("checked")
}, browserStorage);
var querystring = getQueryParms();
storeOnServer({
//"units": $("input:radio[name=units-server]:checked").val()
});
// Tooltips can remain in the way on touch screens.
var notTouchScreen = (!isTouch());
if (notTouchScreen) {
$('.tip').tipsy();
} else {
// Drawer info tips should be displayed on touchscreens.
$('#drawer').find(".tip").tipsy();
}
$.fn.tipsy.defaults = {
fade: true,
gravity: "n",
opacity: 0.75
}
event.preventDefault();
// reload
var url = window.location.href;
url = url.replace(/#$/, ""); // stops # in url from stopping form submission
window.location = url;
});
$(function() {
var storage = $.localStorage;
var browserSettings = {
"units": storage.get("units"),
"nightMode": storage.get("nightMode")
};
if (browserSettings.units == "mmol") {
$('#mmol-browser').prop('checked', true);
// Tooltips can remain in the way on touch screens.
var notTouchScreen = (!isTouch());
if (notTouchScreen) {
$(".tip").tipsy();
} else {
$('#mgdl-browser').prop('checked', true);
// Drawer info tips should be displayed on touchscreens.
$("#drawer").find(".tip").tipsy();
}
if (typeof(browserSettings.nightMode) === 'undefined' || browserSettings.nightMode == null) {
browserSettings.nightMode = true;
$.fn.tipsy.defaults = {
fade: true,
gravity: "n",
opacity: 0.75
}
$('#nightmode-browser').prop('checked', browserSettings.nightMode);
$("input#save").click(function() {
storeInBrowser({
"units": $("input:radio[name=units-browser]:checked").val(),
"nightMode": $('#nightmode-browser').prop('checked')
});
/* var formAction = $("#settings-form").attr("action");
var alertHigh = $("input#alertHigh").val();
var alertLow = $("input#alertLow").val();
storeOnServer({
"alertHigh": alertHigh,
"alertLow": alertLow
}); */
event.preventDefault();
// reload
var url = window.location.href;
url = url.replace(/#$/, ""); // stops # in url from stopping form submission
window.location = url;
});
function storeInBrowser(json) {
if (json.units) storage.set("units", json.units);
if (json.nightMode == true) {
storage.set("nightMode", true)
} else {
storage.set("nightMode", false)
}
event.preventDefault();
}
function storeOnServer(json) {
alert("TO DO: add storeOnServer() logic.\n" + json.alertHigh + "\n" + json.alertLow);
// reference: http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
}
$.ajax('/api/v1/status.json', {
success: function (xhr) {
$('.appName').text(xhr.name);
$('.version').text(xhr.version);
}
});
});