tanner/pslockout
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Grab tool data from web server

Browse Source
This commit is contained in:
Tanner Collin 2018-02-03 01:48:49 -07:00
parent 976f764123
commit 3b5509000d
3 changed files with 120 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
webclient/src/App.js
View File

@ -2,63 +2,27 @@ import React, { Component } from 'react';
import Categories from './Categories'; import Categories from './Categories';
import Category from './Category'; import Category from './Category';
import Tool from './Tool'; import Tool from './Tool';
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'; import { Container, Dimmer, Dropdown, Header, Icon, Item, Loader, Menu, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom'; import { Link, Route } from 'react-router-dom';
const fakeData = {
categories: [
{
name: "Woodshop",
slug: "woodshop",
info: "Some info about the woodshop.",
photo: "https://i.imgur.com/RIm8aoG.jpg",
tools: [
{
id: 0,
name: "White Bandsaw",
photo: "http://wiki.protospace.ca/images/thumb/f/f8/105.jpg/146px-105.jpg",
notes: "Requires training. Tighten tension lever prior to use / Loosen tension lever after use. Tension lever is on rear.",
wikiId: 105,
},
{
id: 1,
name: "Jointer",
photo: "http://wiki.protospace.ca/images/thumb/6/6f/73.jpg/302px-73.jpg",
notes: "Boards must be ABSOLUTELY FREE of nails, staples, screws, or other metal. Check boards thoroughly each and every time, make no presumptions. One mistake will chip the blade and render it useless (drum blades are very expensive).",
wikiId: 73,
},
],
},
{
name: "Metalshop",
slug: "metalshop",
info: "Some info about the metalshop.",
photo: "https://i.imgur.com/A2L2ACY.jpg",
tools: [
{
id: 2,
name: "Tormach CNC",
photo: "http://wiki.protospace.ca/images/thumb/c/cf/49.jpg/320px-49.jpg",
notes: "Must complete Shop Safety, Lathe Training, 3D CAD Training, CAM Training, 1 on 1 Project.",
wikiId: 49,
},
{
id: 3,
name: "Powerfist Bench Grinder",
photo: "http://wiki.protospace.ca/images/thumb/c/cd/39.jpg/298px-39.jpg",
notes: "A bench grinder is for grinding steels or deburring steel or aluminum (if fitted with a wire wheel).",
wikiId: 39,
},
],
},
],
user: {
authorizedTools: [1, 2],
},
};
class App extends Component { class App extends Component {
constructor() {
super();
this.state = {
toolData: null,
};
}
componentDidMount() {
fetch('http://localhost:8080/api/client')
.then(response => response.json())
.then(data => this.setState({ toolData: data }));
}
render() { render() {
const toolData = this.state.toolData;
return ( return (
<div> <div>
<Menu fixed='top' borderless inverted> <Menu fixed='top' borderless inverted>
@ -76,17 +40,26 @@ class App extends Component {
</Menu> </Menu>
<div style={{height: '70px', display: 'inline-block'}} /> <div style={{height: '70px', display: 'inline-block'}} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props => {toolData ?
<Category {...props} data={fakeData} /> <div>
} /> <Route exact path='/' render={props =>
<Categories {...props} data={toolData} />
} />
<Route exact path='/:category/:id' render={props => <Route exact path='/:category' render={props =>
<Tool {...props} data={fakeData} /> <Category {...props} data={toolData} />
} /> } />
<Route exact path='/:category/:id' render={props =>
<Tool {...props} data={toolData} />
} />
</div>
:
<Dimmer active>
<Loader>Loading</Loader>
</Dimmer>
}
</div> </div>
); );

16
webclient/src/Tool.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Menu, Segment, Table, Input } from 'semantic-ui-react' import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Label, Menu, Segment, Table, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
class Tool extends Component { class Tool extends Component {
@ -16,6 +16,8 @@ class Tool extends Component {
x.id == match.params.id x.id == match.params.id
); );
const approved = user.authorizedTools.includes(tool.id);
return ( return (
<div> <div>
<Container> <Container>
@ -28,14 +30,20 @@ class Tool extends Component {
</Breadcrumb> </Breadcrumb>
<Segment> <Segment>
<Image src={tool.photo} size='medium' centered /> <Image src={tool.photo} size='medium' centered rounded />
<Segment textAlign='center' basic> <Segment textAlign='center' basic>
<Button color='green'> <p>Status: Off</p>
<div>
<Button color='green' disabled={!approved}>
<Icon name='lightning' /> Arm <Icon name='lightning' /> Arm
</Button> </Button>
<Button color='red'> <Button color='red' disabled={!approved}>
<Icon name='stop' /> Disarm <Icon name='stop' /> Disarm
</Button> </Button>
</div>
{approved || <Label basic color='red' pointing>
Not authorized! Please take the xyz course.
</Label>}
</Segment> </Segment>
<Table basic='very' unstackable> <Table basic='very' unstackable>

81
webserver/server.js
View File

@ -1,20 +1,85 @@
const express = require('express'); const express = require('express');
const app = express(); const app = express();
const tools = { const fakeData = {
"2C3AE843A15F": { categories: [
relayOn: false, {
ledOn: true, name: 'Woodshop',
date: "2018-02-01", slug: 'woodshop',
info: 'Some info about the woodshop.',
photo: 'https://i.imgur.com/RIm8aoG.jpg',
tools: [
{
id: 0,
name: 'White Bandsaw',
photo: 'http://wiki.protospace.ca/images/thumb/f/f8/105.jpg/146px-105.jpg',
notes: 'Requires training. Tighten tension lever prior to use / Loosen tension lever after use. Tension lever is on rear.',
wikiId: 105,
},
{
id: 1,
name: 'Jointer',
photo: 'http://wiki.protospace.ca/images/thumb/6/6f/73.jpg/302px-73.jpg',
notes: 'Boards must be ABSOLUTELY FREE of nails, staples, screws, or other metal. Check boards thoroughly each and every time, make no presumptions. One mistake will chip the blade and render it useless (drum blades are very expensive).',
wikiId: 73,
},
],
},
{
name: 'Metalshop',
slug: 'metalshop',
info: 'Some info about the metalshop.',
photo: 'https://i.imgur.com/A2L2ACY.jpg',
tools: [
{
id: 2,
name: 'Tormach CNC',
photo: 'http://wiki.protospace.ca/images/thumb/c/cf/49.jpg/320px-49.jpg',
notes: 'Must complete Shop Safety, Lathe Training, 3D CAD Training, CAM Training, 1 on 1 Project.',
wikiId: 49,
},
{
id: 3,
name: 'Powerfist Bench Grinder',
photo: 'http://wiki.protospace.ca/images/thumb/c/cd/39.jpg/298px-39.jpg',
notes: 'A bench grinder is for grinding steels or deburring steel or aluminum (if fitted with a wire wheel).',
wikiId: 39,
},
],
},
],
user: {
authorizedTools: [1, 2],
}, },
}; };
const server = app.listen(3000, function () { const tools = {
console.log('Example app listening on port 3000!'); '2C3AE843A15F': {
relayOn: false,
ledOn: true,
date: '2018-02-01',
},
};
const server = app.listen(8080, function () {
console.log('Example app listening on port 8080!');
});
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
}); });
app.use('/', express.static('dist')); app.use('/', express.static('dist'));
app.get('/api/client', function (req, res) {
console.log('Request for client data');
res.setHeader('Content-Type', 'application/json');
res.send(fakeData);
});
app.get('/api/tool/:mac', function (req, res) { app.get('/api/tool/:mac', function (req, res) {
const mac = req.params.mac; const mac = req.params.mac;
@ -23,7 +88,7 @@ app.get('/api/tool/:mac', function (req, res) {
res.send(404); res.send(404);
} }
console.log("Request from MAC: " + mac); console.log('Request from MAC: ' + mac);
res.setHeader('Content-Type', 'application/json'); res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(data)); res.send(JSON.stringify(data));