T139 History search displayed
This commit is contained in:
		| @@ -279,9 +279,13 @@ input:focus { | ||||
| } | ||||
|  | ||||
| #historyFunction { | ||||
|     margin-top: 30px; | ||||
|     margin-top: 10px; | ||||
|     margin-bottom: 30px; | ||||
|     width: 670px; | ||||
|     display: none; | ||||
| } | ||||
|  | ||||
| #historyFunction.active { | ||||
|     display: flex; | ||||
|     align-content: space-between; | ||||
| } | ||||
| @@ -302,4 +306,23 @@ input:focus { | ||||
|     margin-right: 15px; | ||||
| } | ||||
|  | ||||
| #historyFilterSwitch { | ||||
|     width: 100%; | ||||
|     font-size: 18px; | ||||
|     cursor: pointer; | ||||
|     border: 0; | ||||
| 	padding: 0; | ||||
| 	background: 0; | ||||
|     outline: 0; | ||||
|     text-align: left; | ||||
|     margin-top: 30px; | ||||
|     margin-bottom: 30px; | ||||
|     margin-left: 15px; | ||||
|  | ||||
| } | ||||
|  | ||||
| #historyFilterSwitch:hover { | ||||
|     color: orange; | ||||
| } | ||||
|  | ||||
|  | ||||
|   | ||||
| @@ -91,6 +91,7 @@ | ||||
|                         </table> | ||||
|                     </div> | ||||
|                     <div id="history" style="display:none;"> | ||||
|                         <button id="historyFilterSwitch">>Filters</button> | ||||
|                         <div id="historyFunction"> | ||||
|                             <div> | ||||
|                                 <label for="historyFrom">From</label> | ||||
| @@ -112,22 +113,6 @@ | ||||
|                                     </tr> | ||||
|                                 </thead> | ||||
|                                 <tbody> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                 </tbody> | ||||
|                             </table> | ||||
|                         </div> | ||||
|   | ||||
| @@ -1,8 +1,30 @@ | ||||
| var historyJson = {}; | ||||
| const maxIterations = 30; | ||||
| var filters = false; | ||||
| var defaultTo = new Date(); | ||||
| defaultTo.setDate(defaultTo.getDate + 1); | ||||
| var defaultFrom = new Date(); | ||||
| defaultFrom.setDate(defaultFrom.getDate - 30); | ||||
|  | ||||
| function searchHistory(){ | ||||
| function filterHistory(){ | ||||
|     var dateFrom = $('#historyFrom').val(); | ||||
|     var dateTo = $('#historyTo').val(); | ||||
|     loadHistory(dateFrom, dateTo); | ||||
| } | ||||
|  | ||||
| const startSearch = function(){ | ||||
|     filterHistory(); | ||||
| } | ||||
| $('#btn-searchHistory').click(startSearch); | ||||
|  | ||||
| const filterSwitch = function(){ | ||||
|     $('#historyFunction').toggleClass("active"); | ||||
| } | ||||
|  | ||||
| $('#historyFilterSwitch').click(filterSwitch); | ||||
|  | ||||
| function loadHistory(dateFrom, dateTo){ | ||||
|     console.log('Request send for history data') | ||||
|     var eventRequest = { | ||||
|         clientUUID : json[jsonIndex].clientUUID, | ||||
|         localDateTimeFrom : dateFrom, | ||||
| @@ -15,12 +37,30 @@ function searchHistory(){ | ||||
|         data: JSON.stringify(eventRequest, null, 2), | ||||
|         contentType: "application/json" | ||||
|     }).done(function(data){ | ||||
|         console.log(data); | ||||
|         // TODO: Add display function | ||||
|         historyJson = data; | ||||
|         displayHistory(); | ||||
|     }); | ||||
| } | ||||
|  | ||||
| const startSearch = function(){ | ||||
|     searchHistory(); | ||||
| function historyToHtml(){ | ||||
|     console.log('generating history'); | ||||
|     var innerHTML = ''; | ||||
|     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations; | ||||
|     for(let i=0; i<iterations; i++){ | ||||
|         innerHTML += '<tr>' + | ||||
|             '<td>' + historyJson[i].dateTimeStamp + '</td>' + | ||||
|             '<td>' + historyJson[i].interfaceName + '</td>' + | ||||
|         '</tr>'; | ||||
|     } | ||||
| $('#btn-searchHistory').click(startSearch); | ||||
|     console.log('history generated'); | ||||
|     return innerHTML; | ||||
| } | ||||
|  | ||||
| const displayHistory = function(){ | ||||
|     console.log('Setting history...'); | ||||
|     $('#historyTable tbody').html(historyToHtml()); | ||||
|     console.log('History set'); | ||||
| } | ||||
|  | ||||
| $(document).ready(loadHistory(defaultFrom, defaultTo)); | ||||
| @@ -279,9 +279,13 @@ input:focus { | ||||
| } | ||||
|  | ||||
| #historyFunction { | ||||
|     margin-top: 30px; | ||||
|     margin-top: 10px; | ||||
|     margin-bottom: 30px; | ||||
|     width: 670px; | ||||
|     display: none; | ||||
| } | ||||
|  | ||||
| #historyFunction.active { | ||||
|     display: flex; | ||||
|     align-content: space-between; | ||||
| } | ||||
| @@ -302,4 +306,23 @@ input:focus { | ||||
|     margin-right: 15px; | ||||
| } | ||||
|  | ||||
| #historyFilterSwitch { | ||||
|     width: 100%; | ||||
|     font-size: 18px; | ||||
|     cursor: pointer; | ||||
|     border: 0; | ||||
| 	padding: 0; | ||||
| 	background: 0; | ||||
|     outline: 0; | ||||
|     text-align: left; | ||||
|     margin-top: 30px; | ||||
|     margin-bottom: 30px; | ||||
|     margin-left: 15px; | ||||
|  | ||||
| } | ||||
|  | ||||
| #historyFilterSwitch:hover { | ||||
|     color: orange; | ||||
| } | ||||
|  | ||||
|  | ||||
|   | ||||
| @@ -91,6 +91,7 @@ | ||||
|                         </table> | ||||
|                     </div> | ||||
|                     <div id="history" style="display:none;"> | ||||
|                         <button id="historyFilterSwitch">>Filters</button> | ||||
|                         <div id="historyFunction"> | ||||
|                             <div> | ||||
|                                 <label for="historyFrom">From</label> | ||||
| @@ -112,22 +113,6 @@ | ||||
|                                     </tr> | ||||
|                                 </thead> | ||||
|                                 <tbody> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                     <tr> | ||||
|                                         <td>2020-02-02 10:56:23</td> | ||||
|                                         <td>Request received</td> | ||||
|                                     </tr> | ||||
|                                 </tbody> | ||||
|                             </table> | ||||
|                         </div> | ||||
|   | ||||
| @@ -1,8 +1,30 @@ | ||||
| var historyJson = {}; | ||||
| const maxIterations = 30; | ||||
| var filters = false; | ||||
| var defaultTo = new Date(); | ||||
| defaultTo.setDate(defaultTo.getDate + 1); | ||||
| var defaultFrom = new Date(); | ||||
| defaultFrom.setDate(defaultFrom.getDate - 30); | ||||
|  | ||||
| function searchHistory(){ | ||||
| function filterHistory(){ | ||||
|     var dateFrom = $('#historyFrom').val(); | ||||
|     var dateTo = $('#historyTo').val(); | ||||
|     loadHistory(dateFrom, dateTo); | ||||
| } | ||||
|  | ||||
| const startSearch = function(){ | ||||
|     filterHistory(); | ||||
| } | ||||
| $('#btn-searchHistory').click(startSearch); | ||||
|  | ||||
| const filterSwitch = function(){ | ||||
|     $('#historyFunction').toggleClass("active"); | ||||
| } | ||||
|  | ||||
| $('#historyFilterSwitch').click(filterSwitch); | ||||
|  | ||||
| function loadHistory(dateFrom, dateTo){ | ||||
|     console.log('Request send for history data') | ||||
|     var eventRequest = { | ||||
|         clientUUID : json[jsonIndex].clientUUID, | ||||
|         localDateTimeFrom : dateFrom, | ||||
| @@ -15,12 +37,30 @@ function searchHistory(){ | ||||
|         data: JSON.stringify(eventRequest, null, 2), | ||||
|         contentType: "application/json" | ||||
|     }).done(function(data){ | ||||
|         console.log(data); | ||||
|         // TODO: Add display function | ||||
|         historyJson = data; | ||||
|         displayHistory(); | ||||
|     }); | ||||
| } | ||||
|  | ||||
| const startSearch = function(){ | ||||
|     searchHistory(); | ||||
| function historyToHtml(){ | ||||
|     console.log('generating history'); | ||||
|     var innerHTML = ''; | ||||
|     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations; | ||||
|     for(let i=0; i<iterations; i++){ | ||||
|         innerHTML += '<tr>' + | ||||
|             '<td>' + historyJson[i].dateTimeStamp + '</td>' + | ||||
|             '<td>' + historyJson[i].interfaceName + '</td>' + | ||||
|         '</tr>'; | ||||
|     } | ||||
| $('#btn-searchHistory').click(startSearch); | ||||
|     console.log('history generated'); | ||||
|     return innerHTML; | ||||
| } | ||||
|  | ||||
| const displayHistory = function(){ | ||||
|     console.log('Setting history...'); | ||||
|     $('#historyTable tbody').html(historyToHtml()); | ||||
|     console.log('History set'); | ||||
| } | ||||
|  | ||||
| $(document).ready(loadHistory(defaultFrom, defaultTo)); | ||||
		Reference in New Issue
	
	Block a user