finish.html (7102B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Session Finished - 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" id="title"></h1> 18 </div> 19 20 <div class="container"> 21 <div id="content"> 22 <div id="qr-code"></div> 23 <div id="button-wrapper"> 24 <div id="new-button" class="button is-success is-large tabbable"> 25 Create New Session 26 </div> 27 <button id="results-button" class="button is-large tabbable"> 28 View Result Page 29 </button> 30 </div> 31 <div id="details-wrapper"> 32 <h3 class="title is-5 is-spaced">Details</h3> 33 <div class="detail"> 34 <div>Token:</div> 35 <div id="token"></div> 36 </div> 37 <div class="detail"> 38 <div>User Agent:</div> 39 <div id="user-agent"></div> 40 </div> 41 <div class="detail"> 42 <div>Test Types:</div> 43 <div id="test-types"></div> 44 </div> 45 <div class="detail"> 46 <div>Total Test Files:</div> 47 <div id="total-tests"></div> 48 </div> 49 <div class="detail"> 50 <div>Reference Tokens:</div> 51 <div id="reference-tokens"></div> 52 </div> 53 <div class="detail"> 54 <div>Test Timeouts:</div> 55 <div id="test-timeout"></div> 56 </div> 57 <div class="detail"> 58 <div>Test Paths:</div> 59 <div id="test-path"></div> 60 </div> 61 </div> 62 </div> 63 </div> 64 </section> 65 66 <script> 67 var HOSTNAME = location.hostname; 68 var PORT = location.port; 69 var PROTOCOL = location.protocol.replace(/:/, ""); 70 var QUERY = location.search.replace(/\?/, ""); 71 var match = QUERY.match(/token=([^&]+)/); 72 var TOKEN = match ? match[1] : null; 73 var selectedTabbable = -1; 74 75 function displaySessionConfiguration(configuration) { 76 var userAgent = document.getElementById("user-agent"); 77 userAgent.innerText = configuration.userAgent; 78 var testPath = document.getElementById("test-path"); 79 for (var i = 0; i < configuration.tests.include.length; i++) { 80 var path = configuration.tests.include[i]; 81 testPath.innerText += path + "\n"; 82 } 83 var testTypes = document.getElementById("test-types"); 84 testTypes.innerText = configuration.types.join(", "); 85 var testTimeout = document.getElementById("test-timeout"); 86 for (var timeout in configuration.timeouts) { 87 testTimeout.innerText += 88 timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n"; 89 } 90 var referenceTokens = document.getElementById("reference-tokens"); 91 if (configuration.referenceTokens.length === 0) { 92 referenceTokens.innerText = "none"; 93 } else { 94 for (var i = 0; i < configuration.referenceTokens.length; i++) { 95 var token = configuration.referenceTokens[i]; 96 referenceTokens.innerText += token + "\n"; 97 } 98 } 99 } 100 101 function displaySessionStatus(status) { 102 var title = document.getElementById("title"); 103 if (status.status === "aborted") { 104 title.innerText = "Session Aborted"; 105 } else { 106 title.innerText = "Session Complete"; 107 } 108 109 var testTypes = document.getElementById("total-tests"); 110 var count = 0; 111 for (var api in status.testFilesCount) { 112 count += status.testFilesCount[api]; 113 } 114 testTypes.innerText = count; 115 } 116 117 function startTests() { 118 sendRequest("GET", WEB_ROOT + "api/next", null, function(response) { 119 location.href = response; 120 }); 121 } 122 123 var resultsUrl = 124 "http://" + location.host + WEB_ROOT + "overview.html" + location.search; 125 new QRCode(document.getElementById("qr-code"), resultsUrl); 126 127 var resultsButton = document.getElementById("results-button"); 128 resultsButton.onclick = function() { 129 window.open(resultsUrl, "_blank"); 130 }; 131 132 var newButton = document.getElementById("new-button"); 133 newButton.onclick = function() { 134 location.href = WEB_ROOT + "index.html"; 135 }; 136 137 function removeClass(element, className) { 138 var elementClass = element.className; 139 var index = elementClass.indexOf(className); 140 if (index !== -1) { 141 element.className = elementClass.replace(className, ""); 142 } 143 } 144 145 function addClass(element, className) { 146 element.className += " " + className; 147 } 148 149 function skipFocus(steps) { 150 var tabbables = document.getElementsByClassName("tabbable"); 151 if (selectedTabbable === -1) { 152 selectedTabbable = 0; 153 } else { 154 removeClass(tabbables[selectedTabbable], "focused"); 155 selectedTabbable += steps; 156 } 157 158 if (selectedTabbable >= tabbables.length) { 159 selectedTabbable = 0; 160 } 161 162 if (selectedTabbable < 0) { 163 selectedTabbable = tabbables.length - 1; 164 } 165 166 tabbables[selectedTabbable].focus(); 167 addClass(tabbables[selectedTabbable], "focused"); 168 } 169 170 function focusNext() { 171 skipFocus(1); 172 } 173 174 function focusPrevious() { 175 skipFocus(-1); 176 } 177 178 document.onkeydown = function(event) { 179 event = event || window.event; 180 var charCode = 181 typeof event.which === "number" ? event.which : event.keyCode; 182 183 if (ACTION_KEYS.indexOf(charCode) !== -1) { 184 event.preventDefault(); 185 if (selectedTabbable === -1) { 186 return; 187 } 188 var tabbables = document.getElementsByClassName("tabbable"); 189 var element = tabbables[selectedTabbable]; 190 if (element.type === "checkbox") { 191 element.checked = !element.checked; 192 } else { 193 element.click(); 194 } 195 } 196 197 if (PREV_KEYS.indexOf(charCode) !== -1) { 198 focusPrevious(); 199 } 200 201 if (NEXT_KEYS.indexOf(charCode) !== -1) { 202 focusNext(); 203 } 204 }; 205 206 var match = location.search.match(/token=(.+)/); 207 var token = match[1]; 208 var tokenView = document.getElementById("token"); 209 tokenView.innerText = token; 210 211 WaveService.readSession(token, displaySessionConfiguration); 212 WaveService.readSessionStatus(token, displaySessionStatus); 213 </script> 214 </body> 215 </html>