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

Create basic layout and navigation for client

Browse Source
master
Tanner Collin 6 years ago
parent 9f77ca5215
commit c081c6ecc3
8 changed files with 6909 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      webclient/package.json
  2. 71
      webclient/public/index.html
  3. 28
      webclient/src/App.css
  4. 98
      webclient/src/App.js
  5. 35
      webclient/src/Categories.js
  6. 38
      webclient/src/Category.js
  7. 8
      webclient/src/index.js
  8. 6705
      webclient/yarn.lock

6
webclient/package.json
Unescape 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",
@ -13,4 +15,4 @@
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
}

71
webclient/public/index.html
Unescape View File

@ -1,40 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

28
webclient/src/App.css
Unescape 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); }
}

98
webclient/src/App.js
Unescape View File

@ -1,21 +1,89 @@
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>
);
}
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'}} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} />
} />
</div>
);
}
}
export default App;

35
webclient/src/Categories.js
Unescape 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
Unescape 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;

8
webclient/src/index.js
Unescape 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
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save