Started on activity modification functionality.

KenOshima · KenOshima · commit 17527af15edc · 2018-06-14T21:42:32.000-07:00
diff --git a/app/client/src/components/Activity/Activity.css b/app/client/src/components/Activity/Activity.css
@@ -1,15 +1,18 @@
-
-
 .act-wrapper {
     padding: 5px 0;
+    display: flex;
+    flex-direction: row;
+    margin: 0 10px;
 }
+
 .act-bar-wrapper {
     position: relative;
     display: flex;
-    /*width: 500px;*/
+
+    width: stretch;
     align-items: center;
     min-height: 50px;
-    margin: 0 15px;
+    margin: 0 10px;
 }
 
 .act-icon {
@@ -47,3 +50,7 @@
     justify-content: center;
     padding: 5px 15px;
 }
+
+.activity-edit-icon {
+
+}
diff --git a/app/client/src/components/Activity/Activity.jsx b/app/client/src/components/Activity/Activity.jsx
@@ -1,5 +1,6 @@
 
 import React, { Component } from 'react';
+import { Button } from 'react-bootstrap';
 
 import * as api from '../../api';
 import './Activity.css';
@@ -8,50 +9,84 @@ export default class Activity extends Component {
    constructor(props) {
       super(props);
       this.state = {
+         activityId: -1,
+         activityType: '',
+         problemType: '',
+         editActivity: false,
          showContent: false
       }
    }
+   
+   editActivity() {
+      console.log("Activity Id:", this.state.activityId, "Activity Type:", this.state.activityType);
+      console.log("Content:", this.props.content.props);
+   }
 
    render() {
+      let isAdmin = this.props.User.info.role === 1;
+      let displayEdit = !isAdmin ? {display: "none"} : {};
+      
       return (
-         <div className="act-wrapper">
-            <div className="act-bar-wrapper"
-                 onClick={() => {
-                    /* If this is a video, update progress */
-                    if (this.props.type === 'video' && !this.state.showContent && this.props.userIsEnrolled) {
-                       let body = {
-                          activityId: this.props.activity.id,
-                          activityType: this.props.activity.activityType,
-                          grade: 100
-                       };
-                       console.log('body:', body);
-                       api.modifyUserProgress(this.props.User.info.id, body);
-                    }
-                    this.setState({ showContent: !this.state.showContent});
-                 }}>
-
-               <div className="act-icon">
-                  { this.props.type === 'video' && <i className="fas fa-play"></i> }
-                  { this.props.type === 'problems' && <i className="fas fa-pencil-alt"></i> }
-                  { this.props.type === 'form' && <i className="fas fa-file"></i> }
-               </div>
+         <div>
+            <div className="act-wrapper">
+            
+               <div className="act-bar-wrapper"
+                    onClick={() => {
+                       /* If this is a video, update progress */
+                       if (this.props.type === 'video' && !this.state.showContent && this.props.userIsEnrolled) {
+                          let body = {
+                             activityId: this.props.activity.id,
+                             activityType: this.props.activity.activityType,
+                             grade: 100
+                          };
+                          console.log('body:', body);
+                          api.modifyUserProgress(this.props.User.info.id, body);
+                       }
+                       this.setState({ showContent: !this.state.showContent});
+                    }}>
 
-               <div className={'act-main' + (this.props.done ? ' done' : '' )}>
+                  <div className="act-icon">
+                     { this.props.type === 'video' && <i className="fas fa-play"></i> }
+                     { this.props.type === 'problems' && <i className="fas fa-pencil-alt"></i> }
+                     { this.props.type === 'form' && <i className="fas fa-file"></i> }
+                  </div>
 
-                  <div className="act-title">{this.props.title}</div>
+                  <div className={'act-main' + (this.props.done ? ' done' : '' )}>
 
-                  <div className="act-right">
-                     {this.props.right}
-                  </div>
+                     <div className="act-title">{this.props.title}</div>
+
+                     <div className="act-right">
+                        {this.props.right}
+                        
+                        
+                     </div>
 
+                  </div>
+                  
                </div>
-            </div>
 
+               
+               
+               <Button style={displayEdit} className="activity-edit-icon" onClick={() => {
+                  this.setState({
+                     editTopic: true, 
+                     activityId: this.props.activity.id,
+                     activityType: this.props.type,
+                     problemType: this.props.activity.type
+                  });
+                  this.editActivity();     
+               }}>
+                  <i className="fas fa-pencil-alt"></i> 
+               </Button>
+               
+               
+               
+            </div>
+         
             {
                this.state.showContent &&
                <div className="act-content">{this.props.content}</div>
             }
-
          </div>
       )
 
