Merge branch 'develop' into feat_visualization

Author: mezm94

src/components/navigationBar/navigationBar.js

@@ -50,7 +50,7 @@ function NavigationBar() {
     }
 
     return(
-    <AppBar position="static" backgroundColor="#224878" elevation={0} className={classes.appBar}>
+    <AppBar position="static" elevation={0} className={classes.appBar}>
     <Toolbar className={classes.toolbar}>
       <Typography variant="h6" color="inherit" align="left" noWrap className={classes.toolbarTitle}>
         Planimation
@@ -65,9 +65,9 @@ function NavigationBar() {
         <Link variant="button" color="inherit" onClick={()=>handleClick('manual')} className={classes.link}>
           User Manual
         </Link>
-        {/*<Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>*/}
-        {/*  Demo*/}
-        {/*</Link>*/}
+        <Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>
+          Demo
+        </Link>
       </nav>
       <Button color="inherit" variant="outlined"onClick={()=>handleClick('home')}  className={classes.link} >
         HomePage

src/pages/HomePage/home.js

@@ -104,13 +104,13 @@ const tiers = [
     buttonText: 'Contact us',
     buttonVariant: 'outlined',
   },
-  // {
-  //   title: 'Demo',
-  //   pageNo: 4,
-  //   description: ['Demo File for visualisation',""],
-  //   buttonText: 'Sign up for free',
-  //   buttonVariant: 'outlined',
-  // },
+  {
+     title: 'Demo',
+     pageNo: 4,
+     description: ['Demo File for visualisation',""],
+     buttonText: 'Sign up for free',
+     buttonVariant: 'outlined',
+   },
 ];
 // const footers = [
 //   {
@@ -157,10 +157,10 @@ export default function Home() {
       </Container>
       {/* End hero unit */}
       <Container maxWidth="md" component="main">
-        <Grid container spacing={4} alignItems="stretch" direction="row">
+        <Grid container spacing={3} alignItems="stretch" direction="row">
           {tiers.map((tier) => (
             // Enterprise card is full width at sm breakpoint
-            <Grid item key={tier.title} xs={4} sm={tier.title === 'Enterprise' ? 12 : 4} md={4}>
+            <Grid item key={tier.title} xs={3} sm={tier.title === 'Enterprise' ? 12 : 3} md={3}>
               <Card>
                 <CardHeader
                   title={tier.title}

src/pages/PageFour/index.js

@@ -375,7 +375,7 @@ class PageFour extends React.Component {
                     <div className={styles.sub_title}> Steps </div>
                     <div className={styles.left_upper}>
                         {
-                            steps.map((step, i) => {
+                            steps && steps.map((step, i) => {
                                 return <div className={styles.stage_item}
                                             style={{backgroundColor: i === this.state.stepInfoIndex ? '#eef': 'white'}}
                                             onClick={()=>{this.handleSwitchStage(i);}}

src/pages/PageOne/dragAndDrop.jsx

@@ -5,48 +5,52 @@ import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import css from "./index.module.less";
 
+const dragsAndDrops = [
+  { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
+  {
+    name: "Problem",
+    fileType: ".pddl",
+    desc: "for objects, initial state and goal.",
+  },
+  {
+    name: "Animation",
+    fileType: ".pddl",
+    desc: "object is representation.",
+  },
+];
 class DropAndFetch extends React.Component {
   constructor(props) {
     super(props);
     this.datas = {};
   }
 
-  state = {
-    dragsAndDrops: [
-      { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
-      {
-        name: "Problem",
-        fileType: ".pddl",
-        desc: "for objects, initial state and goal.",
-      },
-      {
-        name: "Animation",
-        fileType: ".pddl",
-        desc: "object is representation.",
-      },
-    ],
+  componentWillUnmount = () => {
+    this.setState = (state, callback) => {
+      return;
+    };
   };
 
-  uploadPDDL = (files) => {
+  uploadPDDL = async (files) => {
     const formData = new FormData();
     for (const name in files) {
       formData.append(name, files[name]);
     }
-    let resp;
+    try {
+      const resp = await fetch(
+        "https://planimation.planning.domains/upload/pddl",
+        {
+          //"http://127.0.0.1:8000/upload/pddl" On local server
+          method: "POST", //DO NOT use headers
+          body: formData, // Dataformat
+        }
+      );
 
-    fetch("https://planimation.planning.domains/upload/pddl", {
-      //"http://127.0.0.1:8000/upload/pddl", {
-      method: "POST", //DO NOT use headers
-      body: formData, // Dataformat
-    })
-      .then(
-        (response) => console.log(response) //read response code and replicate
-      )
-      .then(
-        (success) => (resp = success) //success contains the VFG
-      )
-      .catch((error) => console.log(error));
-    return resp;
+      const data = await resp.json();
+      const txt = JSON.stringify(data);
+      this.props.onStore(txt);
+    } catch (error) {
+      alert(error);
+    }
   };
 
   handleSubmit = () => {
@@ -56,24 +60,24 @@ class DropAndFetch extends React.Component {
       "problem" in this.datas &&
       "animation" in this.datas
     ) {
-      let resp = this.uploadPDDL(this.datas);
-      console.log(resp);
+      this.uploadPDDL(this.datas);
     } else {
       console.log("Some files are missing");
       alert("Some files are missing");
     }
   };
 
   handleFileLoad = (name, file) => {
-    this.datas[name] = file;
+    this.datas[name.toLowerCase()] = file;
+    console.log(this.datas);
   };
 
   render() {
     return (
       <React.Fragment>
         <div>
           <Container component="main" className={css.dropareaBox}>
-            {this.state.dragsAndDrops.map((drag) => (
+            {dragsAndDrops.map((drag) => (
               <DropZone
                 key={drag.name}
                 name={drag.name}
@@ -83,11 +87,11 @@ class DropAndFetch extends React.Component {
               />
             ))}
           </Container>
-          <Container maxWidth="sm" component="main" marginTop="50">
+          <Container maxWidth="sm" component="main">
             <div className={css.buttonBox}>
               <Button
                 variant="contained"
-                color="#224878"
+                color="default"
                 onClick={() => this.props.onClick()}
               >
                 Cancel

src/pages/PageOne/dropAndFetch.jsx

@@ -15,10 +15,12 @@ class DropZone extends React.Component {
     console.log(file);
 
     if (file[0].name.endsWith(this.props.fileType)) {
-      console.log(this.state.files);
+      //console.log(this.state.files);
       this.setState({ files: file });
-      console.log(this.state.files);
-      this.props.onFileLoad(this.props.name, file[0]);
+      //console.log(this.state.files);
+      file[0].text().then((result) => {
+        this.props.onFileLoad(this.props.name, result);
+      });
     } else {
       console.log("Wrong file type");
       alert("Wrong file type");
@@ -30,8 +32,8 @@ class DropZone extends React.Component {
       this.state.files.length > 0
         ? this.state.files[0].name
         : "Drag and drop " +
-          this.props.name.toLowerCase() +
-          this.props.fileType +
+          this.props?.name?.toLowerCase() +
+          this.props?.fileType?? '--' +
           " here or click";
 
     return (

src/pages/PageOne/dropZone.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import DragAndDrop from './dragAndDrop';
+import DropZone from './dropZone';
 
 
 it("Renders Correctly ", () => {
     const div = document.createElement("div");
-    ReactDOM.render(<DragAndDrop
+    ReactDOM.render(<DropZone
     />, div);
     ReactDOM.unmountComponentAtNode(div);
 });

src/pages/PageOne/dragAndDrop.test.js renamed to src/pages/PageOne/dropZone.test.js

@@ -53,6 +53,10 @@ class PageOne extends React.Component {
     handleOnClick() {
         this.props.history.push('/')
     }
+    handleStore = (content)=> {
+        localStorage.setItem('fileContent', content);
+        window.location.href = '/page4';
+    }
 
     render() {
 
@@ -91,7 +95,7 @@ class PageOne extends React.Component {
                         Option 2 - Upload Problem Domain and Animation Profile Files
                     </h3>
                 </div>               
-                <DropAndFetch onClick={this.handleOnClick}/>              
+                <DropAndFetch onClick={this.handleOnClick} onStore={this.handleStore}/>              
             </div>
 
           );

src/pages/PageOne/index.js

@@ -1,36 +1,23 @@
-.buttonBox {
+.dropzoneBox {
   /* 
   background: #fff;
   */
-  display: flex;
+  display: inline-block;
   justify-content: space-around;
+  width: 30%;
   padding: 20px;
 }
 
-.textBox {
-  /* 
-  background: #fff;
-  */
-  display: flex;
-  justify-content: space-around;
+.buttonBox {
   padding: 20px;
-}
-
-.dropzoneBox {
-  /* 
-  background: #fff;
-  */
-  display: inline-block;
+  display: flex;
   justify-content: space-around;
-  width: 30%;
-  padding: 20px;
 }
 
 .dropareaBox {
   /* 
-  background: #fff;
-  */
+background: #fff;
+*/
   display: flex;
   justify-content: space-around;
-  width: 80%;
-}
+}