From c292b82635755acd5bffa9c17d339e6a32b67729 Mon Sep 17 00:00:00 2001 From: andreas Date: Thu, 14 Nov 2024 18:33:18 +0100 Subject: [PATCH] correct some js errors in example --- lib/exampletask/index.js | 173 +++++++++++++++++++-------------------- 1 file changed, 83 insertions(+), 90 deletions(-) diff --git a/lib/exampletask/index.js b/lib/exampletask/index.js index 155991cc..b2c6f9db 100644 --- a/lib/exampletask/index.js +++ b/lib/exampletask/index.js @@ -5,104 +5,97 @@ //on our case this is "testboard" //so we only start any action when we receive the init event //and we successfully checked that our requested capability is there - let isActive=false; const tabName="example"; const configName="exampleBDSel"; const infoUrl='https://github.com/wellenvogel/esp32-nmea2000/tree/master/lib/exampletask'; let boatItemName; let boatItemElement; - api.registerListener((id,data)=>{ - if (isActive){ - console.log("exampletask status listener",data); - } - },api.EVENTS.status) - api.registerListener((id,data)=>{ - if (id === api.EVENTS.init){ - //data is capabilities - //check if our requested capability is there (see GwExampleTask.h) - if (data.testboard) isActive=true; - if (isActive){ - //add a simple additional tab page - //you will have to build the content of the page dynamically - //using normal dom manipulation methods - //you can use the helper addEl to create elements - let page=api.addTabPage(tabName,"Example"); - api.addEl('div','hdg',page,"this is a test tab"); - let vrow=api.addEl('div','row',page); - api.addEl('span','label',vrow,'loops: '); - let lcount=api.addEl('span','value',vrow,'0'); - //query the loop count - window.setInterval(()=>{ - fetch('/api/user/exampleTask/data') - .then((res)=>{ - if (! res.ok) throw Error("server error: "+res.status); - return res.text(); - }) - .then((txt)=>{ - lcount.textContent=txt; - }) - .catch((e)=>console.log("rq:",e)); - },1000); - api.addEl('button','',page,'Info').addEventListener('click',function(ev){ - window.open(infoUrl,'info'); + api.registerListener((id, data) => { + //data is capabilities + //check if our requested capability is there (see GwExampleTask.h) + if (!data.testboard) return; //do nothing if we are not active + //add a simple additional tab page + //you will have to build the content of the page dynamically + //using normal dom manipulation methods + //you can use the helper addEl to create elements + let page = api.addTabPage(tabName, "Example"); + api.addEl('div', 'hdg', page, "this is a test tab"); + let vrow = api.addEl('div', 'row', page); + api.addEl('span', 'label', vrow, 'loops: '); + let lcount = api.addEl('span', 'value', vrow, '0'); + //query the loop count + window.setInterval(() => { + fetch('/api/user/exampleTask/data') + .then((res) => { + if (!res.ok) throw Error("server error: " + res.status); + return res.text(); }) - //add a tab for an external URL - api.addTabPage('exhelp','Info',infoUrl); + .then((txt) => { + //set the text content of our value element with what we received + lcount.textContent = txt; + }) + .catch((e) => console.log("rq:", e)); + }, 1000); + api.addEl('button', '', page, 'Info').addEventListener('click', function (ev) { + window.open(infoUrl, 'info'); + }) + //add a tab for an external URL + api.addTabPage('exhelp', 'Info', infoUrl); + //now as we know we are active - register all the listeners we need + api.registerListener((id, data) => { + console.log("exampletask status listener", data); + }, api.EVENTS.status) + api.registerListener((id, data) => { + if (data === tabName) { + //maybe we need some activity when our page is being activated + console.log("example tab activated"); } - } - if (isActive){ - //console.log("exampletask listener",id,data); - if (id === api.EVENTS.tab){ - if (data === tabName){ - //maybe we need some activity when our page is being activated - console.log("example tab activated"); - } + }, api.EVENTS.tab); + + api.registerListener((id, data) => { + //we have a configuration that + //gives us the name of a boat data item we would like to + //handle special + //in our case we just use an own formatter and add some + //css to the display field + //as this item can change we need to keep track of the + //last item we handled + let nextboatItemName = data[configName]; + console.log("value of " + configName, nextboatItemName); + if (nextboatItemName) { + //register a user formatter that will be called whenever + //there is a new valid value + //we simply add an "X:" in front + api.addUserFormatter(nextboatItemName, "m(x)", function (v, valid) { + if (!valid) return; + return "X:" + v; + }) + //after this call the item will be recreated } - if (id == api.EVENTS.config){ - //we have a configuration that - //gives us the name of a boat data item we would like to - //handle special - //in our case we just use an own formatter and add some - //css to the display field - //as this item can change we need to keep track of the - //last item we handled - let nextboatItemName=data[configName]; - console.log("value of "+configName,nextboatItemName); - if (nextboatItemName){ - //register a user formatter that will be called whenever - //there is a new valid value - //we simply add an "X:" in front - api.addUserFormatter(nextboatItemName,"m(x)",function(v,valid){ - if (!valid) return; - return "X:"+v; - }) - //after this call the item will be recreated - } - if (boatItemName !== undefined && boatItemName != nextboatItemName){ - //if the boat item that we handle has changed, remove - //the previous user formatter (this will recreate the item) - api.removeUserFormatter(boatItemName); - } - boatItemName=nextboatItemName; - boatItemElement=undefined; + if (boatItemName !== undefined && boatItemName != nextboatItemName) { + //if the boat item that we handle has changed, remove + //the previous user formatter (this will recreate the item) + api.removeUserFormatter(boatItemName); } - if (id == api.EVENTS.dataItemCreated){ - //this event is called whenever a data item has - //been created (or recreated) - //if this is the item we handle, we just add a css class - //we could also completely rebuild the dom below the element - //and use our formatter to directly write/draw the data - //avoid direct manipulation of the element (i.e. changing the classlist) - //as this element remains there all the time - if (boatItemName && boatItemName == data.name){ - boatItemElement=data.element; - //use the helper forEl to find elements within the dashboard item - //the value element has the class "dashValue" - api.forEl(".dashValue",function(el){ - el.classList.add("examplecss"); - },boatItemElement); - } + boatItemName = nextboatItemName; + boatItemElement = undefined; + }, api.EVENTS.config); + api.registerListener((id, data) => { + //this event is called whenever a data item has + //been created (or recreated) + //if this is the item we handle, we just add a css class + //we could also completely rebuild the dom below the element + //and use our formatter to directly write/draw the data + //avoid direct manipulation of the element (i.e. changing the classlist) + //as this element remains there all the time + if (boatItemName && boatItemName == data.name) { + boatItemElement = data.element; + //use the helper forEl to find elements within the dashboard item + //the value element has the class "dashValue" + api.forEl(".dashValue", function (el) { + el.classList.add("examplecss"); + }, boatItemElement); } - } - }) + }, api.EVENTS.dataItemCreated); + }, api.EVENTS.init); })();