From 5a68ea106980a52850cc527da098f481223b07b1 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Wed, 7 Dec 2016 13:18:23 +0100
Subject: [roomplanner] Tighten up computer list, better search result caching

---
 modules-available/roomplanner/clientscript.js     | 60 ++++++++++++++++-------
 modules-available/roomplanner/page.inc.php        |  5 +-
 modules-available/roomplanner/style.css           | 29 +++--------
 modules-available/roomplanner/templates/page.html |  2 +-
 4 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/modules-available/roomplanner/clientscript.js b/modules-available/roomplanner/clientscript.js
index cc149392..53e0164a 100644
--- a/modules-available/roomplanner/clientscript.js
+++ b/modules-available/roomplanner/clientscript.js
@@ -5,13 +5,19 @@
  * */
 
 /* Map: uuid -> obj */
-machineCache = {};
+var machineCache = {};
 
-selectMachinInitialized = false;
-
-placedMachines = [];
+var selectMachinInitialized = false;
 
+var placedMachines = [];
 
+function makeCombinedField(machineArray)
+{
+   machineArray.forEach(function (v,i,a){
+      machineArray[i].combined = (v.machineuuid + " " + v.hostname + " " + v.clientip + " " + v.macaddr).toLocaleLowerCase();
+   });
+   return machineArray;
+}
 
 function renderMachineEntry(item, escape) {
     machineCache[item.machineuuid] = item;
@@ -33,38 +39,58 @@ function renderMachineEntry(item, escape) {
             //+ ' <div class="machine-logo"><i class="glyphicon glyphicon-hdd"></i></div>'
             + ' <div class="machine-body">'
             + '    <div class="machine-entry-header"> ' + escape(item.hostname) + extraText + '</div>'
-            + '          <table class="table table-sm">'
+            + '          <table>'
             +               '<tr><td>UUID:</td> <td>' +  escape(item.machineuuid) + '</td></tr>'
-            +               '<tr><td>MAC:</td> <td>' +  escape(item.macaddr) + '</td></tr>'
+            +               '<tr><td>MAC: </td> <td>' +  escape(item.macaddr) + '</td></tr>'
             +               '<tr><td>IP:  </td> <td>' +  escape(item.clientip)    + '</td></tr>'
             + '          </table>'
             + '    </div>'
             + '</div>';
 }
 
+var queryCache = {};
+
+function filterCache(key, query) {
+    return queryCache[key].filter(function (el) {
+       return -1 !== el.combined.indexOf(query);
+    });
+}
+
 function loadMachines(query, callback) {
     console.log('queryMachines(' + query + ')');
-    if (query.length < 2) return callback();
+    if (query.length < 2) {
+       callback();
+       return;
+    }
+    query = query.toLocaleLowerCase();
+    // See if we have a previous query in our cache that is a superset for this one
+    for (var k in queryCache) {
+        if (query.indexOf(k) !== -1) {
+            callback(filterCache(k, query));
+            return;
+        }
+    }
     $.ajax({
         url: '?do=roomplanner&action=getmachines&query=' + encodeURIComponent(query),
         type: 'GET',
+        dataType: 'json',
         error: function() {
             console.log('error while doing ajax call');
             callback();
         },
-        success: function(res) {
+        success: function(json) {
             console.log('success ajax call');
-            var json = JSON.parse(res);
-            json.machines.forEach(function (v,i,a){
-                a[i].combined = v.machineuuid + " " + v.hostname + " " + v.clientip + " " + v.macaddr;
-            });
-            return callback(json.machines);
+            var machines = makeCombinedField(json.machines);
+            // Server cuts off at 100, so only cache if it contains less entries, as
+            // the new, more specific query could return previously removed results.
+            if (machines.length < 100) {
+                queryCache[query] = machines;
+            }
+            callback(machines);
         }
     });
 }
 
-
-
 function clearSearchBox() {
     $selectizeSearch[0].selectize.setValue([], true);
     $selectizeSearch[0].selectize.clearCache();
@@ -90,7 +116,7 @@ function initSelectize() {
             render : { option : renderMachineEntry, item: renderMachineEntry},
             load: loadMachines,
             maxItems: 1,
-            sortField: 'clientip',
+            sortField: 'hostname',
             sortDirection: 'asc',
             onChange: clearSubnetBox
         });
@@ -106,7 +132,7 @@ function initSelectize() {
             create: false,
             render : { option : renderMachineEntry, item: renderMachineEntry},
             maxItems: 1,
-            sortField: 'clientip',
+            sortField: 'hostname',
             sortDirection: 'asc',
             onChange: clearSearchBox
         });
diff --git a/modules-available/roomplanner/page.inc.php b/modules-available/roomplanner/page.inc.php
index 1ddbdc30..a35023b9 100644
--- a/modules-available/roomplanner/page.inc.php
+++ b/modules-available/roomplanner/page.inc.php
@@ -94,7 +94,8 @@ class Page_Roomplanner extends Page
 				. 'WHERE machineuuid LIKE :query '
 				. ' OR macaddr  	 LIKE :query '
 				. ' OR clientip    LIKE :query '
-				. ' OR hostname	 LIKE :query ', ['query' => "%$query%"]);
+				. ' OR hostname	 LIKE :query '
+				. ' LIMIT 100', ['query' => "%$query%"]);
 
 			$returnObject = ['machines' => []];
 
@@ -268,8 +269,6 @@ class Page_Roomplanner extends Page
 		$machines = [];
 
 		while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
-			// For searching
-			$row['combined'] = $row['machineuuid'] . ' ' . $row['macaddr'] . ' ' . $row['clientip'] . ' ' . $row['hostname'];
 			$machines[] = $row;
 		}
 
diff --git a/modules-available/roomplanner/style.css b/modules-available/roomplanner/style.css
index 4ec8a7b0..515fc56f 100644
--- a/modules-available/roomplanner/style.css
+++ b/modules-available/roomplanner/style.css
@@ -745,10 +745,11 @@ div.draggable:hover .deleteHandle {
 /* select popup */
 .machine-entry {
 	width: 100%;
+	width: calc(100% - 5px);
 	border: 1px solid #999;
 	border-radius: 5px;
-	margin: 5px 20px 5px 2px;
-	padding: 5px 10px 5px 10px;
+	margin: 2px;
+	padding: 2px 4px;
 }
 
 /* in case it is already in the sketchboard */
@@ -756,34 +757,20 @@ div.draggable:hover .deleteHandle {
 	color: #666;
 }
 
-.machine-entry .table {
-	font-size:12px;
+.machine-entry table {
+	font-size: 12px;
 	margin-bottom: -5px;
+	width: 100%;
 }
-.machine-entry .table tr {
-	line-height: 5px;
+.machine-entry table tr {
+	border-top: 1px solid #bbb;
 }
 
-
-.machine-logo {
-	float: left;
-	width:36px;
-}
-.machine-logo i {
-	font-size: 20px;
-	line-height: 50px;
-}
 .machine-entry-header {
 	font-weight: bolder;
 	font-size: 18px;
 }
 
-.machine-uuid {
-}
-
-.machine-ip {
-}
-
 .selectize-dropdown-content {
 	max-height : 600px;
 }
diff --git a/modules-available/roomplanner/templates/page.html b/modules-available/roomplanner/templates/page.html
index ba51b893..8bfa0ca4 100644
--- a/modules-available/roomplanner/templates/page.html
+++ b/modules-available/roomplanner/templates/page.html
@@ -330,7 +330,7 @@ var subnetMachines, roomConfiguration;
 var plannerLoadState = 'invalid';
 document.addEventListener("DOMContentLoaded", function () {
 
-	subnetMachines = {{{subnetMachines}}};
+	subnetMachines = makeCombinedField({{{subnetMachines}}});
 	roomConfiguration = {{{roomConfiguration}}};
 
 	$.when(
-- 
cgit v1.2.3-55-g7522