Create SVG in UI

[clamp.git] / ui-react / src / components / dialogs / Loop / OpenLoopModal.js

diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index fbfc727..7ca90b4 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -30,6 +30,8 @@ import Col from 'react-bootstrap/Col';
 import FormCheck from 'react-bootstrap/FormCheck'
 import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
+import LoopCache from '../../../api/LoopCache';
 
 const ModalStyled = styled(Modal)`
        background-color: transparent;
@@ -45,11 +47,13 @@ export default class OpenLoopModal extends React.Component {
                this.getLoopNames = this.getLoopNames.bind(this);
                this.handleOpen = this.handleOpen.bind(this);
                this.handleClose = this.handleClose.bind(this);
-               this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+               this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+               this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
                this.state = {
                        show: true,
                        chosenLoopName: '',
-                       loopNames: []
+                       loopNames: [],
+                       loopCacheOpened: new LoopCache({})
                };
        }
 
@@ -62,43 +66,58 @@ export default class OpenLoopModal extends React.Component {
                this.props.history.push('/');
        }
 
-       handleDropdownListChange(e) {
-               this.setState({ chosenLoopName: e.value });
+       handleDropDownListChange(e) {
+        LoopService.getLoop(e.value).then(loop => {
+            this.setState({
+                chosenLoopName: e.value,
+                loopCacheOpened: new LoopCache(loop)
+             });
+               });
        }
 
        getLoopNames() {
                LoopService.getLoopNames().then(loopNames => {
-                       const loopOptions = loopNames.map((loopName) => { return { label: loopName, value: loopName } });
-                       this.setState({ loopNames: loopOptions })
+                   if (Object.entries(loopNames).length !== 0) {
+                       const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
+               this.setState({ loopNames: loopOptions })
+                   }
                });
        }
 
        handleOpen() {
                console.info("Loop " + this.state.chosenLoopName + " is chosen");
-               this.setState({ show: false });
-               this.props.history.push('/');
+        this.handleClose();
                this.props.loadLoopFunction(this.state.chosenLoopName);
        }
 
        render() {
                return (
-                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
                                <Modal.Header closeButton>
                                        <Modal.Title>Open Model</Modal.Title>
                                </Modal.Header>
                                <Modal.Body>
                                        <Form.Group as={Row} controlId="formPlaintextEmail">
-                                               <Form.Label column sm="2">Model Name</Form.Label>
+                                               <Form.Label column sm="2">Model Name:</Form.Label>
                                                <Col sm="10">
-                                                       <Select onChange={this.handleDropdownListChange} options={this.state.loopNames} />
+                                                       <Select onChange={this.handleDropDownListChange}
+                                                       options={this.state.loopNames} />
                                                </Col>
                                        </Form.Group>
-                                       <Form.Group controlId="formBasicChecbox">
-                                               <Form.Check>
-                                                       <FormCheck.Label>Read Only</FormCheck.Label>
-                                                       <CheckBoxStyled type="checkbox" />
-                                               </Form.Check>
+                                       <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+                                               <Form.Label column sm="2">Model Preview:</Form.Label>
+                                               <Col sm="10">
+                                                   <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
+                                               </Col>
                                        </Form.Group>
+                                       {this.showReadOnly === true ?
+                                               <Form.Group as={Row} controlId="formBasicCheckbox">
+                                                       <Form.Check>
+                                                               <FormCheck.Label>Read Only Mode:</FormCheck.Label>
+                                                               <CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
+                                                       </Form.Check>
+                                               </Form.Group>
+                                       : null}
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>