Begin frontend
This commit is contained in:
Elijah Lucian
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"plugins": ["react-hot-loader/babel"]
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
# builds
|
||||
dist/bundle.js
|
||||
@@ -0,0 +1,8 @@
|
||||
MIT License
|
||||
Copyright (c) <year> <copyright holders>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1 @@
|
||||
# Hello World
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>LCARS</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/dev.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+5
File diff suppressed because one or more lines are too long
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW X8 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16.9332mm" height="16.9332mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1693 1693"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#FF6600}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M1227 1087l458 0 0 196 -677 0 -555 0c-246,0 -445,-131 -445,-292l0 -580 1000 0 0 474c1,131 95,202 219,202z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 812 B |
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW X8 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1016 1016"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:black}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M744 777c-35,0 -71,0 -113,0 0,31 0,60 0,88 -25,0 -49,0 -74,0 0,-28 0,-57 0,-85 -71,0 -134,0 -205,0 0,28 0,57 0,85 -24,0 -45,0 -70,0 0,-28 0,-57 0,-85 -39,0 -74,0 -109,0 0,-24 0,-49 0,-74 165,0 331,0 497,0 0,-28 0,-53 0,-81 -166,0 -332,0 -505,0 4,-102 -3,-205 11,-300 25,-148 166,-240 321,-222 138,14 247,141 251,282 0,25 0,53 0,81 -166,0 -332,0 -501,0 0,28 0,53 0,85 165,0 328,0 497,0 0,74 0,148 0,226zm-497 -388c141,0 278,0 419,0 -3,-85 -35,-148 -105,-187 -75,-43 -149,-39 -219,3 -64,43 -95,103 -95,184z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW X8 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1016 1016"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F8F23A}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M876 885c-45,0 -90,0 -144,0 0,40 0,76 0,113 -32,0 -64,0 -95,0 0,-37 0,-73 0,-109 -91,0 -172,0 -262,0 0,36 0,72 0,109 -32,0 -59,0 -91,0 0,-37 0,-73 0,-109 -49,0 -95,0 -140,0 0,-32 0,-63 0,-95 213,0 425,0 637,0 0,-36 0,-68 0,-104 -212,0 -424,0 -646,0 5,-131 -4,-262 14,-384 31,-190 212,-307 411,-285 176,18 316,181 321,362 0,31 0,68 0,104 -213,0 -425,0 -642,0 0,36 0,68 0,108 212,0 420,0 637,0 0,95 0,190 0,290zm-637 -498c181,0 357,0 538,0 -5,-108 -45,-189 -136,-239 -95,-54 -189,-50 -280,4 -81,55 -122,131 -122,235z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Generated
+5192
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "helloworld",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"build": "webpack",
|
||||
"dev": "webpack-dev-server"
|
||||
},
|
||||
"author": "",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"webpack": "^3.0.0",
|
||||
"webpack-dev-server": "^2.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ajv-keywords": "^2.1.0",
|
||||
"cheerio": "^1.0.0-rc.1",
|
||||
"express": "^4.15.3",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"request": "^2.81.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
const request = require('request');
|
||||
const cheerio = require('cheerio');
|
||||
const express = require('express')
|
||||
const app = express()
|
||||
|
||||
app.use((req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*');
|
||||
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
|
||||
next();
|
||||
});
|
||||
|
||||
app.use('/', express.static('dist'))
|
||||
app.use('/psboard', express.static('dist/shit/psboard.html'))
|
||||
|
||||
app.get('/hello', (req, res) => {
|
||||
res.send('Hello World!')
|
||||
})
|
||||
|
||||
app.get('/api/data/psboard', (req, res) => {
|
||||
request('http://localhost:3000/psboard', (error, response, html) => {
|
||||
if (!error && response.statusCode == 200) {
|
||||
const $ = cheerio.load(html);
|
||||
let psboard = [];
|
||||
|
||||
$('.F0XO1GC-p-w').children().each((i, elem) => {
|
||||
psboard[i] = {
|
||||
subject: $(elem).find('.F0XO1GC-p-Q').text(),
|
||||
author: $(elem).find('.F0XO1GC-rb-b').text(),
|
||||
last_update: $(elem).find('.F0XO1GC-rb-g').children().attr('title'),
|
||||
number_of_posts: $(elem).find('.F0XO1GC-rb-r').eq(0).text(),
|
||||
number_of_views: $(elem).find('.F0XO1GC-rb-r').eq(1).text(),
|
||||
user_pic: $(elem).find('.gwt-Image').attr('src')
|
||||
}
|
||||
});
|
||||
|
||||
console.log('sending psboard');
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.send(psboard);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.get('/api/data/classes', (req, res) => {
|
||||
request('https://my.protospace.ca/school', (error, response, html) => {
|
||||
if (!error && response.statusCode == 200) {
|
||||
const $ = cheerio.load(html);
|
||||
let classes = [];
|
||||
|
||||
$('table.grid tbody tr').each((i, elem) => {
|
||||
classes[i] = {
|
||||
subject: $(elem).children().eq(0).text(),
|
||||
date: $(elem).children().eq(2).text(),
|
||||
available: $(elem).children().eq(6).text()
|
||||
}
|
||||
});
|
||||
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.send(classes);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
app.listen(3000, function () {
|
||||
console.log('Example app listening on port 3000!')
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
import React, { Component } from 'react';
|
||||
// import logo from './svg/ps-final.svg';
|
||||
|
||||
class InfoLeft extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="infoLeft">
|
||||
<div className="leftTop"><img src='./svg/ps.svg' alt="brotospace LCARS" className="logo"/></div>
|
||||
<div className="leftInfo">
|
||||
<div className="leftItem">make doubl</div>
|
||||
<div className="leftItem">width like</div>
|
||||
<div className="leftItem">in that</div>
|
||||
<div className="leftItem">lcars pic</div>
|
||||
<div className="leftItem">INSERT CLOCK HERE</div>
|
||||
<div className="leftItem">here</div>
|
||||
<div className="leftItem">yet</div>
|
||||
<div className="leftItem">though</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InfoLeft;
|
||||
@@ -0,0 +1,21 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class LCARSLeft extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="lcarsLeft">
|
||||
<div className="lcarsLeftItemBig">SYS DIRECTORY</div>
|
||||
<div className="lcarsLeftItem">AUX DIRECTORY</div>
|
||||
<div className="lcarsLeftItem">MED DIRECTORY</div>
|
||||
<div className="lcarsLeftItem">COMMUNICATIONS</div>
|
||||
<div className="lcarsLeftItemBig">SCI DIRECTORY</div>
|
||||
<div className="lcarsLeftItem">ENG DIRECTORY</div>
|
||||
<div className="lcarsLeftItem">STELLAR CHART</div>
|
||||
<div className="lcarsLeftItem">PERSONNEL</div>
|
||||
<div className="lcarsLeftItemMed">DATABASE</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LCARSLeft;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import LCARSLeft from './LCARSLeft';
|
||||
import InfoLeft from './InfoLeft';
|
||||
|
||||
class LeftColumn extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="leftColumn">
|
||||
<InfoLeft />
|
||||
<LCARSLeft />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LeftColumn;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class RightBottom extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="rightBottom">
|
||||
|
||||
<div className="lcarsMiddleBottom">
|
||||
<div className="lcarsMiddleElbow">Lcars Elbow</div>
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
</div>
|
||||
|
||||
<div className="dataBottomRight">
|
||||
<div className="lcarsHorizontalBottom">lcars horiz</div>
|
||||
<div className="dataRightLower">
|
||||
|
||||
Shit.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RightBottom;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import RightTop from './RightTop';
|
||||
import RightBottom from './RightBottom';
|
||||
|
||||
class RightContainer extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="rightContainer">
|
||||
<RightTop />
|
||||
<RightBottom />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RightContainer;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class RightTop extends Component {
|
||||
render(){
|
||||
return(
|
||||
<div className="rightTop">
|
||||
|
||||
<div className="lcarsMiddleTop">
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
<div className="lcarsMiddleItem">Lcars item</div>
|
||||
<div className="lcarsMiddleElbow">Lcars Elbow</div>
|
||||
</div>
|
||||
|
||||
<div className="dataTopRight">
|
||||
<div className="datatopRightUpper">Main Data</div>
|
||||
<div className="lcarsHorizontalTop">lcars horiz</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RightTop;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import LeftColumn from './LeftColumn';
|
||||
import RightContainer from './RightContainer';
|
||||
const SERVER_URL = 'http://localhost:3000/'
|
||||
|
||||
export default class Site extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
classesData: [],
|
||||
forumPosts: [],
|
||||
componentMounted: false
|
||||
}
|
||||
}
|
||||
|
||||
callAPI = (targetUrl) => {
|
||||
let apiData
|
||||
fetch(SERVER_URL + 'api/data/'+ targetUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => apiData = data)
|
||||
return apiData
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
object = {
|
||||
classes:
|
||||
}
|
||||
|
||||
let classesData = callAPI('classes')
|
||||
let forumPosts = callAPI('psboard')
|
||||
|
||||
this.setState({
|
||||
classesData: classesData,
|
||||
forumPosts: forumPosts
|
||||
})
|
||||
}
|
||||
|
||||
// <LeftColumn />}
|
||||
// <RightContainer />
|
||||
|
||||
render() {
|
||||
|
||||
console.log(this.state)
|
||||
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
|
||||
<div className="left">
|
||||
<div className="heading">Upcoming Classes</div>
|
||||
{this.state.classesData.map((item, i) =>
|
||||
<div className='course-list'>
|
||||
<div className='subject'>{item.subject}</div>
|
||||
<div className='date'>{item.date}</div>
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
<div className="right">
|
||||
<div className="heading">Posts</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'react-hot-loader/patch';
|
||||
import { AppContainer } from 'react-hot-loader';
|
||||
|
||||
import App from './app';
|
||||
|
||||
|
||||
const render = Component => {
|
||||
ReactDOM.render(
|
||||
<AppContainer>
|
||||
<App />
|
||||
</AppContainer>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
}
|
||||
|
||||
render(App)
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./app', () => { render(App) })
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW X8 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1016 1016"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F8F23A}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M744 777c-35,0 -71,0 -113,0 0,31 0,60 0,88 -25,0 -49,0 -74,0 0,-28 0,-57 0,-85 -71,0 -134,0 -205,0 0,28 0,57 0,85 -24,0 -45,0 -70,0 0,-28 0,-57 0,-85 -39,0 -74,0 -109,0 0,-24 0,-49 0,-74 165,0 331,0 497,0 0,-28 0,-53 0,-81 -166,0 -332,0 -505,0 4,-102 -3,-205 11,-300 25,-148 166,-240 321,-222 138,14 247,141 251,282 0,25 0,53 0,81 -166,0 -332,0 -501,0 0,28 0,53 0,85 165,0 328,0 497,0 0,74 0,148 0,226zm-497 -388c141,0 278,0 419,0 -3,-85 -35,-148 -105,-187 -75,-43 -149,-39 -219,3 -64,43 -95,103 -95,184z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,27 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
|
||||
]
|
||||
},
|
||||
stats: "normal",
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, "dist"),
|
||||
publicPath: '/',
|
||||
hot: true,
|
||||
host: '0.0.0.0',
|
||||
disableHostCheck: true
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user