added pre implementation navbar

This commit is contained in:
britea 2020-03-11 17:38:04 +01:00
parent 662284959e
commit 1e787f8216
4 changed files with 193 additions and 19 deletions

View file

@ -1,7 +1,7 @@
import React from "react"; import React, {Component} from "react";
import {BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; import {BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./views/Home"; import Home from "./views/Home";
import Dashboard from "./views/DashboardTest"; import Dashboard from "./views/Dashboard";
import Signup from "./views/Signup"; import Signup from "./views/Signup";
import Login from "./views/Login"; import Login from "./views/Login";
import FourOhFour from "./views/FourOhFour"; import FourOhFour from "./views/FourOhFour";
@ -11,7 +11,14 @@ import queryString from 'query-string';
import { call } from './client_server'; import { call } from './client_server';
class App extends React.Component { /*let userJsonString = JSON.parse(localStorage.getItem("token"));
let date = new Date().getTime().toString();
let delta = date - userJsonString.timestamp;
if (delta < 5*60*60*1000) {
loggedIn = true;
}*/
class App extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -23,6 +30,7 @@ class App extends React.Component {
loggedIn = true; loggedIn = true;
} }
}catch(exception) { }catch(exception) {
} }
this.state = { this.state = {
@ -47,6 +55,7 @@ class App extends React.Component {
.then(res => { .then(res => {
console.log(res); console.log(res);
if (res.data && res.status === 200) { if (res.data && res.status === 200) {
localStorage.setItem("token", res.data.jwttoken);
this.setState( this.setState(
{ {
user: data.params.user, user: data.params.user,
@ -54,9 +63,7 @@ class App extends React.Component {
loggedIn: true, loggedIn: true,
} }
); );
localStorage.setItem("token", JSON.stringify(res.data.jwttoken)); //this.props.history.push("/dashboard");
this.props.history.push("/dashboard");
} else { } else {
this.setState({ this.setState({
error: res.data.message error: res.data.message
@ -84,7 +91,7 @@ class App extends React.Component {
<Switch> <Switch>
<Route path="/" exact component={Home} /> <Route path="/" exact component={Home} />
<Route path="/login" > <Route path="/login" >
{ this.state.loggedIn ? <Redirect to="/dashboard" /> : <Login auth={this.auth} /> } { this.state.loggedIn ? <Redirect tkn={this.state.token} to="/dashboard" /> : <Login auth={this.auth} /> }
</Route> </Route>
<Route path="/signup" exact component={Signup} /> <Route path="/signup" exact component={Signup} />
<Route path="/dashboard" > <Route path="/dashboard" >

View file

@ -1,6 +1,18 @@
import axios from 'axios'; import axios from 'axios';
let config = 'http://localhost:8080/'; let config = 'http://localhost:8080/';
const tkn = localStorage.getItem("token");
// requests data devices
/*
{
params : data,
device: 'tipoDiDevice',
id: se serve
}
*/
export var call = { export var call = {
login: function(data, headers) { login: function(data, headers) {
@ -36,4 +48,76 @@ export var call = {
return {status : "Errore"}; return {status : "Errore"};
}); });
}, },
getAllRooms: function(token) {
return axios.get(config + 'room', { headers: { Authorization : "Bearer " + tkn } })
.then(res => {
return res;
}).catch(err => {
return err;
});
},
createRoom: function(data, headers) {
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
.then(res => {
return res;
}).catch(err => {
return err;
});
},
updateRoom: function(data, headers) {
return axios.put(config + 'room/'+data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deleteRoom: function(data, headers) {
return axios.delete(config + 'room/'+data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
devicePost: function(data, headers) {
return axios.post(config + data.device, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceUpdate: function(data, headers) {
return axios.put(config + data.device, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceDelete: function(data, headers) {
return axios.delete(config + data.device + '/' + data.id, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceGetById: function(data, headers) {
return axios.get(config + data.device + '/' + data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceGetAll: function(data, headers) {
return axios.get(config + data.device)
.then(res => {
return res;
}).catch(err => {
return err;
});
}
}; };

View file

@ -1,10 +1,81 @@
import React from 'react'; import React, {Component} from 'react';
import DevicePanel from "../components/dashboard/DevicePanel"; import DevicePanel from "../components/dashboard/DevicePanel";
export default function Dashboard(props){ import { call } from '../client_server';
import {Button} from 'semantic-ui-react';
import { Menu } from 'semantic-ui-react'
import { Grid, Image, Icon } from 'semantic-ui-react'
import NavbarTest from './NavbarTest'
export default class Dashboard extends Component{
constructor(props) {
super(props);
this.state = {
rooms: [],
activeItem: "Home"
};
this.addRoom = this.addRoom.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
}
UNSAFE_componentWillMount() {
call.getAllRooms(this.props.token)
.then(res => {
res.data.forEach((e) => {
this.setState(state => ({
rooms: state.rooms.concat([e])
}));
});
console.log(res, this.state.rooms)
}).catch(err => {
console.log(err);
});
}
addRoom(e) {
e.preventDefault();
const params = {
"icon": "ciao",
"image": "ciao",
"name": "kitchen"
}
call.createRoom(params)
.then(res => {
console.log(res);
if (res.status === 200 && res.data) {
this.setState(state => ({
rooms: state.rooms.concat([res.data])
}));
}
console.log(this.state.rooms);
}).catch(err => {
console.log(err);
});
};
handleItemClick(el) {
//da fare richiesta get della room e settare activeItem
}
render () {
return( return(
<div style={{height : "110vh"}}> <div style={{height : "110vh"}}>
<Button color='blue' fluid size='large' onClick={this.addRoom}>
Add Room
</Button>
<Grid>
<Grid.Row>
<Grid.Column width={3}>
<NavbarTest rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
</Grid.Column>
<Grid.Column width={13}>
<DevicePanel /> <DevicePanel />
</Grid.Column>
</Grid.Row>
</Grid>
</div> </div>
) )
} }
}

View file

@ -0,0 +1,12 @@
import React, {Component} from 'react';
import {Button } from 'semantic-ui-react';
export default class NavbarTest extends Component {
render() {
return (
<h1>Ciao</h1>
)
}
}