Add tool page

webclient/src/App.js

@@ -1,6 +1,7 @@
 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 { Link, Route } from 'react-router-dom';
 
@@ -31,7 +32,7 @@ const fakeData = {
 		{
 			name: "Metalshop",
 			slug: "metalshop",
-			info: "Some info about the metalshop",
+			info: "Some info about the metalshop.",
 			photo: "https://i.imgur.com/A2L2ACY.jpg",
 			tools: [
 				{
@@ -39,24 +40,27 @@ const fakeData = {
 					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,
+					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,
+					wikiId: 39,
 				},
 			],
 		},
 	],
+	user: {
+		authorizedTools: [1, 2],
+	},
 };
 
 class App extends Component {
 	render() {
 		return (
-<div>
+			<div>
 				<Menu fixed='top' borderless inverted>
 					<Menu.Item>
 						<Icon name='bars' size='big' />
@@ -70,7 +74,7 @@ class App extends Component {
 						</Menu.Item>
 					</Menu.Menu>
 				</Menu>
-	<div style={{height: '54px', display: 'inline-block'}} />
+				<div style={{height: '70px', display: 'inline-block'}} />
 
 				<Route exact path='/' render={props =>
 					<Categories {...props} data={fakeData} />
@@ -80,8 +84,11 @@ class App extends Component {
 					<Category {...props} data={fakeData} />
 				} />
 
-</div>
+				<Route exact path='/:category/:id' render={props =>
+					<Tool {...props} data={fakeData} />
+				} />
 
+			</div>
 		);
 	}
 }

webclient/src/Categories.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 
 class Categories extends Component {
@@ -8,12 +8,12 @@ class Categories extends Component {
 		const match = this.props.match;
 
 		return (
-<div>
+			<div>
-	<Segment basic>
-		<Header size='large'>Tool Categories</Header>
-	</Segment>
-
 				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section active>Categories</Breadcrumb.Section>
+					</Breadcrumb>
+
 					<Item.Group link unstackable divided>
 						{data.categories.map((x, n) =>
 							<Item as={Link} to={'/' + x.slug} key={n}>
@@ -27,7 +27,7 @@ class Categories extends Component {
 						)}
 					</Item.Group>
 				</Container>
-</div>
+			</div>
 		);
 	}
 }

webclient/src/Category.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
-import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Label, Menu, Segment, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 
 class Category extends Component {
 	render() {
 		const data = this.props.data;
+		const user = data.user;
 		const match = this.props.match;
 
 		const category = data.categories.find((x) => 
@@ -12,25 +13,36 @@ class Category extends Component {
 		);
 
 		return (
-<div>
+			<div>
-	<Segment basic>
-		<Header size='large'>{category.name} Tools</Header>
-	</Segment>
-
 				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
+					</Breadcrumb>
+
 					<Item.Group link unstackable divided>
 						{category.tools.map((x, n) =>
-				<Item key={n}>
+							<Item as={Link} to={'/' + category.slug + '/' + x.id} key={n}>
 								<Item.Image size='tiny' src={x.photo} />
 								<Item.Content>
 									<Item.Header>{x.name}</Item.Header>
+									<Item.Description>
+										{user.authorizedTools.includes(x.id) ?
+											<Label color='green'>
+												<Icon name='check' /> Authorized
+											</Label> : <Label color='red'>
+												<Icon name='x' /> Unauthorized
+											</Label>
+										}
+									</Item.Description>
 									<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
 								</Item.Content>
 							</Item>
 						)}
 					</Item.Group>
 				</Container>
-</div>
+			</div>
 		);
 	}
 }

webclient/src/Tool.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Menu, Segment, Table, Input } from 'semantic-ui-react'
+import { Link } from 'react-router-dom';
+
+class Tool extends Component {
+	render() {
+		const data = this.props.data;
+		const user = data.user;
+		const match = this.props.match;
+
+		const category = data.categories.find((x) => 
+			x.slug == match.params.category
+		);
+
+		const tool = category.tools.find((x) => 
+			x.id == match.params.id
+		);
+
+		return (
+			<div>
+				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
+					</Breadcrumb>
+
+					<Segment>
+						<Image src={tool.photo} size='medium' centered />
+						<Segment textAlign='center' basic>
+							<Button color='green'>
+								<Icon name='lightning' /> Arm
+							</Button>
+							<Button color='red'>
+								<Icon name='stop' /> Disarm
+							</Button>
+						</Segment>
+
+						<Table basic='very' unstackable>
+							<Table.Body>
+								<Table.Row>
+									<Table.Cell>Cat</Table.Cell>
+									<Table.Cell>Meow</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Dog</Table.Cell>
+									<Table.Cell warning>
+										<Icon name='attention' />
+										Bark
+									</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Bird</Table.Cell>
+									<Table.Cell>Chrip</Table.Cell>
+								</Table.Row>
+							</Table.Body>
+						</Table>
+
+						<Header as='h4'>Notes</Header>
+						<p>{tool.notes}</p>
+					</Segment>
+				</Container>
+			</div>
+		);
+	}
+}
+
+export default Tool;

webclient/src/index.css

@@ -1,5 +1,4 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
 }