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 Home from "./views/Home";
|
||||
import Dashboard from "./views/DashboardTest";
|
||||
import Dashboard from "./views/Dashboard";
|
||||
import Signup from "./views/Signup";
|
||||
import Login from "./views/Login";
|
||||
import FourOhFour from "./views/FourOhFour";
|
||||
|
@ -11,18 +11,26 @@ import queryString from 'query-string';
|
|||
|
||||
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) {
|
||||
super(props);
|
||||
|
||||
let loggedIn = false;
|
||||
|
||||
try {
|
||||
let userJsonString = localStorage.getItem("token");
|
||||
if (userJsonString) {
|
||||
loggedIn = true;
|
||||
}
|
||||
} catch (exception) {
|
||||
let userJsonString = localStorage.getItem("token");
|
||||
if (userJsonString) {
|
||||
loggedIn = true;
|
||||
}
|
||||
}catch(exception) {
|
||||
|
||||
}
|
||||
|
||||
this.state = {
|
||||
|
@ -47,6 +55,7 @@ class App extends React.Component {
|
|||
.then(res => {
|
||||
console.log(res);
|
||||
if (res.data && res.status === 200) {
|
||||
localStorage.setItem("token", res.data.jwttoken);
|
||||
this.setState(
|
||||
{
|
||||
user: data.params.user,
|
||||
|
@ -54,9 +63,7 @@ class App extends React.Component {
|
|||
loggedIn: true,
|
||||
}
|
||||
);
|
||||
localStorage.setItem("token", JSON.stringify(res.data.jwttoken));
|
||||
this.props.history.push("/dashboard");
|
||||
|
||||
//this.props.history.push("/dashboard");
|
||||
} else {
|
||||
this.setState({
|
||||
error: res.data.message
|
||||
|
@ -84,7 +91,7 @@ class App extends React.Component {
|
|||
<Switch>
|
||||
<Route path="/" exact component={Home} />
|
||||
<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 path="/signup" exact component={Signup} />
|
||||
<Route path="/dashboard" >
|
||||
|
|
|
@ -1,6 +1,18 @@
|
|||
import axios from 'axios';
|
||||
|
||||
let config = 'http://localhost:8080/';
|
||||
const tkn = localStorage.getItem("token");
|
||||
|
||||
// requests data devices
|
||||
/*
|
||||
|
||||
{
|
||||
params : data,
|
||||
device: 'tipoDiDevice',
|
||||
id: se serve
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
export var call = {
|
||||
login: function(data, headers) {
|
||||
|
@ -36,4 +48,76 @@ export var call = {
|
|||
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";
|
||||
|
||||
export default function Dashboard(props){
|
||||
return(
|
||||
<div style={{height : "110vh"}}>
|
||||
<DevicePanel />
|
||||
</div>
|
||||
)
|
||||
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(
|
||||
<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 />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</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