Mercurial > hg > batmud > maputils
view www/search.js @ 1787:ccf488dac4c2
Some prototyping/initial code for the map search client-side stuff, JavaScript part.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Sun, 29 Oct 2017 05:16:50 +0200 |
parents | |
children | 24e23feca10a |
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 mapInitSearch() { msgLog = []; 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 = ""; }); }