List classes and dummy forum data

6 years ago · 5107775913
parent 9e88608877
commit 5107775913
7 changed files with 2006 additions and 282 deletions
--- a/dist/css/dev.css
+++ b/dist/css/dev.css
@ -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);
+}
--- a/dist/index.html
+++ b/dist/index.html
@ -1,7 +1,7 @@
 <html>
 	<head>
 		<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">
 	</head>
 	<body>
--- a/dist/shit/psboard.html
+++ b/dist/shit/psboard.html
--- a/package-lock.json
+++ b/package-lock.json
--- a/server.js
+++ b/server.js
@ -3,12 +3,42 @@ 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')
+				}
+			});
+
+			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) {
@ -29,6 +59,7 @@ app.get('/api/data/classes', (req, res) => {
 	});
 })

+
 app.listen(3000, function () {
 	console.log('Example app listening on port 3000!')
 })
--- a/src/RightBottom.js
+++ b/src/RightBottom.js
@ -14,7 +14,11 @@ class RightBottom extends Component {

        <div className="dataBottomRight">
          <div className="lcarsHorizontalBottom">lcars horiz</div>
-          <div className="dataRightLower">Main Data</div>
+          <div className="dataRightLower">
+
+          Shit.
+
+          </div>
        </div>
      </div>
    );
--- a/src/app.js
+++ b/src/app.js
@ -1,21 +1,49 @@
 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 = {};
+	  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() {
+
+		console.log(this.state)
+
 		return (
 			<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>
 		);
 	}