add first implementation config edit

src/routes/model/+page.svelte

@@ -4,12 +4,12 @@
         Button,
         ButtonGroup,
         Col,
-        Container, FormGroup,
-        Icon, Input, Label,
+        Container, Form, FormGroup,
+        Icon, Input, InputGroup, InputGroupText, Label,
         ListGroup,
         ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader,
         Row,
-        Styles
+        Styles, Tooltip
     } from "@sveltestrap/sveltestrap";
     import {onMount} from "svelte";
     import InPlaceEdit from './InPlaceEdit.svelte'
@@ -18,25 +18,96 @@
     let changed = false;
     let open = false;
     let saveAlert = false;
+
+    interface SettingsUi {
+        type:string;
+        label: string;
+        description: string;
+        bind:string;
+    }
+    class SettingsSwitch implements SettingsUi{
+        readonly type="switch";
+        label:string;
+        description:string;
+        bind:string;
+        constructor(label:string,description:string, bind:string) {
+            this.bind = bind;
+            this.label=label;
+            this.description = description;
+        }
+    }
+    class SettingsSelector implements SettingsUi{
+        readonly type="selector";
+        label:string;
+        description:string;
+        bind:string;
+        options:string[];
+        constructor(label:string,description:string, bind:string,options:string[]) {
+            this.bind = bind;
+            this.label=label;
+            this.description = description;
+            this.options=options;
+        }
+    }
+    class SettingsTextfield implements SettingsUi{
+        readonly type="textfield";
+        label:string;
+        description:string;
+        bind:string;
+        input: string;
+        constructor(label:string,description:string, bind:string, input:string) {
+            this.bind = bind;
+            this.label=label;
+            this.description = description;
+            this.input=input;
+        }
+    }
+    class SettingsNumberfield implements SettingsUi{
+        readonly type="numberfield";
+        label:string;
+        description:string;
+        bind:string;
+        input: number;
+        constructor(label:string,description:string, bind:string, input:number) {
+            this.bind = bind;
+            this.label=label;
+            this.description = description;
+            this.input=input;
+        }
+    }
+    class SettingsLabel{
+        readonly type="label"
+        label:string;
+        constructor(label:string) {
+            this.label=label;
+        }
+    }
     let modalModule = {
         name: '',
-        response: {}}
+        response: {},
+        html:[]
+        }
     class group{
         name: string;
+        loop: boolean = true;
         loopsize:number;
-        modules:string[];
+        modules:string[]=[];
         constructor(name: string, loopsize: number){
             this.name = name;
             this.loopsize = loopsize;
-            this.modules  = [];
         }
     }
     let groups : group[] = [];
     let modules: string[]=[];
     let modulesModalOpen: boolean = false;
     let modulesModalIndex: number;
+    let loopOpen: boolean = false;
     const toggle = () => (open = !open);
     const toggleModules = () => (modulesModalOpen = !modulesModalOpen);
+    const toggleLoop =() => (loopOpen = !loopOpen);
+
+    let testbool:boolean = true;
+
     onMount(async ()=>{
             const res = await fetch("http://127.0.0.1:8000/convergence");
             const data = await res.json();
@@ -45,6 +116,7 @@
             modules = modules.concat(data["PostprocessingSteps"]);
             modules = modules.concat(data["SizingLoop"]);
             modules = Array.from(new Set(modules))
+            modules.sort()
     })
     async function loadModel(){
                 const res = await fetch("http://127.0.0.1:8000/convergence");
@@ -66,10 +138,7 @@
     async function uploadModel(){
         const response = await fetch('http://127.0.0.1:8000/modules/update', {
             method: 'PUT',
-            body: JSON.stringify({  SetupSteps: SetupSteps,
-                                    StudyMission:StudySteps,
-                                    SizingLoop:SizingSteps,
-                                    PostprocessingSteps:PostprocessSteps}),
+            body: JSON.stringify({groups}),
             headers: {
                 'content-type': 'application/json'
             }
@@ -85,9 +154,29 @@
         const res = await fetch("http://127.0.0.1:8000/modules/"+module+"/config");
         const data = await res.json();
         modalModule.name = module;
-        modalModule.response = data;
+        modalModule.response = JSON.parse(data);
+        modalModule.html= []
+        generateHTML(modalModule.response,modalModule.html)
         modalModule=modalModule;
     }
+    function generateHTML(json: object){
+        Object.entries(json).forEach(([key, value]) =>{
+            if(value.hasOwnProperty("value")){
+                if(value.description&&value.description.includes("Switch")){
+                    modalModule.html.push(new SettingsSwitch(key,value.description,value))
+                }else if(value.description&&value.description.includes("Selector")){
+                    modalModule.html.push(new SettingsSelector(key,value.description,value,["mode_0","mode_1","mode_2"]))
+                }else{
+                    modalModule.html.push(new SettingsTextfield(key,value.description,key,key))
+                }
+            }else if(typeof value ==="object"){
+                modalModule.html.push(new SettingsLabel(key))
+                generateHTML(json[key])
+            }else{
+                return;
+            }
+        })
+    }
     function dragStart(event,groupIndex :number, itemIndex :number) {
         const data =  {groupIndex, itemIndex};
         event.dataTransfer.setData('text/plain', JSON.stringify(data));
@@ -130,8 +219,6 @@
     function addModules(index:number, modulname: string){
         groups.at(index).modules.push(modulname)
         updateAll()
-        console.log("add")
-        console.log(modulname)
     }
     function submitGrpName(field:number) {
         return ({detail: newValue}) => {
@@ -149,6 +236,13 @@
         groups.at(grpIndex).modules.splice(modulIndex, 1);
         updateAll()
     }
+    function copyGroup(index:number){
+        const newGroup = new group("copy of "+groups[index].name,groups[index].loopsize);
+        newGroup.modules=newGroup.modules.concat(groups[index].modules);
+        newGroup.loop = newGroup.loop;
+        groups.push(newGroup);
+        updateAll()
+    }
 </script>
 <Container>
     <h2>Simulationsmodel</h2>
@@ -168,39 +262,70 @@
     </ButtonGroup>
     <Row class="py-3">
         {#each groups as groupitem, groupIndex(groupitem)}
-        <Col>
-            <h3><InPlaceEdit bind:value={groupitem.name} on:submit={submitGrpName(groupIndex)}/></h3>
-            <Button color="dark" outline on:click={()=>deleteGroup(groupIndex)}><Icon name="trash" /></Button>
-            <FormGroup>
-                <Label>Loopsize:</Label>
-                <Input type="number" placeholder="{groupitem.loopsize}" />
-            </FormGroup>
-            <Button color="dark" outline on:click={()=>{modulesModalIndex=groupIndex;toggleModules()}}><Icon name="boxes" /> manage Modules</Button>
-            <ul class="list-group"
-                on:drop={event=>drop(event,groupIndex)}
-                on:dragover|preventDefault={event=>dragOver(event)}>
-                {#each groupitem.modules as item, itemIndex(itemIndex)}
-                    <div class="item" data-index={itemIndex}>
-                    <li class="list-group-item list-group-item-action"
-                        draggable="true" on:dragstart={event=>dragStart(event,groupIndex,groupitem.modules.indexOf(item))}
-                        on:click={getModuleConf(item),toggle}>
-                            {item}
-                        </li>
-                    </div>
-                {/each}
-            </ul>
+        <Col >
+            <Row>
+                <h3><InPlaceEdit bind:value={groupitem.name} on:submit={submitGrpName(groupIndex)}/></h3>
+                <ButtonGroup>
+                    <Button color="dark" outline on:click={()=>{modulesModalIndex=groupIndex;toggleModules()}}><Icon name="boxes"/> Modules</Button>
+                    <Button color="dark" outline on:click={()=>{modulesModalIndex=groupIndex;toggleLoop()}}><Icon name="arrow-clockwise" />
+                        {#if groupitem.loop}
+                            {groupitem.loopsize}
+                        {:else}
+                            auto
+                        {/if}
+                    </Button>
+                    <Button color="dark" outline on:click={()=>copyGroup(groupIndex)}><Icon name="copy" /></Button>
+                    <Button color="dark" outline on:click={()=>deleteGroup(groupIndex)}><Icon name="trash" /></Button>
+                </ButtonGroup>
+            </Row>
+                <ul class="list-group"
+                    on:drop={event=>drop(event,groupIndex)}
+                    on:dragover|preventDefault={event=>dragOver(event)}>
+                    {#each groupitem.modules as item, itemIndex(itemIndex)}
+                        <div class="item" data-index={itemIndex}>
+                            <li class="list-group-item list-group-item-action"
+                                draggable="true" on:dragstart={event=>dragStart(event,groupIndex,groupitem.modules.indexOf(item))}
+                                on:click={getModuleConf(item),toggle}>
+                                {item}
+                            </li>
+                        </div>
+                    {/each}
+                </ul>
         </Col>
             {/each}
     </Row>
     <Modal isOpen={open} toggle={toggle} scrollable>
-        <ModalHeader toggle={toggle}>{modalModule.name}</ModalHeader>
+        <ModalHeader toggle={toggle}>{modalModule.name} settings</ModalHeader>
         <ModalBody>
-            {JSON.stringify(modalModule.response)}
+            {#each modalModule.html as element}
+                {#if element.type=="switch"}
+                    <Input type="switch" label="{element.label}" bind:checked={element.bind.value}/>
+                    <Tooltip target={element.label} placement="left">
+                        {element.description}
+                    </Tooltip>
+                {:else if element.type=="label"}
+                    <h6>{element.label}</h6>
+                {:else if element.type =="selector"}
+                    <h6>{element.label}</h6>
+                    <Input id={element.label} type="select" bind:value={element.bind.value}>
+                        {#each element.options as option}
+                            <option>{option}</option>
+                        {/each}
+                    </Input>
+                    <Tooltip target={element.label} placement="left">
+                        {element.description}
+                    </Tooltip>
+                {:else if element.type=="textfield"}
+                    <h7>{element.label}</h7>
+                    <Input id={element.label} type="text" />
+                    <Tooltip target={element.label} placement="left">
+                        {element.description}
+                    </Tooltip>
+                {/if}
+            {/each}
         </ModalBody>
         <ModalFooter>
-            <Button color="primary" on:click={toggle}>Do Something</Button>
-            <Button color="danger" on:click={toggle}>Delete</Button>
-            <Button color="secondary" on:click={toggle}>Cancel</Button>
+            <Button on:click={console.log(modalModule.response)}>test switch</Button>
         </ModalFooter>
     </Modal>
     <Modal isOpen={modulesModalOpen} toggle={toggleModules} scrollable>
@@ -226,5 +351,28 @@
             </Row>
         </ModalBody>
     </Modal>
+    <Modal isOpen={loopOpen} toggle={toggleLoop} scrollable>
+        <ModalHeader toggle={toggleLoop}>Loop Settings for {groups[modulesModalIndex].name}</ModalHeader>
+        <ModalBody>
+            <Form>
+                <Label>Loopkind:</Label>
+                <Input name="loop" type="radio" bind:group={groups[modulesModalIndex].loop} value={true} label={"manual Loopsize"} />
+                <Input name="loop" type="radio" bind:group={groups[modulesModalIndex].loop} value={false} label={"Autoloop"} />
+                <br>
+                {#if groups[modulesModalIndex].loop}
+                <InputGroup size="sm">
+                    <InputGroupText>Loopsize</InputGroupText>
+                    <Input type="number" min={0} bind:value={groups[modulesModalIndex].loopsize} placeholder={groups[modulesModalIndex].loopsize}/>
+                </InputGroup>
+                {:else}
+                    <p>
+                        Placeholder for Convsettings
+                    </p>
+                {/if}
+
+            </Form>
+        </ModalBody>
+
+    </Modal>
 </Container>
 <Styles/>
\ No newline at end of file