changed settings page to parse and display csmr-2020 file, also added backend point to get it

UnicadoGUI/Backend/main.py

@@ -15,6 +15,7 @@ app = FastAPI()
 origins = [
     "http://localhost",
     "http://localhost:5173",
+    "http://localhost:5174",
 ]
 
 app.add_middleware(
@@ -135,4 +136,12 @@ async def upload_project_list(file: UploadFile = File(...)):
 @app.get("/projects/")
 async def get_project_list():
     file_path = UPLOAD_DIRECTORY + "projects.zip"
-    return FileResponse(path=file_path, filename="projects.zip", media_type="application/zip")
\ No newline at end of file
+    return FileResponse(path=file_path, filename="projects.zip", media_type="application/zip")
+
+#TODO get file per project
+#endpoint to get the aircraft_exchange_file
+@app.get("/projects/aircraft_exchange_file/")
+async def get_aircraft_exchange_file():
+   with open("xml_configs/csmr-2020.xml", encoding='utf-8') as fd:
+        config = json.dumps(xmltodict.parse(fd.read()))
+        return config 
\ No newline at end of file

UnicadoGUI/Frontend/src/routes/settings/+page.svelte

@@ -10,8 +10,10 @@
         Input,
         Styles,
         TabContent,
-        TabPane
+        TabPane,
+        Tooltip
     } from "@sveltestrap/sveltestrap";
+    import {onMount} from "svelte";
     let changed = false;
 
     class EnergyCarrier{
@@ -81,7 +83,258 @@
         }
     }
 
+    onMount(async () => {
+        await getModuleConf();
+    })
+
+    async function getModuleConf() {
+        try {
+            const res = await fetch(`http://127.0.0.1:8000/projects/aircraft_exchange_file/`);
+            const data = await res.json();
+            modalModule.name = 'exchange_file';
+            modalModule.response = JSON.parse(data);
+            modalModule.html = [];
+            generateHTML(modalModule.response);
+        } catch (error) {
+            console.error(error);
+            modalModule.name = "no";
+            modalModule.response = {};
+            modalModule.html = [];
+            modalModule.html.push(new SettingsLabel("No config found!"));
+        }
+    }
+
+/**
+ * TODO: make it more modula, as now 2 files have a lot same code
+*/
+type dictionary = {
+        [key: string]: any
+    }
+        /*  Dictionary with information of the module
+     *  including the json response and the settings elements it needs to implement in the dom
+     */
+     let modalModule: dictionary = {
+        name: '',
+        response: {},
+        html: []
+    }
+
+        //check if string is a number
+        function isNumber(n:string){
+        return!isNaN(parseFloat(n))&&isFinite(parseFloat(n))
+    }
+
+        //Interface for Ui-elements in module settings and it's implementations
+        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;
+        unit: string = '-';
+        max: number = Number.POSITIVE_INFINITY;
+        min: number = Number.NEGATIVE_INFINITY;
+
+        constructor(label: string, description: string, bind: string) {
+            this.bind = bind;
+            this.label = label;
+            this.description = description;
+        }
+        setMax(max:number){
+            this.max=max;
+        }
+        setMin(min:number){
+            this.min=min;
+        }
+        setUnit(unit:string){
+            this.unit=unit;
+        }
+    }
+
+    class SettingsLabel {
+        readonly type = "label";
+        label: string;
+
+        constructor(label: string) {
+            this.label = label;
+        }
+    }
+        /*Parse json response to matching SettingsUi-Elements
+    * to portray it later in the DOM
+    * recursive Function
+    * */
+    function generateHTML(json: dictionary) {
+        Object.entries(json).forEach(([key, value]) => {
+            if (value == null) {
+                return
+            }
+            if (value.hasOwnProperty("value")) {
+                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"].toLowerCase().includes("selector")) {
+                    let options = [];
+                    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')&&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"])}
+                    if(value.hasOwnProperty("Unit")){numberField.setUnit(value["Unit"])}
+                    modalModule.html.push(numberField);
+                } else {
+                    modalModule.html.push(new SettingsTextfield(key, value["@description"], value, key))
+                }
+            } else if (typeof value === "object") {
+                modalModule.html.push(new SettingsLabel(key))
+                generateHTML(json[key])
+            } else {
+                return;
+            }
+        })
+    }
+
+        //Replacing underscores to space
+        function formatLabel(label: string) {
+        return label.replaceAll("_", " ")
+    }
+       //check if the settings modal of a module changed
+       function checkModalChanged() {
+        modalChanged = true;
+        modalChanged = modalChanged;
+    }
+
+    let modalChanged: boolean = false;
+
+       //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;
+        }
+    }
+
+        //Calculate Stepsize of number inputs from current value
+        function calcStepSize(value:number){
+        const numberString = value.toString()
+        if (!numberString.includes('.')) {
+            return 1;
+        } else {
+            const decimalPart = numberString.split('.')[1];
+            return Math.pow(10, -decimalPart.length);
+        }
+    }
 </script>
+{#each modalModule.html as element, index}
+{#if element.type == "switch"}
+    <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="uiElement{index}" type="select" bind:value={element.bind.value}
+           on:change={()=>checkModalChanged()}>
+        {#each element.options as option}
+            <option>{option}</option>
+        {/each}
+    </Input>
+    <Tooltip target="uiElement{index}" placement="left">
+        {element.description}
+    </Tooltip>
+{:else if element.type == "textfield"}
+    <h7>{formatLabel(element.label)}</h7>
+    <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"}
+    {#if element.unit != "1" && element.unit != "-" && element.unit != "count"}
+        <h7>{formatLabel(element.label)} (in {element.unit})</h7>
+    {:else}
+        <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=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=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()} on:blur={()=>validateNumber(index)}/>
+    {/if}
+
+    <Tooltip target="uiElement{index}" placement="left">
+        {element.description}
+    </Tooltip>
+{/if}
+{/each}
+<!--
+
+
 <h1>Aircraftmodelsettings</h1>
 <ButtonGroup style="margin-bottom: 20px">
     <Button color="dark" outline ><Icon name="bootstrap-reboot"/> Reset </Button>
@@ -135,12 +388,7 @@
                     <option value="high">high</option>
                 </Input>
             </FormGroup>
-            <!--    <FormGroup floating label="Definitions for empennage design">-->
-            <!--        <Input type="select" placeholder="Enter a value">-->
-            <!--            <option value="low">low</option>-->
-            <!--            <option value="mid">mid</option>-->
-            <!--        </Input>-->
-            <!--    </FormGroup>-->
+
 
             <h5>Design description of the undercarriage</h5>
             <FormGroup floating label="Mounting position of the main landing gear">
@@ -338,6 +586,7 @@
     
 
 </Form>
+-->
 
 
 <Styles/>
\ No newline at end of file