Mercurial > hg > batmud > maputils

changeset 1793:e65dde84a6a8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Various improvements to the front-end code.
author Matti Hamalainen <ccr@tnsp.org>
date Sun, 29 Oct 2017 18:36:39 +0200
parents 76079d7293c7
children 3ba29e3fa63d
files www/search.html www/search.js
diffstat 2 files changed, 121 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/www/search.html	Sun Oct 29 17:59:42 2017 +0200
+++ b/www/search.html	Sun Oct 29 18:36:39 2017 +0200
@@ -31,23 +31,54 @@
       border-radius:0.3em;
       padding: 0.5em;
     }
-    
+
     #resultsBox {
       width: 60%;
       height: 100%;
       margin: auto;
     }
-    
+
     #logBox {
        display: inline-block;
        vertical-align: top;
        padding: 0.5em;
        margin-top: 0.5em;
     }
-    
+
     #controls {
       text-align: right;
-      padding: 0.5em;
+    }
+
+    #controls button {
+      padding-left: 1em;
+      padding-right: 1em;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+      margin: 0.5em;
+    }
+
+    #mapList {
+      margin: 0.5em;
+      display: block;
+    }
+
+    #mapList .map + label {
+      display: inline;
+      padding: 0.25em;
+      margin: 0.15em;
+      border-radius: 0.2em;
+      color: black;
+      background: #ccc;
+    }
+
+    #mapList .map {
+      display: none;
+    }
+
+    #mapList .map:checked + label {
+      color: white;
+      background: green;
+      text-decoration: underline;
     }
   </style>
 </head>
@@ -79,8 +110,10 @@
 ^^^^^^^^^hhhhvvvvHH^R
 </textarea>
   <div id="controls">
-    <button id="btnClear" type="button">Clear</button> 
-    <button id="btnSearch" type="button">Search</button> 
+    <div id="mapList"></div>
+    <button id="btnMaps" type="button">C^</button>
+    <button class="large" id="btnReset" type="button">Reset search</button>
+    <button class="large" id="btnSearch" type="button">Search</button>
   </div>
 </div>
 
--- a/www/search.js	Sun Oct 29 17:59:42 2017 +0200
+++ b/www/search.js	Sun Oct 29 18:36:39 2017 +0200
@@ -4,8 +4,9 @@
 // (C) Copyright 2017 Tecnic Software productions (TNSP)
 //
 
+var mapServer = "ws://localhost:9999";
 var fieldPattern, fieldRes, fieldLog;
-var msgLog, mapWS, mapList;
+var msgLog, mapWS, mapList = [];
 
 
 function mapAddEventOb(evobj, evtype, evcallback)
@@ -29,6 +30,12 @@
 }
 
 
+function mapCapitalize(str)
+{
+  return str.substr(0,1).toUpperCase() + str.substr(1);
+}
+
+
 function mapLog(msg)
 {
   if (msgLog.length >= 10)
@@ -45,19 +52,46 @@
 
 function mapPerformSearch()
 {
-  if (fieldPattern.value.trim() == "")
+  // Check the search pattern for some sanity before
+  // submitting to the server .. though we do checks there also.
+  var tmp = fieldPattern.value.trim();
+  if (tmp == "")
   {
     mapLog("Nothing to search for.");
     return;
   }
 
+  if (tmp.length > 40*40)
+  {
+    mapLog("Search pattern too large!");
+    return;
+  }
+
+  // Check which maps are enabled, if any
+  var searchList = [];
+  for (var i = 0; i < mapList.length; i++)
+  {
+    var res = mapList[i];
+    var elem = document.getElementById("map_"+ res[0]);
+    if (elem && elem.checked)
+      searchList.push(res[0]);
+  }
+
+  if (searchList.length == 0 && mapList.length > 0)
+  {
+    mapLog("No maps selected!");
+    return;
+  }
+
+  // Are we running an old query?
   if (mapWS)
   {
     mapLog("Old query not finished.");
     return;
   }
 
-  mapWS = new WebSocket("ws://localhost:9999/mapSearch");
+  // Open a WebSocket connection ..
+  mapWS = new WebSocket(mapServer);
   if (!mapWS)
   {
     mapLog("Could not create WebSocket connection?");
@@ -71,7 +105,7 @@
   {
     // Web Socket is connected, send data using send()
     mapLog("Sending query to server.");
-    mapWS.send("MAPSEARCH\n" + fieldPattern.value);
+    mapWS.send("MAPSEARCH:"+ searchList.join(":") +"\n" + fieldPattern.value);
   };
 
   mapWS.onmessage = function(evt)
@@ -94,7 +128,7 @@
           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>"+
+            res[3] +", "+ res[4] +" at "+ mapCapitalize(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>" : "")+
@@ -140,7 +174,7 @@
 
 function mapGetData()
 {
-  var tmpWS = new WebSocket("ws://localhost:9999/mapSearch");
+  var tmpWS = new WebSocket(mapServer);
   if (!tmpWS)
   {
     mapLog("Could not create WebSocket connection?");
@@ -163,16 +197,20 @@
     {
       var results = JSON.parse(evt.data.substr(5));
       mapLog("Receiving map information.");
-      if (results)
+      if (results && Array.isArray(results))
       {
+        mapList = 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>";
+          str +=
+            "<input class=\"map\" id=\""+ id +
+            "\" type=\"checkbox\" checked=\"checked\">"+
+            "<label for=\""+ id +"\">"+ mapCapitalize(res[0]) +"</label>";
         }
-        var elem = document.getElementById("maps");
+        var elem = document.getElementById("mapList");
         elem.innerHTML = str;
       }
       else
@@ -207,7 +245,6 @@
 function mapInitSearch()
 {
   msgLog = [];
-
   mapGetData();
 
   fieldPattern = document.getElementById("pattern");
@@ -216,11 +253,45 @@
   btnSearch = document.getElementById("btnSearch");
 
   mapAddEventOb(btnSearch, "click", mapPerformSearch);
-  mapAddEvent("btnClear", "click",
+
+  mapAddEvent("btnReset", "click",
   function ()
   {
     mapLog("Cleared pattern and results.");
     fieldRes.innerHTML = "";
     fieldPattern.value = "";
   });
+
+  mapAddEvent("btnMaps", "click",
+  function ()
+  {
+    var same = true, first = true;
+    for (var i = 0; i < mapList.length; i++)
+    {
+      var res = mapList[i];
+      var elem = document.getElementById("map_"+ res[0]);
+      if (elem)
+      {
+        if (first)
+          same = elem.checked;
+        else
+        if (elem.checked != same)
+        {
+          same = false;
+          break;
+        }
+        first = false;
+      }
+    }
+
+    same = !same;
+
+    for (var i = 0; i < mapList.length; i++)
+    {
+      var res = mapList[i];
+      var elem = document.getElementById("map_"+ res[0]);
+      if (elem)
+        elem.checked = same;
+    }
+  });
 }