Search and search switches are functional

view-webapp/src/main/webapp/js/domhelper.js

@@ -113,6 +113,32 @@ NodeList.prototype.find = function(selector) {
   });
   return Reflect.construct(Array, result, NodeList);
 }
-Element.prototype.find = function (selector) {
+Element.prototype.find = function(selector) {
   return this.querySelectorAll(':scope ' + selector);
 }
+
+NodeList.prototype.clear = function() {
+  this.forEach(function (elem, i) {
+    elem.clear();
+  });
+  return this;
+}
+Element.prototype.clear = function() {
+  this.innerHTML = '';
+  return this;
+}
+
+/*
+ TODO - conflicts with from.val(), rename one of the two
+NodeList.prototype.val = function(value) {
+  this.item(0).val(value);
+}
+Element.prototype.val = function(value) {
+  // TODO - check that "this" has the "value" property
+  if (typeof(value) === 'undefined') {
+    return this.value;
+  } else {
+    this.value = value;
+  }
+}
+*/

view-webapp/src/main/webapp/js/main.js

@@ -137,7 +137,7 @@ HTMLFormElement.prototype.val = function(name, value) {
       ctl.checked = value !== 'false' && Boolean(value);
       return;
     }
-    else return ctl.checked;
+    else return ctl.checked && ctl.value ? ctl.value : ctl.checked;
   }
   console.error(`unhandled input tag or type for input ${name} (tag: ${tag}, type:${type}`);
   return null;
@@ -171,12 +171,6 @@ onLoad(() => {
       $('body').removeClass('dimmed');
     }
   });
-  $('.checkbox').on('click', e => {
-    let chk = e.target.closest('.checkbox');
-    chk.toggleClass('active');
-    let checkbox = chk.find('input')[0];
-    checkbox.checked = !checkbox.checked;
-  });
   /* commented for now - do we want this?
   $('#dimmer').on('click', e => $('.popup').removeClass('shown');
    */

view-webapp/src/main/webapp/js/tour-registration.inc.js

@@ -1,3 +1,50 @@
+const SEARCH_DELAY = 100;
+let searchTimer = undefined;
+let resultTemplate;
+
+function initSearch() {
+  let needle = $('#needle')[0].value;
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+  searchTimer = setTimeout(() => {
+    search(needle);
+  }, SEARCH_DELAY);
+}
+
+function search(needle) {
+  needle = needle.trim();
+  console.log(needle)
+  if (needle && needle.length > 2) {
+    let form = $('#player-form')[0];
+    let search = {
+      needle: needle,
+      aga: form.val('aga'),
+      egf: form.val('egf'),
+      ffg: form.val('ffg'),
+    }
+    let country = form.val('countryFilter');
+    if (country) search.countryFilter = country;
+    let searchFormState = {
+      countryFilter: country ? true : false,
+      aga: search.aga,
+      egf: search.egf,
+      ffg: search.ffg
+    };
+    store('searchFormState', searchFormState);
+    console.log(search)
+    api.postJson('search', search)
+      .then(result => {
+        if (Array.isArray(result)) {
+          console.log(result)
+          let html = resultTemplate.render(result);
+          $('#search-result')[0].innerHTML = html;
+        } else console.log(result);
+      })
+  } else $('#search-result').clear();
+
+}
+
 onLoad(() => {
   $('input.numeric').imask({
     mask: Number,
@@ -11,6 +58,7 @@ onLoad(() => {
     form.addClass('add');
     // $('#player-form input.participation').forEach(chk => chk.checked = true);
     form.reset();
+    $('#player').removeClass('edit').addClass('create');
     modal('player');
   });
   $('#cancel-register').on('click', e => {
@@ -85,24 +133,29 @@ onLoad(() => {
             form.val(`r${r}`, !(player.skip && player.skip.includes(r)));
           }
           form.removeClass('add');
+          $('#player').removeClass('create').addClass('edit');
           modal('player');
         }
       });
   });
+  resultTemplate = jsrender.templates($('#result')[0]);
   $('#needle').on('input', e => {
-    let needle = $('#needle')[0].value;
-    if (needle && needle.length > 2) {
-      let form = $('#player-form')[0];
-      let search = {
-        needle: needle,
-        aga: form.val('aga'),
-        egf: form.val('egf'),
-        ffg: form.val('ffg')
-      }
-      api.postJson('search', search)
-        .then(result => {
-          console.log(result);
-        })
-    } else $('#search-result').addClass('hidden');
+    initSearch();
+  });
+  $('#clear-search').on('click', e => {
+    $('#needle')[0].value = '';
+    $('#search-result').clear();
+  });
+  let searchFromState = store('searchFormState')
+  if (searchFromState) {
+    for (let id of ["countryFilter", "aga", "egf", "ffg"]) {
+      $(`#${id}`)[0].checked = searchFromState[id];
+    }
+  }
+  $('.toggle').on('click', e => {
+    let chk = e.target.closest('.toggle');
+    let checkbox = chk.find('input')[0];
+    checkbox.checked = !checkbox.checked;
+    initSearch();
   });
 });