diff --git a/src/routes/model/+page.svelte b/src/routes/model/+page.svelte index b69be00d931403f9cc83511c196ceb1a1a017f06..39b64bfddfdc1eecfca935a08a46a609a06cb43a 100644 --- a/src/routes/model/+page.svelte +++ b/src/routes/model/+page.svelte @@ -12,7 +12,8 @@ Styles, Tooltip } from "@sveltestrap/sveltestrap"; import {onMount} from "svelte"; - import InPlaceEdit from './InPlaceEdit.svelte' + import InPlaceEdit from './InPlaceEdit.svelte'; + let dropIndex = null; let changed = false; @@ -104,6 +105,7 @@ let modulesModalOpen: boolean = false; let modulesModalIndex: number; let loopOpen: boolean = false; + let modalChanged: boolean =false; const toggle = () => (open = !open); const toggleModules = () => (modulesModalOpen = !modulesModalOpen); const toggleLoop =() => (loopOpen = !loopOpen); @@ -162,9 +164,10 @@ modalModule.name = module; modalModule.response = JSON.parse(data); modalModule.html = []; - test(modalModule.response) modalModule = modalModule; generateHTML(modalModule.response); + modalChanged=false; + modalChanged=modalChanged; modalModule = modalModule; }catch (error){ console.error(error); @@ -180,10 +183,10 @@ return } if(value.hasOwnProperty("value")){ - if(value["@description"]&&value["@description"].includes("Switch")){ + if(value["@description"]&&value["@description"].toLowerCase().includes("switch")){ value.value= (value.value === 'true'||value.value==="1") //transform string input to boolean for easier binding modalModule.html.push(new SettingsSwitch(key,value["@description"],value)) - }else if(value["@description"]&&value["@description"].includes("Selector")){ + }else if(value["@description"]&&value["@description"].toLowerCase().includes("selector")){ let options = []; for (let i= 0; i<4;i++){ if(value["@description"].includes("mode_"+i)){ @@ -210,12 +213,6 @@ } }) } - function test(json:object){ - Object.entries(json).forEach(([key, value]) =>{ - console.log(key+": "+value) - if(typeof value ==="object"&&value!=null){test(json[key])} - }) - } async function uploadModuleConf(){ const response = await fetch('http://127.0.0.1:8000/modules/config/update', { method: 'PUT', @@ -225,12 +222,21 @@ } }) .then(response => response.json()) - console.log(JSON.stringify(modalModule.response)) + modalChanged=false; + modalChanged=modalChanged; } function formatLabel(label:string){ return label.replaceAll("_"," ") } - + function checkModalChanged(){ + console.log("change") + modalChanged = true; + modalChanged = modalChanged; + } + async function resetModuleConf(){ + const res = await fetch("http://127.0.0.1:8000/modules/" + modalModule.name + "/config/reset"); + getModuleConf(modalModule.name); + } function dragStart(event,groupIndex :number, itemIndex :number) { const data = {groupIndex, itemIndex}; event.dataTransfer.setData('text/plain', JSON.stringify(data)); @@ -353,8 +359,7 @@ <ModalBody> {#each modalModule.html as element} {#if element.type=="switch"} - <Input id={element.label} type="switch" label="{formatLabel(element.label)}" bind:checked={element.bind.value}/> - <p>{element.bind.value}</p> + <Input id={element.label} type="switch" label="{formatLabel(element.label)}" bind:checked={element.bind.value} on:change={()=>checkModalChanged()}/> <Tooltip target={element.label} placement="left"> {element.description} </Tooltip> @@ -362,7 +367,7 @@ <h3>{formatLabel(element.label)}</h3> {:else if element.type =="selector"} <h6>{formatLabel(element.label)}</h6> - <Input id={element.label} type="select" bind:value={element.bind.value}> + <Input id={element.label} type="select" bind:value={element.bind.value} on:change={()=>checkModalChanged()}> {#each element.options as option} <option>{option}</option> {/each} @@ -372,7 +377,7 @@ </Tooltip> {:else if element.type=="textfield"} <h7>{formatLabel(element.label)}</h7> - <Input id={element.label} type="text" bind:value={element.bind.value}/> + <Input id={element.label} type="text" bind:value={element.bind.value} on:change={()=>checkModalChanged()}/> <Tooltip target={element.label} placement="left"> {element.description} </Tooltip> @@ -383,9 +388,9 @@ <h7>{formatLabel(element.label)}</h7> {/if} {#if element.max!=Number.POSITIVE_INFINITY&&element.min!=Number.NEGATIVE_INFINITY} - <Input type="range" min={element.min} max={element.max} step={1} bind:value={element.bind.value} placeholder="range placeholder"/> + <Input type="range" min={element.min} max={element.max} step={1} bind:value={element.bind.value} placeholder="range placeholder" on:change={()=>checkModalChanged()}/> {/if} - <Input id={element.label} type="number" min={element.min} max={element.max} bind:value={element.bind.value}/> + <Input id={element.label} type="number" min={element.min} max={element.max} bind:value={element.bind.value} on:change={()=>checkModalChanged()}/> <Tooltip target={element.label} placement="left"> {element.description} </Tooltip> @@ -393,7 +398,12 @@ {/each} </ModalBody> <ModalFooter> - <Button on:click={uploadModuleConf}>test switch</Button> + <ButtonGroup> + {#if modalChanged} + <Button color="primary" on:click={uploadModuleConf}><Icon name="floppy" /> Save</Button> + {/if} + <Button color="danger" on:click={resetModuleConf}><Icon name="arrow-counterclockwise" /> Reset to Default</Button> + </ButtonGroup> </ModalFooter> </Modal> <Modal isOpen={modulesModalOpen} toggle={toggleModules} scrollable>