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

This commit is contained in:
Skylar Sadlier 2023-05-10 19:38:10 -06:00
parent a5498a4ba9
commit 8bdb043923
2 changed files with 43 additions and 51 deletions

View File

@ -32,20 +32,38 @@
return 'Query Game Server';
},
oneditprepare: function() {
let server_types = null;
$.getJSON('/gamedig/types', function(data) {
let html = '<table>' +
'<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">';
for(let game of data) {
html += "<tr class=\"query-game-server-type-row\">" +
"<td>"+game['type']+"</td>" +
"<td>"+game['name']+"</td>" +
"<td>"+game['protocol']+"</td>" +
"</tr>";
if(data.result !== 'ok' || !data.hasOwnProperty("server_types"))
{
console.error("server_types failed to load");
return;
}
server_types = data.server_types;
});
$("#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">

View File

@ -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({
'name': game_type,
server_types.push({
'name': game_name,
'type': game_type,
'protocol': game_protocol
});
});
res.json(results);
res.json({
'result': 'ok',
'server_types': server_types
});
});
};