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 = "";
  });
}