working on view

learnlinux · Aug 11, 2017 · cbe990b · cbe990b
1 parent 747d37a
commit cbe990b
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 15 deletions.
diff --git a/client/imports/course/course_view.component.html b/client/imports/course/course_view.component.html
@@ -20,7 +20,44 @@
       </div>
     </div>
 
+    <!-- Description Block -->
+
     <!-- Actions Block -->
+    <div class="course_actions" fxLayout="row" *ngIf="role >= Role.course_admin">
+      <div class="left"  fxLayout="row" fxLayoutAlign="start center">
+        <div class="view">
+          <span style="margin-right:5px;"><md-icon>{{ getIcon_content((course | async).permissions.content) }}</md-icon></span>
+          <md-select placeholder="View Permissions" [disabled]="!edit_mode" [ngModel]="(course | async)?.permissions.content" (ngModelChange)="update_content($event)">
+             <md-option *ngFor="let content of content_options" [value]="content?.value">{{ content.name }}</md-option>
+          </md-select>
+        </div>
+        <div class="enroll" style="margin-left: 5px;">
+          <span style="margin-right:5px;"><md-icon>{{ getIcon_enroll((course | async).permissions.enroll) }}</md-icon></span>
+          <md-select placeholder="Enroll Permissions" [disabled]="!edit_mode" [ngModel]="(course | async)?.permissions.enroll" (ngModelChange)="update_enroll($event)">
+             <md-option *ngFor="let enroll of enroll_options" [value]="enroll?.value">{{ enroll.name }}</md-option>
+          </md-select>
+        </div>
+      </div>
+
+      <div class="right" fxLayout="row" fxLayoutAlign="end center">
+        <ng-container *ngIf="!edit_mode">
+          <button md-button (click)="edit_mode=true">
+            <md-icon>mode_edit</md-icon>
+            Edit
+          </button>
+        </ng-container>
+        <ng-container *ngIf="edit_mode">
+          <button md-button (click)="addUser()">
+            <md-icon>person_add</md-icon>
+            Add Instructor
+          </button>
+          <button md-button (click)="cancel()">
+            <md-icon>clear</md-icon>
+            Cancel
+          </button>
+        </ng-container>
+      </div>
+    </div>
 
   </md-card>
 

diff --git a/client/imports/course/course_view.component.scss b/client/imports/course/course_view.component.scss
@@ -8,14 +8,14 @@ div.course_view{
   margin: 30px auto;
   padding: 45px;
 
-
    h2{
      font-weight: 300;
      font-size: 30px;
      margin-left: 10px;
    }
 
    md-card.info {
+
      div.title{
        font-size: 21px;
        font-weight: 400;
@@ -41,6 +41,15 @@ div.course_view{
         }
       }
      }
+
+     div.course_actions {
+       margin-top: 35px;
+       padding: 3px;
+
+       & > div {
+         width: 50%;
+       }
+     }
    }
 
    section.labs{

diff --git a/client/imports/course/course_view.component.ts b/client/imports/course/course_view.component.ts
@@ -21,7 +21,7 @@
 	import { Users } from '../../../both/collections/user.collection';
 
   import { CourseRecord } from '../../../both/models/course_record.model';
-	import { Course } from '../../../both/models/course.model';
+	import { Course, ContentPermissions, EnrollPermissions } from '../../../both/models/course.model';
 	import { Lab } from '../../../both/models/lab.model';
 
 	import { CourseRecords } from '../../../both/collections/course_record.collection';
@@ -57,7 +57,6 @@
 		}
 
 		ngOnInit(){
-
 			// Get Role
 			this.route.params
 				.map(params => params['course_id'])
@@ -119,8 +118,80 @@
 			});
     }
 
-		/* Sortable */
+		/* Course Editable */
+		private edit_mode : boolean = false;
+
+		private cancel(){
+			this.edit_mode = false;
+		}
+
+		private addUser(){
+
+		}
+
+		private content_options = [
+			{
+				name : 'Anyone',
+				value : ContentPermissions.Any,
+				icon : 'public'
+			},
+			{
+				name : 'Authenticated Users',
+				value : ContentPermissions.None,
+				icon : 'verified_user'
+			},
+			{
+				name : 'No One',
+				value : ContentPermissions.None,
+				icon : 'block'
+			}
+		];
+		private enroll_options = [
+			{
+				name : 'Logged In Users',
+				value : EnrollPermissions.Any,
+				icon : 'verified_user'
+			},
+			{
+				name : 'No One',
+				value : EnrollPermissions.None,
+				icon : 'block'
+			}
+		];
+
+		private getIcon_content(content_value){
+			return _.find(this.content_options, (opt) => {
+				return opt.value === content_value;
+			}).icon;
+		}
 
+		private getIcon_enroll(enroll_value){
+			return _.find(this.enroll_options, (opt) => {
+				return opt.value === enroll_value;
+			}).icon;
+		}
+
+		private update_content(content_value){
+			Courses.update({
+				_id : this.route.snapshot.params['course_id']
+			}, {
+				$set: {
+					"permissions.content" : content_value
+				}
+			});
+		}
+
+		private update_enroll(enroll_value){
+			Courses.update({
+				_id : this.route.snapshot.params['course_id']
+			}, {
+				$set: {
+					"permissions.enroll" : enroll_value
+				}
+			});
+		}
+
+		/* Sortable */
 		private sortableOptions : SortablejsOptions = {
 			dataIdAttr: "labId",
 			store: {

diff --git a/client/imports/course/course_view_adduser.dialog.html b/client/imports/course/course_view_adduser.dialog.html
diff --git a/client/imports/course/course_view_adduser.dialog.scss b/client/imports/course/course_view_adduser.dialog.scss
diff --git a/client/imports/course/course_view_adduser.dialog.ts b/client/imports/course/course_view_adduser.dialog.ts
diff --git a/client/imports/course/course_view_lab.component.html b/client/imports/course/course_view_lab.component.html
@@ -20,28 +20,24 @@
     <div class="set_status">
       <ng-container *ngIf="role >= Role.course_admin">
         <span style="margin-right:5px;"><md-icon>{{ getIcon(lab.status) }}</md-icon></span>
-        <md-select placeholder="Visibility" [disabled]="!edit_mode" [(ngModel)]="lab.status">
+        <md-select placeholder="Begin Permissions" [disabled]="!edit_mode" [(ngModel)]="lab.status">
            <md-option *ngFor="let status of status_options" [value]="status.value">{{ status.name }}</md-option>
         </md-select>
       </ng-container>
     </div>
 
     <!-- Action Buttons -->
     <div *ngIf="!edit_mode">
-      <button *ngIf="role >= Role.course_admin" md-button (click)="edit_mode=true">
-        <md-icon>edit_mode</md-icon>
-        Edit
-      </button>
       <button *ngIf="user" md-button routerLink="./labs/{{lab._id}}">
         <md-icon>assignment</md-icon>
         Start
       </button>
+      <button *ngIf="role >= Role.course_admin" md-button (click)="edit_mode=true">
+        <md-icon>edit_mode</md-icon>
+        Edit
+      </button>
     </div>
     <div *ngIf="edit_mode">
-      <button md-button (click)="cancel()">
-        <md-icon>clear</md-icon>
-        Cancel
-      </button>
       <button md-button (click)="delete()">
         <md-icon>delete</md-icon>
         Delete
@@ -50,6 +46,10 @@
         <md-icon>save</md-icon>
         Save
       </button>
+      <button md-button (click)="cancel()">
+        <md-icon>clear</md-icon>
+        Cancel
+      </button>
     </div>
   </md-card-actions>
 </md-card>
diff --git a/client/imports/course/course_view_lab.component.ts b/client/imports/course/course_view_lab.component.ts
@@ -66,7 +66,7 @@
 			{
 				name : 'Hidden',
 				value : LabStatus.hidden,
-				icon : 'lock'
+				icon : 'lock_outline'
 			},
 			{
 				name : 'Open',
@@ -76,7 +76,7 @@
 			{
 				name : 'Closed',
 				value : LabStatus.closed,
-				icon : 'lock_outline'
+				icon : 'lock'
 			}
 		];