config.html (9050B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/css/slate.min.css"> 7 <style> 8 .title { 9 padding: 15px 10px; 10 text-transform: uppercase; 11 font-family: "PT Sans", sans-serif; 12 font-size: 1.2em; 13 font-weight: 500; 14 color: 0x888888; 15 text-align: center; 16 } 17 18 .item-draggable-list .delete-item { 19 right: 45px; 20 } 21 </style> 22 <script> 23 function getRawQueryParam(variable, defaultValue) { 24 var query = location.search.substring(1); 25 var vars = query.split("&"); 26 for (var i = 0; i < vars.length; i++) { 27 var pair = vars[i].split("="); 28 if (pair[0] === variable) { 29 return pair[1]; 30 } 31 } 32 return defaultValue; 33 } 34 35 function getQueryParam(variable, defaultValue) { 36 return decodeURIComponent(getRawQueryParam(variable, defaultValue)); 37 } 38 39 function readAndEncodeList(elementId) { 40 var cn = document.getElementById(elementId).childNodes; 41 var result = []; 42 var i; 43 for (i = 0; i < cn.length; i++) { 44 if (cn[i].className === "item") { 45 result.push(encodeURIComponent(cn[i].childNodes[0].nodeValue)); 46 } 47 } 48 return result; 49 } 50 51 function onSubmit() { 52 // Set the return URL depending on the runtime environment 53 var return_to = getQueryParam("return_to", "pebblejs://close#"); 54 var sign_enabled = document.getElementById("signEnable").checked; 55 var options = { 56 "url": document.getElementById("url").value, 57 "dataField": document.getElementById("dataField").value, 58 "signAlgorithm": document.getElementById("signAlgorithm").value, 59 "signFieldFormat": document.getElementById("signFieldFormat").value, 60 "signFieldName": document.getElementById("signFieldName").value, 61 "signKey": document.getElementById("signKey").value, 62 "signKeyFormat": document.getElementById("signKeyFormat").value, 63 "wakeupTime" : document.getElementById("wakeupEnable").checked 64 ? document.getElementById("wakeupTime").value : "-1", 65 "extraFields" : readAndEncodeList("extraFields").join(","), 66 } 67 68 if (document.getElementById("resendEverything").checked) { 69 options.resend = true; 70 } 71 72 document.location = return_to + encodeURIComponent(JSON.stringify(options)); 73 } 74 75 function updateSignVisibility() { 76 document.getElementById("signFields").style.display 77 = document.getElementById("signEnable").checked 78 ? "block" : "none"; 79 } 80 81 function updateWakeupVisibility() { 82 document.getElementById("wakeupFields").style.display 83 = document.getElementById("wakeupEnable").checked 84 ? "block" : "none"; 85 } 86 </script> 87 </head> 88 <body> 89 <div class="item-container"> 90 <h1 class="title">Battery-</h1> 91 </div> 92 93 <div class="item-container"> 94 <div class="item-container-header">Endpoint URL</div> 95 <div class="item-container-content"> 96 <label class="item"> 97 <input type="text" class="item-input" name="url" id="url" placeholder="http://example.com/post/path"> 98 </label> 99 <label class="item"> 100 Restart sending everthing 101 <input type="checkbox" class="item-toggle" name="resendEverything" id="resendEverything"> 102 </label> 103 </div> 104 </div> 105 106 <div class="item-container"> 107 <div class="item-container-header">Data Field Name</div> 108 <div class="item-container-content"> 109 <label class="item"> 110 <input type="text" class="item-input" name="dataField" id="dataField"> 111 </label> 112 </div> 113 </div> 114 115 <div class="item-container"> 116 <div class="item-container-header">Auto Wakeup</div> 117 <div class="item-container-content"> 118 <label class="item"> 119 Enable Auto Wakeup 120 <input type="checkbox" class="item-toggle" name="wakeupEnable" id="wakeupEnable" onchange="updateWakeupVisibility();"> 121 </label> 122 <div id="wakeupFields"> 123 <label class="item"> 124 Wake-up time 125 <input type="time" class="item-time" name="wakeupTime" id="wakeupTime" value="00:00"> 126 </label> 127 </div> 128 </div> 129 </div> 130 131 <div class="item-container"> 132 <div class="item-container-header">Data Signature</div> 133 <div class="item-container-content"> 134 <label class="item"> 135 Enable 136 <input type="checkbox" class="item-toggle" name="signEnable" id="signEnable" onchange="updateSignVisibility();"> 137 </label> 138 <div id=signFields> 139 <label class="item"> 140 Algorithm 141 <select id="signAlgorithm" class="item-select"> 142 <option class="item-select-option">SHA-1</option> 143 <option class="item-select-option">SHA-224</option> 144 <option class="item-select-option">SHA-256</option> 145 <option class="item-select-option">SHA-384</option> 146 <option class="item-select-option">SHA-512</option> 147 </select> 148 </label> 149 <label class="item"> 150 Field Format 151 <select id="signFieldFormat" class="item-select"> 152 <option class="item-select-option" value="HEX">Hex</option> 153 <option class="item-select-option" value="B64">Base-64</option> 154 <option class="item-select-option" value="TEXT">Text</option> 155 <option class="item-select-option" value="BYTES">Bytes</option> 156 </select> 157 </label> 158 <label class="item"> 159 Signature Field Name 160 <div class="item-input-wrapper"> 161 <input type="text" class="item-input" name="signFieldName" id="signFieldName" value=""> 162 </div> 163 </label> 164 <label class="item"> 165 Private Key 166 <div class="item-input-wrapper"> 167 <input type="text" class="item-input" name="signKey" id="signKey"> 168 </div> 169 </label> 170 <label class="item"> 171 Private Key Format 172 <select id="signKeyFormat" class="item-select"> 173 <option class="item-select-option" value="HEX">Hex</option> 174 <option class="item-select-option" value="B64">Base-64</option> 175 <option class="item-select-option" value="TEXT">Text</option> 176 <option class="item-select-option" value="BYTES">Bytes</option> 177 </select> 178 </label> 179 </div> 180 </div> 181 </div> 182 183 <div class="item-container"> 184 <div class="item-container-header">Extra Form Fields</div> 185 <div class="item-container-content"> 186 <div class="item-dynamic-list" id="extraFields"> 187 </div> 188 </div> 189 <div class="item-container-footer"> 190 Extra fields are sent with constant values along with the sent data. 191 It can be used to provide e.g. an authentication token, or an 192 identification field. Items in the list above must be of the form 193 "name=value" (without quotes), and then part before the equal sign is 194 field name and the part after is its value. Entries without equal sign 195 are considered as a whole field name with empty value. 196 </div> 197 </div> 198 199 <div class="item-container"> 200 <div class="button-container"> 201 <input id="submitButton" type="button" class="item-button" value="SUBMIT" onClick="onSubmit()"> 202 </div> 203 </div> 204 205 <script src="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/js/slate.min.js"></script> 206 <script> 207 const versionTag = getQueryParam("v"); 208 if (versionTag) { 209 document.getElementsByTagName("h1")[0].childNodes[0].nodeValue = "Battery- " + versionTag; 210 } 211 212 document.getElementById("url").value = getQueryParam("url", ""); 213 document.getElementById("dataField").value = getQueryParam("data_field", ""); 214 document.getElementById("signAlgorithm").value = getQueryParam("s_algo", "SHA-1"); 215 document.getElementById("signFieldFormat").value = getQueryParam("s_fieldf", "HEX"); 216 document.getElementById("signFieldName").value = getQueryParam("s_field", ""); 217 document.getElementById("signKey").value = getQueryParam("s_key", ""); 218 document.getElementById("signKeyFormat").value = getQueryParam("s_keyf", "HEX"); 219 document.getElementById("signEnable").checked = (getQueryParam("s_field", "") !== ""); 220 221 var initWakeupTime = parseInt(getQueryParam("wakeup", "-1")); 222 if (initWakeupTime >= 0) { 223 var wakeupMin = initWakeupTime % 60; 224 document.getElementById("wakeupEnable").checked = true; 225 document.getElementById("wakeupTime").value = (initWakeupTime / 60 | 0).toString(10) + (wakeupMin >= 10 ? ":" : ":0") + wakeupMin.toString(10); 226 } else { 227 document.getElementById("wakeupEnable").checked = false; 228 } 229 230 updateSignVisibility(); 231 updateWakeupVisibility(); 232 233 var initExtraFields = ("," + getRawQueryParam("extra", "")).split(","); 234 initExtraFields.shift(); 235 for (var i = 0; i < initExtraFields.length; i++) { 236 var newNode = document.createElement("label"); 237 newNode.className = "item"; 238 newNode.appendChild(document.createTextNode(decodeURIComponent(initExtraFields[i]))); 239 document.getElementById("extraFields").appendChild(newNode); 240 } 241 </script> 242 </body> 243 </html>