Termplate Issues

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

@@ -1,32 +1,33 @@
 <div class="tuxlab-exploreview">
-	<!--Tab Groups-->
-	<md-tab-group class="md-whiteframe-5dp" *ngFor="let course of courses">
-		<!--First Tab-->
-		<md-tab>
-			<template md-tab-label>Description</template>
-			<template md-tab-content>
-				<md-content class="md-padding">
-					<h2>{{ course.course_name }}</h2>
-					<p>Course number: {{ course.course_number }}</p>
-					<p>
-						{{ course.course_description.content }}
-					</p>
-					<p>Instructor: {{ course.instructor_name }}</p>
-				</md-content>
-			</template>
-		</md-tab>
-		<!--Second Tab-->
-		<md-tab>
-			<template md-tab-label>Syllabus</template>
-			<template md-tab-content>
-				<md-content class="md-padding">
-					<h2>Syllabus</h2>
-					<p>
-						{{ course.course_description.syllabus }}
-					</p>
-				</md-content>
-			</template>
-		</md-tab>
-	</md-tab-group>
-
-</div>
+  <!--Tab Groups-->
+  <md-tab-group class="md-whiteframe-5dp" *ngFor="let course of courses">
+    <!--First Tab-->
+    <md-tab>
+      <template md-tab-label>Description</template>
+      <template md-tab-content>
+        <md-content class="md-padding">
+          <h2>{{ course.course_number }} | {{ course.course_name }}</h2>
+          <p>{{ course.instructor_name }}</p>
+          <p>
+            {{ course.course_description.content }}
+          </p>
+          <div class="course-link">
+            <a md-button [routerLink]="['/course']">Course Page</a>
+          </div>
+        </md-content>
+      </template>
+    </md-tab>
+    <!--Second Tab-->
+    <md-tab>
+      <template md-tab-label>Syllabus</template>
+      <template md-tab-content>
+        <md-content class="md-padding">
+          <h2>Syllabus</h2>
+          <p>
+            {{ course.course_description.syllabus }}
+          </p>
+        </md-content>
+      </template>
+    </md-tab>
+  </md-tab-group>
+</div>

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

@@ -10,6 +10,7 @@
 	import { APP_BASE_HREF, FORM_DIRECTIVES } from '@angular/common';
 	import { HTTP_PROVIDERS } from '@angular/http';
 	import { InjectUser } from 'angular2-meteor-accounts-ui';
+	import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // Angular Material Imports
 	import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
@@ -32,6 +33,7 @@
 			MATERIAL_DIRECTIVES,
 			MD_ICON_DIRECTIVES,
 			MD_TABS_DIRECTIVES,
+			ROUTER_DIRECTIVES,
 			MD_INPUT_DIRECTIVES,
 			MdToolbar
 		],

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

@@ -19,13 +19,17 @@ <h2 id="search-string">Search Results for '{{ searchQuery }}'</h2>
           <th class="md-text-cell">Course Number</th>
           <th class="md-text-cell">Course Name</th>
           <th>Instructor</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let course of searchResults">
           <td class="md-text-cell">{{ course.course_number }}</td>
           <td class="md-text-cell">{{ course.course_name }}</td>
           <td>{{ course.instructor_ids }}</td>
+          <td>
+            <a md-button [routerLink]="['/course']">Course Page</a>
+          </td>
         </tr>
       </tbody>
     </md-data-table>

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

@@ -10,6 +10,7 @@
 	import { APP_BASE_HREF, FORM_DIRECTIVES } from '@angular/common';
 	import { HTTP_PROVIDERS } from '@angular/http';
 	import { InjectUser } from 'angular2-meteor-accounts-ui';
+  import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // Angular Material Imports
 	import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
@@ -31,6 +32,7 @@
 		directives: [ MATERIAL_DIRECTIVES, 
 					  MD_ICON_DIRECTIVES, 
 					  MD_TABS_DIRECTIVES,
+            ROUTER_DIRECTIVES,
 					  MD_INPUT_DIRECTIVES,
 					  MdToolbar ],
 		viewProviders: [ MdIconRegistry ],

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

@@ -19,6 +19,6 @@
 
 	<!--Markdown-->
 	<div class="markdown-content">
-		<div id="task-markdown" [innerHTML]="convertedData">Task loading...</div>
+		<div id="task-markdown" [innerHTML]="convert(mdData)"></div>
 	</div>
 </div>

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

@@ -15,6 +15,7 @@
   import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
   import { MeteorComponent } from 'angular2-meteor';
   import { OVERLAY_PROVIDERS } from '@angular2-material/core/overlay/overlay';
+  import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';
 
 // Toolbar
   import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';
@@ -32,31 +33,38 @@
   @Component({
     selector: 'tuxlab-markdown',
     templateUrl: '/client/imports/ui/components/markdown/markdown.html',
-    directives: [MATERIAL_DIRECTIVES,
-                 MD_TOOLBAR_DIRECTIVES,
-                 MD_ICON_DIRECTIVES],
+    directives: [
+      MATERIAL_DIRECTIVES,
+      MD_TOOLBAR_DIRECTIVES,
+      MD_ICON_DIRECTIVES,
+      MD_INPUT_DIRECTIVES
+    ],
 
     viewProviders: [ MdIconRegistry ],
     providers: [ OVERLAY_PROVIDERS ],
     encapsulation: ViewEncapsulation.None
   })
 
 // Export MarkdownView Class
-export class MarkdownView {
-  data = (new TaskView).labMarkdown;
-  convertedData: String;
+export class MarkdownView extends MeteorComponent{
+  @Input() mdData = "";
   labName = "Lab Name Here";
   labProgress = "3/10";
 
   constructor(mdIconRegistry: MdIconRegistry) {
+    super();
     // Create Icon Font
     mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
     mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
-    // Parse markdown string
+  }
+  convert(markdown: string) {
     let md = marked.setOptions({});
-    if(typeof this.data !== "undefined") {
-      this.convertedData = md.parse(this.data);
+    if(typeof markdown !== "undefined") {
+      return md.parse(markdown);
+    }
+    else {
+      return "";
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { RouterConfig } from '@angular/router';
 import CourseView from './course.ts';
-import { CourseGradeList } from './course_gradelist.ts';
-import { CourseLabList } from './course_lablist.ts';
+import { GradeList } from './gradelist.ts';
+import { LabList } from './lablist.ts';
 import { CourseDashboard } from './course_dashboard.ts';
 import { LabView } from './labview.ts';
 
@@ -11,8 +11,8 @@ export const courseRoutes: RouterConfig = [
     component: CourseView,
     children: [
       { path: '', component: CourseDashboard },
-      { path: 'grades', component: CourseGradeList },
-      { path: 'labs', component: CourseLabList },
+      { path: 'grades', component: GradeList },
+      { path: 'labs', component: LabList },
       { path: 'labs/lab', component: LabView }
   //  { path: '/:courseid', as: 'CourseView', component: CourseView },
   //  { path: '/:courseid/users', as: 'UserList', component: UserList },
@@ -21,4 +21,4 @@ export const courseRoutes: RouterConfig = [
   //  { path: '/:courseid/lab/:labid', as: 'LabView', component: LabView },
     ]
   }
-];
+];

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

@@ -20,10 +20,6 @@
 // Icon
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
-// LabList and Grades import
-	import { LabList } from "../../components/lablist/lablist.ts";
-	import { GradeList } from "../../components/gradelist/gradelist.ts";
-
 // Courses and Course Record Imports
 	import { courses } from "../../../../../collections/courses.ts";
 	import { course_records } from "../../../../../collections/course_records.ts";
@@ -35,9 +31,7 @@
 		directives: [
 			MATERIAL_DIRECTIVES,
 			MD_ICON_DIRECTIVES,
-			ROUTER_DIRECTIVES,
-			LabList,
-			GradeList
+			ROUTER_DIRECTIVES
 		],
 		viewProviders: [MdIconRegistry],
 		providers: [OVERLAY_PROVIDERS],

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

@@ -53,16 +53,6 @@
             </tbody>
           </md-data-table>
         </md-card-content>
-        <md-card-actions layout="row" layout-align="end center">
-          <md-dialog #alert>
-            <md-dialog-title>Nice Try</md-dialog-title>
-            Go home and think about what you did.
-            <md-dialog-actions ok="Fine"></md-dialog-actions>
-          </md-dialog>
-          <button md-button class="right" (click)="alert.show()">
-          Complain
-          </button>
-        </md-card-actions>
       </md-card>
     </div>
   </div>

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

@@ -21,9 +21,9 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // LabList and Grades import
-	import { LabList } from "../../components/lablist/lablist.ts";
-  import { GradeList } from "../../components/gradelist/gradelist.ts";
-
+  import { GradeList } from './gradelist.ts';
+  import { LabList } from './lablist.ts';
+  
 // Courses and Course Record Imports
 	import { courses } from "../../../../../collections/courses.ts";
 	import { course_records } from "../../../../../collections/course_records.ts";
@@ -65,4 +65,4 @@
         }
       }, true);
     }
-  }
+  }