diff web/views/set.tpl @ 183:177f616893e6

param editor roughly working
author Matt Johnston <matt@ucc.asn.au>
date Tue, 04 Feb 2014 23:39:06 +0800
parents e731c0d30b09
children cbe14244a372
line wrap: on
line diff
--- a/web/views/set.tpl	Tue Feb 04 22:49:16 2014 +0800
+++ b/web/views/set.tpl	Tue Feb 04 23:39:06 2014 +0800
@@ -1,7 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
-<script src="jquery-2.1.0.js"></script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=8,minimum-scale=0.1">
+<script src="jquery-2.1.0.min.js"></script>
 <script>
 %include riot.min.js
 </script>
@@ -60,19 +62,22 @@
 <body>
 
 <section id="paramlist">
+</section>
+
+<div id="jsontest">
 </div>
 
+<input type="button" id="savebutton" value="Save"/>
+
 </body>
 
 <script type="html/num_input">
 <div id="{id}">
 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span>{unit}</span>
 <br/>
-<input type="text" id="input" name="input_{name}" />
-<!--
-<input type="button" class="button_down" id="down" name="down_{name}" value="-" "/>
-<input type="button" class="button_up" id="up" name="up_{name}" value="+" "/>
--->
+<input type="text" class="input" name="input_{name}" />
+<input type="button" class="button_down" value="-"/>
+<input type="button" class="button_up" value="+"/>
 </div>
 </script>
 
@@ -80,8 +85,8 @@
 <div id="{id}">
 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span></span>
 <br/>
-<input type="button" class="button_no" id="no_{name}" name="no_{name}" value="No"/>
-<input type="button" class="button_yes" id="yes_{name}" name="yes_{name}" value="Yes"/>
+<input type="button" class="button_no" value="No"/>
+<input type="button" class="button_yes" value="Yes"/>
 </div>
 </script>
 
@@ -94,6 +99,7 @@
 
     $.each(self.params, function(idx, param) {
         param.id = "param_id_" + idx;
+        param.oldvalue = param.value;
     });
 
     self.edit = function(param) {
@@ -103,9 +109,14 @@
 
     self.adjust = function(param, updown) {
         // XXX increment
+        param.value += (param.amount*updown);
         self.trigger("edit", param);
     }
 
+    self.save = function() {
+        var j = JSON.stringify(self.params);
+        self.trigger("saved", j)
+    }
 }
 
 (function() { 'use strict';
@@ -119,28 +130,45 @@
 var button_template = $("[type='html/yesno_button']").html();
 
 setter.on("add", add);
+
 setter.on("edit", function(param)
 {
     var el = $("#" + param.id);
     if (param.kind === "number")
     {
-        $(".input", el).text(param.value).value(param.value);
+        set_text_state(el, param.value);
     }
     else if (param.kind === "yesno")
     {
-        set_state(el, param.value);
+        set_button_state(el, param.value);
     }
-})
+});
+
+setter.on("saved", function(j) {
+    $("#jsontest").text(j);
+});
+
+
 
 $.route(function(hash) {
 
 // clear list and add new ones
 root.empty() && $.each(setter.params, function (idx, p) {
     add(p);
+
+    $("#savebutton").click(function() {
+        setter.save();
+    })
 })
 })
 
-function set_state(el, value)
+function set_text_state(el, value)
+{
+    var input = $(".input", el);
+    input.text(value).val(value)
+}
+
+function set_button_state(el, value)
 {
     var button_yes = $(".button_yes", el);
     var button_no = $(".button_no", el);
@@ -162,6 +190,23 @@
     {
         var el = $($.render(number_template, param)).appendTo(root);
         var input = $(".input", el);
+
+        input.keyup(function(e) {
+            if (e.which == 13)
+            {
+                param.value = Number(this.value);
+                setter.edit(param);
+            }
+        });
+
+        $(".button_up", el).click(function() {
+            setter.adjust(param, 1);
+        });
+        $(".button_down", el).click(function() {
+            setter.adjust(param, -1);
+        });
+
+        set_text_state(el, param.value);
     }
     else if (param.kind === "yesno")
     {
@@ -179,7 +224,7 @@
             setter.edit(param);
         })
 
-        set_state(el, param.value);
+        set_button_state(el, param.value);
     }
 }