Create basic layout and navigation for client

This commit is contained in:
Tanner Collin 2018-02-02 20:53:08 -07:00
parent 9f77ca5215
commit c081c6ecc3
8 changed files with 6909 additions and 80 deletions

View File

@ -5,7 +5,9 @@
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.0",
"semantic-ui-react": "^0.77.2"
},
"scripts": {
"start": "react-scripts start",

View File

@ -19,6 +19,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
<title>React App</title>
</head>
<body>

View File

@ -1,28 +0,0 @@
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

View File

@ -1,19 +1,87 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Categories from './Categories';
import Category from './Category';
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom';
const fakeData = {
categories: [
{
name: "Woodshop",
slug: "woodshop",
info: "Some info about the woodshop.",
photo: "https://i.imgur.com/RIm8aoG.jpg",
tools: [
{
id: 0,
name: "White Bandsaw",
photo: "http://wiki.protospace.ca/images/thumb/f/f8/105.jpg/146px-105.jpg",
notes: "Requires training. Tighten tension lever prior to use / Loosen tension lever after use. Tension lever is on rear.",
wikiId: 105,
},
{
id: 1,
name: "Jointer",
photo: "http://wiki.protospace.ca/images/thumb/6/6f/73.jpg/302px-73.jpg",
notes: "Boards must be ABSOLUTELY FREE of nails, staples, screws, or other metal. Check boards thoroughly each and every time, make no presumptions. One mistake will chip the blade and render it useless (drum blades are very expensive).",
wikiId: 73,
},
],
},
{
name: "Metalshop",
slug: "metalshop",
info: "Some info about the metalshop",
photo: "https://i.imgur.com/A2L2ACY.jpg",
tools: [
{
id: 2,
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,
},
{
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,
},
],
},
],
};
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
<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'}} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} />
} />
</div>
);
}
}

View File

@ -0,0 +1,35 @@
import React, { Component } from 'react';
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';
class Categories extends Component {
render() {
const data = this.props.data;
const match = this.props.match;
return (
<div>
<Segment basic>
<Header size='large'>Tool Categories</Header>
</Segment>
<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>
);
}
}
export default Categories;

38
webclient/src/Category.js Normal file
View File

@ -0,0 +1,38 @@
import React, { Component } from 'react';
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';
class Category extends Component {
render() {
const data = this.props.data;
const match = this.props.match;
const category = data.categories.find((x) =>
x.slug == match.params.category
);
return (
<div>
<Segment basic>
<Header size='large'>{category.name} Tools</Header>
</Segment>
<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>
);
}
}
export default Category;

View File

@ -3,6 +3,12 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

6705
webclient/yarn.lock Normal file

File diff suppressed because it is too large Load Diff