Started prof poll UI

olivertsesk · Mar 23, 2018 · 7debbb7 · 7debbb7
2 parents 6e93ca8 + dedaeca
commit 7debbb7
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 4 deletions.
diff --git a/src/bodies/components/profListing.js b/src/bodies/components/profListing.js
@@ -12,10 +12,12 @@ class ClassListing extends Component {
     this.state = {
       showPanel:false,
       color_blue: false,
-      comments:[]
+      comments:[],
+      polls:[]
     };
 
     this.comment = this.comment.bind(this)
+
   }
 
   changeColor() {
@@ -37,6 +39,16 @@ class ClassListing extends Component {
 
       this.setState({comments});
     })
+//poll
+
+    firebase.database().ref('classes/' +this.props.item.key+ '/poll').on('value',(snapshot) =>{
+      var polls = this.state.polls;
+      polls = [];
+      snapshot.forEach(function(item) {
+        polls.push(item);
+      });
+      this.setState({polls});
+    })
   }
 
   getRating(item){
@@ -99,7 +111,27 @@ class ClassListing extends Component {
       </div>
     )
   }
-
+  poll(item,i){
+    return(
+    <div className="poll">
+      <Col lg={7} md={7} sm={7} xs={7} className="center pollCol">
+        <h3 className="pollQuestion">{item.val().pollQuestion}</h3>
+      </Col>
+      <Col lg={7} md={7} sm={7} xs={7} className="center pollCol">
+        <p className="pollAnswers">{item.val().ans1}</p>
+      </Col>
+      <Col lg={2} md={2} sm={2} xs={2} className="center pollCol">
+        <p className="pollAnswers">{item.val().ans1count}</p>
+      </Col>
+      <Col lg={7} md={7} sm={7} xs={7} className="center pollCol">
+        <p className="pollAnswers">{item.val().ans2}</p>
+      </Col>
+      <Col lg={2} md={2} sm={2} xs={2} className="center pollCol">
+        <p className="pollAnswers">{item.val().ans2count}</p>
+      </Col>
+    </div>
+  )
+  }
   render() {
     let bgColor = this.state.color_blue ? "#3D99D4" : "#FFFFFF";
     let fontColor = this.state.color_blue ? "#FFFFFF" : "#3D99D4";
@@ -112,6 +144,7 @@ class ClassListing extends Component {
         {
           this.state.showPanel ?
             <div>
+              {this.state.polls.map((item,i)=>this.poll(item, i))}
               {this.state.comments.map((item,i)=>this.comment(item, i))}
             </div>
           :

diff --git a/src/bodies/professorLanding.js b/src/bodies/professorLanding.js
@@ -55,6 +55,7 @@ class ProfLanding extends Component {
     window.removeEventListener('resize', this.resize);
   }
 
+
   render() {
     if(this.state.loading) {
       return (<div>Loading</div>)
@@ -66,16 +67,20 @@ class ProfLanding extends Component {
             <ClassManager close={()=>this.setState({classManager: false})}/>
           :
             <div className="landingPage" style={{height:this.state.height-100}}>
-              <Col lg={8} md={8} sm={8} xs={12} className="landingPageHalfCol">
+              <Col lg={8} md={8} sm={8} xs={12} className="landingPageHalfCol">              
+
                 <div className="classListWrapper scroll">
                 {
                   myClass.map((item,i)=>{
-                    return(
+                    return(      
                       <ClassList item ={item} key={i}/>
+
                     );
                   })
                 }
+
                 </div>
+
               </Col>
 
               <Col lg={4} md={4} sm={4} xs={12} className="landingPageHalfCol">

diff --git a/src/css/_classListing.css b/src/css/_classListing.css
@@ -92,3 +92,38 @@
 .bottomsep {
   border-bottom: 4px solid rgb(61, 153, 212);
 }
+.pollCol{
+  height: 100%;
+}
+.poll{
+  display: block;
+  width: 130%;
+  height: 50px;
+  border-radius: 10px;
+  background: #DC143C;
+  clear: both;
+}
+.pollQuestion {
+  display: block;
+  width: 100%;
+  height: 50%;
+  padding: 5px;
+  background: #DC143C;
+  font-size: 1em;
+}
+.pollAnswers {
+  display: block;
+  float: left;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  background: #DC143C;
+  font-size: 1em;
+}
+.pollCount{
+  float: left;
+  height: 100%;
+  text-align: center;
+  font-size: 1.3em;
+  background: #DC143C;
+}