Skip to content

Commit 45df62b

Browse files
sandershihackerDerekTBrown
sandershihacker
authored and
DerekTBrown
committed
Markdown Editor for TaskView and Instructor Course Dashboard (#197)
* 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 * Forms Module Deprecated Warning. Issue #110 * indentation * Use routerLink * api changes (#126) * issue 32 fixed * removed swp * fixed nconf issues * issue 82, 84 fixes * fixed #82 * isse #77 * fixed tests * fixed files * fixed tests master * fixed comment * moved validator * removed duplicate file * fixed tests, removed duplicate underscore, publish * changes * fixed methods.ts import * fixed issues w methods * fixes * minor fixes * A * api changes * fixed api * comments * minor changes * minor fixes * method implementations (#127) * issue 32 fixed * removed swp * fixed nconf issues * issue 82, 84 fixes * fixed #82 * isse #77 * fixed tests * fixed files * fixed tests master * fixed comment * moved validator * removed duplicate file * fixed tests, removed duplicate underscore, publish * changes * fixed methods.ts import * fixed issues w methods * fixes * minor fixes * A * api changes * fixed api * comments * minor changes * minor fixes * method implementations * course pages now uses Child Routing * deleted LabData class * school name * search function * icon size and #136 * dashboard pull data from database * fix inappropriate file naming for gradelist and lablist * more templating issues * . * . * markdown default * lablist and gradelist * template changes * explore page changes * delete instructor page * user schema * indentation * indentation * explore publish and taskview sidenav * explore view links to course/courseId * taskview sidenav * taskview * taskview sidenav changes * Extend terminal on small width * . * . * Added UserList Component in Courses * Edit Course * . * course dashboard get courseid from url * delete userlist * input * delete userlist * publish for global admin * Fixed router params * Issue 161 fixed: instructor field in courses * . * fix nextButton * . * Issue #171 * Issue #168 * Issue 160: CourseList * Removed LabView * Enrollable field for buttons on explore pages * TaskView -> LabView * Fixed Gradelist, Lablist and styling issues * Issue #162 Completed * TaskView toolbar color darken * remove tests * Combine Subscriptions * Reactive Subscription for CourseList and GradeList * instructor view of course dashboard * Dashboard not logged in * markdown editor for labview * . * . * remove test * Syllabus update on course_dashboard for instructors works
1 parent a3b4488 commit 45df62b

File tree

16 files changed

+250
-153
lines changed

16 files changed

+250
-153
lines changed

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

Lines changed: 0 additions & 95 deletions
This file was deleted.

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<div class="tuxlab-markdown">
22
<!-- Task Markdown -->
33
<div class="markdown-content">
4-
<div id="task-markdown" [innerHTML]="convert(mdData)"></div>
4+
<a (click)="mdeToggle()" *ngIf="isInstruct()">
5+
<md-icon fontIcon="tuxicon-edit"></md-icon>
6+
</a>
7+
<div id="task-markdown" [innerHTML]="convert(mdData)" *ngIf="!showMDE"></div>
8+
<div *ngIf="showMDE" id="task-editor">
9+
<tuxlab-mdeditor [mdData]="mdData" (mdUpdated)="mdUpdated($event)"></tuxlab-mdeditor>
10+
<button md-raised-button>Save Changes</button>
11+
</div>
512
</div>
613
<div *ngIf="mdDataUpdate != null" id="feedback-markdown">
714
<p>Task Feedback:</p>

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

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
import 'zone.js/dist/zone';
66

77
// Angular Imports
8-
import { Component, ViewEncapsulation, provide, Input } from '@angular/core';
8+
import { Component, ViewEncapsulation, provide, Input, OnInit } from '@angular/core';
99
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
1010
import { APP_BASE_HREF } from '@angular/common';
1111
import { HTTP_PROVIDERS } from '@angular/http';
1212
import { InjectUser } from 'angular2-meteor-accounts-ui';
13+
import { ActivatedRoute, Router } from '@angular/router';
1314

1415
// Angular Material Imports
1516
import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
@@ -23,6 +24,14 @@
2324

2425
// Icon
2526
import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
27+
28+
// MDEditor
29+
import { MDEditor } from '../mdeditor/mdeditor.ts';
30+
31+
// Roles
32+
import { Roles } from '../../../../../collections/users.ts';
33+
34+
declare var Collections: any;
2635

2736
// Markdown Imports
2837
/// <reference path="./marked.d.ts" />
@@ -37,7 +46,8 @@
3746
MD_TOOLBAR_DIRECTIVES,
3847
MD_ICON_DIRECTIVES,
3948
MD_INPUT_DIRECTIVES,
40-
MD_SIDENAV_DIRECTIVES
49+
MD_SIDENAV_DIRECTIVES,
50+
MDEditor
4151
],
4252

4353
viewProviders: [ MdIconRegistry ],
@@ -49,12 +59,12 @@
4959
export class MarkdownView extends MeteorComponent{
5060
@Input() mdData = "";
5161
@Input() mdDataUpdate = "";
62+
courseId: string;
63+
labId: string;
64+
showMDE: boolean = false;
5265

53-
constructor(mdIconRegistry: MdIconRegistry) {
66+
constructor(private route: ActivatedRoute, private router: Router) {
5467
super();
55-
// Create Icon Font
56-
mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
57-
mdIconRegistry.setDefaultFontSetClass('tuxicon');
5868

5969
}
6070
convert(markdown: string) {
@@ -66,4 +76,35 @@ export class MarkdownView extends MeteorComponent{
6676
return "";
6777
}
6878
}
69-
}
79+
ngOnInit() {
80+
this.courseId = this.router.routerState.parent(this.route).snapshot.params['courseid'];
81+
this.labId = this.route.snapshot.params['labid'];
82+
}
83+
isInstruct() {
84+
if(typeof this.courseId !== "undefined") {
85+
return Roles.isInstructorFor(this.courseId);
86+
}
87+
else {
88+
return false;
89+
}
90+
}
91+
// Toggle to show either markdown editor or task markdown
92+
mdeToggle() {
93+
this.showMDE = !this.showMDE;
94+
}
95+
96+
// Update new markdown
97+
updateMarkdown() {
98+
Collections.labs.update({
99+
_id: this.labId
100+
}, {
101+
$set: {
102+
// Set current task markdown
103+
}
104+
});
105+
}
106+
// Output event from MDE
107+
mdUpdated(md: string) {
108+
this.mdData = md;
109+
}
110+
}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Meteor } from 'meteor/meteor';
33

44
// Angular Imports
5-
import { Component, ElementRef, ViewChild } from '@angular/core';
5+
import { Component, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
66

77
// Angular Material Imports
88
import { MeteorComponent } from 'angular2-meteor';
@@ -19,15 +19,23 @@
1919
// Export Editor Class
2020
export class MDEditor extends MeteorComponent {
2121
@ViewChild('simplemde') textarea : ElementRef;
22+
@Input() mdData: string = "";
23+
@Output() mdUpdated = new EventEmitter<string>();
2224

2325
constructor(private elementRef:ElementRef) {
2426
super();
2527
}
2628

2729
ngAfterViewInit(){
30+
var self = this;
2831
// Instantiate SimpleMDE
2932
var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
33+
// Read initial data from task markdown
34+
mde.value(self.mdData);
35+
// Catch changes
36+
mde.codemirror.on("change", function() {
37+
self.mdData = mde.value();
38+
self.mdUpdated.emit(self.mdData);
39+
});
3040
}
31-
32-
3341
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
<div class="wrapper">
66
<!-- Navigation -->
77
<div class="course-toolbar-nav">
8-
<a md-button [routerLink]="['/course/' + courseId]" class="home-button">Home</a>
8+
<a md-button [routerLink]="['/course/' + courseId]" class="home-button">{{ courseNumber }} Home</a>
99
<a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
10-
<a md-button [routerLink]="['/course/' + courseId + '/grades']">Grades</a>
11-
<a md-button [routerLink]="['/course/' + courseId]">Settings</a>
10+
<a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
11+
<a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>
1212
</div>
1313
</div>
1414
</md-toolbar>
1515
<md-toolbar class="small" *showItBootstrap="['xs']">
1616
<div>
17-
<a md-button [routerLink]="['/course/' + courseId]">Home</a>
17+
<a md-button [routerLink]="['/course/' + courseId]">{{ courseNumber }} Home</a>
1818
<a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
19-
<a md-button [routerLink]="['/course/' + courseId + '/grades']">Grades</a>
20-
<a md-button [routerLink]="['/course/' + courseId]">Settings</a>
19+
<a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
20+
<a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>
2121
</div>
2222
<md-icon fontIcon="tuxicon-right"></md-icon>
2323
</md-toolbar>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919

2020
// Icon
2121
import { MD_ICON_DIRECTIVES, MdIconRegistry } from '@angular2-material/icon';
22+
23+
// Roles
24+
import { Roles } from '../../../../../collections/users.ts';
2225

2326
declare var Collections: any;
2427

@@ -40,14 +43,29 @@
4043
// Export CourseView Class
4144
export default class CourseView extends MeteorComponent {
4245
courseId: string;
46+
courseNumber: string = "";
4347
user: Meteor.User;
4448
constructor(mdIconRegistry: MdIconRegistry, private route: ActivatedRoute) {
4549
super();
4650
// Create Icon Font
4751
mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
4852
mdIconRegistry.setDefaultFontSetClass('tuxicon');
53+
this.subscribe('user-courses', () => {
54+
this.autorun(() => {
55+
this.courseNumber = Collections.courses.findOne({ _id: this.courseId }).course_number;
56+
});
57+
}, true);
4958
}
5059
ngOnInit() {
5160
this.courseId = (<any>(this.route.snapshot.params)).courseid;
5261
}
62+
isInstruct() {
63+
if(typeof this.courseId !== "undefined") {
64+
return Roles.isInstructorFor(this.courseId);
65+
}
66+
else {
67+
return false;
68+
}
69+
}
5370
}
71+

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

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
<md-card>
44
<md-card-title>
55
<md-card-title-text>
6-
<span class="md-headline">{{ courseName }}</span>
6+
<span class="md-headline">
7+
{{ courseName }}
8+
<md-icon fontIcon="tuxicon-cog" *ngIf="isInstruct()"></md-icon>
9+
</span>
10+
711
</md-card-title-text>
812
</md-card-title>
913
<md-card-content>
@@ -15,13 +19,11 @@
1519
</md-card>
1620

1721
<!-- Responsive Section for Grades and Assignments -->
18-
<div layout="row" layout-xs="column">
19-
22+
<div layout="row" layout-xs="column" *ngIf="!isInstruct()">
2023
<!-- Grade List -->
2124
<div flex>
2225
<tuxlab-gradelist></tuxlab-gradelist>
2326
</div>
24-
2527
<!-- Announcements -->
2628
<div flex>
2729
<md-card>
@@ -56,9 +58,45 @@
5658
</md-card-content>
5759
</md-card>
5860
</div>
59-
6061
</div>
61-
62+
63+
<!-- Permissions Section -->
64+
<div layout="row" *ngIf="isInstruct()">
65+
<div flex>
66+
<md-card>
67+
<md-card-title>
68+
<md-card-title-text>
69+
<span class="md-headline">Permissions</span>
70+
</md-card-title-text>
71+
</md-card-title>
72+
<md-card-content>
73+
Data
74+
</md-card-content>
75+
<md-card-actions layout="row" layout-align="end center">
76+
<a md-button>Submit</a>
77+
</md-card-actions>
78+
</md-card>
79+
</div>
80+
<div flex>
81+
<md-card>
82+
<md-card-title>
83+
<md-card-title-text>
84+
<span class="md-headline">Syllabus</span>
85+
</md-card-title-text>
86+
</md-card-title>
87+
<md-card-content>
88+
{{courseSyllabus}}
89+
<tuxlab-mdeditor [mdData]="courseSyllabus" (mdUpdated)="mdUpdate($event)"></tuxlab-mdeditor>
90+
</md-card-content>
91+
<md-card-actions layout="row" layout-align="end center">
92+
<a md-button (click)="updateSyllabus()">Submit</a>
93+
</md-card-actions>
94+
</md-card>
95+
</div>
96+
</div>
97+
6298
<!--Lab List Card-->
63-
<tuxlab-lablist></tuxlab-lablist>
99+
<div>
100+
<tuxlab-lablist></tuxlab-lablist>
101+
</div>
64102
</div>

0 commit comments

Comments
 (0)