added pre implementation navbar
This commit is contained in:
parent
662284959e
commit
1e787f8216
4 changed files with 193 additions and 19 deletions
|
@ -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);
|
||||||
|
|
||||||
|
@ -22,7 +29,8 @@ class App extends React.Component {
|
||||||
if (userJsonString) {
|
if (userJsonString) {
|
||||||
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" >
|
||||||
|
|
|
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
12
smart-hut/src/views/NavbarTest.js
Normal file
12
smart-hut/src/views/NavbarTest.js
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue