Mercurial > templog
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); } }