Skip to content
Snippets Groups Projects
Commit 97312af4 authored by Duc Bui Tien's avatar Duc Bui Tien
Browse files

add first implementation config edit

parent a5862c90
No related branches found
No related tags found
2 merge requests!2UnicadoGuiBackend,!1New UnicadoGUI Branch
Show whitespace changes
Inline Side-by-side
src/routes/model/+page.svelte
+ 187
− 39
View file @ 97312af4
......@@ -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>
......@@ -169,13 +263,21 @@
<Row class="py-3">
{#each groups as groupitem, groupIndex(groupitem)}
<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>
<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>
</ButtonGroup>
</Row>
<ul class="list-group"
on:drop={event=>drop(event,groupIndex)}
on:dragover|preventDefault={event=>dragOver(event)}>
......@@ -193,14 +295,37 @@
{/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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment