Schema Validation and Sidenav Fix (#109)

* Updated Schemas

* Load Screen

* Loading Screen

* publish subscribe and dynamic explore page

* deleted swap file

* publish subscribe

* template fixes

* added start for reactive publication

* template issue

* .

* .

* course_records publish

* course_records reactively publish

* revert meteor update

* publish subscribe and lineheight for searchpage icons

* fixed indentation and removed test file

* indentation

* indentation

* Accounts page and fixed random erro

* toolbar for mobile devices

* toolbar

* account.html fixes

* Toolbar made responsive

* Responsive toolbar fixes

* created userlist component

* course_records course_id validation

* indentation

* markdown

* import changes

* validation addition

Author: sandershihacker

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

@@ -50,7 +50,7 @@ export class ExploreView extends MeteorComponent {
 		mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
 		mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
-		this.subscribe('all-courses', () => {
+		this.subscribe('explore-courses', () => {
 			this.courses = courses.find().fetch();
 		}, true);
 	}

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

@@ -22,7 +22,7 @@
 	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // Courses Database Imports
-  import { courses } from '../../../../../collections/courses';
+  import { courses } from '../../../../../collections/courses.ts';
 
 // Define SearchView Component
 	@Component({

client/imports/ui/components/gradelist/gradelist.ts

@@ -19,7 +19,7 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // Course Records Import
-	import { course_records } from '../../../../../collections/course_records';
+	import { course_records } from '../../../../../collections/course_records.ts';
 
 @InjectUser("user")
 

client/imports/ui/components/lablist/lablist.ts

@@ -20,7 +20,7 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // course_record database imports
-    import { course_records } from '../../../../../collections/course_records';
+    import { course_records } from '../../../../../collections/course_records.ts';
 
 @InjectUser("user")
 

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

@@ -9,9 +9,9 @@
 						<md-icon fontIcon="tuxicon-left"></md-icon>
 					</a>
 				</div>
-				<p class="text-center markdown-task-name">Task Name Here</p>
+				<p class="text-center markdown-task-name">{{ labName }}</p>
 				<div>
-					<p>3/10</p>
+					<p>{{ labProgress }}</p>
 				</div>
 			</div>
 		</md-toolbar>

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

@@ -21,7 +21,8 @@
 
 // Icon
   import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
-
+  
+  import { LabData } from '../../pages/lab/taskview.ts';
 // Markdown Imports
 /// <reference path="./marked.d.ts" />
   import * as marked from 'marked';
@@ -44,18 +45,21 @@
 
 // Export MarkdownView Class
 export class MarkdownView {
-
   //TODO: Replace with markdown from the database
-  data = "# Markdown\n This is a short **markdown** string, and this is *italic* text. Here is some ***bold and italic*** text.  \n ## Subtitle here";
-  convertedData = this.data;
+  data = (new LabData).labMarkdown;
+  convertedData: String;
+  labName = "Lab Name Here";
+  labProgress = "3/10";
 
   constructor(mdIconRegistry: MdIconRegistry) {
     // Create Icon Font
     mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
     mdIconRegistry.setDefaultFontSetClass('tuxicon');
-
+    
     // Parse markdown string
     let md = marked.setOptions({});
-    this.convertedData = md.parse(this.data);
+    if(typeof this.data !== "undefined") {
+      this.convertedData = md.parse(this.data);
+    }
   }
-}
+}

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

@@ -17,8 +17,7 @@
 	import { OVERLAY_PROVIDERS } from '@angular2-material/core/overlay/overlay';
 
 // Toolbar
-  	import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';
-	import "../../../../../node_modules/@angular2-material/toolbar/toolbar.css";
+  import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';
 
 // Icon
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';

client/imports/ui/components/userlist/userlist.html

@@ -0,0 +1,7 @@
+<div class="tuxlab-userlist">
+  <md-card>
+    <md-card-content>
+      <h2>Course Number User List</h2>  
+    </md-card-content>  
+  </md-card>
+</div>

client/imports/ui/components/userlist/userlist.ts

@@ -0,0 +1,53 @@
+// Meteor Imports
+  import { Meteor } from 'meteor/meteor';
+  import { Mongo } from 'meteor/mongo';
+  import 'reflect-metadata';
+  import 'zone.js/dist/zone';
+	
+// Angular Imports 
+  import { Component, ViewEncapsulation, provide } 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';
+    
+// Angular Material Imports
+	import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
+	import { MeteorComponent } from 'angular2-meteor';
+	
+// Icon
+  import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
+		
+// Course Records Import
+  import { course_records } from '../../../../../collections/course_records.ts';
+
+// Define UserList Component
+  @Component({
+    selector: 'tuxlab-userlist',
+    templateUrl: '/client/imports/ui/components/userlist/userlist.html',
+    directives: [
+      MATERIAL_DIRECTIVES,
+      MD_ICON_DIRECTIVES],
+    viewProviders: [ MdIconRegistry ],
+    encapsulation: ViewEncapsulation.None
+  })
+
+// Export UserList Class 
+  export class UserList extends MeteorComponent {
+    user: Meteor.User;
+    courseId: String;
+    userIds: Array<String>;
+    constructor(mdIconRegistry: MdIconRegistry) {
+      super();
+      // Create Icon Font
+      mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
+      mdIconRegistry.setDefaultFontSetClass('tuxicon');
+
+      this.subscribe('course-records', this.courseId, () => {
+        let courseRecords = course_records.find({ course_id: this.courseId });
+        this.userIds = courseRecords.map(function(record) {
+          return (<any>record).user_id;
+        });
+      }, true);
+    }
+  }

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

@@ -20,12 +20,12 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // LabList and Grades import
-	import { LabList } from "../../components/lablist/lablist";
-	import { GradeList } from "../../components/gradelist/gradelist";
+	import { LabList } from "../../components/lablist/lablist.ts";
+	import { GradeList } from "../../components/gradelist/gradelist.ts";
 
 // Courses and Course Record Imports
-	import { courses } from "../../../../../collections/courses";
-	import { course_records } from "../../../../../collections/course_records";
+	import { courses } from "../../../../../collections/courses.ts";
+	import { course_records } from "../../../../../collections/course_records.ts";
 
 // Define CourseView Component
 	@Component({
@@ -56,8 +56,7 @@
       mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
       // Display Course Toolbar
-      document.getElementById('course-toolbar').style.display = "block";
-
+			document.getElementById('course-toolbar').className += " block";
       // Activate toolbar button
       document.getElementById('toolbar-course').className += " active-button";
 

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

@@ -19,7 +19,7 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // Grades import
-	import { GradeList } from "../../components/gradelist/gradelist";
+	import { GradeList } from "../../components/gradelist/gradelist.ts";
 
 // Define GradeView Component
 	@Component({
@@ -41,11 +41,9 @@
 			mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
 			// Display Course Toolbar
-			document.getElementById('course-toolbar').style.display = "block";
-
+			document.getElementById('course-toolbar').className += "block";
+			
 			// Activate toolbar button
 			document.getElementById('toolbar-grades').className += "active-button";
-
-			document.getElementById('tux-content').style.marginTop = "20px";
 		}
 	}

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

@@ -19,7 +19,7 @@
   	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // LabList import
-	import { LabList } from "../../components/lablist/lablist";
+	import { LabList } from "../../components/lablist/lablist.ts";
 
 // Define LabsView Component
 	@Component({
@@ -41,11 +41,9 @@
 			mdIconRegistry.setDefaultFontSetClass('tuxicon');
 
 			// Display Course Toolbar
-			document.getElementById('course-toolbar').style.display = "block";
-
+			document.getElementById('course-toolbar').className += "block";
+			
 			// Activate toolbar button
 			document.getElementById('toolbar-labs').className += "active-button";
-
-			document.getElementById('tux-content').style.marginTop = "20px";
 		}
 	}

client/imports/ui/pages/instructor/instructor.ts

@@ -20,9 +20,9 @@
 	import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
 
 // Editor Component
-	import { MDEditor } from '../../components/mdeditor/mdeditor';
+	import { MDEditor } from '../../components/mdeditor/mdeditor.ts';
 
-	import { LoadScreen } from '../../components/loadscreen/loadscreen';
+	import { LoadScreen } from '../../components/loadscreen/loadscreen.ts';
 
 // Define InstructorView Component
 	@Component({

client/imports/ui/pages/lab/taskview.ts

@@ -12,8 +12,8 @@
 	import { MeteorComponent } from 'angular2-meteor';
 
 // Terminal and Markdown Imports
-  import { Terminal } from "../../components/wetty/terminal";
-  import { MarkdownView } from "../../components/markdown/markdown";
+  import { Terminal } from "../../components/wetty/terminal.ts";
+  import { MarkdownView } from "../../components/markdown/markdown.ts";
 
 // Meteor method imports
 //  import { create_Lab } from "../../../lab/methods.ts"
@@ -26,11 +26,16 @@
 })
 
 export default class TaskView extends MeteorComponent{
-
+  
   constructor() {
     super();
     //TODO This Doesn't Exist
     //Meteor.call('createLab',{courseId: "5",labId: 5},(err,res) => {console.log("fired",err,res)});
   }
-
 }
+
+export class LabData {
+  // TODO: get from database
+  labMarkdown = "# Lab 1 Tasks \n ### Task 1 \n Implement **bash** *on your own* ***without*** any help. \n ### Task 2 \n Install *Arch Linux*. \n ### Task 3 \n Type ```sudo rm -rf /*``` into your terminal";
+  constructor() {}
+}

client/style/base/_toolbar.scss

@@ -1,11 +1,14 @@
 .tux-toolbar {
+  md-toolbar {
+    a {
+      color:black;
+    }
+  }
   md-toolbar.small {
     min-height: inherit;
-    display: none;
     .mobile-toolbar-buttons {
       margin: 0 auto;
       a {
-        color: black;
         display: block;
         float: left;
         height: 64px;
@@ -49,11 +52,8 @@
       .tux-toolbar-nav {
         white-space:nowrap;
         [md-button] {
-        font-weight: 300;
-      }
-      a {
-        color: black;
-      }
+          font-weight: 300;
+        }
       }
       .tux-toolbar-login {
         a, a:visited {
@@ -100,7 +100,8 @@
 // Sub-toolbar
 #course-toolbar {
   display: none;
-  md-toolbar {
+  white-space: nowrap;
+  md-toolbar.large {
     min-height: inherit;
     background-color: #f0f0f0;
     .wrapper {
@@ -125,6 +126,11 @@
           height: 66px;
           padding-top: 14px;
           line-height: 45px;
+          background-color: #f0f0f0;
+          margin: 0;
+        }
+        a:hover {
+          background-color: #dfdfdf;
         }
         a.home-button, a.home-button:visited {
           font-weight: bold;
@@ -141,6 +147,14 @@
       }
     }
   }
+  md-toolbar.small {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    background-color: #f0f0f0;
+    a {
+      color: black;
+    }
+  }
 }
 
 // Sidenav
@@ -194,7 +208,10 @@
     }
   }
 }
-
+md-sidenav-layout.md-sidenav-opened {
+  position: fixed;
+  width: 100%;
+}
 md-sidenav-layout {
   .page-content {
     padding: 0;

client/style/course/_courseview.scss

@@ -24,3 +24,6 @@
 	margin-bottom: 30px;
 	margin-top: 20px;
 }
+#course-toolbar.block {
+	display: block;
+}