From dfe233e8aba91326731bc774d6a710d0b7c5ca32 Mon Sep 17 00:00:00 2001 From: Jeremy Date: Thu, 8 Mar 2018 10:12:33 -0500 Subject: [PATCH] Code cleanup and Abstract CSS from class settings page --- src/bodies/classSettings.js | 447 ++++++++++++++++++------------------ src/css/_classSettings.css | 23 ++ 2 files changed, 242 insertions(+), 228 deletions(-) diff --git a/src/bodies/classSettings.js b/src/bodies/classSettings.js index db13b14b..d3b67d19 100755 --- a/src/bodies/classSettings.js +++ b/src/bodies/classSettings.js @@ -2,262 +2,253 @@ * Created by MrCerealKiller on 2018. 2. 9.. */ import React, { Component } from 'react'; -import{ - Navbar, - Nav, - NavItem, - Col, - Panel, - ButtonGroup, - Button -} from 'react-bootstrap' +import { ButtonGroup, Button, Panel } from 'react-bootstrap'; + import * as firebase from 'firebase' -import * as firebaseFunctions from './../firebase' var fullListClasses = []; class ClassSettings extends Component { + constructor(props) { + super(props); + this.state = { + height:window.innerHeight, + width:window.innerWidth, + mode:0, + loading:false, + form: { + title:null, + courseCode:null, + endDate:null, + ids:null + }, + classes:[], + selectedClass:null + }; + + this.classDetail = this.classDetail.bind(this) + this.panel = this.panel.bind(this) + this.createClass = this.createClass.bind(this) + } + + resize = () => { + this.setState({width:window.innerWidth,height:window.innerHeight}); + } + + componentDidMount() { + window.addEventListener('resize', this.resize); + this.setState({loading:true}); + var classesTemp = []; + if(!firebase.auth().currentUser || + !firebase.auth().currentUser.uid || + firebase.auth().currentUser === null || + firebase.auth().currentUser === undefined) { + this.props.history.push('/'); + } else { + firebase.database().ref('/classes').orderByChild('professor/UID').equalTo(firebase.auth().currentUser.uid).on('value',(snapshot)=>{ + + //console.log(snapshot.val()) + snapshot.forEach(item => { + classesTemp.push(item); + }); - constructor(props) { - super(props); - this.state = { - height:window.innerHeight, - width:window.innerWidth, - mode:0, - loading:false, - form:{ - title:null, - courseCode:null, - endDate:null, - ids:null - }, - classes:[], - selectedClass:null - }; - this.classDetail = this.classDetail.bind(this) - this.panel = this.panel.bind(this) - this.createClass = this.createClass.bind(this) - } - - resize = () => { - this.setState({width:window.innerWidth,height:window.innerHeight}) - } - - componentDidMount() { - window.addEventListener('resize', this.resize); - this.setState({loading:true}); - var classesTemp = []; - if(!firebase.auth().currentUser||!firebase.auth().currentUser.uid||firebase.auth().currentUser===null||firebase.auth().currentUser===undefined){ - this.props.history.push('/'); - }else{ - firebase.database().ref('/classes').orderByChild('professor/UID').equalTo(firebase.auth().currentUser.uid).on('value',(snapshot)=>{ - console.log(snapshot.val()) - snapshot.forEach(item => { - classesTemp.push(item); - }); - this.setState({loading:false,classes:classesTemp}); - this.forceUpdate(); - }) - } + this.setState({loading:false,classes:classesTemp}); + this.forceUpdate(); + }) } + } + + componentWillUnmount() { + window.removeEventListener('resize', this.resize); + } + + createClass(){ + if(this.state.mode === 1) { + fullListClasses =[]; + firebase.database().ref('/classes').once('value').then((snapshot)=>{ + snapshot.forEach(childSnapshot => { + fullListClasses.push(childSnapshot.val().course.code); + }); - componentWillUnmount() { - window.removeEventListener('resize', this.resize) - } + var isExisting = false; + // console.log(this.state.form.courseCode) + fullListClasses.forEach(code=>{ + // console.log(code===this.state.form.courseCode) + if (code === this.state.form.courseCode) { + isExisting = true; + } + }) - createClass(){ - if(this.state.mode === 1){ - fullListClasses =[]; - firebase.database().ref('/classes').once('value').then((snapshot)=>{ - snapshot.forEach(childSnapshot => { - fullListClasses.push(childSnapshot.val().course.code); - }); - var isExisting = false; - console.log(this.state.form.courseCode) - fullListClasses.forEach(code=>{ - console.log(code===this.state.form.courseCode) - if(code===this.state.form.courseCode){ - isExisting = true; - } - }) - if(!isExisting){ - var idList = this.state.form.ids.split(",") - firebase.database().ref('/classes/').push({ - professor:{ - UID:firebase.auth().currentUser.uid, - name:firebase.auth().currentUser.displayName - }, - course:{ - title:this.state.form.title, - code:this.state.form.courseCode, - listStudent:this.state.form.ids, - } - }).then(()=>{ - this.setState({mode:0}) - }).catch(()=>{ - alert("Failed") - }) - } - else{ - alert("Session with same course code exists... Cannot be created!") + if (!isExisting) { + var idList = this.state.form.ids.split(","); + firebase.database().ref('/classes/').push({ + professor:{ + UID:firebase.auth().currentUser.uid, + name:firebase.auth().currentUser.displayName + }, + course:{ + title:this.state.form.title, + code:this.state.form.courseCode, + listStudent:this.state.form.ids, } - }).then(()=>{ - alert("Course added to the system!"); - this.setState({mode:0}); - }).catch(()=>{ + }).then(()=>{ + + this.setState({mode:0})}).catch(()=>{ alert("Failed") - }) - }else{ - //Update Class + }) + } else { + alert("Session with same course code exists... Cannot be created!") + } + }).then(()=>{ + alert("Course added to the system!"); + this.setState({mode:0}); + }).catch(()=>{ + alert("Failed") + }) + } else { + //Update Class } - + } + + panel(mode, item) { + var header = null; + var titleTemp; + var courseCodeTemp; + var idsTemp; + switch (mode) { + case 1: + header = "Add Class"; + titleTemp = "Course Title"; + courseCodeTemp = "ECSE XXX"; + idsTemp = "260******,260*****,..."; + break; + case 2: + header = "Edit Class"; + titleTemp = item.val().course.title; + courseCodeTemp = item.val().course.code; + idsTemp = this.commaSeparatedIDs(item);; + break; + default: + break; } - panel(mode, item){ - var header = null; - var titleTemp; - var courseCodeTemp; - var idsTemp; - switch(mode){ - case 1: - header = "Add Class"; - titleTemp = "Course Title"; - courseCodeTemp = "ECSE XXX"; - idsTemp = "260******,260*****,..."; - break; - case 2: - header = "Edit Class"; - titleTemp = item.val().course.title; - courseCodeTemp = item.val().course.code; - idsTemp = this.commaSeparatedIDs(item);; - break; - default: - break; - } - return( -
-

{header}

-
+ return( +
-

Course Title

- this.setState({form:{...this.state.form,title:e.target.value}})} placeholder={titleTemp}/> +

{header}

+
-
+

Course Title

+ this.setState({form: {...this.state.form, title: e.target.value}})} placeholder={titleTemp}/> -

Course Code

- this.setState({form:{...this.state.form,courseCode:e.target.value}})} placeholder={courseCodeTemp}/> +
-
+

Course Code

+ this.setState({form: {...this.state.form, courseCode: e.target.value}})} placeholder={courseCodeTemp}/> -

End Date (DDMMYYYY)

- this.setState({form:{...this.state.form,endDate:e.target.value}})} placeholder="DDMMYYYY"/> +
-
+

End Date (DDMMYYYY)

+ this.setState({form: {...this.state.form, endDate: e.target.value}})} placeholder="DDMMYYYY"/> -

Student IDs (Separate by commas)

- this.setState({form:{...this.state.form,ids:e.target.value}})} placeholder={idsTemp}/> +
-
+

Student IDs (Separate by commas)

+ this.setState({form: {...this.state.form, ids: e.target.value}})} placeholder={idsTemp}/> - - - - +
-
- ) - } - - classDetail(item){ - return( - - - {item.val().course.code} - {item.val().course.title} - this.openPortal(item)}>Access Code - { - this.setState({mode:2,selectedClass:item}); - }}>Edit - { - var del = window.confirm("Are you sure you'd like to delete " + item.val().course.code +"?"); - if(del){ - this.deletePortal(item); - } - }} - >Delete - - - ) - } + + + + +
+ ) + } - - render() { - return ( -
- {this.state.mode!=0? - 1000?this.state.width/3:this.state.width/8, - width:this.state.width>1000?this.state.width/3:this.state.width*6/8, - height:this.state.width>1000?this.state.height*7/8:this.state.height*13/16 - }}> - {this.panel(this.state.mode, this.state.selectedClass)} - - - : -
- this.props.close()}/> -
- Your Classes -
- - { - this.state.classes.map((item)=>this.classDetail(item)) - } - - - -
this.setState({mode:1})}>Add Class
-
- - } + classDetail(item){ + return( + + + {item.val().course.code} + {item.val().course.title} + this.openPortal(item)}>Access Code + {this.setState({mode:2,selectedClass:item});}}>Edit + { + var del = window.confirm("Are you sure you'd like to delete " + item.val().course.code +"?"); + if (del) { + this.deletePortal(item); + } + }}>Delete + + + ) + } + + + render() { + return ( +
+ { + this.state.mode != 0 ? + 1000?this.state.width/3:this.state.width/8, + width:this.state.width>1000?this.state.width/3:this.state.width*6/8, + height:this.state.width>1000?this.state.height*7/8:this.state.height*13/16}}> + {this.panel(this.state.mode, this.state.selectedClass)} + + : +
+ closethis.props.close()}/> +
+ Your Classes
- ); - } - openPortal(item){ - alert("Portal Access Code: " + item.val().course.code); - } - - //Doesn't remove classListing from UI yet... - deletePortal(item){ - firebase.database().ref('/classes/'+item.key).remove(()=>alert('Class Removed')).catch(()=>("Class Couldn't Be Removed")) - } + + { + this.state.classes.map((item)=>this.classDetail(item)) + } + + + +
this.setState({mode:1})}>Add Class
+
+ } +
+ ); + } + + openPortal(item){ + alert("Portal Access Code: " + item.val().course.code); + } + + //Doesn't remove classListing from UI yet... + deletePortal(item){ + firebase.database().ref('/classes/'+item.key).remove(()=>alert('Class Removed')).catch(()=>("Class Couldn't Be Removed")); + } + + //Not working yet + commaSeparatedIDs(item){ + var idList; + var idString; + firebase.database().ref('/classes/'+item.key).on('value',(snapshot) =>{ + var idList = item.val().course.listStudent; + var idString = idList[0]; + + snapshot.forEach(function(item) { + for(var i = 1; i < idList.length; i++){ + idString.concat(",").concat(idList[i]); + } + }); + }); - //Not working yet - commaSeparatedIDs(item){ - var idList; - var idString; - firebase.database().ref('/classes/'+item.key).on('value',(snapshot) =>{ - var idList = item.val().course.listStudent; - var idString = idList[0]; - snapshot.forEach(function(item) { - for(var i = 1; i < idList.length; i++){ - idString.concat(",").concat(idList[i]); - } - }); - }); - return(idString); - } + return(idString); + } } - export default ClassSettings; diff --git a/src/css/_classSettings.css b/src/css/_classSettings.css index 87979c95..60f66354 100755 --- a/src/css/_classSettings.css +++ b/src/css/_classSettings.css @@ -2,6 +2,20 @@ * Class Settings -------------------------------------------------------------- */ +.settingswrapper { + padding: 30px; + color: #FFFFFF; + background: #3d99d4; + font-size: 1.3em; + font-family: helvetica; +} + +.settings-table-wrapper { + width: 100%; + border: 2px solid #3d99d4; + border-radius: 10px; +} + .settings-table { margin: 50px auto; padding: 50px; @@ -9,6 +23,7 @@ width: 90%; outline: 4px solid #3d99d4; + border-radius: 10px; border-collapse: collapse; border-spacing: 0px; } @@ -44,6 +59,14 @@ background-color: #c0def1; } +.close-button { + position: fixed; + top: 80px; + right: 20px; + width: 30px; + height: 30px; +} + /** * ----------------------------------------------------------------------------- */