Skip to content

Commit a6d735d

Browse files
sandershihackerDerekTBrown
sandershihacker
authored and
DerekTBrown
committed
markdown editor for labview
1 parent 9976165 commit a6d735d

File tree

11 files changed

+113
-130
lines changed

11 files changed

+113
-130
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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<!-- Navigation -->
77
<div class="course-toolbar-nav">
88
<a md-button [routerLink]="['/course/' + courseId]" class="home-button">{{ courseNumber }} Home</a>
9-
<a md-button [routerLink]="['/course/' + courseId + '/labs']" *ngIf="isInstruct()">Labs</a>
9+
<a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
1010
<a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
1111
<a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>
1212
</div>
@@ -15,7 +15,7 @@
1515
<md-toolbar class="small" *showItBootstrap="['xs']">
1616
<div>
1717
<a md-button [routerLink]="['/course/' + courseId]">{{ courseNumber }} Home</a>
18-
<a md-button [routerLink]="['/course/' + courseId + '/labs']" *ngIf="isInstruct()">Labs</a>
18+
<a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
1919
<a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
2020
<a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>
2121
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,7 @@
6464
</div>
6565

6666
<!--Lab List Card-->
67-
<tuxlab-lablist></tuxlab-lablist>
67+
<div>
68+
<tuxlab-lablist></tuxlab-lablist>
69+
</div>
6870
</div>

‎client/imports/ui/pages/lab/labview.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
export default class LabView extends MeteorComponent {
5353
user: Meteor.User;
5454
public auth : any;
55-
labMarkdown: string;
55+
labMarkdown: string = "# This is a markdown string \n ## So is this.";
5656
updateMarkdown: string;
5757
taskName: string = "Task Name Here";
5858
labProgress: string = "3 / 10";
@@ -102,11 +102,11 @@ export default class LabView extends MeteorComponent {
102102
}
103103
else{
104104
if(res.verified){
105-
slf.nextButton = true;
106-
}
107-
else{
108-
slf.nextButton = false;
109-
}
105+
slf.nextButton = true;
106+
}
107+
else{
108+
slf.nextButton = false;
109+
}
110110
slf.taskUpdates = res.taskUpdates;
111111
}
112112
});

‎client/style/lab/_labview.scss

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,11 @@
153153

154154
//Markdown Content
155155
.markdown-content {
156-
padding: 40px;
156+
padding: 20px;
157157
background-color: #fcfcfc;
158+
text-align: right;
158159
#task-markdown {
160+
text-align: left;
159161
code {
160162
background-color: #dfdfdf;
161163
padding: 4px;
@@ -165,6 +167,19 @@
165167
margin-top: 18px;
166168
}
167169
}
170+
#task-editor {
171+
text-align: left;
172+
}
173+
a {
174+
cursor: pointer;
175+
md-icon {
176+
color: #666666;
177+
line-height: 0;
178+
}
179+
.tuxicon-edit:before {
180+
font-size: 36px;
181+
}
182+
}
168183
}
169184
#feedback-markdown {
170185
margin: 25px;

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@angular2-material/button": "2.0.0-alpha.5-3",
2121
"@angular2-material/card": "2.0.0-alpha.5-3",
2222
"@angular2-material/checkbox": "2.0.0-alpha.5-3",
23-
"@angular2-material/core": "2.0.0-alpha.5-2",
23+
"@angular2-material/core": "2.0.0-alpha.5-2",
2424
"@angular2-material/icon": "2.0.0-alpha.5-2",
2525
"@angular2-material/input": "2.0.0-alpha.5-3",
2626
"@angular2-material/progress-bar": "2.0.0-alpha.5-3",

‎public/assets

‎tsconfig.json

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,36 +22,41 @@
2222
"node_modules"
2323
],
2424
"files": [
25-
"client/imports/course/methods.ts",
2625
"client/imports/lab/methods.ts",
2726
"client/imports/ui/components/explore/explore.ts",
2827
"client/imports/ui/components/explore/search.ts",
29-
"client/imports/ui/components/gradelist/gradelist.ts",
30-
"client/imports/ui/components/lablist/lablist.ts",
31-
"client/imports/ui/components/loadscreen/loadscreen.ts",
3228
"client/imports/ui/components/markdown/markdown.ts",
3329
"client/imports/ui/components/markdown/marked.d.ts",
3430
"client/imports/ui/components/mdeditor/mdeditor.ts",
35-
"client/imports/ui/components/userlist/userlist.ts",
3631
"client/imports/ui/components/wetty/terminal.ts",
3732
"client/imports/ui/pages/account/account.ts",
3833
"client/imports/ui/pages/account/login.ts",
39-
"client/imports/ui/pages/course/course.routes.ts",
34+
"client/imports/ui/pages/course/course_dashboard.ts",
4035
"client/imports/ui/pages/course/course.ts",
36+
"client/imports/ui/pages/course/gradelist.ts",
4137
"client/imports/ui/pages/course/gradeview.ts",
42-
"client/imports/ui/pages/course/labview.ts",
43-
"client/imports/ui/pages/course/mainview.ts",
38+
"client/imports/ui/pages/course/lablist.ts",
39+
"client/imports/ui/pages/course/studentlist.ts",
40+
"client/imports/ui/pages/courselist/courselist.ts",
4441
"client/imports/ui/pages/dashboard/dashboard.ts",
45-
"client/imports/ui/pages/error/404.ts",
42+
"client/imports/ui/pages/error/error.ts",
4643
"client/imports/ui/pages/explore/explore.ts",
47-
"client/imports/ui/pages/instructor/instructor.ts",
48-
"client/imports/ui/pages/lab/taskview.ts",
44+
"client/imports/ui/pages/lab/labcreate.ts",
45+
"client/imports/ui/pages/lab/labview.ts",
4946
"client/imports/ui/pages/static/privacy.ts",
5047
"client/imports/ui/pages/static/terms.ts",
51-
"client/routes.ts",
48+
"client/imports/ui/routes/course.guard.course.ts",
49+
"client/imports/ui/routes/course.guard.lab.ts",
50+
"client/imports/ui/routes/course.guard.record.ts",
51+
"client/imports/ui/routes/course.routes.ts",
52+
"client/imports/ui/routes/guard.auth.ts",
53+
"client/imports/ui/routes/routes.ts",
5254
"client/tuxlab.ts",
55+
"server/imports/api/lab.session.d.ts",
5356
"server/imports/course/methods.ts",
57+
"server/imports/course/search.ts",
5458
"server/imports/lab/checkLab.d.ts",
59+
"server/imports/lab/labMethods.ts",
5560
"server/imports/lab/methods.ts",
5661
"typings/globals/es6-shim/index.d.ts",
5762
"typings/globals/meteor/index.d.ts",

0 commit comments

Comments
 (0)