Closes #11 - Add autocomplete for server types instead of having to search at bottom of config page

query-game-server.html

@@ -32,20 +32,38 @@
             return 'Query Game Server';
         },
         oneditprepare: function() {
+            let server_types = null;
+
             $.getJSON('/gamedig/types', function(data) {
-                let html = '<table>' +
+                if(data.result !== 'ok' || !data.hasOwnProperty("server_types"))
-                    '<thead id="query-game-server-types-table"><tr><td><strong>Type</strong></td><td><strong>Name</strong></td><td><strong>Protocol</strong></td></tr></thead>' +
+                {
-                    '<tbody id="query-game-server-type-rows">';
+                    console.error("server_types failed to load");
-                for(let game of data) {
+                    return;
-                    html += "<tr class=\"query-game-server-type-row\">" +
+                }
-                        "<td>"+game['type']+"</td>" +
+
-                        "<td>"+game['name']+"</td>" +
+                server_types = data.server_types;
-                        "<td>"+game['protocol']+"</td>" +
+            });
-                        "</tr>";
+
+            $("#node-input-server_type").autoComplete({
+                search: function(val) {
+                    if(!server_types) return false; // ignore until we have the types loaded
+
+                    let matches = [];
+                    server_types.forEach(v => {
+                        if (
+                            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
+                            v.type.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
+                            v.protocol.toLowerCase().indexOf(val.toLowerCase()) > -1
+                        ) {
+                            matches.push({
+                                value: v.type,
+                                label: `${v.name} (${v.type})`,
+                                protocol: v.protocol
+                            });
+                        }
+                    });
+                    return matches;
                 }
-                html += '</tbody>' +
-                    '</table>';
-                $("#query-game-server-types").html(html);
             });
         }
     });
@@ -68,10 +86,10 @@
 
     <div class="form-row">
         <label for="node-input-server_type"><i class="fa fa-cube"></i> Server Type</label>
-        <input type="text" id="node-input-server_type">
+        <input type="text" id="node-input-server_type" placeholder="msg.server_type">
     </div>
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
-        View server types <a href="#gamdig-types" style="color:#0000EE;text-decoration: underline;">below</a>.
+        Recommend visiting the <a href="https://github.com/gamedig/node-gamedig#games-list" target="_blank" style="color:#0000EE;text-decoration: underline;">GameDig GitHub page</a> for more information about the server type you are trying to query. Some types require extra setup.
     </div>
 
     <div class="form-row">
@@ -84,7 +102,7 @@
 
     <div class="form-row">
         <label for="node-input-port"><i class="fa fa-server"></i> Port</label>
-        <input type="text" id="node-input-port" placeholder="msg.host" />
+        <input type="text" id="node-input-port" placeholder="msg.port" />
     </div>
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
         Query port for the server (join and query port may differ).
@@ -106,7 +124,7 @@
 
     <div class="form-row">
         <label for="node-input-max_attempts"><i class="fa fa-cogs"></i> Max Attempts</label>
-        <input type="text" id="node-input-max_attempts" placeholder="1" />
+        <input type="text" id="node-input-max_attempts" placeholder="msg.max_attempts (default: 1)" />
     </div>
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
         Number of attempts to query server in case of failure.
@@ -114,7 +132,7 @@
 
     <div class="form-row">
         <label for="node-input-socket_timeout"><i class="fa fa-cogs"></i> Socket Timeout</label>
-        <input type="text" id="node-input-socket_timeout" placeholder="2000" />
+        <input type="text" id="node-input-socket_timeout" placeholder="msg.socket_timeout (default: 2000)" />
     </div>
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
         Milliseconds to wait for a single packet. Beware that increasing this will cause many queries to take longer even if the server is online.
@@ -122,7 +140,7 @@
 
     <div class="form-row">
         <label for="node-input-attempt_timeout"><i class="fa fa-cogs"></i> Attempt Timeout</label>
-        <input type="text" id="node-input-attempt_timeout" placeholder="10000" />
+        <input type="text" id="node-input-attempt_timeout" placeholder="msg.attempt_timeout (default: 10000)" />
     </div>
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
         Milliseconds allowed for an entire query attempt. This timeout is not commonly hit, as the socketTimeout typically fires first.
@@ -177,35 +195,6 @@
     <div style="margin-left: 105px;width: 50%;margin-bottom: 10px;margin-top: -10px;">
         IP family/version returned when looking up hostnames via DNS, can be IPv4 and IPv6, IPv4 only or IPv6 only.
     </div>
-
-    <h3 id="gamdig-types">Server Types</h3>
-    <p>
-        Search available types below.<br>
-        You can also view the list <a href="https://github.com/gamedig/node-gamedig#games-list" target="_blank" style="color:#0000EE;text-decoration: underline;">here</a>.
-    </p>
-
-    <div class="row">
-        <input type="text" id="query-game-server-types-search" placeholder="Search types.." style="margin-bottom: 10px;" />
-    </div>
-    <div id="query-game-server-types"></div>
-    <script type="text/javascript">
-        $("#query-game-server-types-search").on("input", function(e) {
-            let value = $(this).val();
-            if(value.length) {
-                $(".query-game-server-type-row").each(function(i, elem){
-                    console.log('yay', $(elem).text(), value, $(elem).text().indexOf(value));
-                    if($(elem).text().toLowerCase().indexOf(value.toLowerCase()) > -1) {
-                        $(elem).show();
-                    } else {
-                        $(elem).hide();
-                    }
-                });
-                return;
-            }
-
-            $(".query-game-server-type-row").show();
-        });
-    </script>
 </script>
 
 <script type="text/html" data-help-name="query-game-server">

query-game-server.js

@@ -108,7 +108,7 @@ module.exports = function(RED) {
 			// so we just use regex to parse the info from the README
 			// this could break so we also reference the gamedig repo
 			let availableTypesContent = fs.readFileSync(require.resolve("gamedig/games.txt"), 'utf-8')
-				results = [];
+				server_types = [];
 
 			availableTypesContent
 				.split(/\r?\n/)
@@ -126,12 +126,15 @@ module.exports = function(RED) {
 					// avp2010|Aliens vs. Predator (2010)|valve|port=27015
 
 					let [game_type, game_name, game_protocol] = line.split('|');
-					results.push({
+					server_types.push({
-						'name': game_type,
+						'name': game_name,
 						'type': game_type,
 						'protocol': game_protocol
 					});
 				});
-			res.json(results);
+			res.json({
+				'result': 'ok',
+				'server_types': server_types
+			});
 		});
 };