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
new file mode 100644
index 0000000000000000000000000000000000000000..d95f451aad7699252aa053b2ac1cac802b4af0b7
--- /dev/null
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html
@@ -0,0 +1,131 @@
+<app-header></app-header>
+<div class="examcycle">
+ <div class="container">
+ <div class="body-header flex justify-between items-center mb-4 ">
+ <h2 style="font-weight: 500">Edit</h2>
+ <div class="button-group ">
+ <button class="btn-1">Cancel</button>
+ <button class="btn-2">Save</button>
+ </div>
+ </div>
+
+ <div class="body">
+ <form class="examcycleform">
+ <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-label>Exam cycle</mat-label>
+ <mat-select>
+ <mat-option value="one">First option</mat-option>
+ <mat-option value="two">Second option</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="flex flex-column">
+ <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-option value="one">First option</mat-option>
+ <mat-option value="two">Second option</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ <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">Start date</h4>
+ <mat-form-field appearance="outline" style="width:16.5rem">
+ <mat-label>Choose a date</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+ </div>
+ <div class="flex flex-column">
+ <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">
+ <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
+ <mat-datepicker #picker1></mat-datepicker>
+ </mat-form-field>
+ </div>
+ </div>
+ <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 name</h4>
+ <mat-form-field appearance="outline" style="width:16.5rem">
+ <mat-label>Exam name</mat-label>
+ <input matInput placeholder="Exam name">
+ </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">
+ <mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
+ <mat-datepicker #picker3></mat-datepicker>
+ </mat-form-field>
+ </div>
+ <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">
+ <mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
+ </mat-form-field>
+ </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>
+ </mat-form-field>
+ </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>
+ </div>
+ </div>
+ <div class="flex flex-row " style="margin-top:2rem">
+ <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>
+ </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>
+ </div>
+ </div>
+
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.scss b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61a9f7924ba7ff6148f10b8acd3acbe5710b8c15
--- /dev/null
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.scss
@@ -0,0 +1,102 @@
+.examcycle{
+ min-height: 94vh;
+ background-color:#F0F3F4;
+ width: 100%;
+}
+
+.container{
+ margin-left: 20rem;
+ margin-right: 20rem;
+}
+
+.body-header{
+ display:flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+
+}
+.button-group {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ align-items: center;
+}
+
+
+.btn-1{
+ color: #045DAD;
+ width: 6rem;
+ padding: 12px;
+ border-width: 16px;
+ border-radius: 4px;
+ font-weight: 600;
+ border: 1.5px solid rgba(4,93,173, 1);
+ opacity: 1;
+
+}
+.btn-2{
+ background-color: #045DAD;
+ color:#fff;
+ width: 6rem;
+ padding:12px;
+ border-radius: 4px;
+ font-weight: 600;
+ border: 1.5px solid rgba(4,93,173, 1);
+ opacity: 1;
+
+}
+.body{
+ width:100%;
+ background-color: #fff;
+ height: fit-content;
+ padding-bottom: 2rem;
+}
+.examcycleform{
+ display: flex;
+ margin-left: 2rem;
+}
+.btn-3{
+ background-color: #045DAD;
+ color:#fff;
+ width: 6rem;
+ padding:12px;
+ border-radius: 4px;
+ font-weight: 600;
+ border: 1.5px solid rgba(4,93,173, 1);
+ opacity: 1;
+
+}
+
+.card1 {
+ height: 9rem;
+ width:17rem;
+ border: thin solid rgb(185, 181, 181);
+ border-radius: 4px;
+
+}
+.time{
+ font-weight:100;
+ font-size: small;
+ margin-left: 4px;
+ margin-top:3px
+}
+::ng-deep .custom-timepicker:focus {
+ appearance: outline;
+ outline: none; /* This removes the default blue outline on some browsers */
+ border-color: rgba(4,93,173, 1);
+ border-width: 12px ;
+}
+.custom-timepicker:focus {
+ outline:none;
+
+}
+.custom-timepicker{
+ font-size: medium;
+}
+
+
+
+
+
+
diff --git a/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.spec.ts b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52f049521cc3f06889f1e304be327ed09f80e2b8
--- /dev/null
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExamCycleComponent } from './exam-cycle.component';
+
+describe('ExamCycleComponent', () => {
+ let component: ExamCycleComponent;
+ let fixture: ComponentFixture<ExamCycleComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ExamCycleComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ExamCycleComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..9efd71384eb36ab1a8115c416f2a136f21c6259e
--- /dev/null
+++ b/src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+ selector: 'app-exam-cycle',
+ templateUrl: './exam-cycle.component.html',
+ styleUrls: ['./exam-cycle.component.scss']
+})
+export class ExamCycleComponent {
+
+
+}
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 476618ff51bdae97f1d44c9fc3b3c50711b10d77..75401554ec30031604c50d818d7b9c4186a88b54 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
@@ -3,6 +3,7 @@ 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 = [
@@ -10,7 +11,7 @@ const routes: Routes = [
path: 'manage-exams', component: ExamsTableComponent, pathMatch: 'full',
},
{
- path: 'header', component: HeaderComponent, pathMatch: 'full',
+ path: 'exam-cycle', component: ExamCycleComponent, pathMatch: 'full',
},
];
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 565f29720dd4ee4636fac57b82c1e4de4eb25d3e..b1414dfcaf88f2b2f6331e163a0e8c0f3279416e 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
@@ -4,15 +4,26 @@ import { CommonModule } from '@angular/common';
import { ManageExamsModuleRoutingModule } from './manage-exams-module-routing.module';
import { ExamsTableComponent } from './components/exams-table/exams-table.component';
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';
+
+
+
@NgModule({
declarations: [
- ExamsTableComponent
+ ExamsTableComponent,
+ ExamCycleComponent
],
imports: [
CommonModule,
ManageExamsModuleRoutingModule,
- SharedModule
+ SharedModule,
+ MaterialModule,
+ MatTimepickerModule,
+
+
]
})
diff --git a/src/app/modules/shared/components/header/header.component.html b/src/app/modules/shared/components/header/header.component.html
index 2a25263f6fa153d3daa0ef6281b9e2f14b33084d..8ab65b49b1057cf57fc866a7dffc504d0fedfeed 100644
--- a/src/app/modules/shared/components/header/header.component.html
+++ b/src/app/modules/shared/components/header/header.component.html
@@ -1,10 +1,11 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
- <div class="header-container">
- <div>
- <img src="../../assets/images/sunbird_logo.png" alt="UPSMF logo">
- </div>
- <div>
- <button>GJ</button>
- </div>
+
+<div class="header-container bg-white">
+ <div class="flex flex-row justify-content-between" style="justify-content: space-between;" >
+ <div class="flex flex-column">
+ <img style="width: 17rem;" src="../../assets/images/sunbird_logo.png" alt="UPSMF logo">
</div>
- </nav>
\ No newline at end of file
+ <div class="flex flex-column">
+ <button>GJ</button>
+ </div>
+ </div>
+</div>
diff --git a/src/app/modules/shared/components/header/header.component.scss b/src/app/modules/shared/components/header/header.component.scss
index 5f7da6b87fb9bb86438e093886e43c4818f7eb57..a78a2e9975947a4956d173d3b8c087d45fc52d13 100644
--- a/src/app/modules/shared/components/header/header.component.scss
+++ b/src/app/modules/shared/components/header/header.component.scss
@@ -1,18 +1,14 @@
-.header-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-img{
+.header-container{
margin-left: 12rem;
- width: 17rem;
+ margin-right: 12rem;
}
+
button{
-
- margin-left: 72rem;
background-color: forestgreen;
border-radius: 8px;
border: none;
color: white;
+ height: 26px;
+ margin-top: 1rem;
}
\ No newline at end of file
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
index d8960aea0baf6f6b16a5521c6c53a1471ae0d87d..cff0f3fcd362461b6115cab11de15b2bc0e23b96 100644
--- a/src/app/modules/shared/shared.module.ts
+++ b/src/app/modules/shared/shared.module.ts
@@ -9,6 +9,7 @@ import {MaterialModule} from '../../../material/material.module';
import { HeaderComponent } from './components/header/header.component';
+
@NgModule({
declarations: [
SharedTableComponent,
@@ -17,7 +18,7 @@ import { HeaderComponent } from './components/header/header.component';
imports: [
CommonModule,
//TableModule,
- MaterialModule
+ MaterialModule,
],
exports :
[