Mercurial > templog
annotate web/views/set.tpl @ 485:d68af9e84485
working
author | Matt Johnston <matt@ucc.asn.au> |
---|---|
date | Thu, 06 Feb 2014 22:45:16 +0800 |
parents | 4a51e2bf689b |
children | ae5efca89001 |
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 | |
485 | 49 #savebox { |
50 align: center; | |
51 width: 100%; | |
52 } | |
53 | |
482 | 54 .onbutton { |
55 background-color: #cdf; | |
56 } | |
57 | |
484 | 58 .modified { |
59 color: #d00; | |
60 font-weight: bold; | |
61 } | |
62 | |
482 | 63 .existing { |
64 margin-top: 1em; | |
65 font-size: 70%; | |
66 } | |
67 | |
68 </style> | |
69 <title>Set templog</title> | |
70 </head> | |
71 | |
72 | |
73 <script type="html/num_input"> | |
74 <div id="{id}"> | |
484 | 75 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}{unit}</span></span> |
482 | 76 <br/> |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
77 <input type="text" class="input" name="input_{name}" /> |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
78 <input type="button" class="button_down" value="-"/> |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
79 <input type="button" class="button_up" value="+"/> |
482 | 80 </div> |
81 </script> | |
82 | |
83 <script type="html/yesno_button"> | |
84 <div id="{id}"> | |
484 | 85 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}</span></span> |
482 | 86 <br/> |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
87 <input type="button" class="button_no" value="No"/> |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
88 <input type="button" class="button_yes" value="Yes"/> |
482 | 89 </div> |
90 </script> | |
91 | |
92 <script> | |
93 | |
485 | 94 function Setter(params, csrf_blob) { |
482 | 95 var self = $.observable(this); |
96 | |
97 self.params = params; | |
485 | 98 self.csrf_blob = csrf_blob |
482 | 99 |
100 $.each(self.params, function(idx, param) { | |
101 param.id = "param_id_" + idx; | |
484 | 102 param.oldvalue = param.value |
103 if (typeof(param.oldvalue) == "boolean") | |
104 { | |
105 param.oldvaluetext = param.oldvalue ? "Yes" : "No"; | |
106 } | |
107 else | |
108 { | |
109 param.oldvaluetext = param.oldvalue; | |
110 } | |
482 | 111 }); |
112 | |
484 | 113 self.edit = function(param, newvalue) { |
114 param.value = newvalue; | |
482 | 115 params[param.name] = param; |
116 self.trigger("edit", param); | |
117 } | |
118 | |
119 self.adjust = function(param, updown) { | |
120 // XXX increment | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
121 param.value += (param.amount*updown); |
482 | 122 self.trigger("edit", param); |
123 } | |
124 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
125 self.save = function() { |
485 | 126 self.trigger("status", "Saving...") |
127 | |
128 var post_json = {}; | |
129 post_json.csrf_blob = self.csrf_blob; | |
130 post_json.params = | |
131 self.params.map(function(v, idx, array) { | |
132 return { | |
133 name: v.name, | |
134 value: v.value | |
135 }; | |
136 }); | |
137 | |
138 var post_data = {data: JSON.stringify(post_json)}; | |
139 | |
140 var req = $.ajax({type: "POST", | |
141 url: "setparams", | |
142 data: post_data}); | |
143 | |
144 req.done(function(data, status, hdr) { | |
145 self.trigger("status", "Saved") | |
146 }); | |
147 | |
148 req.fail(function(data, status, hdr) { | |
149 self.trigger("status", | |
150 "Failed: " + status + "\n" + hdr.responseText) | |
151 }); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
152 } |
482 | 153 } |
154 | |
155 (function() { 'use strict'; | |
156 | |
157 var params = {{!inline_data}}; | |
485 | 158 var csrf_blob = "{{!csrf_blob}}"; |
159 window.setter = new Setter(params, csrf_blob); | |
482 | 160 |
161 var number_template = $("[type='html/num_input']").html(); | |
162 var button_template = $("[type='html/yesno_button']").html(); | |
163 | |
164 setter.on("add", add); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
165 |
482 | 166 setter.on("edit", function(param) |
167 { | |
168 var el = $("#" + param.id); | |
169 if (param.kind === "number") | |
170 { | |
484 | 171 set_text_state(el, param); |
482 | 172 } |
173 else if (param.kind === "yesno") | |
174 { | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
175 set_button_state(el, param.value); |
482 | 176 } |
484 | 177 var same; |
178 switch (typeof(param.oldvalue)) | |
179 { | |
180 case "boolean": | |
181 same = ((!param.value) == (!param.oldvalue)); | |
182 break; | |
183 case "number": | |
184 same = Math.abs(param.value - param.oldvalue) < 1e-3 * param.amount; | |
185 break; | |
186 default: | |
187 same = (param.value === param.oldvalue); | |
188 } | |
189 | |
190 $("#oldvalue", el).toggleClass("modified", !same); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
191 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
192 |
485 | 193 setter.on("status", function(status) { |
194 $('#status').text(status) | |
195 }) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
196 |
485 | 197 var root; |
482 | 198 |
485 | 199 window.onload = function() { |
200 // clear list and add new ones | |
201 root = $("#paramlist"); | |
482 | 202 |
485 | 203 root.empty() && $.each(setter.params, function (idx, p) { |
204 add(p); | |
205 }) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
206 |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
207 $("#savebutton").click(function() { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
208 setter.save(); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
209 }) |
485 | 210 } |
482 | 211 |
484 | 212 function set_text_state(el, param) |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
213 { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
214 var input = $(".input", el); |
484 | 215 var s = Number(param.value).toFixed(param.digits) |
216 input.text(s).val(s) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
217 } |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
218 |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
219 function set_button_state(el, value) |
482 | 220 { |
484 | 221 $(".button_yes", el).toggleClass("onbutton", value); |
222 $(".button_no", el).toggleClass("onbutton", !value); | |
482 | 223 } |
224 | |
225 function add(param) | |
226 { | |
227 if (param.kind === "number") | |
228 { | |
229 var el = $($.render(number_template, param)).appendTo(root); | |
230 var input = $(".input", el); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
231 |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
232 input.keyup(function(e) { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
233 if (e.which == 13) |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
234 { |
484 | 235 setter.edit(param, Number(this.value)); |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
236 } |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
237 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
238 |
484 | 239 input.blur(function(e) { |
240 setter.edit(param, Number(this.value)); | |
241 }); | |
242 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
243 $(".button_up", el).click(function() { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
244 setter.adjust(param, 1); |
484 | 245 this.blur() |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
246 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
247 $(".button_down", el).click(function() { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
248 setter.adjust(param, -1); |
484 | 249 this.blur() |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
250 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
251 |
484 | 252 set_text_state(el, param); |
482 | 253 } |
254 else if (param.kind === "yesno") | |
255 { | |
256 var el = $($.render(button_template, param)).appendTo(root); | |
257 var button_yes = $(".button_yes", el); | |
258 var button_no = $(".button_no", el); | |
259 | |
260 button_yes.click(function() { | |
484 | 261 setter.edit(param, true); |
262 this.blur() | |
482 | 263 }) |
264 | |
265 button_no.click(function() { | |
484 | 266 setter.edit(param, false); |
267 this.blur() | |
482 | 268 }) |
269 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
270 set_button_state(el, param.value); |
482 | 271 } |
272 } | |
273 | |
274 })() | |
275 | |
276 </script> | |
277 | |
485 | 278 <body> |
279 | |
280 <section id="paramlist"> | |
281 </section> | |
282 | |
283 <div id="savebox"> | |
284 <input type="button" id="savebutton" value="Save"/> | |
285 | |
286 <div id="status"> | |
287 </div> | |
288 </div> | |
289 | |
290 | |
291 </body> | |
292 | |
482 | 293 </html> |