Custom task library + SaveXML + UI Changes

package.json

@@ -1,4 +1,3 @@
-
 {
   "name": "cirdlesweb",
   "version": "0.1.0",
@@ -20,7 +19,7 @@
     "@babel/polyfill": "^7.12.1",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "axios": "^0.24.0",
+    "axios": "^0.25.0",
     "babel-core": "^6.26.3",
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
@@ -109,4 +108,3 @@
     "worker-loader": "^2.0.0"
   }
 }
-

src/constants/api.js

@@ -4,7 +4,7 @@ export const AMBAPO_ENDPOINT = BASE_URL + "/ambapo";
 export const SQUID_ENDPOINT = BASE_URL + "/prawn";
 export const TOPSOIL_ENDPOINT = BASE_URL + "/topsoil";
 export const MARS_ENDPOINT = BASE_URL + "/mars";
-export const SQUIDINK_ENDPOINT = "https://cirdles.cs.cofc.edu/sservlet";
+export const SQUIDINK_ENDPOINT = "http://localhost:8080/squid_servlet-1.0.0";
 export const PORTEDSQUID_ENDPOINT = BASE_URL + "/portedsquid";
 
 // Sesar APIs
@@ -14,10 +14,10 @@ export const PORTEDSQUID_ENDPOINT = BASE_URL + "/portedsquid";
 export const SESAR_BASE_URL = "https://app.geosamples.org";
 
 export const SESAR_LOGIN =
-  SESAR_BASE_URL + "/webservices/credentials_service_v2.php";
+    SESAR_BASE_URL + "/webservices/credentials_service_v2.php";
 
 export const SESAR_SAMPLE_PROFILE =
-  SESAR_BASE_URL + "/webservices/display.php?igsn=";
+    SESAR_BASE_URL + "/webservices/display.php?igsn=";
 // added oct 2020 to show sample profile with bar code
 export const SESAR_SAMPLE_DISPLAY = SESAR_BASE_URL + "/sample/igsn/";
 export const SESAR_USER_SAMPLES = SESAR_BASE_URL + "/samples/user_code/";
@@ -28,6 +28,6 @@ export const POST_HEADERS = {
 };
 
 // Filebrowser
-export const FILEBROWSER_URL = "https://cirdles.cs.cofc.edu/filebrowser"
+export const FILEBROWSER_URL = "http://localhost:8081"
 
-export const SQUIDINK_ENABLED = false;
+export const SQUIDINK_ENABLED = false;

src/scenes/Squidink/components/ContextMenu.js

@@ -22,7 +22,7 @@ export default class DropdownCustom extends React.Component {
             <>
                 {
                     this.props.menuActive ?
-                        <ul className="menu" style={{top: this.props.yPos, left: this.props.xPos, position: "absolute"}}>
+                        <ul className="menu" style={{top: this.props.yPos, left: this.props.xPos, position: "absolute", zIndex: 100}}>
                             {
                                 this.state.outputMap.map((content) => {
                                     return content

src/scenes/Squidink/components/CurrentTask.js

@@ -15,6 +15,8 @@ import ButtonGroup from "@material-ui/core/ButtonGroup";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import {requestSender} from "../util/constants";
+import {FILEBROWSER_URL} from "constants/api";
+import Modal from "@material-ui/core/Modal";
 
 let cx = classNames.bind(style);
 
@@ -41,12 +43,17 @@ export class CurrentTask extends React.Component {
             Uncor206Styling: true,
             Uncor208Styling: true,
             THUStyling: true,
-            ParEleStyling: true
+            ParEleStyling: true,
+            modal: false,
+            routeVal: "",
 
         };
         //If a component requires 'this.' context, it's easiest to bind it, i.e.
         this.pullStrings = this.pullStrings.bind(this)
         this.componentDidMount = this.componentDidMount.bind(this)
+        this.saveCurrentXML = this.saveCurrentXML.bind(this)
+        this.modal = this.modal.bind(this)
+        this.closeBrowseAction = this.closeBrowseAction.bind(this)
 
     }
     componentDidMount() {
@@ -78,6 +85,23 @@ export class CurrentTask extends React.Component {
             })
         })
     }
+    saveCurrentXML(fileRoute) {
+
+        //Pulls Filebrowser route from WrapperComponent, trims off everything from /files/ and before to get the raw path
+        let presentRoute = localStorage.getItem("fborigin")
+        //If present route has a legitimate value, concat with filename, otherwise just leave filename raw
+        let finalRoute = presentRoute ? presentRoute + this.state.routeVal + ".xml" : this.state.routeVal + ".xml"
+        requestSender('/savexml', localStorage.getItem('user') + ":" + finalRoute + ":current").then(() => {
+            this.closeBrowseAction();
+        })
+
+    }
+    async modal() {
+        this.setState({modal: true})
+    }
+    async closeBrowseAction() {
+        this.setState({modal: false})
+    }
     flipPrimary = () => {
         if(this.state.primaryRadio == "238") {
             this.setState({primaryRadio: "232"}, this.saveStrings)
@@ -121,16 +145,44 @@ export class CurrentTask extends React.Component {
             //All functions are self-contained to the wrapper with the exception of the history.push to reroute the user, which requires a reference to the React-Router
             //Because WrapperComponent is not instantiated from the router but from its child, we have to pass in the history as a prop
             <WrapperComponent stateNum={1}history={this.props.history}>
+                <Modal open={this.state.modal} onClose={this.modal}>{
+                    <div style={{position: 'absolute', width: '600px', height: "70%", top: '50%', left: '50%', transform: 'translate(-50%, -50%)', border: '2px solid #000', backgroundColor: 'white', padding: '4px'}} className={'paper'}>
+                        <div style={{height: "90%", width: "100%"}}>
+                            <div>
+                                <iframe id='iframeee'
+                                        style={{
+                                            display: 'flex',
+                                            flexGrow: '1',
+                                            overflow: 'auto',
+                                            height: '100%',
+                                            width: `100%`
+                                        }}
+                                        src={FILEBROWSER_URL}></iframe>
+                            </div>
+                            <div style={{paddingRight: "10px", display: "inline"}}>
+                                <TextField value={this.state.routeVal} onChange={(e) => {
+                                    if (!e.target.value.includes('.')) {
+                                        this.setState({
+                                            routeVal: e.target.value
+                                        })
+                                    }
+                                }}label="File Name Here:" />
+                                <Button style={{marginTop: "10px"}}variant="contained" color="primary" onClick={this.saveCurrentXML}>Save</Button>
+                            </div>
+                            <Button style={{marginTop: "10px"}} variant="contained" color="primary"
+                                    onClick={()=>this.setState({modal: false})}>Cancel</Button>
+                        </div>
+                    </div>}</Modal>
                 <div className={cx('grid-container-custom-t')}>
                     <div className={cx('task-name-label')}>
                         <h3>Task Name:</h3>
                     </div>
                     <div className={cx('task-name-text')}>
                         <TextField defaultValue={this.state.taskName}
-                                   label="Task name"style={{width: '80%'}} onChange={(e) => {
+                                   label="Task name"style={{width: '70%'}} onChange={(e) => {
                                       this.setState({taskName: e.target.value}, this.saveStrings)
                         }}/>
-                        <h5 className={cx('geochron-label')} style={{display: "inline", paddingTop: "10px", paddingLeft: "30px"}}>Geochron Mode</h5>
+                        <h5 className={cx('geochron-label')} style={{display: "inline", paddingTop: "10px", paddingLeft: "30px", fontSize: "2.5vmin"}}>Geochron Mode</h5>
                     </div>
                     <div className={cx('description-label')}>
                         <h3>Description:</h3>
@@ -266,7 +318,7 @@ export class CurrentTask extends React.Component {
                             </Button>
                         </div>
                         <Button variant="contained" color={"primary"} style={{display: "inline"}}
-                                onClick={() => {console.log("")}}>
+                                onClick={this.modal}>
                             Save Current Task as a Squid Task '.xml' file
                         </Button>
                     </div>

src/scenes/Squidink/components/CustomLibrary.js

@@ -12,6 +12,10 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Radio from "@material-ui/core/Radio";
 import Button from "@material-ui/core/Button";
 
+import Modal from "@material-ui/core/Modal";
+import {FILEBROWSER_URL} from "constants/api";
+
+
 let cx = classNames.bind(style);
 
 export class CustomLibrary extends React.Component {
@@ -43,12 +47,15 @@ export class CustomLibrary extends React.Component {
             mass: [],
             ratios: [],
             selected: false,
-
+            modal: false,
+            routeVal: "",
         };
         //If a component requires 'this.' context, it's easiest to bind it, i.e.
         this.pullTaskList = this.pullTaskList.bind(this)
         this.componentDidMount = this.componentDidMount.bind(this)
-
+        this.saveCurrentXML = this.saveCurrentXML.bind(this)
+        this.modal = this.modal.bind(this)
+        this.closeBrowseAction = this.closeBrowseAction.bind(this)
     }
     componentDidMount() {
         this.pullTaskList()
@@ -59,6 +66,16 @@ export class CustomLibrary extends React.Component {
             this.setState({mount: true, taskList: body}, () => {this.taskListSelect(null, this.state.taskList[0].trimStart().trim())})
         })
     }
+    saveCurrentXML(fileRoute) {
+
+        //Pulls Filebrowser route from WrapperComponent, trims off everything from /files/ and before to get the raw path
+       let presentRoute = localStorage.getItem("fborigin")
+       //If present route has a legitimate value, concat with filename, otherwise just leave filename raw
+       let finalRoute = presentRoute ? presentRoute + this.state.routeVal + ".xml" : this.state.routeVal + ".xml"
+       requestSender('/savexml', localStorage.getItem('user') + ":" + finalRoute).then(() => {
+           this.closeBrowseAction();
+       })
+    }
 
     saveStrings = () => {
         let bodyData = localStorage.getItem("user") + "!@#" + this.state.taskName + "!@#" + this.state.taskDesc + "!@#" + this.state.taskAuthor + "!@#" +
@@ -77,6 +94,12 @@ export class CustomLibrary extends React.Component {
         document.getElementsByClassName("thor-ur-box")[0].style.backgroundColor = (this.state.THUStyling ? "#00FF0033" : "#ff00004d")
         document.getElementsByClassName("p-ele-const-box")[0].style.backgroundColor = (this.state.ParEleStyling ? "#00FF0033" : "#ff00004d")
     }
+    async modal() {
+        this.setState({modal: true})
+    }
+    async closeBrowseAction() {
+        this.setState({modal: false})
+    }
 
     taskListSelect = (e, initialCall) => {
         if(this.state.selectedTask) {
@@ -272,7 +295,34 @@ export class CustomLibrary extends React.Component {
                 //All functions are self-contained to the wrapper with the exception of the history.push to reroute the user, which requires a reference to the React-Router
                 //Because WrapperComponent is not instantiated from the router but from its child, we have to pass in the history as a prop
                 <WrapperComponent stateNum={1}history={this.props.history}>
-
+                <Modal open={this.state.modal} onClose={this.modal}>{
+                    <div style={{position: 'absolute', width: '600px', height: "70%", top: '50%', left: '50%', transform: 'translate(-50%, -50%)', border: '2px solid #000', backgroundColor: 'white', padding: '4px'}} className={'paper'}>
+                        <div style={{height: "90%", width: "100%"}}>
+                            <div>
+                                <iframe id='iframeee'
+                                        style={{
+                                            display: 'flex',
+                                            flexGrow: '1',
+                                            overflow: 'auto',
+                                            height: '100%',
+                                            width: `100%`
+                                        }}
+                                        src={FILEBROWSER_URL}></iframe>
+                            </div>
+                            <div style={{paddingRight: "10px", display: "inline"}}>
+                                <TextField value={this.state.routeVal} onChange={(e) => {
+                                    if (!e.target.value.includes('.')) {
+                                        this.setState({
+                                            routeVal: e.target.value
+                                        })
+                                    }
+                                }}label="File Name Here:" />
+                                <Button style={{marginTop: "10px"}}variant="contained" color="primary" onClick={this.saveCurrentXML}>Save</Button>
+                            </div>
+                            <Button style={{marginTop: "10px"}} variant="contained" color="primary"
+                                    onClick={()=>this.setState({modal: false})}>Cancel</Button>
+                        </div>
+                    </div>}</Modal>
                     <div className={cx('grid-container-custom-tl')}>
                         <div className={cx('task-list')}>
                             {this.state.taskList.map((entry) => {
@@ -457,6 +507,7 @@ export class CustomLibrary extends React.Component {
                                     </div>
 
                                     <Button variant="contained" color={"primary"} style={{display: "inline"}}
+                                            onClick={this.modal}>
                                             onClick={() => {
                                                 console.log("")
                                             }}>