add validate numberinput is in boundry

src/routes/model/+page.svelte

@@ -93,7 +93,7 @@
     }
 
     class SettingsLabel {
-        readonly type = "label"
+        readonly type = "label";
         label: string;
 
         constructor(label: string) {
@@ -131,13 +131,13 @@
     //Index for drag and drop
     let dropIndex: number | null = null;
 
-    //Flag for changes in simulationmodel by the user
+    //Flag for changes in simulation model by the user
     let changed = false;
 
     //Flag for Alarm which is invoked by changes
     let saveAlert = false;
 
-    //Flag for changes in settingsmodal by the user
+    //Flag for changes in settings modal by the user
     let modalChanged: boolean = false;
 
     //Array of all the groups of the model
@@ -156,7 +156,7 @@
     const toggleLoop = () => (loopOpen = !loopOpen);
 
     onMount(async () => {
-        await loadAvailableModules()
+        await loadAvailableModules();
         await loadModel();
     })
 
@@ -170,15 +170,16 @@
         modules = modules.concat(data["StudyMission"]);
         modules = modules.concat(data["PostprocessingSteps"]);
         modules = modules.concat(data["SizingLoop"]);
-        modules = Array.from(new Set(modules))
-        modules.sort()
+        modules = modules.concat(data['availableModules']);
+        modules = Array.from(new Set(modules));
+        modules.sort();
     }
 
     //Function for loading the recent saved model from server
     async function loadModel() {
         const res = await fetch("http://127.0.0.1:8000/modules");
         const data = await res.json();
-        groups = data["groups"]
+        groups = data["groups"];
         changed = false;
         changed = changed;
         saveAlert = false;
@@ -224,11 +225,11 @@
             modalModule.name = "no";
             modalModule.response = {};
             modalModule.html = [];
-            modalModule.html.push(new SettingsLabel("No config found!"))
+            modalModule.html.push(new SettingsLabel("No config found!"));
         }
     }
 
-    //Wrapper to give Click-Eventhandler a synchronous Output
+    //Wrapper to give Click-Event handler a synchronous Output
     function getModuleConfClickWrapper(item: string) {
         getModuleConf(item).catch(console.error);
         return (event: MouseEvent & { currentTarget: EventTarget & HTMLLIElement }) => {
@@ -239,7 +240,7 @@
     }
 
     /*Parse json response to matching SettingsUi-Elements
-    * to potray it later in the DOM
+    * to portray it later in the DOM
     * recursive Function
     * */
     function generateHTML(json: dictionary) {
@@ -253,16 +254,17 @@
                     modalModule.html.push(new SettingsSwitch(key, value["@description"], value))
                 } else if (value["@description"] && value["@description"].toLowerCase().includes("selector")) {
                     let options = [];
-                    for (let i = 0; i < 4; i++) {
+                    for (let i = 0; i < 5; i++) {
                         if (value["@description"].includes("mode_" + i)) {
                             options.push("mode_" + i)
                         }
                     }
                     modalModule.html.push(new SettingsSelector(key, value["@description"], value, options))
                 }else if(isNumber(value.value)){
+                    value.value=parseFloat(value.value);
                     let numberField  = new SettingsNumberfield(key, value["@description"], value)
-                    if(value.hasOwnProperty('lower_boundary')){numberField.setMin(value['lower_boundary'])}
-                    if(value.hasOwnProperty('upper_boundary')){numberField.setMax(value['upper_boundary'])}
+                    if(value.hasOwnProperty('lower_boundary')&&isNumber(value['lower_boundary'])){numberField.setMin(value['lower_boundary'])}
+                    if(value.hasOwnProperty('upper_boundary')&&isNumber(value['upper_boundary'])){numberField.setMax(value['upper_boundary'])}
                     if(value.hasOwnProperty("@unit")){numberField.setUnit(value["@unit"])}//spaeter entweder unit oder Unit in XML
                     if(value.hasOwnProperty("@Unit")){numberField.setUnit(value["@Unit"])}
                     if(value.hasOwnProperty("unit")){numberField.setUnit(value["unit"])}
@@ -378,8 +380,8 @@
     }
 
     //Deleting a model in a group
-    function deleteModul(grpIndex: number, modulIndex: number) {
-        groups.at(grpIndex)?.modules.splice(modulIndex, 1);
+    function deleteModule(grpIndex: number, moduleIndex: number) {
+        groups.at(grpIndex)?.modules.splice(moduleIndex, 1);
         updateAll()
     }
 
@@ -406,6 +408,15 @@
     function isNumber(n:string){
         return!isNaN(parseFloat(n))&&isFinite(parseFloat(n))
     }
+    //check if number is in boundry
+    function validateNumber(index:number){
+        console.log("validateNumber")
+        if(modalModule.html[index].bind.value<modalModule.html[index].min){
+            modalModule.html[index].bind.value=modalModule.html[index].min;
+        }else if(modalModule.html[index].bind.value>modalModule.html[index].max){
+            modalModule.html[index].bind.value=modalModule.html[index].max;
+        }
+    }
 
 </script>
 <Container>
@@ -524,13 +535,13 @@
                         <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={Math.abs(element.min-element.max)/1000} bind:value={element.bind.value}
+                        <Input type="range" min={element.min} max={element.max} step=0.01 bind:value={element.bind.value}
                                placeholder="range placeholder" on:change={()=>checkModalChanged()}/>
-                        <Input id="uiElement{index}" type="number" min={element.min} max={element.max} step={Math.abs(element.min-element.max)/100}
-                               bind:value={element.bind.value} on:change={()=>checkModalChanged()}/>
+                        <Input id="uiElement{index}" type="number" min={element.min} max={element.max} step=0.01
+                               bind:value={element.bind.value} on:change={()=>checkModalChanged()} on:blur={()=>validateNumber(index)}/>
                     {:else}
                         <Input id="uiElement{index}" type="number" min={element.min} max={element.max} step={calcStepSize(element.bind.value)}
-                               bind:value={element.bind.value} on:change={()=>checkModalChanged()}/>
+                               bind:value={element.bind.value} on:change={()=>checkModalChanged()} on:blur={()=>validateNumber(index)}/>
                     {/if}
 
                     <Tooltip target="uiElement{index}" placement="left">
@@ -556,7 +567,7 @@
             </ModalFooter>
         {/if}
     </Modal>
-    <Modal isOpen={modulesModalOpen} toggle={toggleModules} scrollable>
+    <Modal isOpen={modulesModalOpen} toggle={toggleModules} size = 'lg' scrollable>
         <ModalHeader toggle={toggleModules}>Select Modules to add to {groups[modulesModalIndex].name}</ModalHeader>
         <ModalBody>
             <Row>
@@ -574,7 +585,7 @@
                     <ListGroup>
                         {#each groups[modulesModalIndex].modules as module, modulIndex(modulIndex)}
                             <ListGroupItem tag="button" action
-                                           on:click={()=>deleteModul(modulesModalIndex,modulIndex)}>{module}</ListGroupItem>
+                                           on:click={()=>deleteModule(modulesModalIndex,modulIndex)}>{module}</ListGroupItem>
                         {/each}
                     </ListGroup>
                 </Col>