changeset 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 eb98e57d3969
children 6539555f00b0
files www/search.js
diffstat 1 files changed, 158 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/search.js	Sun Oct 29 05:16:50 2017 +0200
@@ -0,0 +1,158 @@
+//
+// 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 = "";
+  });
+}