Mercurial > templog
annotate web/views/set.tpl @ 488:4792e9910cde
watcher script
author | Matt Johnston <matt@ucc.asn.au> |
---|---|
date | Sun, 09 Feb 2014 11:41:13 +0800 |
parents | 931408ce71d9 |
children | 8318d50d766d |
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"> |
488 | 5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1"> |
483
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> |
487 | 7 <script src="jquery.mobile.custom.min.js"></script> |
482 | 8 <script> |
9 %include riot.min.js | |
10 </script> | |
11 | |
12 <style type="text/css"> | |
13 span.no_selection { | |
14 -webkit-user-select: none; // webkit (safari, chrome) browsers | |
15 -moz-user-select: none; // mozilla browsers | |
16 -khtml-user-select: none; // webkit (konqueror) browsers | |
17 } | |
18 | |
19 body { | |
488 | 20 font-family: sans-serif; |
482 | 21 } |
22 | |
23 input { | |
24 border: 2px solid transparent; | |
25 border-radius: 4px; | |
26 background-color: white; | |
27 border-color: black; | |
28 padding: 0; | |
488 | 29 font-size: 30pt; |
30 height: 34pt; | |
482 | 31 } |
32 | |
33 input[type="button"] { | |
488 | 34 width: 34pt; |
35 margin-left: 4pt; | |
36 -webkit-appearance: none; | |
37 -moz-appearance: none; | |
38 background:#fff; | |
39 vertical-align: center; | |
482 | 40 } |
41 | |
42 input[type="submit"] { | |
43 margin-top: 1em; | |
44 align: center; | |
488 | 45 width: 10em; |
482 | 46 } |
47 | |
487 | 48 input[type="text"], input[type="number"] { |
482 | 49 text-align: center; |
488 | 50 width: 4em; |
482 | 51 } |
52 | |
485 | 53 #savebox { |
488 | 54 vertical-align: center; |
485 | 55 width: 100%; |
56 } | |
57 | |
488 | 58 input[type="button"].onbutton { |
59 background: #ccc; | |
60 } | |
61 | |
62 input[type="button"].yesno { | |
63 width: 2.5em; | |
64 } | |
65 | |
66 input[type="button"]#savebutton { | |
67 width: 5em; | |
482 | 68 } |
69 | |
484 | 70 .modified { |
71 color: #d00; | |
72 font-weight: bold; | |
73 } | |
74 | |
482 | 75 .existing { |
488 | 76 margin-top: 10pt; |
482 | 77 } |
78 | |
79 </style> | |
80 <title>Set templog</title> | |
81 </head> | |
82 | |
83 | |
84 <script type="html/num_input"> | |
85 <div id="{id}"> | |
484 | 86 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}{unit}</span></span> |
482 | 87 <br/> |
487 | 88 <input type="number" class="input" name="input_{name}" /> |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
89 <input type="button" class="button_down" value="-"/> |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
90 <input type="button" class="button_up" value="+"/> |
482 | 91 </div> |
92 </script> | |
93 | |
94 <script type="html/yesno_button"> | |
95 <div id="{id}"> | |
484 | 96 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}</span></span> |
482 | 97 <br/> |
488 | 98 <input type="button" class="button_no yesno" value="No"/> |
99 <input type="button" class="button_yes yesno" value="Yes"/> | |
482 | 100 </div> |
101 </script> | |
102 | |
103 <script> | |
104 | |
485 | 105 function Setter(params, csrf_blob) { |
482 | 106 var self = $.observable(this); |
107 | |
108 self.params = params; | |
485 | 109 self.csrf_blob = csrf_blob |
482 | 110 |
111 $.each(self.params, function(idx, param) { | |
112 param.id = "param_id_" + idx; | |
484 | 113 param.oldvalue = param.value |
114 if (typeof(param.oldvalue) == "boolean") | |
115 { | |
116 param.oldvaluetext = param.oldvalue ? "Yes" : "No"; | |
117 } | |
118 else | |
119 { | |
120 param.oldvaluetext = param.oldvalue; | |
121 } | |
482 | 122 }); |
123 | |
484 | 124 self.edit = function(param, newvalue) { |
125 param.value = newvalue; | |
482 | 126 params[param.name] = param; |
127 self.trigger("edit", param); | |
128 } | |
129 | |
130 self.adjust = function(param, updown) { | |
131 // XXX increment | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
132 param.value += (param.amount*updown); |
482 | 133 self.trigger("edit", param); |
134 } | |
135 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
136 self.save = function() { |
485 | 137 self.trigger("status", "Saving...") |
138 | |
139 var post_json = {}; | |
140 post_json.csrf_blob = self.csrf_blob; | |
141 post_json.params = | |
142 self.params.map(function(v, idx, array) { | |
143 return { | |
144 name: v.name, | |
145 value: v.value | |
146 }; | |
147 }); | |
148 | |
149 var post_data = {data: JSON.stringify(post_json)}; | |
150 | |
151 var req = $.ajax({type: "POST", | |
487 | 152 url: "set/update", |
485 | 153 data: post_data}); |
154 | |
155 req.done(function(data, status, hdr) { | |
156 self.trigger("status", "Saved") | |
157 }); | |
158 | |
159 req.fail(function(data, status, hdr) { | |
160 self.trigger("status", | |
161 "Failed: " + status + "\n" + hdr.responseText) | |
162 }); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
163 } |
482 | 164 } |
165 | |
166 (function() { 'use strict'; | |
167 | |
168 var params = {{!inline_data}}; | |
485 | 169 var csrf_blob = "{{!csrf_blob}}"; |
488 | 170 var allowed = {{allowed}}; |
485 | 171 window.setter = new Setter(params, csrf_blob); |
482 | 172 |
173 var number_template = $("[type='html/num_input']").html(); | |
174 var button_template = $("[type='html/yesno_button']").html(); | |
175 | |
176 setter.on("add", add); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
177 |
482 | 178 setter.on("edit", function(param) |
179 { | |
180 var el = $("#" + param.id); | |
181 if (param.kind === "number") | |
182 { | |
484 | 183 set_text_state(el, param); |
482 | 184 } |
185 else if (param.kind === "yesno") | |
186 { | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
187 set_button_state(el, param.value); |
482 | 188 } |
484 | 189 var same; |
190 switch (typeof(param.oldvalue)) | |
191 { | |
192 case "boolean": | |
193 same = ((!param.value) == (!param.oldvalue)); | |
194 break; | |
195 case "number": | |
196 same = Math.abs(param.value - param.oldvalue) < 1e-3 * param.amount; | |
197 break; | |
198 default: | |
199 same = (param.value === param.oldvalue); | |
200 } | |
201 | |
202 $("#oldvalue", el).toggleClass("modified", !same); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
203 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
204 |
485 | 205 setter.on("status", function(status) { |
206 $('#status').text(status) | |
207 }) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
208 |
485 | 209 var root; |
482 | 210 |
485 | 211 window.onload = function() { |
212 // clear list and add new ones | |
213 root = $("#paramlist"); | |
482 | 214 |
485 | 215 root.empty() && $.each(setter.params, function (idx, p) { |
216 add(p); | |
217 }) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
218 |
488 | 219 if (!allowed) { |
220 $("#savebutton").attr("disabled", true); | |
221 $('#status').text("No cert") | |
222 } | |
223 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
224 $("#savebutton").click(function() { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
225 setter.save(); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
226 }) |
485 | 227 } |
482 | 228 |
484 | 229 function set_text_state(el, param) |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
230 { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
231 var input = $(".input", el); |
484 | 232 var s = Number(param.value).toFixed(param.digits) |
233 input.text(s).val(s) | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
234 } |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
235 |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
236 function set_button_state(el, value) |
482 | 237 { |
484 | 238 $(".button_yes", el).toggleClass("onbutton", value); |
239 $(".button_no", el).toggleClass("onbutton", !value); | |
482 | 240 } |
241 | |
242 function add(param) | |
243 { | |
244 if (param.kind === "number") | |
245 { | |
246 var el = $($.render(number_template, param)).appendTo(root); | |
247 var input = $(".input", el); | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
248 |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
249 input.keyup(function(e) { |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
250 if (e.which == 13) |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
251 { |
484 | 252 setter.edit(param, Number(this.value)); |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
253 } |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
254 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
255 |
484 | 256 input.blur(function(e) { |
257 setter.edit(param, Number(this.value)); | |
258 }); | |
259 | |
487 | 260 $(".button_up", el).on("vmousedown", function() { |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
261 setter.adjust(param, 1); |
484 | 262 this.blur() |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
263 }); |
487 | 264 $(".button_down", el).on("vmousedown", function() { |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
265 setter.adjust(param, -1); |
484 | 266 this.blur() |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
267 }); |
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
268 |
484 | 269 set_text_state(el, param); |
482 | 270 } |
271 else if (param.kind === "yesno") | |
272 { | |
273 var el = $($.render(button_template, param)).appendTo(root); | |
274 var button_yes = $(".button_yes", el); | |
275 var button_no = $(".button_no", el); | |
276 | |
487 | 277 button_yes.on("vmousedown", function() { |
484 | 278 setter.edit(param, true); |
279 this.blur() | |
482 | 280 }) |
281 | |
487 | 282 button_no.on("vmousedown", function() { |
484 | 283 setter.edit(param, false); |
284 this.blur() | |
482 | 285 }) |
286 | |
483
93af94e6bd9d
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
482
diff
changeset
|
287 set_button_state(el, param.value); |
482 | 288 } |
289 } | |
290 | |
291 })() | |
292 | |
487 | 293 |
294 | |
482 | 295 </script> |
296 | |
485 | 297 <body> |
298 | |
299 <section id="paramlist"> | |
300 </section> | |
301 | |
488 | 302 <span id="savebox"> |
485 | 303 <input type="button" id="savebutton" value="Save"/> |
488 | 304 <span id="status"></span> |
305 </span> | |
485 | 306 |
307 | |
308 </body> | |
309 | |
482 | 310 </html> |