Markdown Editor for TaskView and Instructor Course Dashboard

client/imports/ui/components/markdown/markdown.html

@@ -1,7 +1,14 @@
 <div class="tuxlab-markdown">
     <!-- Task Markdown -->
     <div class="markdown-content">
-      <div id="task-markdown" [innerHTML]="convert(mdData)"></div>
+      <a (click)="mdeToggle()" *ngIf="isInstruct()">
+        <md-icon fontIcon="tuxicon-edit"></md-icon>
+      </a>
+      <div id="task-markdown" [innerHTML]="convert(mdData)" *ngIf="!showMDE"></div>
+      <div *ngIf="showMDE" id="task-editor">
+        <tuxlab-mdeditor [mdData]="mdData" (mdUpdated)="mdUpdated($event)"></tuxlab-mdeditor>
+        <button md-raised-button>Save Changes</button>
+      </div>
     </div>
     <div *ngIf="mdDataUpdate != null" id="feedback-markdown">
       <p>Task Feedback:</p> 

client/imports/ui/components/markdown/markdown.ts

@@ -5,11 +5,12 @@
   import 'zone.js/dist/zone';
 
 // Angular Imports
-  import { Component, ViewEncapsulation, provide, Input } from '@angular/core';
+  import { Component, ViewEncapsulation, provide, Input, OnInit } from '@angular/core';
   import { bootstrap } from 'angular2-meteor-auto-bootstrap';
   import { APP_BASE_HREF } from '@angular/common';
   import { HTTP_PROVIDERS } from '@angular/http';
   import { InjectUser } from 'angular2-meteor-accounts-ui';
+  import { ActivatedRoute, Router } from '@angular/router';
 
 // Angular Material Imports
   import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
@@ -23,6 +24,14 @@
 
 // Icon
   import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
+
+// MDEditor
+  import { MDEditor } from '../mdeditor/mdeditor.ts';
+
+// Roles
+  import { Roles } from '../../../../../collections/users.ts';
+
+declare var Collections: any;
 
 // Markdown Imports
 /// <reference path="./marked.d.ts" />
@@ -37,7 +46,8 @@
       MD_TOOLBAR_DIRECTIVES,
       MD_ICON_DIRECTIVES,
       MD_INPUT_DIRECTIVES,
-      MD_SIDENAV_DIRECTIVES
+      MD_SIDENAV_DIRECTIVES,
+      MDEditor
     ],
 
     viewProviders: [ MdIconRegistry ],
@@ -49,12 +59,12 @@
 export class MarkdownView extends MeteorComponent{
   @Input() mdData = "";
   @Input() mdDataUpdate = "";
+  courseId: string;
+  labId: string;
+  showMDE: boolean = false;
 
-  constructor(mdIconRegistry: MdIconRegistry) {
+  constructor(private route: ActivatedRoute, private router: Router) {
     super();
-    // Create Icon Font
-    mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
-    mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
   }
   convert(markdown: string) {
@@ -66,4 +76,35 @@ export class MarkdownView extends MeteorComponent{
       return "";
     }
   }
-}
+  ngOnInit() {
+    this.courseId = this.router.routerState.parent(this.route).snapshot.params['courseid'];
+    this.labId = this.route.snapshot.params['labid'];
+  }
+  isInstruct() {
+    if(typeof this.courseId !== "undefined") {
+      return Roles.isInstructorFor(this.courseId);
+    }
+    else {
+      return false;
+    }
+  }
+  // Toggle to show either markdown editor or task markdown
+  mdeToggle() {
+    this.showMDE = !this.showMDE;
+  }
+
+  // Update new markdown 
+  updateMarkdown() {
+    Collections.labs.update({ 
+      _id: this.labId 
+    }, { 
+      $set: {
+        // Set current task markdown 
+      } 
+    });
+  }
+  // Output event from MDE 
+  mdUpdated(md: string) {
+    this.mdData = md;
+  }
+}

client/imports/ui/components/mdeditor/mdeditor.ts

@@ -2,7 +2,7 @@
 	import { Meteor } from 'meteor/meteor';
 
 // Angular Imports
-	import { Component, ElementRef, ViewChild } from '@angular/core';
+	import { Component, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
 
 // Angular Material Imports
 	import { MeteorComponent } from 'angular2-meteor';
@@ -19,15 +19,23 @@
 // Export Editor Class
 	export class MDEditor extends MeteorComponent {
 		@ViewChild('simplemde') textarea : ElementRef;
+		@Input() mdData: string = "";
+		@Output() mdUpdated = new EventEmitter<string>();
 
 		constructor(private elementRef:ElementRef) {
 			super();
 		}
 
 		ngAfterViewInit(){
+			var self = this;
 			// Instantiate SimpleMDE
 			var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
+			// Read initial data from task markdown
+			mde.value(self.mdData);
+			// Catch changes
+			mde.codemirror.on("change", function() {
+				self.mdData = mde.value();
+				self.mdUpdated.emit(self.mdData);
+			});
 		}
-
-
 	}

client/imports/ui/pages/course/course.html

@@ -5,19 +5,19 @@
       <div class="wrapper">
         <!-- Navigation -->
         <div class="course-toolbar-nav">
-          <a md-button [routerLink]="['/course/' + courseId]" class="home-button">Home</a>
+          <a md-button [routerLink]="['/course/' + courseId]" class="home-button">{{ courseNumber }} Home</a>
           <a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
-          <a md-button [routerLink]="['/course/' + courseId + '/grades']">Grades</a>
-          <a md-button [routerLink]="['/course/' + courseId]">Settings</a> 
+          <a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
+          <a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a> 
         </div>
       </div>
     </md-toolbar>
     <md-toolbar class="small" *showItBootstrap="['xs']">
       <div>
-        <a md-button [routerLink]="['/course/' + courseId]">Home</a>
+        <a md-button [routerLink]="['/course/' + courseId]">{{ courseNumber }} Home</a>
         <a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
-        <a md-button [routerLink]="['/course/' + courseId + '/grades']">Grades</a>
-        <a md-button [routerLink]="['/course/' + courseId]">Settings</a>  
+        <a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
+        <a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>  
       </div>
       <md-icon fontIcon="tuxicon-right"></md-icon>
     </md-toolbar>

client/imports/ui/pages/course/course.ts

@@ -19,6 +19,9 @@
 
 // Icon
   import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
+
+// Roles
+  import { Roles } from '../../../../../collections/users.ts';
 
   declare var Collections: any;
 
@@ -40,14 +43,29 @@
 // Export CourseView Class
   export default class CourseView extends MeteorComponent {
     courseId: string;
+    courseNumber: string = "";
     user: Meteor.User;
     constructor(mdIconRegistry: MdIconRegistry, private route: ActivatedRoute) {
       super();
       // Create Icon Font
       mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
       mdIconRegistry.setDefaultFontSetClass('tuxicon');
+      this.subscribe('user-courses', () => {
+        this.autorun(() => {
+          this.courseNumber = Collections.courses.findOne({ _id: this.courseId }).course_number;
+        });
+      }, true);
     }
     ngOnInit() {
       this.courseId = (<any>(this.route.snapshot.params)).courseid;
     }
+    isInstruct() {
+      if(typeof this.courseId !== "undefined") {
+        return Roles.isInstructorFor(this.courseId);
+      }
+      else {
+        return false;
+      }
+    }
   }
+

client/imports/ui/pages/course/course_dashboard.html

@@ -3,7 +3,11 @@
   <md-card>
     <md-card-title>
       <md-card-title-text>
-        <span class="md-headline">{{ courseName }}</span>
+        <span class="md-headline">
+          {{ courseName }}
+          <md-icon fontIcon="tuxicon-cog" *ngIf="isInstruct()"></md-icon>
+        </span>
+
       </md-card-title-text>
     </md-card-title>
     <md-card-content>
@@ -15,13 +19,11 @@
   </md-card>
 
   <!-- Responsive Section for Grades and Assignments -->
-  <div layout="row" layout-xs="column">
-
+  <div layout="row" layout-xs="column" *ngIf="!isInstruct()">  
     <!-- Grade List -->
     <div flex>
       <tuxlab-gradelist></tuxlab-gradelist>
     </div>
-
     <!-- Announcements -->
     <div flex>
       <md-card>
@@ -56,9 +58,45 @@
         </md-card-content>
       </md-card>
     </div>
-
   </div>
-
+
+  <!-- Permissions Section -->
+  <div layout="row" *ngIf="isInstruct()">
+    <div flex>
+      <md-card>
+        <md-card-title>
+          <md-card-title-text>
+            <span class="md-headline">Permissions</span>
+          </md-card-title-text>
+        </md-card-title>
+        <md-card-content>
+          Data
+        </md-card-content>
+        <md-card-actions layout="row" layout-align="end center">
+          <a md-button>Submit</a>
+        </md-card-actions>
+      </md-card>
+    </div>
+    <div flex>
+      <md-card>
+        <md-card-title>
+          <md-card-title-text>
+            <span class="md-headline">Syllabus</span>
+          </md-card-title-text>
+        </md-card-title>
+        <md-card-content>
+          {{courseSyllabus}}
+          <tuxlab-mdeditor [mdData]="courseSyllabus" (mdUpdated)="mdUpdate($event)"></tuxlab-mdeditor>
+        </md-card-content>
+        <md-card-actions layout="row" layout-align="end center">
+          <a md-button (click)="updateSyllabus()">Submit</a>
+        </md-card-actions>
+      </md-card>
+    </div>
+  </div>
+
   <!--Lab List Card-->
-  <tuxlab-lablist></tuxlab-lablist>
+  <div>
+    <tuxlab-lablist></tuxlab-lablist>
+  </div>
 </div>