diff --git a/src/routes/model/+page.svelte b/src/routes/model/+page.svelte index 93e32ed2848b3b67e49928ab55eaa014cbe5ce1f..0ce8153eb9ffb9e20f90e438081f7c85f5ab6f45 100644 --- a/src/routes/model/+page.svelte +++ b/src/routes/model/+page.svelte @@ -168,10 +168,9 @@ } function generateHTML(json: object){ Object.entries(json).forEach(([key, value]) =>{ - let string = key.replaceAll("_"," ") if(value.hasOwnProperty("value")){ if(value.description&&value.description.includes("Switch")){ - modalModule.html.push(new SettingsSwitch(string,value.description,value)) + modalModule.html.push(new SettingsSwitch(key,value.description,value)) }else if(value.description&&value.description.includes("Selector")){ let options = []; for (let i= 0; i<4;i++){ @@ -179,14 +178,14 @@ options.push("mode_"+i) } } - modalModule.html.push(new SettingsSelector(string,value.description,value,options)) + modalModule.html.push(new SettingsSelector(key,value.description,value,options)) }else if(value.hasOwnProperty("unit")){ - modalModule.html.push((new SettingsNumberfield(string,value.description,value,value.unit))) + modalModule.html.push((new SettingsNumberfield(key,value.description,value,value.unit))) }else{ - modalModule.html.push(new SettingsTextfield(string,value.description,value,key)) + modalModule.html.push(new SettingsTextfield(key,value.description,value,key)) } }else if(typeof value ==="object"){ - modalModule.html.push(new SettingsLabel(string)) + modalModule.html.push(new SettingsLabel(key)) generateHTML(json[key]) }else{ return; @@ -204,6 +203,10 @@ .then(response => response.json()) console.log(JSON.stringify(modalModule.response)) } + function formatLabel(label:string){ + return label.replaceAll("_"," ") + } + function dragStart(event,groupIndex :number, itemIndex :number) { const data = {groupIndex, itemIndex}; event.dataTransfer.setData('text/plain', JSON.stringify(data)); @@ -326,14 +329,14 @@ <ModalBody> {#each modalModule.html as element} {#if element.type=="switch"} - <Input type="switch" label="{element.label}" bind:checked={element.bind.value}/> + <Input id={element.label} type="switch" label="{formatLabel(element.label)}" bind:checked={element.bind.value}/> <Tooltip target={element.label} placement="left"> {element.description} </Tooltip> {:else if element.type=="label"} - <h3>{element.label}</h3> + <h3>{formatLabel(element.label)}</h3> {:else if element.type =="selector"} - <h6>{element.label}</h6> + <h6>{formatLabel(element.label)}</h6> <Input id={element.label} type="select" bind:value={element.bind.value}> {#each element.options as option} <option>{option}</option> @@ -343,16 +346,16 @@ {element.description} </Tooltip> {:else if element.type=="textfield"} - <h7>{element.label}</h7> + <h7>{formatLabel(element.label)}</h7> <Input id={element.label} type="text" bind:value={element.bind.value}/> <Tooltip target={element.label} placement="left"> {element.description} </Tooltip> {:else if element.type=="numberfield"} {#if element.unit !="1"&&element.unit !="-" } - <h7>{element.label} (in {element.unit})</h7> + <h7>{formatLabel(element.label)} (in {element.unit})</h7> {:else} - <h7>{element.label}</h7> + <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"/>