Add tool page

This commit is contained in:
Tanner Collin 2018-02-02 23:41:30 -07:00
parent c081c6ecc3
commit 976f764123
5 changed files with 153 additions and 65 deletions

View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'; 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 { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'; import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom'; import { Link, Route } from 'react-router-dom';
@ -31,7 +32,7 @@ const fakeData = {
{ {
name: "Metalshop", name: "Metalshop",
slug: "metalshop", slug: "metalshop",
info: "Some info about the metalshop", info: "Some info about the metalshop.",
photo: "https://i.imgur.com/A2L2ACY.jpg", photo: "https://i.imgur.com/A2L2ACY.jpg",
tools: [ tools: [
{ {
@ -39,18 +40,21 @@ const fakeData = {
name: "Tormach CNC", name: "Tormach CNC",
photo: "http://wiki.protospace.ca/images/thumb/c/cf/49.jpg/320px-49.jpg", 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.", notes: "Must complete Shop Safety, Lathe Training, 3D CAD Training, CAM Training, 1 on 1 Project.",
wikiID: 49, wikiId: 49,
}, },
{ {
id: 3, id: 3,
name: "Powerfist Bench Grinder", name: "Powerfist Bench Grinder",
photo: "http://wiki.protospace.ca/images/thumb/c/cd/39.jpg/298px-39.jpg", 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).", 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 { class App extends Component {
@ -70,7 +74,7 @@ class App extends Component {
</Menu.Item> </Menu.Item>
</Menu.Menu> </Menu.Menu>
</Menu> </Menu>
<div style={{height: '54px', display: 'inline-block'}} /> <div style={{height: '70px', display: 'inline-block'}} />
<Route exact path='/' render={props => <Route exact path='/' render={props =>
<Categories {...props} data={fakeData} /> <Categories {...props} data={fakeData} />
@ -80,8 +84,11 @@ class App extends Component {
<Category {...props} data={fakeData} /> <Category {...props} data={fakeData} />
} /> } />
</div> <Route exact path='/:category/:id' render={props =>
<Tool {...props} data={fakeData} />
} />
</div>
); );
} }
} }

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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'; import { Link } from 'react-router-dom';
class Categories extends Component { class Categories extends Component {
@ -9,11 +9,11 @@ class Categories extends Component {
return ( return (
<div> <div>
<Segment basic>
<Header size='large'>Tool Categories</Header>
</Segment>
<Container> <Container>
<Breadcrumb size='large'>
<Breadcrumb.Section active>Categories</Breadcrumb.Section>
</Breadcrumb>
<Item.Group link unstackable divided> <Item.Group link unstackable divided>
{data.categories.map((x, n) => {data.categories.map((x, n) =>
<Item as={Link} to={'/' + x.slug} key={n}> <Item as={Link} to={'/' + x.slug} key={n}>

View File

@ -1,10 +1,11 @@
import React, { Component } from 'react'; 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'; import { Link } from 'react-router-dom';
class Category extends Component { class Category extends Component {
render() { render() {
const data = this.props.data; const data = this.props.data;
const user = data.user;
const match = this.props.match; const match = this.props.match;
const category = data.categories.find((x) => const category = data.categories.find((x) =>
@ -13,17 +14,28 @@ class Category extends Component {
return ( return (
<div> <div>
<Segment basic>
<Header size='large'>{category.name} Tools</Header>
</Segment>
<Container> <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> <Item.Group link unstackable divided>
{category.tools.map((x, n) => {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.Image size='tiny' src={x.photo} />
<Item.Content> <Item.Content>
<Item.Header>{x.name}</Item.Header> <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.Extra>Wiki ID: {x.wikiId}</Item.Extra>
</Item.Content> </Item.Content>
</Item> </Item>

70
webclient/src/Tool.js Normal file
View File

@ -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;

View File

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