correct some js errors in example
This commit is contained in:
andreas
parent
538f643fbf
commit
c292b82635
|
|
@ -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);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue