Skip to content
Snippets Groups Projects
Commit 98299c70 authored by ywb16155's avatar ywb16155
Browse files

commit #35 - styling, refactoring

parent f9ea0689
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 215 additions and 49 deletions
ompp-web/src/app/LecturerComponents/LecturerCreateOMPView/lecturer-create-omp-view.component.css
+ 56
− 0
View file @ 98299c70
#title-row {
margin-top: 1%;
}
#details-row {
}
#name-details {
padding-bottom: 2%;
}
#topic-details {
padding-bottom: 2%;
}
#template-details {
}
#class-details {
padding-bottom: 2%;
}
#question-row {
margin-bottom: 2.5%;
}
#button-row {
}
#add-row {
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2.5%;
}
#template-button {
}
#paper-button {
}
#remove-button {
}
#cancel-button {
padding-top: 5%;
}
ompp-web/src/app/LecturerComponents/LecturerCreateOMPView/lecturer-create-omp-view.component.html
+ 81
− 37
View file @ 98299c70
<app-lecturer-navbar></app-lecturer-navbar>
<div class="container">
<div class="row">
<form #infoForm="ngForm">
<label for="name">Enter a name for this one-minute paper:</label>
<input type="text" id="name" [(ngModel)]="name" name="name">
<label for="topic">Enter a topic for this one-minute paper:</label>
<input id="topic" [(ngModel)]="topic" name="topic">
<label for="class-select">Choose a class:</label>
<select id="class-select" [(ngModel)]="currentClass" name="classes">
<option *ngFor="let ompclass of classes" [ngValue]="ompclass">{{ompclass.classCode}}</option>
</select>
</form>
<div id="title-row" class="row">
<div *ngIf="!isTemplate">
<h4>Create a new one-minute paper</h4>
</div>
<div *ngIf="isTemplate">
<h4>Create a new template</h4>
</div>
</div>
<div *ngIf="!isTemplate" class="row">
<form #templateForm="ngForm">
<label for="template-select">Load a template:</label>
<select id="template-select" [(ngModel)]="currentTemplate" (change)="setTemplate()" name="templates">
<option *ngFor="let template of templates" [ngValue]="template">{{template.paper.name}}</option>
</select>
</form>
<div id="details-row" class="row">
<div class="col-md">
<form #infoForm="ngForm">
<div id="name-details">
<label class="form-row" for="name">Enter a name for this one-minute paper:</label>
<input class="form-row" type="text" id="name" required [(ngModel)]="name" name="nameBox" #nameBox="ngModel" placeholder="Enter a name...">
<div [hidden]="(nameBox.valid || nameBox.pristine) && !isSubmitted" class="is-invalid">
<p style="color: red">*Name required</p>
</div>
</div>
<div id="topic-details">
<label class="form-row" for="topic">Enter a topic for this one-minute paper:</label>
<input class="form-row" id="topic" required [(ngModel)]="topic" name="topicBox" #topicBox="ngModel" placeholder="Enter a topic...">
<div [hidden]="(topicBox.valid || topicBox.pristine) && !isSubmitted" class="is-invalid">
<p style="color: red">*Topic required</p>
</div>
</div>
<div id="anonymous-details">
<form #anonymousForm="ngForm">
<label for="anonymous-box">Would you like responses to be anonymised?: </label>
<input class="" id="anonymous-box" type="checkbox" [(ngModel)]="isAnonymous" name="templateCheckbox" (click)="flipIsAnonymous()">
</form>
</div>
</form>
</div>
<div class="col-md">
<form *ngIf="!isTemplate" #templateForm="ngForm">
<div id="class-details">
<label class="form-row" for="class-select">Choose a class:</label>
<select class="form-row" id="class-select" [(ngModel)]="currentClass" name="classes">
<option *ngFor="let ompclass of classes" [ngValue]="ompclass">{{ompclass.classCode}}</option>
</select>
</div>
<div id="template-details">
<label class="form-row" for="template-select">Load a template:</label>
<select class="form-row" id="template-select" [(ngModel)]="currentTemplate" (change)="setTemplate()" name="templates">
<option *ngFor="let template of templates" [ngValue]="template">{{template.paper.name}}</option>
</select>
</div>
</form>
</div>
<div id="button-row" class="col-md">
<div id="paper-button" class="row" *ngIf="!isTemplate">
<button class="btn btn-primary" type="submit" (click)="createPaper()">Create One-minute Paper</button>
</div>
<div id="template-button" class="row" *ngIf="isTemplate">
<button class="btn btn-primary" type="submit" (click)="createTemplate()">Create Template</button>
</div>
<div id="cancel-button" class="row">
<button class="btn btn-danger" (click)="cancel()">Cancel</button>
</div>
</div>
</div>
<div class="row">
<form #anonymousForm="ngForm">
<label for="anonymous-box">Would you like responses to be anonymised?:</label>
<input id="anonymous-box" type="checkbox" [(ngModel)]="isAnonymous" name="templateCheckbox" (click)="flipIsAnonymous()">
</form>
<div id="add-row" class="row">
<button class="btn btn-primary row" (click)="addQuestion()">Add Question</button>
</div>
<div class="row">
<div id="question-row" class="pre-scrollable row">
<div *ngIf="isSubmitted" class="is-invalid">
<p *ngIf="noQuestions" style="color: red">*A one-minute paper requires questions</p>
<p *ngIf="invalidQuestions" style="color: red">*Text is required for all questions</p>
</div>
<form #questionForm="ngForm">
<div *ngFor="let question of questions; let i = index;" [attr.data-index]="i">
<div class="row">
<label for="{{i}}">Question {{i+1}}</label>
<textarea id="{{i}}" type="text" rows="3" [(ngModel)]="question.questionText" name="{{i+1}}"></textarea>
<div class="col-lg">
<label for="{{i}}">Question {{i+1}}</label>
<textarea id="{{i}}" type="text" rows="3" cols="80" [(ngModel)]="question.questionText" name="{{i+1}}" placeholder="Enter your text..."></textarea>
</div>
<div id="remove-button" class="col-lg">
<button class="btn btn-danger" (click)="removeQuestion(i)">Remove Question</button>
</div>
</div>
<button class="btn-danger" (click)="removeQuestion(i)">Remove Question</button>
</div>
</form>
<button class="btn-primary" (click)="addQuestion()">Add Question</button>
</div>
<div *ngIf="!isTemplate">
<button class="btn-primary" (click)="createPaper()">Create One-minute Paper</button>
</div>
<div *ngIf="isTemplate">
<button class="btn-primary" (click)="createTemplate()">Create Template</button>
</div>
<div>
<button class="btn-danger">Cancel</button>
</div>
</div>
ompp-web/src/app/LecturerComponents/LecturerCreateOMPView/lecturer-create-omp-view.component.ts
+ 73
− 11
View file @ 98299c70
import {Component, OnDestroy, OnInit} from '@angular/core';
import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
import {LecturerDataService} from 'src/app/services/lecturer-data.service';
import {LecturerViewService} from 'src/app/services/lecturer-view.service';
......@@ -24,12 +24,20 @@ export class LecturerCreateOmpViewComponent implements OnInit, OnDestroy {
public isAnonymous: Boolean;
public currentClass: OmpClassDao;
public currentTemplate: MinutePaperWrapperDao;
public nameInvalid: Boolean;
public topicInvalid: Boolean;
public isSubmitted: Boolean;
public noQuestions: Boolean;
public invalidQuestions: Boolean;
private lecturerId: string;
constructor(private lecturerInfoService: LecturerInfoService,
private lecturerDataService: LecturerDataService,
private lecturerViewService: LecturerViewService,
private router: Router) {
private router: Router,
private detector: ChangeDetectorRef) {
}
ngOnInit(): void {
......@@ -37,6 +45,11 @@ export class LecturerCreateOmpViewComponent implements OnInit, OnDestroy {
this.questions = [];
this.classes = [];
this.templates = [];
this.nameInvalid = false;
this.topicInvalid = false;
this.isSubmitted = false;
this.noQuestions = false;
this.invalidQuestions = false;
this.initialiseForms();
}
......@@ -91,12 +104,46 @@ export class LecturerCreateOmpViewComponent implements OnInit, OnDestroy {
this.questions = [];
this.addQuestion();
this.isAnonymous = false;
this.name = 'Enter a name...';
this.topic = 'Enter a topic...';
this.name = '';
this.topic = '';
this.currentClass = this.classes[0];
this.currentTemplate = this.templates[0];
}
private validateForm(): Boolean {
this.isSubmitted = true;
if (this.questions.length === 0) {
this.noQuestions = true;
}
this.invalidQuestions = this.validateQuestions();
this.nameInvalid = this.empty(this.name);
this.topicInvalid = this.empty(this.topic);
this.detector.detectChanges();
return !(this.nameInvalid || this.topicInvalid || this.noQuestions || this.invalidQuestions);
}
private validateQuestions(): Boolean {
let result = false;
this.questions.forEach(q => {
if (this.empty(q.questionText)) {
result = true;
}
});
return result;
}
public empty(text: String): Boolean {
if (text.replace(/\s/g, '').length === 0 || text === '') {
return true;
}
return false;
}
public setTemplate() {
if (this.currentTemplate.paper.paperId !== '-1') {
this.questions = [];
......@@ -111,15 +158,28 @@ export class LecturerCreateOmpViewComponent implements OnInit, OnDestroy {
}
public createPaper(): void {
this.lecturerInfoService.createPaper(this.createWrapperObject()).subscribe();
this.router.navigate(['/ldashboard', { id: this.lecturerId }]);
this.ngOnDestroy();
if (this.validateForm()) {
this.lecturerInfoService.createPaper(this.createWrapperObject()).subscribe();
this.router.navigate(['/ldashboard', {id: this.lecturerId}]);
this.ngOnDestroy();
}
}
public createTemplate(): void {
this.lecturerInfoService.createTemplate(this.createWrapperObject()).subscribe();
this.router.navigate(['/ldashboard', { id: this.lecturerId }]);
this.ngOnDestroy();
if (this.validateForm()) {
this.lecturerInfoService.createTemplate(this.createWrapperObject()).subscribe();
this.router.navigate(['/ldashboard', {id: this.lecturerId}]);
this.ngOnDestroy();
}
}
public cancel() {
const choice = confirm('Are you sure you want to cancel?\n' +
'Returning to the dashboard will result in all current work being lost!');
if (choice) {
this.router.navigate(['/ldashboard']);
this.ngOnDestroy();
}
}
public flipIsAnonymous(): void {
......@@ -127,7 +187,9 @@ export class LecturerCreateOmpViewComponent implements OnInit, OnDestroy {
}
public addQuestion(): void {
this.questions.push(new QuestionDao('0', '0', 'Enter your question text!'));
this.questions.push(new QuestionDao('0', '0', ''));
this.noQuestions = false;
this.invalidQuestions = this.validateQuestions();
}
public removeQuestion(index: number): void {
......
ompp-web/src/app/LecturerComponents/lecturer-root.component.css
+ 4
− 0
View file @ 98299c70
#ldash-container {
margin-top: 1%;
}
ompp-web/src/app/LecturerComponents/lecturer-root.component.html
+ 1
− 1
View file @ 98299c70
<app-lecturer-navbar></app-lecturer-navbar>
<div class="container-fluid">
<div id="ldash-container" class="container-fluid">
<div *ngIf="onDashboard">
<app-lecturer-dashboard></app-lecturer-dashboard>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment