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

Add tool page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
webclient/src/App.js
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,49 +40,55 @@ 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 {
render() { render() {
return ( return (
<div> <div>
<Menu fixed='top' borderless inverted> <Menu fixed='top' borderless inverted>
<Menu.Item> <Menu.Item>
<Icon name='bars' size='big' /> <Icon name='bars' size='big' />
</Menu.Item> </Menu.Item>
<Menu.Item as={Link} to='/'> <Menu.Item as={Link} to='/'>
<Icon name='home' size='big' /> <Icon name='home' size='big' />
</Menu.Item> </Menu.Item>
<Menu.Menu position='right'> <Menu.Menu position='right'>
<Menu.Item position='right'> <Menu.Item position='right'>
<Input transparent inverted placeholder='Search...' icon='search' /> <Input transparent inverted placeholder='Search...' icon='search' />
</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} />
} /> } />
<Route exact path='/:category' render={props => <Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} /> <Category {...props} data={fakeData} />
} /> } />
</div> <Route exact path='/:category/:id' render={props =>
<Tool {...props} data={fakeData} />
} />
</div>
); );
} }
} }

40
webclient/src/Categories.js
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 {
@ -8,26 +8,26 @@ class Categories extends Component {
const match = this.props.match; const match = this.props.match;
return ( return (
<div> <div>
<Segment basic> <Container>
<Header size='large'>Tool Categories</Header> <Breadcrumb size='large'>
</Segment> <Breadcrumb.Section active>Categories</Breadcrumb.Section>
</Breadcrumb>
<Container> <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}> <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>{x.info}</Item.Description>
<Item.Description>{x.info}</Item.Description> <Item.Extra>{x.tools.length} tools</Item.Extra>
<Item.Extra>{x.tools.length} tools</Item.Extra> </Item.Content>
</Item.Content> </Item>
</Item> )}
)} </Item.Group>
</Item.Group> </Container>
</Container> </div>
</div>
); );
} }
} }

50
webclient/src/Category.js
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) =>
@ -12,25 +13,36 @@ class Category extends Component {
); );
return ( return (
<div> <div>
<Segment basic> <Container>
<Header size='large'>{category.name} Tools</Header> <Breadcrumb size='large'>
</Segment> <Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
</Breadcrumb>
<Container> <Item.Group link unstackable divided>
<Item.Group link unstackable divided> {category.tools.map((x, n) =>
{category.tools.map((x, n) => <Item as={Link} to={'/' + category.slug + '/' + x.id} key={n}>
<Item 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>
<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra> {user.authorizedTools.includes(x.id) ?
</Item.Content> <Label color='green'>
</Item> <Icon name='check' /> Authorized
)} </Label> : <Label color='red'>
</Item.Group> <Icon name='x' /> Unauthorized
</Container> </Label>
</div> }
</Item.Description>
<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
</Item.Content>
</Item>
)}
</Item.Group>
</Container>
</div>
); );
} }
} }

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;

1
webclient/src/index.css
View File

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