Mercurial > templog
annotate web/views/set.tpl @ 483:93af94e6bd9d
param editor roughly working
| author | Matt Johnston <matt@ucc.asn.au> |
|---|---|
| date | Tue, 04 Feb 2014 23:39:06 +0800 |
| parents | 9950ffa9a79b |
| children | cbe14244a372 |
| rev | line source |
|---|---|
| 482 | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| 3 <head> | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=8,minimum-scale=0.1"> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
6 <script src="jquery-2.1.0.min.js"></script> |
| 482 | 7 <script> |
| 8 %include riot.min.js | |
| 9 </script> | |
| 10 | |
| 11 <style type="text/css"> | |
| 12 span.no_selection { | |
| 13 -webkit-user-select: none; // webkit (safari, chrome) browsers | |
| 14 -moz-user-select: none; // mozilla browsers | |
| 15 -khtml-user-select: none; // webkit (konqueror) browsers | |
| 16 } | |
| 17 | |
| 18 body { | |
| 19 font-family: "sans-serif"; | |
| 20 } | |
| 21 | |
| 22 input { | |
| 23 border: 2px solid transparent; | |
| 24 border-radius: 4px; | |
| 25 background-color: white; | |
| 26 border-color: black; | |
| 27 padding: 0; | |
| 28 font-size: 80%; | |
| 29 } | |
| 30 | |
| 31 input[type="button"] { | |
| 32 width: 4em; | |
| 33 height: 4em; | |
| 34 margin-left: 0.5em; | |
| 35 } | |
| 36 | |
| 37 input[type="submit"] { | |
| 38 width: 10em; | |
| 39 height: 4em; | |
| 40 margin-top: 1em; | |
| 41 align: center; | |
| 42 } | |
| 43 | |
| 44 input[type="text"] { | |
| 45 height: 4em; | |
| 46 text-align: center; | |
| 47 } | |
| 48 | |
| 49 .onbutton { | |
| 50 background-color: #cdf; | |
| 51 } | |
| 52 | |
| 53 .existing { | |
| 54 margin-top: 1em; | |
| 55 font-size: 70%; | |
| 56 } | |
| 57 | |
| 58 </style> | |
| 59 <title>Set templog</title> | |
| 60 </head> | |
| 61 | |
| 62 <body> | |
| 63 | |
| 64 <section id="paramlist"> | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
65 </section> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
66 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
67 <div id="jsontest"> |
| 482 | 68 </div> |
| 69 | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
70 <input type="button" id="savebutton" value="Save"/> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
71 |
| 482 | 72 </body> |
| 73 | |
| 74 <script type="html/num_input"> | |
| 75 <div id="{id}"> | |
| 76 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span>{unit}</span> | |
| 77 <br/> | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
78 <input type="text" class="input" name="input_{name}" /> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
79 <input type="button" class="button_down" value="-"/> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
80 <input type="button" class="button_up" value="+"/> |
| 482 | 81 </div> |
| 82 </script> | |
| 83 | |
| 84 <script type="html/yesno_button"> | |
| 85 <div id="{id}"> | |
| 86 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span></span> | |
| 87 <br/> | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
88 <input type="button" class="button_no" value="No"/> |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
89 <input type="button" class="button_yes" value="Yes"/> |
| 482 | 90 </div> |
| 91 </script> | |
| 92 | |
| 93 <script> | |
| 94 | |
| 95 function Setter(params) { | |
| 96 var self = $.observable(this); | |
| 97 | |
| 98 self.params = params; | |
| 99 | |
| 100 $.each(self.params, function(idx, param) { | |
| 101 param.id = "param_id_" + idx; | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
102 param.oldvalue = param.value; |
| 482 | 103 }); |
| 104 | |
| 105 self.edit = function(param) { | |
| 106 params[param.name] = param; | |
| 107 self.trigger("edit", param); | |
| 108 } | |
| 109 | |
| 110 self.adjust = function(param, updown) { | |
| 111 // XXX increment | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
112 param.value += (param.amount*updown); |
| 482 | 113 self.trigger("edit", param); |
| 114 } | |
| 115 | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
116 self.save = function() { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
117 var j = JSON.stringify(self.params); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
118 self.trigger("saved", j) |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
119 } |
| 482 | 120 } |
| 121 | |
| 122 (function() { 'use strict'; | |
| 123 | |
| 124 var params = {{!inline_data}}; | |
| 125 window.setter = new Setter(params); | |
| 126 | |
| 127 var root = $("#paramlist"); | |
| 128 | |
| 129 var number_template = $("[type='html/num_input']").html(); | |
| 130 var button_template = $("[type='html/yesno_button']").html(); | |
| 131 | |
| 132 setter.on("add", add); | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
133 |
| 482 | 134 setter.on("edit", function(param) |
| 135 { | |
| 136 var el = $("#" + param.id); | |
| 137 if (param.kind === "number") | |
| 138 { | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
139 set_text_state(el, param.value); |
| 482 | 140 } |
| 141 else if (param.kind === "yesno") | |
| 142 { | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
143 set_button_state(el, param.value); |
| 482 | 144 } |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
145 }); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
146 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
147 setter.on("saved", function(j) { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
148 $("#jsontest").text(j); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
149 }); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
150 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
151 |
| 482 | 152 |
| 153 $.route(function(hash) { | |
| 154 | |
| 155 // clear list and add new ones | |
| 156 root.empty() && $.each(setter.params, function (idx, p) { | |
| 157 add(p); | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
158 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
159 $("#savebutton").click(function() { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
160 setter.save(); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
161 }) |
| 482 | 162 }) |
| 163 }) | |
| 164 | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
165 function set_text_state(el, value) |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
166 { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
167 var input = $(".input", el); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
168 input.text(value).val(value) |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
169 } |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
170 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
171 function set_button_state(el, value) |
| 482 | 172 { |
| 173 var button_yes = $(".button_yes", el); | |
| 174 var button_no = $(".button_no", el); | |
| 175 if (value) | |
| 176 { | |
| 177 button_yes.addClass("onbutton"); | |
| 178 button_no.removeClass("onbutton"); | |
| 179 } | |
| 180 else | |
| 181 { | |
| 182 button_no.addClass("onbutton"); | |
| 183 button_yes.removeClass("onbutton"); | |
| 184 } | |
| 185 } | |
| 186 | |
| 187 function add(param) | |
| 188 { | |
| 189 if (param.kind === "number") | |
| 190 { | |
| 191 var el = $($.render(number_template, param)).appendTo(root); | |
| 192 var input = $(".input", el); | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
193 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
194 input.keyup(function(e) { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
195 if (e.which == 13) |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
196 { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
197 param.value = Number(this.value); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
198 setter.edit(param); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
199 } |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
200 }); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
201 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
202 $(".button_up", el).click(function() { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
203 setter.adjust(param, 1); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
204 }); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
205 $(".button_down", el).click(function() { |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
206 setter.adjust(param, -1); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
207 }); |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
208 |
|
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
209 set_text_state(el, param.value); |
| 482 | 210 } |
| 211 else if (param.kind === "yesno") | |
| 212 { | |
| 213 var el = $($.render(button_template, param)).appendTo(root); | |
| 214 var button_yes = $(".button_yes", el); | |
| 215 var button_no = $(".button_no", el); | |
| 216 | |
| 217 button_yes.click(function() { | |
| 218 param.value = true; | |
| 219 setter.edit(param); | |
| 220 }) | |
| 221 | |
| 222 button_no.click(function() { | |
| 223 param.value = false; | |
| 224 setter.edit(param); | |
| 225 }) | |
| 226 | |
|
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
227 set_button_state(el, param.value); |
| 482 | 228 } |
| 229 } | |
| 230 | |
| 231 })() | |
| 232 | |
| 233 </script> | |
| 234 | |
| 235 </html> |