Mercurial > hg > batmud > maputils
view www/search.js @ 1790:24e23feca10a
Add server functionality to provide list of maps available for searching,
and implement viewing of those map names on the front-end. The idea is to be
able to select the maps to be searched in the future.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Sun, 29 Oct 2017 17:14:57 +0200 |
parents | ccf488dac4c2 |
children | e65dde84a6a8 |
line wrap: on
line source
// // Frontend map/location search JavaScript functionality // Written by Matti 'ccr' Hamalainen <ccr@tnsp.org> // (C) Copyright 2017 Tecnic Software productions (TNSP) // var fieldPattern, fieldRes, fieldLog; var msgLog, mapWS, mapList; function mapAddEventOb(evobj, evtype, evcallback) { if (evobj == null || typeof(evobj) == 'undefined') return; if (evobj.addEventListener) evobj.addEventListener(evtype, evcallback, false); else if (evobj.attachEvent) evobj.attachEvent("on" + evtype, evcallback); else evobj["on"+evtype] = evcallback; } function mapAddEvent(obname, evtype, evcallback) { mapAddEventOb(document.getElementById(obname), evtype, evcallback); } function mapLog(msg) { if (msgLog.length >= 10) msgLog = msgLog.slice(1, 10); msgLog.push(msg); if (fieldLog) { fieldLog.innerHTML = msgLog.join("<br>"); } } function mapPerformSearch() { if (fieldPattern.value.trim() == "") { mapLog("Nothing to search for."); return; } if (mapWS) { mapLog("Old query not finished."); return; } mapWS = new WebSocket("ws://localhost:9999/mapSearch"); if (!mapWS) { mapLog("Could not create WebSocket connection?"); return; } mapLog("WebSocket connection to server established."); btnSearch.disabled = true; mapWS.onopen = function() { // Web Socket is connected, send data using send() mapLog("Sending query to server."); mapWS.send("MAPSEARCH\n" + fieldPattern.value); }; mapWS.onmessage = function(evt) { if (evt.data.substr(0, 6) == "ERROR:") { mapLog("ERROR! "+ evt.data.substr(6)); } else if (evt.data.substr(0, 7) == "RESULT:" && evt.data.length > 10) { var results = JSON.parse(evt.data.substr(7)); mapLog("Receiving results."); if (results) { var str = ""; for (var i = 0; i < results.length; i++) { var res = results[i]; str += "<div class=\"result\">"+ "<a href=\"http://jeskko.pupunen.net/gmap2/?x="+ res[5] +"&y="+ res[6] +"&zoom=10\">"+ res[3] +", "+ res[4] +" at "+ res[2] +"</a>"+ " <span class=\"glob\">["+ res[5] +", "+ res[6] +" global]</span>"+ " <span class=\"perc\">("+ res[0] +"% match)</span>"+ (res[1] ? " <span class=\"cent\">centered</span>" : "")+ "</div>"; } fieldRes.innerHTML = str; } else fieldRes.innerHTML = "ERROR!"; } else if (evt.data.substr(0, 9) == "PROGRESS:") { mapLog("Search progress "+ evt.data.substr(9) +"% .."); } else if (evt.data == "END") { mapLog("Server ending communication."); mapWS.close(); } else { mapLog("Sir! A message for you! "+ evt.data); } }; mapWS.onclose = function() { mapLog("WebSocket connection closed."); mapWS = null; btnSearch.disabled = false; }; mapWS.onerror = function() { mapLog("Error!"); mapWS = null; btnSearch.disabled = false; }; } function mapGetData() { var tmpWS = new WebSocket("ws://localhost:9999/mapSearch"); if (!tmpWS) { mapLog("Could not create WebSocket connection?"); return; } tmpWS.onopen = function() { tmpWS.send("GETMAPS"); }; tmpWS.onmessage = function(evt) { if (evt.data.substr(0, 6) == "ERROR:") { mapLog("ERROR! "+ evt.data.substr(6)); } else if (evt.data.substr(0, 5) == "MAPS:" && evt.data.length > 8) { var results = JSON.parse(evt.data.substr(5)); mapLog("Receiving map information."); if (results) { var str = ""; for (var i = 0; i < results.length; i++) { var res = results[i]; var id = "map_"+ res[0]; str += "<span class=\"map\"><input id=\""+ id +"\" type=\"checkbox\" checked=\"checked\"><label for=\""+ id +"\">"+ res[0] +"</label></span>"; } var elem = document.getElementById("maps"); elem.innerHTML = str; } else fieldRes.innerHTML = "ERROR!"; } else if (evt.data == "END") { mapLog("Server ending communication."); tmpWS.close(); } else { mapLog("Sir! A message for you! "+ evt.data); } }; tmpWS.onclose = function() { mapLog("WebSocket connection closed."); tmpWS = null; }; tmpWS.onerror = function() { mapLog("Error!"); tmpWS = null; }; } function mapInitSearch() { msgLog = []; mapGetData(); fieldPattern = document.getElementById("pattern"); fieldRes = document.getElementById("results"); fieldLog = document.getElementById("log"); btnSearch = document.getElementById("btnSearch"); mapAddEventOb(btnSearch, "click", mapPerformSearch); mapAddEvent("btnClear", "click", function () { mapLog("Cleared pattern and results."); fieldRes.innerHTML = ""; fieldPattern.value = ""; }); }