| 1 | <!DOCTYPE html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta charset="UTF-8"> |
|---|
| 5 | <title>CAD Log Viewer Prototype</title> |
|---|
| 6 | <style> |
|---|
| 7 | body { |
|---|
| 8 | font-family: Arial; |
|---|
| 9 | background-color: ivory; |
|---|
| 10 | } |
|---|
| 11 | /* Style the tab */ |
|---|
| 12 | .tab { |
|---|
| 13 | overflow: hidden; |
|---|
| 14 | border: 1px solid #ccc; |
|---|
| 15 | background-color: #f1f1f1; |
|---|
| 16 | } |
|---|
| 17 | |
|---|
| 18 | /* Style the buttons inside the tab */ |
|---|
| 19 | .tab button { |
|---|
| 20 | text-decoration: underline; |
|---|
| 21 | background-color: inherit; |
|---|
| 22 | float: left; |
|---|
| 23 | border: 1px solid #ccc; |
|---|
| 24 | outline: none; |
|---|
| 25 | cursor: pointer; |
|---|
| 26 | padding: 14px 16px; |
|---|
| 27 | transition: 0.3s; |
|---|
| 28 | font-size: 17px; |
|---|
| 29 | } |
|---|
| 30 | |
|---|
| 31 | /* Change background color of buttons on hover */ |
|---|
| 32 | .tab button:hover { |
|---|
| 33 | background-color: #ddd; |
|---|
| 34 | } |
|---|
| 35 | |
|---|
| 36 | /* Create an active/current tablink class */ |
|---|
| 37 | .tab button.active { |
|---|
| 38 | background-color: #ccc; |
|---|
| 39 | } |
|---|
| 40 | |
|---|
| 41 | /* Style the tab content */ |
|---|
| 42 | .tabcontent { |
|---|
| 43 | display: none; |
|---|
| 44 | padding: 6px 12px; |
|---|
| 45 | border: 1px solid #ccc; |
|---|
| 46 | border-top: none; |
|---|
| 47 | } |
|---|
| 48 | .timestamp { |
|---|
| 49 | font-family: monospace; |
|---|
| 50 | font-size: x-large; |
|---|
| 51 | } |
|---|
| 52 | th { |
|---|
| 53 | text-align: left; |
|---|
| 54 | background: #f1f1f1; |
|---|
| 55 | } |
|---|
| 56 | tr.d1 { |
|---|
| 57 | background: white; |
|---|
| 58 | color: black; |
|---|
| 59 | } |
|---|
| 60 | tr.d2 { |
|---|
| 61 | background: #f1f1f1; |
|---|
| 62 | color: black; |
|---|
| 63 | }</style> |
|---|
| 64 | <script src="../common/js/fileutils.js"></script> |
|---|
| 65 | <script> |
|---|
| 66 | function switchTab(evt, cityName) { |
|---|
| 67 | var i, tabcontent, tablinks; |
|---|
| 68 | tabcontent = document.getElementsByClassName("tabcontent"); |
|---|
| 69 | for (i = 0; i < tabcontent.length; i++) { |
|---|
| 70 | tabcontent[i].style.display = "none"; |
|---|
| 71 | } |
|---|
| 72 | tablinks = document.getElementsByClassName("tablinks"); |
|---|
| 73 | for (i = 0; i < tablinks.length; i++) { |
|---|
| 74 | tablinks[i].className = tablinks[i].className.replace(" active", ""); |
|---|
| 75 | } |
|---|
| 76 | document.getElementById(cityName).style.display = "block"; |
|---|
| 77 | evt.currentTarget.className += " active"; |
|---|
| 78 | } |
|---|
| 79 | </script> |
|---|
| 80 | <body> |
|---|
| 81 | <h2>CAD Log Viewer</h2> |
|---|
| 82 | <p>Select incident to view.</p> |
|---|
| 83 | <div class="tab"> |
|---|
| 84 | <button class="tablinks active" onclick="switchTab(event, '181')">181</button> |
|---|
| 85 | <button class="tablinks" onclick="switchTab(event, '182')">182</button> |
|---|
| 86 | <button class="tablinks" onclick="switchTab(event, '190')">190</button> |
|---|
| 87 | </div> |
|---|
| 88 | |
|---|
| 89 | <div id="181" class="tabcontent" style="display:block"> |
|---|
| 90 | |
|---|
| 91 | <table width="100%"> |
|---|
| 92 | <tr> |
|---|
| 93 | <th>Time</th> |
|---|
| 94 | <th>Author</th> |
|---|
| 95 | <th>Comment</th> |
|---|
| 96 | </tr> |
|---|
| 97 | <tr class="d1"> |
|---|
| 98 | <td class="timestamp" width="10%">00:01:00</td> |
|---|
| 99 | <td width="15%">CHP</td> |
|---|
| 100 | <td>14-13 10-97 1125 EMS 10-97 HAY TRK VS 2 VEH #1 2 3 LNS BLCKD REQ ADDL UNITS</td> |
|---|
| 101 | </tr> |
|---|
| 102 | <tr class="d2"> |
|---|
| 103 | <td class="timestamp" width="10%">00:05:00</td> |
|---|
| 104 | <td>CHP</td> |
|---|
| 105 | <td>10-39 COLLEGE OAK FOR BIG RIG AND CYCLE FOR ROT</td> |
|---|
| 106 | </tr> |
|---|
| 107 | </table> |
|---|
| 108 | </div> |
|---|
| 109 | |
|---|
| 110 | <div id="182" class="tabcontent"> |
|---|
| 111 | |
|---|
| 112 | <table width="100%"> |
|---|
| 113 | <tr> |
|---|
| 114 | <th>Time</th> |
|---|
| 115 | <th>Author</th> |
|---|
| 116 | <th>Comment</th> |
|---|
| 117 | </tr> |
|---|
| 118 | <tr class="d1"> |
|---|
| 119 | <td class="timestamp" width="10%">00:03:00</td> |
|---|
| 120 | <td width="15%">CHP</td> |
|---|
| 121 | <td>14-7 ENRT FROM SB 405 AT BROOKHURST</td> |
|---|
| 122 | </tr> |
|---|
| 123 | <tr class="d2"> |
|---|
| 124 | <td class="timestamp" width="10%">00:30:00</td> |
|---|
| 125 | <td>Maria</td> |
|---|
| 126 | <td>REGION 30 SUPER ENROUTE FROM 55 AT DYER</td> |
|---|
| 127 | </tr> |
|---|
| 128 | </table> |
|---|
| 129 | </div> |
|---|
| 130 | |
|---|
| 131 | <div id="190" class="tabcontent"> |
|---|
| 132 | |
|---|
| 133 | <table width="100%"> |
|---|
| 134 | <tr> |
|---|
| 135 | <th>Time</th> |
|---|
| 136 | <th>Author</th> |
|---|
| 137 | <th>Comment</th> |
|---|
| 138 | </tr> |
|---|
| 139 | <tr class="d1"> |
|---|
| 140 | <td class="timestamp" width="10%">00:03:00</td> |
|---|
| 141 | <td width="15%">CHP</td> |
|---|
| 142 | <td>14-21 1097 PROV 1184 TRF BACKING QUICKLY</td> |
|---|
| 143 | </tr> |
|---|
| 144 | <tr class="d2"> |
|---|
| 145 | <td class="timestamp" width="10%">00:09:00</td> |
|---|
| 146 | <td>Jose</td> |
|---|
| 147 | <td>MAINTENANCE TRUCK REQUESTED</td> |
|---|
| 148 | </tr> |
|---|
| 149 | <tr class="d1"> |
|---|
| 150 | <td class="timestamp" width="10%">00:12:00</td> |
|---|
| 151 | <td>Jose</td> |
|---|
| 152 | <td>CMS #131 ACTIVATED</td> |
|---|
| 153 | </tr> |
|---|
| 154 | </table> |
|---|
| 155 | </div></body> |
|---|
| 156 | </html> |
|---|
| 157 | |
|---|
| 158 | |
|---|
