gardenControl = (visualisationObjectView) => { let nowISO = new Date().toISOString(); const form = html` `; form.updateFields = function(element){ if(element){ if(this.ts.value) element.ts = new Date(this.ts.value + "Z").getTime(); if(this.tsend.value) element.tsend = new Date(this.tsend.value + "Z").getTime(); if(this.desc.value) element.desc = this.desc.value; if(this.name.value) element.name = this.name.value; if(this.seasons.selectedOptions){ element.seasons = new Array(); Array.from(this.seasons.selectedOptions).forEach(option => { element.seasons.push(parseInt(option.value)); }); } } return element; } form.addEventListener("submit", (e) => { e.preventDefault(); switch(e.submitter.name){ case "add": let newSeed = {"ts": Date.now(), "x": 0.5, "y":0.5, "active":true}; form.updateFields(newSeed); activeSeeds(visualisationObjectView.value).forEach(elem => elem.active = false); visualisationObjectView.value.seeds.push(newSeed); visualisationObjectView.dispatchEvent(new CustomEvent("input")); break; case "update": form.updateFields(activeSeed(visualisationObjectView.value)); visualisationObjectView.dispatchEvent(new CustomEvent("input")); break; } }); visualisationObjectView.addEventListener("input", (e) => { let active = activeSeed(visualisationObjectView.value); form.ts.value = active && active.ts != undefined ? new Date(active.ts).toISOString().slice(0, -8) : undefined; form.tsend.value = active && active.tsend != undefined ? new Date(active.tsend).toISOString().slice(0, -8) : undefined; form.name.value = active && active.name ? active.name : ""; form.desc.value = active && active.desc ? active.desc : ""; form.seasons.selectedIndex = -1; if(active && active.seasons){ active.seasons.forEach(season => { if (season > 0 && season < 5) form.seasons[season-1].selected = true; }); } }); return form; }