the client is probably ready

Author: GrishaDev

src/App.css

@@ -64,6 +64,7 @@
 }
 
 .raw-data-area{
+  width: 350px;
   overflow-y: auto;
 }
 .add-div{
@@ -85,6 +86,7 @@
 /* -----------------login -----------------*/
 
 .login-page{
+  background-color: whitesmoke;
   height: 100vh;
   display: flex;
   justify-content: center;

src/App.js

@@ -75,10 +75,11 @@ class App extends React.Component {
     this.newValue= this.newValue.bind(this);
     this.newGraph= this.newGraph.bind(this);
     this.delete= this.delete.bind(this);
+    this.graphUpdate= this.graphUpdate.bind(this);
   }
 
   componentDidMount() {
-    document.title="hehe";
+    document.title="Hey";
   }
 
   newValue(date,value,category,graph, special, special_data){
@@ -120,29 +121,44 @@ class App extends React.Component {
     if(data[cat].graphs.length === 0)
       data.splice(cat,1);
 
-    console.log(data);
     let first = data[0];
     this.setState( { current: { name: first.graphs[0].name,
       type: first.graphs[0].type,
       data: first.graphs[0].data, category: 0, graph: 0 } });
+  }
+
+  graphUpdate(graph){
+    let parsed
+    try{
+      parsed = JSON.parse(graph);
+    } catch(e){
+      console.log("Invalid json from raw data option. >> "+e)
+      return;
+    }
+    parsed.map(o =>{
+      o.x = new Date(o.x);
+    })
+    let cat = this.state.current.category;
+    let grf = this.state.current.graph;
+    data[cat].graphs[grf].data = parsed;
+    let current = data[cat].graphs[grf];
 
+    this.setState( { current: { name: current.name, type: current.type, data: parsed, category: cat, graph: grf } });
   }
-  render() {
 
+  render() {
     return (
       <>
         <Header title={this.state.current.name} onGraphChange={this.onGraphChange} data={data} newGraph={this.newGraph}/>
         <Content data={this.state.current.data} title={this.state.current.name} newValue={this.newValue} category={this.state.current.category}
-        graph={this.state.current.graph} valueType={this.state.current.type} delete={this.delete}/>
+        graph={this.state.current.graph} valueType={this.state.current.type} delete={this.delete} graphUpdate={this.graphUpdate}/>
       </>
     );
   }
 }
 
 export default App;
 
-
-
 function newGraphParse(category,graph,valueType){
   let newcategory = true;
     let category_index=0;

src/components/Content/Content.js

@@ -18,7 +18,7 @@ class Content extends React.Component {
 
         let stats = <div className='stats-area'>Add some values to graph</div>
         if(this.props.data.length > 0)
-            stats = <Stats valueType={this.props.valueType} data={this.props.data} gym={ this.isGym() }/>;
+            stats = <Stats valueType={this.props.valueType} data={this.props.data} gym={ this.isGym() } graphUpdate={this.props.graphUpdate}/>;
 
         return (
             <>

src/components/Content/Stats/DataDialog/DataDialog.js

@@ -3,29 +3,60 @@ import '../../../../App.css';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+let graph;
 
 export default function DataDialog(props) {
 
-    let fields=[];
-    props.data.map((o,ind)=>{
-        fields.push(<p key={ind}>{JSON.stringify(o)}</p>);
-    });
+    const [disabled, setDisabled] = React.useState(true);
+    const [data, setData] = React.useState(JSON.stringify(props.data,null,4));
+
+    function onInput(e){
+        graph = e.target.value;
+        setData(graph);
+
+        if(graph.length === 0)
+            setDisabled(true);
+        else
+            setDisabled(false);
+    }
+
+    function submitHandle(){
+        props.graphUpdate(graph);
+        props.dialogClose();
+    }
+
+    // React.useEffect(()=>{
+    //     console.log("haha");
+    // })
+
+    // let fields=[];
+    // props.data.map((o,ind)=>{
+    //     fields.push(<p key={ind}>{JSON.stringify(o)}</p>);
+    // });
 
     return (
         <Dialog open={props.open} onClose={props.dialogClose} aria-labelledby="form-dialog-title">
             <DialogTitle>Raw data:</DialogTitle>
             <DialogContent className="raw-data-area">
-                {fields}
+                {/* {fields} */}
+                <TextField
+                    placeholder="What have you done? ctrl z asap"
+                    multiline={true}
+                    rows={9}
+                    rowsMax={15}
+                    value={data}
+                    fullWidth
+                    helperText="Change at your own risk"
+                    onChange={onInput}
+                    />
             </DialogContent>
             <DialogActions>
                     <Button onClick={props.dialogClose} color="primary" className="raw">Leave</Button>
-                    {/* <Button onClick={()=> this.onSubmit()}
-                    color="primary">
-                        Add
-                </Button>  */}
+                    <Button  disabled={disabled} onClick={submitHandle} color="primary">Change</Button> 
             </DialogActions>
         </Dialog>
     )

src/components/Content/Stats/Stats.js

@@ -39,7 +39,8 @@ class Stats extends React.Component {
                 <p>Lowest: {getLowest(this.props.data)} </p>
                 <p>Average: {getAverage(this.props.data)} </p>
                 <Button color="primary" variant="contained" onClick={this.dialogClick}>Raw Data</Button>
-                <DataDialog open={this.state.open} dialogClose={this.dialogClose} title={this.props.title} data={this.props.data}/>
+                <DataDialog open={this.state.open} dialogClose={this.dialogClose} title={this.props.title} data={this.props.data}
+                 graphUpdate={this.props.graphUpdate}/>
             </div>
         );
     }

src/components/Login.js

@@ -1,25 +1,39 @@
 import React from 'react';
 import '../App.css';
 import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 
+let name;
 export default function Login(props) {
 
+    const [disabled, setDisabled] = React.useState(true);
+
+    function componentDidMount(){
+        document.title="Hey";
+    }
+
+    function onInput(e){
+        name = e.target.value;
+        if(name.length === 0)
+            setDisabled(true);
+        else
+            setDisabled(false);
+    }
+
+    function submitHandle(){
+        console.log(name);
+        window.location.href='/app';
+    }
+
     return (
         <div className="login-page">
             <Paper className={'login-paper'}>
-                {/* <div className='login-title'>
-                    <Typography variant="h5" component="h3">
-                        Login
-                    </Typography>
-                </div> */}
                 <div className='login-content'>
-                    <TextField label="login" variant="outlined" fullWidth />
+                    <TextField label="Name" variant="outlined" fullWidth onChange={onInput} autoFocus/>
                 </div>
                 <div className='login-actions'>
-                    <Button variant="contained"  color="primary">da</Button>
+                    <Button variant="contained"  color="primary" disabled={disabled} onClick={submitHandle}>Enter</Button>
                 </div>
             </Paper>
         </div>