Merge pull request #25 from nightscout/feature/settings-ui

Browser Setting Storage
nightscout · Jul 22, 2014 · a1599ab · a1599ab
2 parents e177102 + 9774ec2
commit a1599ab
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -4,6 +4,6 @@
   "dependencies": {
     "d3": "3.4.3",
     "jquery": "2.1.0",
-    "bootstrap": "~3.2.0"
+    "jQuery-Storage-API": "~1.7.2"
   }
 }
diff --git a/static/css/drawer.css b/static/css/drawer.css
@@ -47,6 +47,7 @@ display: block;
     float: left;
     width: 50px;
 }
+
 h1, h2, h3, h4 {
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }

diff --git a/static/index.html b/static/index.html
@@ -46,22 +46,24 @@ <h1>Nightscout</h1>
         </div>
 
         <div id="drawer">
-            <form action="/save-settings" method="post">
-                <h4>Global Settings</h4>
+            <form action="/save-settings" method="post" 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>Local Preferences</h4>
-                <fieldset>
-                    <legend>Mesurement Units</legend>
-                    <input type="radio" name="units" id="mg-dl" value="mg/dl" checked><label for="mg-dl">mg/dl</label>
-                    <input type="radio" name="units" id="mmol" value="mmol"><label for="mmol">mmol</label>
+                <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</label>
                 </fieldset>
 
-                <input type="submit" value="Save" />
+                <input type="submit" id="save" value="Save">
             </form>
         </div>
 
@@ -72,8 +74,48 @@ <h4>Local Preferences</h4>
         <script src="/socket.io/socket.io.js"></script>
         <script src="/bower_components/d3/d3.min.js"></script>
         <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+        <script src="/bower_components/jQuery-Storage-API/jquery.storageapi.min.js"></script>
         <script src="/js/dropdown.js"></script>
         <script src="/js/client.js?a"></script>
         <script src="/js/drawer.js"></script>
+        <script>
+$(function() {
+    var storage = $.localStorage;
+    var browserSettings = {
+        "units": storage.get("units")
+    };
+    if (browserSettings.units == "mmol") {
+        $('#mmol-browser').prop('checked', true);
+    } else {
+        $('#mgdl-browser').prop('checked', true);
+    }
+
+    $("input#save").click(function() {
+        var unitsBrowser = $("input:radio[name=units-browser]:checked").val();
+        storeInBrowser({
+            "units": unitsBrowser
+        });
+
+        /* var formAction = $("#settings-form").attr("action");
+        var alertHigh = $("input#alertHigh").val();
+        var alertLow = $("input#alertLow").val();
+        storeOnServer({
+            "alertHigh": alertHigh,
+            "alertLow": alertLow
+        }); */
+
+        event.preventDefault();
+    });
+
+    function storeInBrowser(json) {
+        if (json.units) storage.set("units", json.units);
+    }
+
+    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
+    }
+});
+        </script>
     </body>
 </html>