List classes and dummy forum data

This commit is contained in:
Elijah Lucian 2018-03-13 23:56:23 -06:00
parent 9e88608877
commit 5107775913
7 changed files with 2006 additions and 282 deletions

99
dist/css/dev.css vendored Normal file
View File

@ -0,0 +1,99 @@
@font-face {
font-family: 'LCARS';
src: url('./fonts/lcarsgtj3-webfont.eot');
src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LCARS Lower';
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LCARS Block';
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
:root{
--space1: 5px;
--textpadding1: 5px 10px;
--regText: 'Open Sans', sans-serif;
--fancyText: 'LCARS', sans-serif;
--hoverBack: #cdf;
--hoverText: #821;
--lcarsFirst: #cc6699;
--lcarsSecond: #ff9933;
--lcarsThird: #99ccff;
--lcarsGrey: #171113;
--lcarsMid: #241721;
}
html, body{
margin:0;
padding:0;
background: var(--lcarsGrey);
color:#fff;
font-family: var(--fancyText);
font-size:1.4em;
letter-spacing: 0.05em;
}
h1,h2,h3,h4,h5 {
letter-spacing: 0.05em;
font-family: var(--regText);
text-transform: uppercase;
margin: 0.5em;
padding: 0.5em;
}
/* Layout Related */
.mainContainer{
display: flex;
flex-direction: row;
}
.left {
flex: 4;
}
.right {
flex: 5;
}
/* Other Shit */
.heading {
margin: 1em;
font-size: 2em;
}
.course-list {
margin: 2em;
border-radius: 0.6em;
border: 1px solid var(--lcarsMid);
padding: 1em;
}
.subject {
font-family: var(--regText);
text-transform: uppercase;
font-size: 0.7em;
color: var(--lcarsSecond);
}
.course-list:hover {
background: var(--lcarsMid);
color: var(--hoverBack);
}

2
dist/index.html vendored
View File

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<title>LCARS</title> <title>LCARS</title>
<link rel="stylesheet" type="text/css" href="./css/main.css"> <link rel="stylesheet" type="text/css" href="./css/dev.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet">
</head> </head>
<body> <body>

5
dist/shit/psboard.html vendored Normal file

File diff suppressed because one or more lines are too long

2109
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,12 +3,42 @@ const cheerio = require('cheerio');
const express = require('express') const express = require('express')
const app = 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('/', express.static('dist'))
app.use('/psboard', express.static('dist/shit/psboard.html'))
app.get('/hello', (req, res) => { app.get('/hello', (req, res) => {
res.send('Hello World!') 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')
}
});
res.setHeader('Content-Type', 'application/json');
res.send(psboard);
}
})
})
app.get('/api/data/classes', (req, res) => { app.get('/api/data/classes', (req, res) => {
request('https://my.protospace.ca/school', (error, response, html) => { request('https://my.protospace.ca/school', (error, response, html) => {
if (!error && response.statusCode == 200) { if (!error && response.statusCode == 200) {
@ -29,6 +59,7 @@ app.get('/api/data/classes', (req, res) => {
}); });
}) })
app.listen(3000, function () { app.listen(3000, function () {
console.log('Example app listening on port 3000!') console.log('Example app listening on port 3000!')
}) })

View File

@ -14,7 +14,11 @@ class RightBottom extends Component {
<div className="dataBottomRight"> <div className="dataBottomRight">
<div className="lcarsHorizontalBottom">lcars horiz</div> <div className="lcarsHorizontalBottom">lcars horiz</div>
<div className="dataRightLower">Main Data</div> <div className="dataRightLower">
Shit.
</div>
</div> </div>
</div> </div>
); );

View File

@ -1,21 +1,49 @@
import React from 'react'; import React from 'react';
import LeftColumn from './LeftColumn'; import LeftColumn from './LeftColumn';
import RightContainer from './RightContainer'; import RightContainer from './RightContainer';
const SERVER_URL = 'http://localhost:3000/'
export default class Site extends React.Component { export default class Site extends React.Component {
constructor(props){ constructor(props){
super(props); super(props);
this.state = {}; this.state = {
classesData: [],
componentMounted: false
};
} }
componentDidMount() {
fetch(SERVER_URL + 'api/data/classes')
.then(response => response.json())
.then(data => this.setState({classesData: data}))
}
// <LeftColumn />}
// <RightContainer />
render() { render() {
console.log(this.state)
return ( return (
<div className="mainContainer"> <div className="mainContainer">
<LeftColumn />
<RightContainer /> <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> </div>
); );
} }