Dashboard

ide/static/css/dash_style.css

@@ -0,0 +1,21 @@
+.overlay {
+	opacity: 0;
+	z-index: -2;
+	height: 290px;
+	width: 240px;
+	background: rgb(34,47,62,0.9);
+	border-radius: 20px; 
+	position: relative;
+	top: -310px;
+	transition: all .4s ease;
+}
+
+.card {
+	transition: all .4s ease;
+}
+
+.card:hover + .overlay, .overlay:hover {
+	opacity: 1;
+	z-index: 1;
+	transition: all .4s ease;
+}

ide/static/css/login_style.css

@@ -15,6 +15,36 @@
 	cursor: pointer;
 }
 
+#sidebar-logout-button {
+    background: rgb(205, 207, 210);
+    color: rgb(69, 80, 97);
+    text-align: center;
+    border-radius: 5px;
+    width: 110px;
+    margin: 0.2em;
+    transition: 0.2s;
+    position: relative;
+}
+
+#sidebar-logout-button:hover {
+	cursor: pointer;
+}
+
+#sidebar-dash-button {
+    background: rgb(205, 207, 210);
+    color: rgb(69, 80, 97);
+    text-align: center;
+    border-radius: 5px;
+    width: 130px;
+    margin: 0.2em;
+    transition: 0.2s;
+    position: relative;
+}
+
+#sidebar-dash-button:hover {
+	cursor: pointer;
+}
+
 #sidebar-login-button span {
 	position: absolute;
 	left: 9px;
@@ -67,6 +97,13 @@
 	}
 }
 
+.long-buttons {
+	display: flex;
+	flex: 1;
+	flex-direction: row;
+	margin-top: -0.5em;
+}
+
 .login-panel {
 	position: relative;
 	width: 350px;
@@ -265,4 +302,4 @@
 	position: absolute;
 	top: 0px;
 	right: 10px;
-}
+}

ide/static/css/searchbar_style.css

@@ -1,3 +1,7 @@
+body {
+	background: #F3F5F7;
+}
+
 .insert-layer-title {
 	position: relative;
 }

ide/static/js/card.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import '../css/dash_style.css';
+
+class Card extends React.Component {
+  render() {
+    return(
+            <div style={{display: 'inline-block'}}>
+              <div className="card" style={{
+                background: '#fff', 
+                height: 290, 
+                width: 240, 
+                borderRadius: 20, 
+                display: 'inline-block', 
+                margin: 20, 
+                boxShadow: '0 2px 6px rgba(112,112,112,0.2)'
+              }}>
+              <img style={{marginTop: '4.5em'}} src="static/img/thumb.png" height="60%;" />
+              </div>
+              <div className="overlay">
+                <br />
+                <div className="social" style={{marginTop: '5em'}}>
+                  <div style={{
+                    margin: 10, 
+                    display: 'inline-block', 
+                    color: '#fff', 
+                    fontFamily: '"Proxima Nova",sans-serif', 
+                    width: 10, 
+                    height: 10, 
+                    border: '3px solid #fff', 
+                    padding: 20, 
+                    borderRadius: '50%'
+                  }}>
+                  <a href={"/load?id=" + this.props.ModelID} style={{textDecoration: 'none', color: '#fff'}}>
+                  <p style={{marginTop: '-8px', marginLeft: '-6px'}}>
+                  <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                  </p>
+                  </a>
+                  </div>
+                  <div style={{margin: 10, 
+                    display: 'inline-block', 
+                    color: '#fff', 
+                    fontFamily: '"Proxima Nova",sans-serif', 
+                    width: 10, 
+                    height: 10, 
+                    border: '3px solid #fff', 
+                    padding: 20, 
+                    borderRadius: '50%'
+                  }}>
+                  <a onClick={
+                    () => this.props.ModelFunction(this.props.ModelID)
+                  } style={{
+                    textDecoration: 'none', 
+                    color: '#fff', 
+                    cursor: 'pointer'
+                  }}>
+                  <p style={{
+                    marginTop: '-8px', 
+                    marginLeft: '-7px'
+                  }}>
+                  <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
+                  </p>
+                  </a>
+                  </div>
+                </div>
+              </div>
+              <h3 style={{marginTop: '-12em'}}>{this.props.ModelName}</h3>
+            </div>
+      );
+  }
+}
+
+Card.propTypes = {
+  ModelName: React.PropTypes.string,
+  ModelID: React.PropTypes.number,
+  ModelFunction: React.PropTypes.func
+};
+
+
+export default Card;

ide/static/js/content.js

@@ -85,6 +85,7 @@ class Content extends React.Component {
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
     this.saveDb = this.saveDb.bind(this);
+    this.saveModel = this.saveModel.bind(this);
     this.loadDb = this.loadDb.bind(this);
     this.infoModal = this.infoModal.bind(this);
     this.faqModal = this.faqModal.bind(this);
@@ -979,6 +980,34 @@ class Content extends React.Component {
     layer.info.phase = 0;
     this.setState({ net });
   }
+  saveModel(){
+  let modelData = this.state.net;
+  this.setState({ load: true });
+    $.ajax({
+      url: '/saveModel',
+      dataType: 'json',
+      type: 'POST',
+      data: {
+        net: JSON.stringify(modelData),
+        net_name: this.state.net_name,
+        user_id: this.getUserId(),
+        nextLayerId: this.state.nextLayerId
+      },
+      success : function (response) {
+        if (response.result == 'success') {
+          this.modalContent = "Successfully Saved!";
+          this.openModal();
+        }
+        else if (response.result == 'error') {
+          this.addError(response.error);
+        }
+        this.setState({ load: false });
+      }.bind(this),
+      error() {
+        this.setState({ load: false });
+      }
+    });
+  }
   saveDb(){
     let netData = this.state.net;
     this.setState({ load: true });
@@ -1055,7 +1084,7 @@ class Content extends React.Component {
     // Note: this needs to be improved when handling conflict resolution to avoid
     // inconsistent states of model
     let nextLayerId = this.state.nextLayerId;
-
+    let is_shared = false;
     this.setState({ load: true });
 
     this.dismissAllErrors();
@@ -1072,6 +1101,13 @@ class Content extends React.Component {
           // while loading a model ensure paramete intialisation
           // for UI show/hide is not executed, it leads to inconsistent
           // data which cannot be used further
+          if (response.public_sharing == false) {
+            is_shared = false;
+          }
+          else {
+            is_shared = true;
+          }
+          console.log(response);
           nextLayerId = response.next_layer_id;
           this.initialiseImportedNet(response.net,response.net_name);
           if (Object.keys(response.net).length){
@@ -1083,15 +1119,18 @@ class Content extends React.Component {
         }
         this.setState({
           load: false,
-          isShared: true,
+          isShared: is_shared,
           nextLayerId: parseInt(nextLayerId)
+        }, function() {
+          console.log("Shared value: " + this.state.isShared);
         });
       }.bind(this),
       error() {
         this.setState({ load: false });
       }
     });
   }
+
   infoModal() {
     this.modalHeader = "About"
     this.modalContent = `Fabrik is an online collaborative platform to build and visualize deep\
@@ -1113,7 +1152,7 @@ class Content extends React.Component {
       <a target="_blank" href="https://github.com/Cloud-CV/Fabrik/blob/master/docs/source/tested_models.md"> here</a>.
       <br />
       <b>Q:</b> What do the Train/Test buttons mean?<br />
-      <b>A:</b> They are two different modes of your model: 
+      <b>A:</b> They are two different modes of your model:
       Train and Test - respectively for training your model with data and testing how and if it works.<br />
       <b>Q:</b> What does the import fuction do?<br />
       <b>A:</b> It allows you to import your previously created models in Caffe (.protoxt files),
@@ -1127,7 +1166,7 @@ class Content extends React.Component {
       <b>A:</b> Please see the instructions listed
       <a target="_blank" href="https://github.com/Cloud-CV/Fabrik/blob/master/README.md"> here</a>
       <br /><br />
-                         
+
       <b>If you have anymore questions, please visit Fabrik's Github page available
        <a target="_blank" href="https://github.com/Cloud-CV/Fabrik"> here</a> for more information.</b>
       </p>);
@@ -1282,6 +1321,7 @@ class Content extends React.Component {
       this.addNewLayer(layer);
     }
   }
+
   render() {
     let loader = null;
     if (this.state.load) {
@@ -1299,9 +1339,11 @@ class Content extends React.Component {
           <div id="sidebar-scroll" className="col-md-12">
              <h5 className="sidebar-heading">ACTIONS</h5>
              <TopBar
+              isShared={this.state.isShared}
               exportNet={this.exportNet}
               importNet={this.importNet}
               saveDb={this.saveDb}
+              saveModel={this.saveModel}
               zooModal={this.zooModal}
               textboxModal={this.textboxModal}
               urlModal={this.urlModal}