From 3b5509000d9f556c00ab228aae128bcd52b4b59b Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Sat, 3 Feb 2018 01:48:49 -0700 Subject: [PATCH] Grab tool data from web server --- webclient/src/App.js | 97 ++++++++++++++++--------------------------- webclient/src/Tool.js | 16 +++++-- webserver/server.js | 81 ++++++++++++++++++++++++++++++++---- 3 files changed, 120 insertions(+), 74 deletions(-) diff --git a/webclient/src/App.js b/webclient/src/App.js index 9dd3bc5..f60b8be 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -2,63 +2,27 @@ import React, { Component } from 'react'; import Categories from './Categories'; import Category from './Category'; 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'; -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 { + constructor() { + super(); + + this.state = { + toolData: null, + }; + } + + componentDidMount() { + fetch('http://localhost:8080/api/client') + .then(response => response.json()) + .then(data => this.setState({ toolData: data })); + } + render() { + const toolData = this.state.toolData; + return (
@@ -76,17 +40,26 @@ class App extends Component {
- - - } /> - - - } /> + {toolData ? +
+ + + } /> - - - } /> + + + } /> + + + + } /> +
+ : + + Loading + + }
); diff --git a/webclient/src/Tool.js b/webclient/src/Tool.js index 5bf76ec..144dc95 100644 --- a/webclient/src/Tool.js +++ b/webclient/src/Tool.js @@ -1,5 +1,5 @@ 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'; class Tool extends Component { @@ -16,6 +16,8 @@ class Tool extends Component { x.id == match.params.id ); + const approved = user.authorizedTools.includes(tool.id); + return (
@@ -28,14 +30,20 @@ class Tool extends Component { - + - - +
+ {approved || } diff --git a/webserver/server.js b/webserver/server.js index b775398..5be6bcb 100644 --- a/webserver/server.js +++ b/webserver/server.js @@ -1,20 +1,85 @@ const express = require('express'); const app = express(); -const tools = { - "2C3AE843A15F": { - relayOn: false, - ledOn: true, - date: "2018-02-01", +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], }, }; -const server = app.listen(3000, function () { - console.log('Example app listening on port 3000!'); +const tools = { + '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.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) { const mac = req.params.mac; @@ -23,7 +88,7 @@ app.get('/api/tool/:mac', function (req, res) { res.send(404); } - console.log("Request from MAC: " + mac); + console.log('Request from MAC: ' + mac); res.setHeader('Content-Type', 'application/json'); res.send(JSON.stringify(data));