Skip to content

Commit c99a0ac

Browse files
GrishaDevGrishaDev
committed
first build
1 parent a57462c commit c99a0ac

File tree

8 files changed

+229
-81
lines changed

8 files changed

+229
-81
lines changed

‎package-lock.json

+37
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@testing-library/jest-dom": "^4.2.4",
1212
"@testing-library/react": "^9.3.2",
1313
"@testing-library/user-event": "^7.1.2",
14+
"axios": "^0.19.0",
1415
"date-fns": "^2.8.1",
1516
"react": "^16.12.0",
1617
"react-dom": "^16.12.0",

‎public/favicon.ico

95.8 KB
Binary file not shown.

‎public/favicon2.ico

3.78 KB
Binary file not shown.

‎src/App.css

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
margin: 0;
44
}
55

6+
body{
7+
background-color: whitesmoke;
8+
}
9+
610
.header-root {
711
flex-grow: 1;
812
}
@@ -130,6 +134,13 @@
130134
}
131135

132136

137+
.nothing{
138+
height: 50vh;
139+
display: flex;
140+
justify-content: center;
141+
align-items: center;
142+
align-content: center;
143+
}
133144

134145
@media only screen and (max-width: 300px) {
135146
.add-div {

‎src/App.js

+146-75
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,82 @@ import React from 'react';
22
import './App.css';
33
import Header from './components/Header/Header';
44
import Content from './components/Content/Content';
5-
6-
const data = [{
7-
name: "games",
8-
graphs: [{
9-
name: "Roofcampers in rust",
10-
type: "noobs",
11-
data: [{ x: new Date(2013, 1, 1), y: 140 },
12-
{ x: new Date(1987, 1, 1), y: 12 },
13-
{ x: new Date(1993, 1, 1), y: 14 },
14-
{ x: new Date(1997, 1, 1), y: 18 },
15-
{ x: new Date(2001, 1, 1), y: 52 },
16-
{ x: new Date(2005, 1, 1), y: 80 },
17-
{ x: new Date(2011, 1, 1), y: 150 },
18-
{ x: new Date(2015, 1, 1), y: 170 }]
19-
},
20-
{
21-
name: "Balanced matches in dota",
22-
type: "matches",
23-
data: [{ x: new Date(2013, 1, 1), y: 400 },
24-
{ x: new Date(1987, 1, 1), y: 320 },
25-
{ x: new Date(1993, 1, 1), y: 280 },
26-
{ x: new Date(1997, 1, 1), y: 150 },
27-
{ x: new Date(2001, 1, 1), y: 210 },
28-
{ x: new Date(2005, 1, 1), y: 120 },
29-
{ x: new Date(2011, 1, 1), y: 80 },
30-
{ x: new Date(2015, 1, 1), y: 2 }]
31-
}
32-
]
33-
},
34-
{
35-
name: "ugh",
36-
graphs: [{
37-
name: "uga",
38-
type: "meme",
39-
data: [{ x: new Date(2013, 1, 1), y: 140 },
40-
{ x: new Date(1987, 1, 1), y: 12 },
41-
{ x: new Date(1993, 1, 1), y: 14 },
42-
{ x: new Date(1997, 1, 1), y: 18 },
43-
{ x: new Date(2001, 1, 1), y: 52 },
44-
{ x: new Date(2005, 1, 1), y: 80 },
45-
{ x: new Date(2011, 1, 1), y: 150 },
46-
{ x: new Date(2015, 1, 1), y: 170 }]
47-
},
48-
{
49-
name: "dada",
50-
type: "xd",
51-
data: [{ x: new Date(2013, 1, 1), y: 400 },
52-
{ x: new Date(1987, 1, 1), y: 320 },
53-
{ x: new Date(1993, 1, 1), y: 280 },
54-
{ x: new Date(1997, 1, 1), y: 150 },
55-
{ x: new Date(2001, 1, 1), y: 210 },
56-
{ x: new Date(2005, 1, 1), y: 120 },
57-
{ x: new Date(2011, 1, 1), y: 80 },
58-
{ x: new Date(2015, 1, 1), y: 2 }]
59-
}
60-
]
61-
}
62-
]
5+
import axios from 'axios';
6+
import Nothing from './components/Nothing'
7+
8+
9+
let data = [];
10+
11+
// let data = [{
12+
// name: "games",
13+
// graphs: [{
14+
// name: "Roofcampers in rust",
15+
// type: "noobs",
16+
// data: [{ x: new Date(2013, 1, 1), y: 140 },
17+
// { x: new Date(1987, 1, 1), y: 12 },
18+
// { x: new Date(1993, 1, 1), y: 14 },
19+
// { x: new Date(1997, 1, 1), y: 18 },
20+
// { x: new Date(2001, 1, 1), y: 52 },
21+
// { x: new Date(2005, 1, 1), y: 80 },
22+
// { x: new Date(2011, 1, 1), y: 150 },
23+
// { x: new Date(2015, 1, 1), y: 170 }]
24+
// },
25+
// {
26+
// name: "Balanced matches in dota",
27+
// type: "matches",
28+
// data: [{ x: new Date(2013, 1, 1), y: 400 },
29+
// { x: new Date(1987, 1, 1), y: 320 },
30+
// { x: new Date(1993, 1, 1), y: 280 },
31+
// { x: new Date(1997, 1, 1), y: 150 },
32+
// { x: new Date(2001, 1, 1), y: 210 },
33+
// { x: new Date(2005, 1, 1), y: 120 },
34+
// { x: new Date(2011, 1, 1), y: 80 },
35+
// { x: new Date(2015, 1, 1), y: 2 }]
36+
// }
37+
// ]
38+
// },
39+
// {
40+
// name: "ugh",
41+
// graphs: [{
42+
// name: "uga",
43+
// type: "meme",
44+
// data: [{ x: new Date(2013, 1, 1), y: 140 },
45+
// { x: new Date(1987, 1, 1), y: 12 },
46+
// { x: new Date(1993, 1, 1), y: 14 },
47+
// { x: new Date(1997, 1, 1), y: 18 },
48+
// { x: new Date(2001, 1, 1), y: 52 },
49+
// { x: new Date(2005, 1, 1), y: 80 },
50+
// { x: new Date(2011, 1, 1), y: 150 },
51+
// { x: new Date(2015, 1, 1), y: 170 }]
52+
// },
53+
// {
54+
// name: "dada",
55+
// type: "xd",
56+
// data: [{ x: new Date(2013, 1, 1), y: 400 },
57+
// { x: new Date(1987, 1, 1), y: 320 },
58+
// { x: new Date(1993, 1, 1), y: 280 },
59+
// { x: new Date(1997, 1, 1), y: 150 },
60+
// { x: new Date(2001, 1, 1), y: 210 },
61+
// { x: new Date(2005, 1, 1), y: 120 },
62+
// { x: new Date(2011, 1, 1), y: 80 },
63+
// { x: new Date(2015, 1, 1), y: 2 }]
64+
// }
65+
// ]
66+
// }
67+
// ]
6368

6469

6570
class App extends React.Component {
6671
constructor(props) {
6772
super(props);
68-
this.first = data[0];
6973

70-
this.state = { current: { name: this.first.graphs[0].name,
71-
type: this.first.graphs[0].type,
72-
data: this.first.graphs[0].data, category: 0, graph: 0 } };
74+
// if(data.length > 0){
75+
// this.first = data[0];
76+
77+
// this.state = { current: { name: this.first.graphs[0].name,
78+
// type: this.first.graphs[0].type,
79+
// data: this.first.graphs[0].data, category: 0, graph: 0 } };
80+
// }
7381

7482
this.onGraphChange = this.onGraphChange.bind(this);
7583
this.newValue= this.newValue.bind(this);
@@ -78,16 +86,28 @@ class App extends React.Component {
7886
this.graphUpdate= this.graphUpdate.bind(this);
7987
}
8088

81-
componentDidMount() {
82-
document.title="Hey";
89+
async componentDidMount() {
90+
await getData();
91+
92+
if(data.length > 0){
93+
this.first = data[0];
94+
95+
this.state = { current: { name: this.first.graphs[0].name,
96+
type: this.first.graphs[0].type,
97+
data: this.first.graphs[0].data, category: 0, graph: 0 } };
98+
}
99+
100+
document.title="Progress View";
83101
}
84102

85-
newValue(date,value,category,graph, special, special_data){
103+
async newValue(date,value,category,graph, special, special_data){
86104
if(!special)
87105
data[category].graphs[graph].data.push({x: date, y: parseInt(value)});
88106
else
89107
data[category].graphs[graph].data.push({x: date, y: parseInt(value), special_data: special_data});
90108

109+
await saveData(data);
110+
91111
this.setState({ current: { name: data[category].graphs[graph].name,
92112
type: data[category].graphs[graph].type,
93113
data: data[category].graphs[graph].data,
@@ -96,11 +116,13 @@ class App extends React.Component {
96116
console.log(data);
97117
}
98118

99-
newGraph(category,graph,valueType){
119+
async newGraph(category,graph,valueType){
100120
let a = newGraphParse(category,graph,valueType)
101121
let category_index = a.category_index;
102122
let graph_index = a.graph_index;
103123

124+
await saveData(data);
125+
104126
this.setState({ current: { name: data[category_index].graphs[graph_index].name,
105127
type: data[category_index].graphs[graph_index].type,
106128
data: data[category_index].graphs[graph_index].data,
@@ -114,20 +136,27 @@ class App extends React.Component {
114136
category: category, graph: graph } });
115137
}
116138

117-
delete(){
139+
async delete(){
118140
let cat = this.state.current.category;
119141
let grf = this.state.current.graph;
120142
data[cat].graphs.splice(grf,1);
121143
if(data[cat].graphs.length === 0)
122144
data.splice(cat,1);
123145

124-
let first = data[0];
125-
this.setState( { current: { name: first.graphs[0].name,
126-
type: first.graphs[0].type,
127-
data: first.graphs[0].data, category: 0, graph: 0 } });
146+
await saveData(data);
147+
148+
if(data.length > 0){
149+
let first = data[0];
150+
this.setState( { current: { name: first.graphs[0].name,
151+
type: first.graphs[0].type,
152+
data: first.graphs[0].data, category: 0, graph: 0 } });
153+
}
154+
else{
155+
this.setState({nothing: true})
156+
}
128157
}
129158

130-
graphUpdate(graph){
159+
async graphUpdate(graph){
131160
let parsed
132161
try{
133162
parsed = JSON.parse(graph);
@@ -143,15 +172,28 @@ class App extends React.Component {
143172
data[cat].graphs[grf].data = parsed;
144173
let current = data[cat].graphs[grf];
145174

175+
await saveData(data);
176+
146177
this.setState( { current: { name: current.name, type: current.type, data: parsed, category: cat, graph: grf } });
147178
}
148179

149180
render() {
181+
182+
let content = <Nothing/>;
183+
let header = <Header title={""} onGraphChange={this.onGraphChange} data={data} newGraph={this.newGraph}/>
184+
console.log("================================");
185+
console.log(data);
186+
console.log("================================");
187+
if(data.length > 0){
188+
content = <Content data={this.state.current.data} title={this.state.current.name} newValue={this.newValue} category={this.state.current.category}
189+
graph={this.state.current.graph} valueType={this.state.current.type} delete={this.delete} graphUpdate={this.graphUpdate}/>
190+
191+
header = <Header title={this.state.current.name} onGraphChange={this.onGraphChange} data={data} newGraph={this.newGraph}/>
192+
}
150193
return (
151194
<>
152-
<Header title={this.state.current.name} onGraphChange={this.onGraphChange} data={data} newGraph={this.newGraph}/>
153-
<Content data={this.state.current.data} title={this.state.current.name} newValue={this.newValue} category={this.state.current.category}
154-
graph={this.state.current.graph} valueType={this.state.current.type} delete={this.delete} graphUpdate={this.graphUpdate}/>
195+
{header}
196+
{content}
155197
</>
156198
);
157199
}
@@ -181,3 +223,32 @@ function newGraphParse(category,graph,valueType){
181223

182224
return {category_index,graph_index};
183225
}
226+
227+
228+
async function getData(){
229+
try{
230+
let res = await axios.get('/api/');
231+
if(res.status)
232+
return res.data;
233+
else
234+
alert("error");
235+
}
236+
catch{
237+
alert("error contacting server");
238+
}
239+
return [];
240+
}
241+
242+
async function saveData(data){
243+
try{
244+
let res = await axios.post('/api/',{data:data});
245+
if(res.status)
246+
console.log(res.msg);
247+
else
248+
alert("error");
249+
}
250+
catch{
251+
alert("error contacting server");
252+
}
253+
}
254+

0 commit comments

Comments
 (0)