Issue #186, #198, #196 completed.

client/imports/ui/components/explore/explore.html

@@ -1,6 +1,6 @@
 <div class="tuxlab-exploreview">
   <!--Tab Groups-->
-  <md-tab-group class="md-whiteframe-5dp" *ngFor="let course of courses">
+  <md-tab-group class="md-whiteframe-5dp" *ngFor="let course of exploreCourses">
     <!--First Tab-->
     <md-tab>
       <template md-tab-label>Description</template>
@@ -27,9 +27,7 @@ <h2>{{ course.course_number }} | {{ course.course_name }}</h2>
       <template md-tab-content>
         <md-content class="md-padding">
           <h2>Syllabus</h2>
-          <p>
-            {{ course.course_description.syllabus }}
-          </p>
+          <div [innerHTML]="convert(course.course_description.syllabus)"></div>
         </md-content>
       </template>
     </md-tab>

client/imports/ui/components/explore/explore.ts

@@ -1,34 +1,53 @@
 // Meteor Imports
-	import { Meteor } from 'meteor/meteor';
+  import { Meteor } from 'meteor/meteor';
 
 // Angular Imports
-	import { Component } from '@angular/core';
+  import { Component } from '@angular/core';
+  import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // Angular Material Imports
-	import { MATERIAL_DIRECTIVES } from 'ng2-material';
-	import { MeteorComponent } from 'angular2-meteor';
+  import { MATERIAL_DIRECTIVES } from 'ng2-material';
+  import { MeteorComponent } from 'angular2-meteor';
+  import { MD_TABS_DIRECTIVES } from '@angular2-material/tabs';
 
-// Courses Imports
-	import { courses } from '../../../../../collections/courses.ts';
+// Collections
+  declare var Collections: any;
+
+/// <reference path="../markdown/marked.d.ts" />
+  import * as marked from 'marked';
 
 // Define ExploreView Component
-	@Component({
-		selector: 'tuxlab-exploreview',
-		templateUrl: '/client/imports/ui/components/explore/explore.html',
-		directives: [
-			MATERIAL_DIRECTIVES
-		],
-	})
+  @Component({
+    selector: 'tuxlab-exploreview',
+    templateUrl: '/client/imports/ui/components/explore/explore.html',
+    directives: [
+      MATERIAL_DIRECTIVES,
+      ROUTER_DIRECTIVES,
+      MD_TABS_DIRECTIVES
+    ],
+  })
 
 // Export ExploreView Class
 export class ExploreView extends MeteorComponent {
 
-	courses: Array<any> = [];
-
-	constructor() {
-		super();
-
-		this.subscribe('explore-courses', () => {
-			this.courses = courses.find().fetch();}, true);
-	}
+  exploreCourses: Array<any> = [];
+
+  constructor() {
+    super();
+
+    this.subscribe('explore-courses', () => {
+      this.exploreCourses = Collections.courses.find({ "featured": true }).fetch();
+    }, true);
+  }
+
+  // Convert to markdown
+  convert(markdown: string) {
+    let md = marked.setOptions({});
+    if(typeof markdown !== "undefined" && markdown !== null) {
+      return md.parse(markdown);
+    }
+    else {
+      return "";
+    }
+  }
 }

client/imports/ui/components/explore/search.ts

@@ -3,22 +3,28 @@
 
 // Angular Imports
   import { Component, Input } from '@angular/core';
+  import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // Angular Material Imports
   import { MeteorComponent } from 'angular2-meteor';
   import { MATERIAL_DIRECTIVES } from 'ng2-material';
   import { MD_TABS_DIRECTIVES } from '@angular2-material/tabs';
 
 // Courses Database Imports
-   import { courses } from '../../../../../collections/courses.ts';
+  import { courses } from '../../../../../collections/courses.ts';
+
+// Icons
+  import { MD_ICON_DIRECTIVES } from '@angular2-material/icon';
 
 // Define SearchView Component
   @Component({
     selector: 'tuxlab-searchview',
     templateUrl: '/client/imports/ui/components/explore/search.html',
     directives: [
       MATERIAL_DIRECTIVES,
-      MD_TABS_DIRECTIVES
+      MD_TABS_DIRECTIVES,
+      MD_ICON_DIRECTIVES,
+      ROUTER_DIRECTIVES
     ]
   })
 

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

@@ -7,11 +7,11 @@
       <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>
+        <button md-raised-button (click)="updateMarkdown()">Save Changes</button>
       </div>
     </div>
     <div *ngIf="mdDataUpdate != null" id="feedback-markdown">
-      <p>Task Feedback:</p> 
+      <p>Task Feedback:</p>
       <div [innerHTML]="convert(mdDataUpdate)"></div>
     </div>
 </div>

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

@@ -17,6 +17,9 @@
 // Roles
   import { Roles } from '../../../../../collections/users.ts';
 
+// Icons
+  import { MD_ICON_DIRECTIVES } from '@angular2-material/icon';
+
 declare var Collections: any;
 
 // Markdown Imports
@@ -29,15 +32,17 @@ declare var Collections: any;
     templateUrl: '/client/imports/ui/components/markdown/markdown.html',
     directives: [
       MATERIAL_DIRECTIVES,
+      MD_ICON_DIRECTIVES,
       MDEditor
-    ]
+    ],
   })
 
 // Export MarkdownView Class
 export class MarkdownView extends MeteorComponent{
   @Input() mdData = "";
   @Input() mdDataUpdate = "";
-
+  @Input() taskid: number;
+
   courseId: string;
   labId: string;
   showMDE: boolean = false;
@@ -75,10 +80,11 @@ export class MarkdownView extends MeteorComponent{
   // Update new markdown
   updateMarkdown() {
     Collections.labs.update({
-      _id: this.labId
+      _id: this.labId,
+      "tasks.id": this.taskid
     }, {
       $set: {
-        // Set current task markdown
+        "tasks.$.md": this.mdData
       }
     });
   }

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

@@ -1,39 +1,49 @@
 // Meteor Imports
-	import { Meteor } from 'meteor/meteor';
-	import { MeteorComponent } from 'angular2-meteor';
+  import { Meteor } from 'meteor/meteor';
+  import { MeteorComponent } from 'angular2-meteor';
 
 // Angular Imports
-	import { Component, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+  import { Component, ElementRef, ViewChild, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 
 // Declare Global Variable
-	var SimpleMDE : any = require('simplemde');
+  var SimpleMDE : any = require('simplemde');
 
 // Define Editor Component
-	@Component({
-		selector: 'tuxlab-mdeditor',
-		templateUrl: '/client/imports/ui/components/mdeditor/mdeditor.html',
-	})
+  @Component({
+    selector: 'tuxlab-mdeditor',
+    templateUrl: '/client/imports/ui/components/mdeditor/mdeditor.html',
+  })
 
 // Export Editor Class
-	export class MDEditor extends MeteorComponent {
-		@ViewChild('simplemde') textarea : ElementRef;
-		@Input() mdData: string = "";
-		@Output() mdUpdated = new EventEmitter<string>();
+  export class MDEditor extends MeteorComponent implements OnChanges {
+    @ViewChild('simplemde') textarea : ElementRef;
+    @Input() mdData: string = "";
+    @Output() mdUpdated = new EventEmitter<string>();
+    public mde;
+    readMDE: boolean = false;
 
-		constructor(private elementRef:ElementRef) {
-			super();
-		}
+    constructor(private elementRef:ElementRef) {
+      super();
+    }
+
+    ngAfterViewInit(){
+      var self = this;
+      // Instantiate SimpleMDE
+      this.mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
+      // Read initial data from task markdown
+      this.mde.value(self.mdData);
+      // Catch changes
+      this.mde.codemirror.on("change", function() {
+        self.mdData = self.mde.value();
+        self.mdUpdated.emit(self.mdData);
+      });
+    }
+    ngOnChanges(changes) {
+      // Only update editor on first defined value
+      if(typeof this.mde !== "undefined" && !this.readMDE) {
+        this.mde.value(changes['mdData'].currentValue);
+        this.readMDE = true;
+      }
+    }
 
-		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/account/account.ts

@@ -1,21 +1,25 @@
 // Meteor Imports
-    import { Meteor } from 'meteor/meteor';
+  import { Meteor } from 'meteor/meteor';
 
 // Angular Imports
-    import { Component, ViewEncapsulation, provide } from '@angular/core';
-    import { ActivatedRoute } from '@angular/router';
-    import { InjectUser } from 'angular2-meteor-accounts-ui';
+  import { Component, ViewEncapsulation, provide } from '@angular/core';
+  import { ActivatedRoute } from '@angular/router';
+  import { InjectUser } from 'angular2-meteor-accounts-ui';
 
 // Angular Material Imports
-    import { MATERIAL_DIRECTIVES } from 'ng2-material';
-    import { MeteorComponent } from 'angular2-meteor';
+  import { MATERIAL_DIRECTIVES } from 'ng2-material';
+  import { MeteorComponent } from 'angular2-meteor';
+
+// Icons
+  import { MD_ICON_DIRECTIVES } from '@angular2-material/icon';
 
 // Define Account Component
 @Component({
   selector: 'tuxlab-account',
   templateUrl: '/client/imports/ui/pages/account/account.html',
   directives: [
-    MATERIAL_DIRECTIVES
+    MATERIAL_DIRECTIVES,
+    MD_ICON_DIRECTIVES
   ]
 })
 

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

@@ -14,9 +14,6 @@
   import { MeteorComponent } from 'angular2-meteor';
   import { OVERLAY_PROVIDERS } from '@angular2-material/core/overlay/overlay';
 
-// Icon
-  import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
-
 // Roles
   import { Roles } from '../../../../../collections/users.ts';
 
@@ -60,3 +57,4 @@
       }
     }
   }
+

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

@@ -7,7 +7,7 @@
           {{ courseName }}
           <md-icon fontIcon="tuxicon-cog" *ngIf="isInstruct()"></md-icon>
         </span>
-        
+
       </md-card-title-text>
     </md-card-title>
     <md-card-content>
@@ -19,7 +19,7 @@
   </md-card>
 
   <!-- Responsive Section for Grades and Assignments -->
-  <div layout="row" layout-xs="column" *ngIf="!isInstruct()">  
+  <div layout="row" layout-xs="column" *ngIf="!isInstruct()">
     <!-- Grade List -->
     <div flex>
       <tuxlab-gradelist></tuxlab-gradelist>
@@ -59,9 +59,9 @@
       </md-card>
     </div>
   </div>
-  
+
   <!-- Permissions Section -->
-  <div layout="row" *ngIf="isInstruct()">
+  <div layout="row" *ngIf="isInstruct()" layout-xs="column">
     <div flex>
       <md-card>
         <md-card-title>
@@ -85,16 +85,19 @@
           </md-card-title-text>
         </md-card-title>
         <md-card-content>
-          {{courseSyllabus}}
-          <tuxlab-mdeditor [mdData]="courseSyllabus" (mdUpdated)="mdUpdate($event)"></tuxlab-mdeditor>
+          <div *ngIf="editSyllabus">
+            <tuxlab-mdeditor [mdData]="courseSyllabus" (mdUpdated)="mdUpdate($event)"></tuxlab-mdeditor>
+          </div>
+          <div *ngIf="!editSyllabus" [innerHTML]="convert(courseSyllabus)"></div>
         </md-card-content>
         <md-card-actions layout="row" layout-align="end center">
-          <a md-button (click)="updateSyllabus()">Submit</a>
+          <a md-button (click)="updateSyllabus()" *ngIf="editSyllabus">Submit</a>
+          <a md-button *ngIf="!editSyllabus" (click)="toggleEdit()">Edit</a>
         </md-card-actions>
       </md-card>
     </div>
   </div>
-  
+
   <!--Lab List Card-->
   <div>
     <tuxlab-lablist></tuxlab-lablist>