From bdbbee701e5d4fed116c93711afd1589c6ee2c74 Mon Sep 17 00:00:00 2001 From: andreas Date: Thu, 28 Oct 2021 21:23:20 +0200 Subject: [PATCH] dynamically build config form in UI --- web/index.html | 146 +++++++++++++++++++++++++------------------------ 1 file changed, 76 insertions(+), 70 deletions(-) diff --git a/web/index.html b/web/index.html index 2cf0eb5..e10bbec 100644 --- a/web/index.html +++ b/web/index.html @@ -107,6 +107,75 @@ } } } + function createInput(configItem){ + let el; + if (configItem.type === 'boolean' || configItem.type === 'list'){ + el=document.createElement('select') + el.setAttribute('name',configItem.name) + let slist=[]; + if (configItem.list){ + configItem.list.forEach(function(v){ + slist.push({l:v,v:v}); + }) + } + else{ + slist.push({l:'on',v:'true'}) + slist.push({l:'off',v:'false'}) + } + slist.forEach(function(sitem){ + let sitemEl=document.createElement('option'); + sitemEl.setAttribute('value',sitem.v); + sitemEl.textContent=sitem.l; + el.appendChild(sitemEl); + }) + return el; + } + el=document.createElement('input'); + el.setAttribute('name',configItem.name) + if (configItem.type === 'password'){ + el.setAttribute('type','password'); + } + else if (configItem.type === 'number'){ + el.setAttribute('type','number'); + } + else{ + el.setAttribute('type','text'); + } + return el; + } + let configDefinitions; + function loadConfigDefinitions(){ + getJson("config.json") + .then(function(defs){ + let frame=document.querySelector('.configFormRows'); + if (! frame) throw Error("no config form"); + frame.innerHTML=''; + configDefinitions=defs; + defs.forEach(function(item){ + if (! item.type) return; + let row=document.createElement('div'); + row.classList.add('row'); + let label=item.label || item.name; + let labelEl=document.createElement('span'); + labelEl.classList.add('label'); + labelEl.textContent=label; + row.appendChild(labelEl); + let valueEl=createInput(item); + if (!valueEl) return; + row.appendChild(valueEl); + let bt=document.createElement('button'); + bt.classList.add('infoButton'); + bt.addEventListener('click',function(ev){ + alert(item.description); + }); + bt.textContent="?"; + row.appendChild(bt); + frame.appendChild(row); + }) + resetForm(); + }) + .catch(function(err){alert("unable to load config: "+err)}) + } window.setInterval(update,1000); window.addEventListener('load',function(){ let buttons=document.querySelectorAll('button'); @@ -118,7 +187,7 @@ cd.addEventListener('change',function(ev){ showCanDetails(ev.target.checked); }); - resetForm(); + loadConfigDefinitions(); });