newsession.html (8441B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>New Session - Web Platform Test Runner</title> 6 <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" /> 7 <link rel="stylesheet" href="css/style.css" /> 8 <link rel="stylesheet" href="css/main.css" /> 9 <script src="lib/davidshimjs/qrcode.js"></script> 10 <script src="lib/keycodes.js"></script> 11 <script src="lib/wave-service.js"></script> 12 </head> 13 <body> 14 <section class="section"> 15 <div class="container site-header"> 16 <img src="res/wavelogo_2016.jpg" alt="WAVE Logo" class="site-logo" /> 17 <h1 class="title is-spaced">New Session</h1> 18 </div> 19 20 <div class="container"> 21 <div id="content"> 22 <div id="qr-code"></div> 23 <br /> 24 <p> 25 Scan QR Code OR visit 26 <a 27 id="results-page-url" 28 style="font-weight: bold; color: #23d160;" 29 target="_blank" 30 ></a> 31 and follow instructions 32 </p> 33 <div id="button-wrapper"> 34 <button 35 id="start-button" 36 class="button is-large is-success tabbable" 37 > 38 Start 39 </button> 40 <button 41 id="results-button" 42 class="button is-large is-light tabbable" 43 > 44 View Result Page 45 </button> 46 </div> 47 48 <div>(Alternatively to start the test you can just press Return)</div> 49 50 <div id="details-wrapper"> 51 <h3 class="title is-5 is-spaced">Details</h3> 52 <div class="detail"> 53 <div>Token:</div> 54 <div id="token"></div> 55 </div> 56 <div class="detail"> 57 <div>User Agent:</div> 58 <div id="user-agent"></div> 59 </div> 60 <div class="detail"> 61 <div>Test Types:</div> 62 <div id="test-types"></div> 63 </div> 64 <div class="detail"> 65 <div>Total Test Files:</div> 66 <div id="total-tests"></div> 67 </div> 68 <div class="detail"> 69 <div>Reference Tokens:</div> 70 <div id="reference-tokens"></div> 71 </div> 72 <div class="detail"> 73 <div>Test Timeouts:</div> 74 <div id="test-timeout"></div> 75 </div> 76 <div class="detail"> 77 <div>Test Paths:</div> 78 <div id="test-path"></div> 79 </div> 80 </div> 81 </div> 82 </div> 83 </section> 84 85 <script> 86 var HOSTNAME = location.hostname; 87 var PORT = location.port; 88 var PROTOCOL = location.protocol.replace(/:/, ""); 89 var QUERY = location.search.replace(/\?/, ""); 90 var match = QUERY.match(/token=([^&]+)/); 91 var TOKEN = match ? match[1] : null; 92 var RESUME = /[\?&]resume=/.test(location.search); 93 if (TOKEN) 94 document.cookie = "resume_token=" + TOKEN + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; 95 var selectedTabbable = -1; 96 97 document.onload = function() { 98 if (RESUME) { 99 document.getElementById("start-button").innerHTML = "Resume"; 100 document.getElementById("new-button").style.display = "block"; 101 } 102 document.getElementById("results-page-url").innerHTML = 103 "http://" + location.host + WEB_ROOT + "overview.html"; 104 document.getElementById("results-page-url").href = 105 "http://" + location.host + WEB_ROOT + "overview.html"; 106 }; 107 108 function displaySessionConfiguration(configuration) { 109 var userAgent = document.getElementById("user-agent"); 110 userAgent.innerText = configuration.userAgent; 111 var testPath = document.getElementById("test-path"); 112 for (var i = 0; i < configuration.tests.include.length; i++) { 113 var path = configuration.tests.include[i]; 114 testPath.innerText += path + "\n"; 115 } 116 var testTypes = document.getElementById("test-types"); 117 testTypes.innerText = configuration.types.join(", "); 118 var testTimeout = document.getElementById("test-timeout"); 119 for (var timeout in configuration.timeouts) { 120 testTimeout.innerText += 121 timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n"; 122 } 123 var referenceTokens = document.getElementById("reference-tokens"); 124 if (configuration.referenceTokens.length === 0) { 125 referenceTokens.innerText = "none"; 126 } else { 127 for (var i = 0; i < configuration.referenceTokens.length; i++) { 128 var token = configuration.referenceTokens[i]; 129 referenceTokens.innerText += token + "\n"; 130 } 131 } 132 } 133 134 function displaySessionStatus(status) { 135 var testTypes = document.getElementById("total-tests"); 136 var count = 0; 137 for (var api in status.testFilesCount) { 138 count += status.testFilesCount[api]; 139 } 140 testTypes.innerText = count; 141 } 142 143 function startTests() { 144 WaveService.startSession(token, function() { 145 WaveService.readNextTest(token, function(url) { 146 location.href = url; 147 }); 148 }); 149 } 150 151 var resultsUrl = 152 "http://" + location.host + WEB_ROOT + "results.html" + location.search; 153 new QRCode(document.getElementById("qr-code"), resultsUrl); 154 155 var resultsButton = document.getElementById("results-button"); 156 resultsButton.onclick = function() { 157 window.open(resultsUrl, "_blank"); 158 }; 159 160 var startButton = document.getElementById("start-button"); 161 startButton.onclick = startTests; 162 163 function removeClass(element, className) { 164 var elementClass = element.className; 165 var index = elementClass.indexOf(className); 166 if (index !== -1) { 167 element.className = elementClass.replace(className, ""); 168 } 169 } 170 171 function addClass(element, className) { 172 element.className += " " + className; 173 } 174 175 function skipFocus(steps) { 176 var tabbables = document.getElementsByClassName("tabbable"); 177 if (selectedTabbable === -1) { 178 selectedTabbable = 0; 179 } else { 180 removeClass(tabbables[selectedTabbable], "focused"); 181 selectedTabbable += steps; 182 } 183 184 if (selectedTabbable >= tabbables.length) { 185 selectedTabbable = 0; 186 } 187 188 if (selectedTabbable < 0) { 189 selectedTabbable = tabbables.length - 1; 190 } 191 192 tabbables[selectedTabbable].focus(); 193 addClass(tabbables[selectedTabbable], "focused"); 194 } 195 196 function focusNext() { 197 skipFocus(1); 198 } 199 200 function focusPrevious() { 201 skipFocus(-1); 202 } 203 204 document.onkeydown = function(event) { 205 event = event || window.event; 206 var charCode = 207 typeof event.which === "number" ? event.which : event.keyCode; 208 209 if (ACTION_KEYS.indexOf(charCode) !== -1) { 210 event.preventDefault(); 211 if (selectedTabbable === -1) { 212 startTests(); 213 return; 214 } 215 var tabbables = document.getElementsByClassName("tabbable"); 216 var element = tabbables[selectedTabbable]; 217 if (element.type === "checkbox") { 218 element.checked = !element.checked; 219 } else { 220 element.click(); 221 } 222 } 223 224 if (PREV_KEYS.indexOf(charCode) !== -1) { 225 focusPrevious(); 226 } 227 228 if (NEXT_KEYS.indexOf(charCode) !== -1) { 229 focusNext(); 230 } 231 }; 232 233 var match = location.search.match(/token=([^&]+)/); 234 var token = match[1]; 235 var tokenView = document.getElementById("token"); 236 tokenView.innerText = token; 237 238 WaveService.readSession(token, displaySessionConfiguration); 239 WaveService.readSessionStatus(token, displaySessionStatus); 240 241 if (window.localStorage) { 242 var storage = window.localStorage; 243 var state = JSON.parse(storage.getItem("wave")); 244 if (!state) { 245 state = {}; 246 } 247 if (!state.recent_sessions) { 248 state.recent_sessions = []; 249 } 250 if (state.recent_sessions.indexOf(token) === -1) { 251 state.recent_sessions.unshift(token); 252 } 253 storage.setItem("wave", JSON.stringify(state)); 254 } 255 </script> 256 </body> 257 </html>