diff --git a/package.json b/package.json
index 38f947c44d1c4edc9f871d5ceb7ba379178708ff..b34e560e423cd8e25ea442a99dd412ad7d75e036 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@angular/platform-browser-dynamic": "^15.1.0",
"@angular/router": "^15.1.0",
"basscss": "^8.1.0",
+ "mat-timepicker": "^5.1.8",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627f8df364102ce4ede71c8bd5f3660e1d8..089e52635bb9bdc9f210d42dbb56bf46ae3dac88 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,14 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { ExamCycleComponent } from './modules/manage-exams-module/components/exam-cycle/exam-cycle.component';
+import { ExamsTableComponent } from './modules/manage-exams-module/components/exams-table/exams-table.component';
-const routes: Routes = [];
+const routes: Routes = [
+
+ {
+ path: '', component: ExamsTableComponent, pathMatch: 'full',
+ },
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html
index ae06535767290fe2cc543c14b2620a4b2deedf53..9893af6add9c6617f2c31df1d46cf6e509eaac55 100644
--- a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html
@@ -10,14 +10,14 @@
</div>
<div class="body">
- <form class="examcycleform">
+ <form [formGroup]="createExamCycle" class="examcycleform " (ngSubmit)="onSubmit()">
<div class="flex flex-column">
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam cycle</h4>
- <mat-form-field appearance="outline" style="width:16.5rem">
+ <mat-form-field appearance="outline" style="width:16.5rem" >
<mat-label>Exam cycle</mat-label>
- <mat-select>
+ <mat-select formControlName="examcycle">
<mat-option value="one">First option</mat-option>
<mat-option value="two">Second option</mat-option>
</mat-select>
@@ -27,7 +27,7 @@
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Course name</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Course name</mat-label>
- <mat-select>
+ <mat-select formControlName="coursename">
<mat-option value="one">First option</mat-option>
<mat-option value="two">Second option</mat-option>
</mat-select>
@@ -39,7 +39,7 @@
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Start date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
- <input matInput [matDatepicker]="picker">
+ <input matInput [matDatepicker]="picker" formControlName="startdate" [min]="pickerMinDate">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
@@ -48,7 +48,7 @@
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">End date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
- <input matInput [matDatepicker]="picker1">
+ <input matInput [matDatepicker]="picker1" formControlName="enddate"[min]="pickerMinDate">
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
@@ -59,71 +59,78 @@
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam name</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Exam name</mat-label>
- <input matInput placeholder="Exam name">
+ <input matInput placeholder="Exam name" formControlName="examname">
</mat-form-field>
</div>
<div class="flex flex-column">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
- <input matInput [matDatepicker]="picker3">
+ <input matInput [matDatepicker]="picker3" formControlName="examdate" [min]="pickerMinDate">
<mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
</mat-form-field>
</div>
- <!-- <div class="flex flex-column ">
+ <div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Start time</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>hh:mm</mat-label>
- <input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker" [strict]="false" id="timepicker-example" mode="12h">
+ <input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker" [strict]="false" id="timepicker-example" mode="12h" formControlName="starttime">
<mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
</mat-form-field>
- </div> -->
- <!-- <div class="flex flex-column">
+ </div>
+ <div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">End time</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>hh:mm</mat-label>
- <input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker" [strict]="false" id="timepicker-example" mode="12h">
- <mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
+ <input class="custom-timepicker"style="border:none;"matTimepicker #t1="matTimepicker" [strict]="false" id="timepicker-example" mode="12h" formControlName="endtime" (mouseleave)="endTimeValidator()">
+ <mat-icon matSuffix (click)="t1.showDialog()" (mouseleave)="endTimeValidator()">access_time</mat-icon>
</mat-form-field>
- </div> -->
+ <div class="sb-color-red pt-0" style="color:red" tabindex="0" *ngIf="createExamCycle.controls['endtime'].touched && createExamCycle.controls['endtime'].errors">Enter a valid End time</div>
+
+ </div>
</div>
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column">
- <button class="btn-3" style="margin-top:1rem">Add Exam</button>
+ <button class="btn-3 btn-primary" type="submit"style="margin-top:1rem" (click)="addExamCycle()">Add Exam</button>
</div>
</div>
- <div class="flex flex-row " style="margin-top:2rem">
+ <div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column">
- <div class="card1">
- <div class="flex flex-row">
- <div class="flex flex-column">
- <h3 style="font-weight:500;text-align:start;margin-left:2rem">Exam 1</h3>
- <mat-icon style="margin-left:15rem;margin-top: -48px">close</mat-icon>
+ <mat-chip-grid #chipGrid aria-label="Exam" style="margin-top: 20px;">
+ <mat-chip-row *ngFor="let exam of exams" style="height: 9rem;width: 16rem;border: thin solid rgb(185, 181, 181);border-radius: 4px;background-color:#fff;"
+ (removed)="remove(exam)">
+ <h4>{{exam.examname}}</h4>
+ <p style="font-size: 14px;">Exam date: {{ exam.examdate | date:'dd-MM-yyyy' }}</p>
+ <div style="border-color:grey;background-color:#F0F3F4;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159);width: 12rem;">
+ <div class="time">Exam time: {{getFormattedTime(exam.starttime ) }} - {{getFormattedTime(exam.endtime)}}</div>
</div>
- </div>
- <h5 style="font-weight:300;text-align:start;margin-left:2rem">Exam date: dd/mm/yyyy</h5>
- <div style="border-color:grey;background-color:#F0F3F4;margin-right: 2rem;margin-left: 2rem;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159)">
- <div class="time">Exam time : 10AM-12PM</div>
- </div>
- </div>
- </div>
- <div class="flex flex-column" style="margin-left: 2rem">
- <div class="card1">
- <div class="flex flex-row">
- <div class="flex flex-column">
- <h3 style="font-weight:500;text-align:start;margin-left:2rem">Exam 2</h3>
- <mat-icon style="margin-left:15rem;margin-top: -48px">close</mat-icon>
- </div>
- </div>
- <h5 style="font-weight:300;text-align:start;margin-left:2rem">Exam date: dd/mm/yyyy</h5>
- <div style="border-color:grey;background-color:#F0F3F4;margin-right: 2rem;margin-left: 2rem;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159)">
- <div class="time">Exam time : 10AM-12PM</div>
- </div>
- </div>
+ <button matChipRemove [attr.aria-label]="'remove ' + exam.name" style="padding-bottom: 102px;">
+ <mat-icon>close</mat-icon>
+ </button>
+ </mat-chip-row>
+ </mat-chip-grid>
</div>
</div>
-
+
+
+
+ <!-- <div class="flex flex-row">
+ <mat-chip-grid #chipGrid aria-label="Exam" style="margin: 20px;">
+ <mat-chip-row *ngFor="let exam of exams" style="height: 9rem;width: 16rem;border: thin solid rgb(185, 181, 181);border-radius: 4px;background-color:#fff;"
+ (removed)="remove(exam)">
+ <h4>{{exam.examname}}</h4>
+ <p style="font-size: 14px;">Exam date: {{ exam.examdate | date:'dd-MM-yyyy' }}</p>
+ <div style="border-color:grey;background-color:#F0F3F4;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159);width: 12rem;">
+ <div class="time">Exam time: {{getFormattedTime(exam.starttime ) }} - {{getFormattedTime(exam.endtime)}}</div>
+ </div>
+ <button matChipRemove [attr.aria-label]="'remove ' + exam.name" style="padding-bottom: 102px;">
+ <mat-icon>close</mat-icon>
+ </button>
+ </mat-chip-row>
+ </mat-chip-grid>
+ </div> -->
+
</div>
</form>
</div>
diff --git a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts
index 9efd71384eb36ab1a8115c416f2a136f21c6259e..a2c64d9570c30f17196e729060273b058209b64d 100644
--- a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts
@@ -1,4 +1,16 @@
-import { Component } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { Component, OnInit, inject} from '@angular/core';
+import { FormGroup ,AbstractControl, FormControl} from '@angular/forms';
+
+
+
+
+export interface Exam {
+ examname: string;
+ examdate:string;
+ starttime:string;
+ endtime:string
+}
@Component({
@@ -6,7 +18,91 @@ import { Component } from '@angular/core';
templateUrl: './exam-cycle.component.html',
styleUrls: ['./exam-cycle.component.scss']
})
-export class ExamCycleComponent {
+export class ExamCycleComponent implements OnInit{
+ pickerMinDate = new Date(new Date().setHours(0, 0, 0, 0));
+ createExamCycle:FormGroup;
+
+ ngOnInit(){
+ this.initForm();
+}
+
+initForm(){
+ this.createExamCycle = new FormGroup({
+ 'examcycle':new FormControl(),
+ 'coursename':new FormControl(),
+ 'startdate':new FormControl(),
+ 'enddate':new FormControl(),
+ 'examname':new FormControl(),
+ 'examdate':new FormControl(),
+ 'starttime':new FormControl(),
+ 'endtime':new FormControl(),
+ });
+}
+
+
+addExamCycle() {
+ const examCycleValue = this.createExamCycle.value;
+ this.exams.push(examCycleValue);
+ this.createExamCycle.reset();
+}
+ onSubmit(){
+ console.log(this.createExamCycle)
+}
+
+
+exams: Exam[]=[]
+announcer = inject(LiveAnnouncer);
+
+remove(exams:Exam): void{
+ const index = this.exams.indexOf(exams);
+
+ if(index >= 0){
+ this.exams.splice(index, 1);
+
+ this.announcer.announce('Removed ${exam}');
+ }
+
+}
+getFormattedTime(timestamp: string): string {
+ const date = new Date(timestamp);
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ const ampm = hours >= 12 ? 'PM' : 'AM';
+ const twelveHourFormat = (hours % 12) || 12;
+
+ return `${twelveHourFormat}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+}
+
+endTimeValidator() {
+ console.log("Working");
+
+ const starttime = this.createExamCycle.controls['starttime'].value;
+ const endtime = this.createExamCycle.controls['endtime'].value;
+
+ const startTime = new Date(starttime);
+ startTime.setHours(starttime.getHours(), starttime.getMinutes());
+
+ const endTime = new Date(endtime);
+ endTime.setHours(endtime.getHours(), endtime.getMinutes());
+ console.log(endtime.getHours());
+ console.log(starttime.getHours());
+
+
+ if (endTime <= startTime) {
+ this.createExamCycle.controls['endtime'].setErrors({ endTimeInvalid: true });
+ } else {
+ this.createExamCycle.controls['endtime'].setErrors(null);
+ }
+
}
+
+}
+
+
+
+
+
+
+
diff --git a/src/app/modules/manage-exams-module/manage-exams-module-routing.module.ts b/src/app/modules/manage-exams-module/manage-exams-module-routing.module.ts
index 75401554ec30031604c50d818d7b9c4186a88b54..2681f9698c1a0340b2d37f9231ebc9dab257439e 100644
--- a/src/app/modules/manage-exams-module/manage-exams-module-routing.module.ts
+++ b/src/app/modules/manage-exams-module/manage-exams-module-routing.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExamsTableComponent } from './components/exams-table/exams-table.component';
-import { HeaderComponent } from '../shared/components/header/header.component';
import { ExamCycleComponent } from './components/exam-cycle/exam-cycle.component';
const routes: Routes = [
diff --git a/src/app/modules/manage-exams-module/manage-exams-module.module.ts b/src/app/modules/manage-exams-module/manage-exams-module.module.ts
index bd5bdfa98c508dc7f27ba4de3a84dde651273c0a..332108d8e2309b2a9a5b409454dbbd434eabe6f8 100644
--- a/src/app/modules/manage-exams-module/manage-exams-module.module.ts
+++ b/src/app/modules/manage-exams-module/manage-exams-module.module.ts
@@ -6,7 +6,8 @@ import { ExamsTableComponent } from './components/exams-table/exams-table.compon
import { SharedModule } from '../shared/shared.module';
import { ExamCycleComponent } from './components/exam-cycle/exam-cycle.component';
import { MaterialModule } from 'src/material/material.module';
-//import { MatTimepickerModule } from 'mat-timepicker';
+import { MatTimepickerModule } from 'mat-timepicker';
+import { ReactiveFormsModule } from '@angular/forms';
@@ -21,10 +22,11 @@ import { MaterialModule } from 'src/material/material.module';
ManageExamsModuleRoutingModule,
SharedModule,
MaterialModule,
- // MatTimepickerModule,
-
-
-
+ MatTimepickerModule,
+ ReactiveFormsModule
+ ],
+ exports:[
+ ExamsTableComponent
]
})
export class ManageExamsModuleModule { }