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 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 (
<div>
<Menu fixed='top' borderless inverted>
<Menu.Item>
<Icon name='bars' size='big' />
</Menu.Item>
<Menu.Item as={Link} to='/'>
<Icon name='home' size='big' />
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item position='right'>
<Input transparent inverted placeholder='Search...' icon='search' />
</Menu.Item>
</Menu.Menu>
</Menu>
<div style={{height: '54px', display: 'inline-block'}} />
<div>
<Menu fixed='top' borderless inverted>
<Menu.Item>
<Icon name='bars' size='big' />
</Menu.Item>
<Menu.Item as={Link} to='/'>
<Icon name='home' size='big' />
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item position='right'>
<Input transparent inverted placeholder='Search...' icon='search' />
</Menu.Item>
</Menu.Menu>
</Menu>
<div style={{height: '70px', display: 'inline-block'}} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<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 { 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 (
<div>
<Segment basic>
<Header size='large'>Tool Categories</Header>
</Segment>
<div>
<Container>
<Breadcrumb size='large'>
<Breadcrumb.Section active>Categories</Breadcrumb.Section>
</Breadcrumb>
<Container>
<Item.Group link unstackable divided>
{data.categories.map((x, n) =>
<Item as={Link} to={'/' + x.slug} key={n}>
<Item.Image size='tiny' src={x.photo} />
<Item.Content>
<Item.Header>{x.name}</Item.Header>
<Item.Description>{x.info}</Item.Description>
<Item.Extra>{x.tools.length} tools</Item.Extra>
</Item.Content>
</Item>
)}
</Item.Group>
</Container>
</div>
<Item.Group link unstackable divided>
{data.categories.map((x, n) =>
<Item as={Link} to={'/' + x.slug} key={n}>
<Item.Image size='tiny' src={x.photo} />
<Item.Content>
<Item.Header>{x.name}</Item.Header>
<Item.Description>{x.info}</Item.Description>
<Item.Extra>{x.tools.length} tools</Item.Extra>
</Item.Content>
</Item>
)}
</Item.Group>
</Container>
</div>
);
}
}

50
webclient/src/Category.js
View File

@ -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>
<Segment basic>
<Header size='large'>{category.name} Tools</Header>
</Segment>
<div>
<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>
<Container>
<Item.Group link unstackable divided>
{category.tools.map((x, n) =>
<Item key={n}>
<Item.Image size='tiny' src={x.photo} />
<Item.Content>
<Item.Header>{x.name}</Item.Header>
<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
</Item.Content>
</Item>
)}
</Item.Group>
</Container>
</div>
<Item.Group link unstackable divided>
{category.tools.map((x, 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>
);
}
}

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 {
margin: 0;
padding: 0;
font-family: sans-serif;
}