use a more semantic input for the NMEA filters

web/index.html

@@ -58,7 +58,8 @@
             let v=jsonData[k];
             el.value=v;
             el.setAttribute('data-loaded',v);
-            checkChange(el);
+            let changeEvent=new Event('change');
+            el.dispatchEvent(changeEvent);
           }
         }
       });
@@ -80,6 +81,9 @@
     let values=document.querySelectorAll('.configForm select , .configForm input');
     for (let i=0;i<values.length;i++){
       let v=values[i];
+      let name=v.getAttribute('name');
+      if (! name) continue;
+      if (name.indexOf("_") >= 0) continue;
       let check=v.getAttribute('data-check');
       if (check){
         if (typeof(self[check]) === 'function'){
@@ -90,7 +94,7 @@
           }
         }
       }
-      url+=v.getAttribute('name')+"="+encodeURIComponent(v.value)+"&";
+      url+=name+"="+encodeURIComponent(v.value)+"&";
     }
     getJson(url)
       .then(function(status){
@@ -152,18 +156,18 @@
     let container=document.getElementById('overlayContainer');
     container.classList.add('hidden');
   }
-  function checkChange(el) {
+  function checkChange(el,row) {
       let loaded = el.getAttribute('data-loaded');
       if (loaded !== undefined) {
         if (loaded != el.value) {
-          el.classList.add('changed');
+          row.classList.add('changed');
         }
         else {
-          el.classList.remove("changed");
+          row.classList.remove("changed");
         }
       }
     }
-  function createInput(configItem){
+  function createInput(configItem,frame){
     let el;
     if (configItem.type === 'boolean' || configItem.type === 'list'){
       el=document.createElement('select')
@@ -184,8 +188,56 @@
         sitemEl.textContent=sitem.l;
         el.appendChild(sitemEl);
       })
+      frame.appendChild(el);
       return el;
     }
+    if (configItem.type === 'filter'){
+      el=document.createElement('div');
+      el.classList.add('filter');
+      let ais=createInput({
+        type:'list',
+        name:configItem.name+"_ais",
+        list:['aison','aisoff']
+      },el);
+      let mode=createInput({
+        type:'list',
+        name:configItem.name+"_mode",
+        list: ['whitelist','blacklist']
+      },el);
+      let sentences=createInput({
+        type:'text',
+        name:configItem.name+"_sentences",
+      },el);
+      let data=document.createElement('input');
+      data.setAttribute('type','hidden');
+      el.appendChild(data);
+      let changeFunction=function(){
+        let cv=data.value||"";
+        let parts=cv.split(":");
+        ais.value=(parts[0]=='0')?"aisoff":"aison";
+        mode.value=(parts[1]=='0')?"whitelist":"blacklist";
+        sentences.value=parts[2]||"";
+      }
+      let updateFunction=function(){
+        let nv=(ais.value == 'aison')?"1":"0";
+        nv+=":";
+        nv+=(mode.value == 'blacklist')?"1":"0";
+        nv+=":";
+        nv+=sentences.value;
+        data.value=nv;
+        let chev=new Event('change');
+        data.dispatchEvent(chev);
+      }
+      mode.addEventListener('change',updateFunction);
+      ais.addEventListener("change",updateFunction);
+      sentences.addEventListener("change",updateFunction);
+      data.addEventListener('change',function(ev){
+        changeFunction();
+      });
+      data.setAttribute('name',configItem.name);
+      frame.appendChild(el);
+      return data;  
+    }
     el=document.createElement('input');
     el.setAttribute('name',configItem.name)
     if (configItem.type === 'password'){
@@ -197,6 +249,7 @@
     else{
       el.setAttribute('type','text');
     }
+    frame.appendChild(el);
     return el;
   }
   let configDefinitions;
@@ -229,21 +282,21 @@
                 labelEl.classList.add('label');
                 labelEl.textContent = label;
                 row.appendChild(labelEl);
-                let valueEl = createInput(item);
+                let valueEl = createInput(item,row);
                 if (!valueEl) return;
                 valueEl.setAttribute('data-default', item.default);
                 valueEl.addEventListener('change', function (ev) {
                   let el = ev.target;
-                  checkChange(el);
+                  checkChange(el,row);
                 })
                 if (item.check) valueEl.setAttribute('data-check', item.check);
-                row.appendChild(valueEl);
                 let bt = document.createElement('button');
                 bt.classList.add('defaultButton');
                 bt.setAttribute('data-default', item.default);
                 bt.addEventListener('click', function (ev) {
                   valueEl.value = valueEl.getAttribute('data-default');
-                  checkChange(valueEl);
+                  let changeEvent=new Event('change');
+                  valueEl.dispatchEvent(changeEvent);
                 })
                 bt.textContent = "X";
                 row.appendChild(bt);
@@ -284,7 +337,10 @@
     border: 1px solid grey;
     max-width: 40em;
 }
-.changed {
+.changed input{
+    color: green
+}
+.changed select{
     color: green
 }
 span.label {
@@ -305,6 +361,9 @@ span#connected.ok{
 .row {
     margin: 0.5em;
 }
+.filter {
+    display: inline-block;
+}
 .buttons {
     padding-left: 1em;
 }