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