diff --git a/src/routes/model/+page.svelte b/src/routes/model/+page.svelte index 6fbd1ec2bb0e249ed16bdf691e7cbf77a3b19e53..d78e96f8f47dba736c96a4acd9dc34bdf964ce0f 100644 --- a/src/routes/model/+page.svelte +++ b/src/routes/model/+page.svelte @@ -26,6 +26,7 @@ description: string; bind:string; } + class SettingsSwitch implements SettingsUi{ readonly type="switch"; label:string; @@ -37,6 +38,7 @@ this.description = description; } } + class SettingsSelector implements SettingsUi{ readonly type="selector"; label:string; @@ -355,28 +357,28 @@ <Modal isOpen={open} toggle={toggle} scrollable> <ModalHeader toggle={toggle}>{modalModule.name} settings</ModalHeader> <ModalBody> - {#each modalModule.html as element} + {#each modalModule.html as element, index} {#if element.type=="switch"} - <Input id={element.label} type="switch" label="{formatLabel(element.label)}" bind:checked={element.bind.value} on:change={()=>checkModalChanged()}/> - <Tooltip target={element.label} placement="left"> + <Input id="uiElement{index}" type="switch" label="{formatLabel(element.label)}" bind:checked={element.bind.value} on:change={()=>checkModalChanged()}/> + <Tooltip target="uiElement{index}" placement="left"> {element.description} </Tooltip> {:else if element.type=="label"} <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} on:change={()=>checkModalChanged()}> + <Input id="uiElement{index}" type="select" bind:value={element.bind.value} on:change={()=>checkModalChanged()}> {#each element.options as option} <option>{option}</option> {/each} </Input> - <Tooltip target={element.label} placement="left"> + <Tooltip target="uiElement{index}" placement="left"> {element.description} </Tooltip> {:else if element.type=="textfield"} <h7>{formatLabel(element.label)}</h7> - <Input id={element.label} type="text" bind:value={element.bind.value} on:change={()=>checkModalChanged()}/> - <Tooltip target={element.label} placement="left"> + <Input id="uiElement{index}" type="text" bind:value={element.bind.value} on:change={()=>checkModalChanged()}/> + <Tooltip target="uiElement{index}" placement="left"> {element.description} </Tooltip> {:else if element.type=="numberfield"} @@ -388,8 +390,8 @@ {#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" on:change={()=>checkModalChanged()}/> {/if} - <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"> + <Input id="uiElement{index}" type="number" min={element.min} max={element.max} bind:value={element.bind.value} on:change={()=>checkModalChanged()}/> + <Tooltip target="uiElement{index}" placement="left"> {element.description} </Tooltip> {/if}