Dashboard (Both design and functionality) #471
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .overlay { | ||
| opacity: 0; | ||
| z-index: -2; | ||
| height: 290px; | ||
| width: 240px; | ||
| background: rgb(34,47,62,0.9); | ||
| border-radius: 30px; | ||
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| body { | ||
| background: #F3F5F7; | ||
| } | ||
|
|
||
| .insert-layer-title { | ||
| position: relative; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: 30, | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import React from 'react'; | ||
| import Modal from 'react-modal'; | ||
| import Card from './card'; | ||
|
|
||
| const infoStyle = { | ||
| content : { | ||
| top : '50%', | ||
| left : '55%', | ||
| right : '60%', | ||
| bottom : 'auto', | ||
| marginRight : '-50%', | ||
| transform : 'translate(-50%, -50%)', | ||
| borderRadius : '8px' | ||
| }, | ||
| overlay: { | ||
| zIndex : 100 | ||
| } | ||
| }; | ||
|
|
||
| class Dashboard extends React.Component{ | ||
|
There was a problem hiding this comment. Don't add two different components in same files |
||
| constructor(props) { | ||
| super(props); | ||
| this.state = {modalIsOpen: false} | ||
| this.getModelData = this.getModelData.bind(this); | ||
| this.deleteModel = this.deleteModel.bind(this); | ||
| this.openModal = this.openModal.bind(this); | ||
| this.closeModal = this.closeModal.bind(this); | ||
| this.modalContent = null; | ||
| this.modalHeader = null; | ||
| } | ||
|
|
||
| getModelData(){ | ||
| var userid = localStorage.getItem("userID"); | ||
| $.ajax({ | ||
| url: '/getModel', | ||
| dataType: 'json', | ||
| type: 'POST', | ||
| data: {userID: userid}, | ||
| success : function (response) { | ||
| if (response.result == 'success') { | ||
| var obj = JSON.stringify(response.data); | ||
| localStorage.setItem("obj",obj); | ||
| return obj; | ||
| } | ||
| else if (response.result == 'error') { | ||
| if (localStorage.hasOwnProperty('obj')) { | ||
| localStorage.removeItem("obj"); | ||
| } | ||
| } | ||
| return response.data; | ||
| }.bind(this), | ||
| error() { | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| deleteModel(model_id){ | ||
| var userid = localStorage.getItem("userID"); | ||
| $.ajax({ | ||
| url: '/deleteModel', | ||
| type: 'POST', | ||
| dataType: 'json', | ||
| data: {userID: userid, modelid: model_id}, | ||
| success : function (response) { | ||
|
|
||
| if (response.result == 'success') { | ||
| this.modalContent = response.data; | ||
| this.openModal(); | ||
| } | ||
| else if (response.result == 'error') { | ||
| } | ||
| }.bind(this), | ||
| error() { | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| openModal() { | ||
| this.setState({ modalIsOpen: true }); | ||
| } | ||
|
|
||
| closeModal() { | ||
| this.setState({ modalIsOpen: false }); | ||
| location.reload(true); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.getModelData(); | ||
| } | ||
|
|
||
| render() { | ||
| if (localStorage.hasOwnProperty('userID')) { | ||
| if (!localStorage.hasOwnProperty('obj')) { | ||
| elements=<div><p style={{fontStyle: 'italic', marginTop: '2em'}}>No models found</p></div>; | ||
| } | ||
| else { | ||
| var data_array = JSON.parse(localStorage.getItem("obj")); | ||
| var len = Object.keys(data_array).length/2; | ||
| var elements=[]; | ||
| for (var i = 1; i < len+1; i++) { | ||
| elements.push(<Card ModelFunction={ this.deleteModel } ModelName={ data_array["Model"+i+"_Name"] } ModelID={ data_array["Model"+i+"_ID"] } />) | ||
| } | ||
| } | ||
| return ( | ||
| <center> | ||
| <div className="cont" style={{width: '80%', marginTop: '2em', display: 'inline-block'}}> | ||
| <h1 style={{color: '#455062', fontSize: '2em', textAlign: 'left', fontWeight: 'bolder'}}>DASHBOARD</h1> | ||
| <br /> | ||
| <p style={{textAlign: 'left'}}> | ||
| <a href="#" style={{ | ||
| textDecoration: 'none', | ||
| color: '#fff', | ||
| fontWeight: 'bold', | ||
| background: '#222f3e', | ||
| fontSize: '0.7em', | ||
| padding: 15, | ||
| paddingRight: 20, | ||
| paddingLeft: 20, | ||
| borderRadius: 200 | ||
| }}> | ||
| <span className="glyphicon glyphicon-plus" aria-hidden="true"></span> CREATE NEW MODEL</a> | ||
| </p> | ||
| <br /> | ||
| <div className="all-cards" style={{marginLeft: '-2.6em', display: 'inline-block'}}> | ||
| {elements} | ||
| </div> | ||
| </div> | ||
| <Modal | ||
| isOpen={this.state.modalIsOpen} | ||
| onRequestClose={this.closeModal} | ||
| style={infoStyle} | ||
| contentLabel="Modal"> | ||
| <button type="button" style={{padding: 5+'px'}} className="close" onClick={this.closeModal}>×</button> | ||
| <h4>{ this.modalHeader }</h4> | ||
| { this.modalContent } | ||
| </Modal> | ||
| </center> | ||
| ); | ||
| } | ||
| else { | ||
| window.open("#","_self"); | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default Dashboard; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As far as I understand this method performs update on already existing model so please rename it to update model
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This method doesn’t update on already existing model, it saves the model data on clicking the save button but if the model already exists in the database then it updates the model.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So if you are doing this then why do we have older method still present?
Why can't your remove that or add the code in same method?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can’t remover the older method as there is a difference between the 2 methods the older one is saving the model with shared properties while the new method is saving the model with not shared properties, if you still want me to combine the two, I’ll try to do it.