From 976f764123de89278accd130ed8407684bf925ee Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Fri, 2 Feb 2018 23:41:30 -0700 Subject: [PATCH] Add tool page --- webclient/src/App.js | 57 +++++++++++++++++------------- webclient/src/Categories.js | 40 ++++++++++----------- webclient/src/Category.js | 50 ++++++++++++++++---------- webclient/src/Tool.js | 70 +++++++++++++++++++++++++++++++++++++ webclient/src/index.css | 1 - 5 files changed, 153 insertions(+), 65 deletions(-) create mode 100644 webclient/src/Tool.js diff --git a/webclient/src/App.js b/webclient/src/App.js index 3b8c942..9dd3bc5 100644 --- a/webclient/src/App.js +++ b/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,49 +40,55 @@ 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 ( -
- - - - - - - - - - - - - -
+
+ + + + + + + + + + + + + +
- - - } /> + + + } /> - - - } /> + + + } /> -
+ + + } /> +
); } } diff --git a/webclient/src/Categories.js b/webclient/src/Categories.js index 0eb51c0..1af1d88 100644 --- a/webclient/src/Categories.js +++ b/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,26 +8,26 @@ class Categories extends Component { const match = this.props.match; return ( -
- -
Tool Categories
- +
+ + + Categories + - - - {data.categories.map((x, n) => - - - - {x.name} - {x.info} - {x.tools.length} tools - - - )} - - -
+ + {data.categories.map((x, n) => + + + + {x.name} + {x.info} + {x.tools.length} tools + + + )} + + +
); } } diff --git a/webclient/src/Category.js b/webclient/src/Category.js index 795e88d..19460b1 100644 --- a/webclient/src/Category.js +++ b/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 ( -
- -
{category.name} Tools
- +
+ + + Categories + + {category.name} + - - - {category.tools.map((x, n) => - - - - {x.name} - Wiki ID: {x.wikiId} - - - )} - - -
+ + {category.tools.map((x, n) => + + + + {x.name} + + {user.authorizedTools.includes(x.id) ? + : + } + + Wiki ID: {x.wikiId} + + + )} + + +
); } } diff --git a/webclient/src/Tool.js b/webclient/src/Tool.js new file mode 100644 index 0000000..5bf76ec --- /dev/null +++ b/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 ( +
+ + + Categories + + {category.name} + + {tool.name} + + + + + + + + + + + + + Cat + Meow + + + Dog + + + Bark + + + + Bird + Chrip + + +
+ +
Notes
+

{tool.notes}

+ + +
+ ); + } +} + +export default Tool; diff --git a/webclient/src/index.css b/webclient/src/index.css index b4cc725..ea1e941 100644 --- a/webclient/src/index.css +++ b/webclient/src/index.css @@ -1,5 +1,4 @@ body { margin: 0; padding: 0; - font-family: sans-serif; }