angular - how to create exam time table in ionic

Question

I am trying to create a school exam time table for my app and I couldn't succeed.
I am trying in ionic and could not write a proper code so please help me with the code.

This is my HTML Code and I am facing a lot of trouble in it, in addition to that I could not create an exam time time table for my app.

<ion-header>
<ion-toolbar>
<ion-title>Exam TimeTable Management</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
<ion-button (click)="add()"><ion-icon name="add-outline"></ion-icon>Add</ion-button>
<ion-button (click)="delete()"><ion-icon name="close-outline"></ion-icon>Reset</ion-button><br><br>
<ion-label><strong>Class</strong></ion-label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<ion-select style="margin-right:1000px;">
<ion-select-option value="PreKg">PreKg</ion-select-option>
<ion-select-option value="LKG">LKG</ion-select-option>
<ion-select-option value="UKG">UKG</ion-select-option>
<ion-select-option value="I">I</ion-select-option>
<ion-select-option value="II">II</ion-select-option>
<ion-select-option value="III">III</ion-select-option>
<ion-select-option value="IV">IV</ion-select-option>
<ion-select-option value="V">V</ion-select-option>
<ion-select-option value="VI">VI</ion-select-option>
<ion-select-option value="VII">VII</ion-select-option>
<ion-select-option value="VIII">VIII</ion-select-option>
<ion-select-option value="IX">IX</ion-select-option>
<ion-select-option value="X">X</ion-select-option>
<ion-select-option value="XI">XI</ion-select-option>
<ion-select-option value="XII">XII</ion-select-option>
</ion-select>
<ion-label><strong>Exam Type</strong> </ion-label>
<ion-select style="margin-right:1000px;">
<ion-select-option value="I-Mid Term">I-Mid Term</ion-select-option>
<ion-select-option value="Quarterly Examination">Quarterly Examination</ion-select-option>
<ion-select-option value="II-Mid Term">II-Mid Term</ion-select-option>
<ion-select-option value="Half Yearly Examination">Half Yearly Examination</ion-select-option>
<ion-select-option value="III Mid term">III- Mid Term</ion-select-option>
<ion-select-option value="Annual Examination">Annual Examination</ion-select-option>
</ion-select>
<table>
<tr>
<th>S.No</th>
<th>Date</th>
<th>Subject</th>
<th>Shift</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr *ngFor= " let sum of sums ; let i=index;">
<td>{{i+1}}</td>
<td><ion-input type="Date"></ion-input></td>
<td><ion-input type="text"></ion-input></td>
<td> <ion-select>
<ion-select-option value="Morning">Morning</ion-select-option>
<ion-select-option value="Afternoon">Afternoon</ion-select-option>
</ion-select></td>
<td> <ion-button shape="round" color="secondary" size="small"><ion-icon size="small" slot="icon-only" name="create"></ion-icon></ion-button></td>
<td> <ion-button shape="round" color="danger" size="small">
<ion-icon size="small" slot="icon-only" name="trash"></ion-icon></ion-button></td>
</tr>
</table>
<ion-button (click)="test($event,item)">Submit</ion-button>
</ion-content>

My typescript code: in this type script code, I tried to add details and develop a time table from kindergarden to higher secondary classes, but couldn't do it, In addition to that I need to retrieve the data from firebase and display it in the app.
first, I imported the data from my service page and got all the information, but could not build a proper one.
My request is please provide ideas and code and explain me how to code it

import { Component, OnInit } from '@angular/core';
import {FormGroup,Validators,FormBuilder} from '@angular/forms';
import {ExamtimetableService} from './examtimetable.service';
interface ExamData
{
Classes:string;
ExamType:string;

index:any;
}
@Component({
selector: 'app-examtimetable',
templateUrl: './examtimetable.page.html',
styleUrls: ['./examtimetable.page.scss'],
})
export class ExamtimetablePage implements OnInit {
sums:number[];
n=1;
classList = [];
examData: ExamData;
examForm: FormGroup;
constructor(private firebaseService: ExamtimetableService,
public fb: FormBuilder
) {
this.examData = {} as ExamData;
}
ngOnInit() {
this.examForm = this.fb.group({
Classes: ['', [Validators.required]],
ExamType: ['', [Validators.required]],
Classes1: [''],
ExamType1: [''],
Medium:['',[Validators.required]],
Medium1:[''],
})
this.firebaseService.read_exams().subscribe(data => {
this.classList = data.map(e => {
return {
id: e.payload.doc.id,
isEdit: false,
Classes: e.payload.doc.data()['Classes'],
ExamType: e.payload.doc.data()['ExamType'],
};
})
console.log(this.classList);

});
}
CreateRecord() {
console.log(this.examForm.value);
this.firebaseService.create_exam(this.examForm.value).then(resp => {
this.examForm.reset();
})
.catch(error => {
console.log(error);
});
}

RemoveRecord(rowID) {
this.firebaseService.delete_exam(rowID);
}

EditRecord(record) {
record.isEdit = true;
record.EditClasses = record.Classes;
record.EditExamType = record.ExamType;
}

UpdateRecord(recordRow) {
let record = {};
record['Classes'] = recordRow.EditClasses;
record['ExamType'] = recordRow.EditExamType;
this.firebaseService.update_exam(recordRow.id, record);
recordRow.isEdit = false;
}
add()
{
this.n++;
this.sums=Array(this.n).fill(0).map((i)=>i);
}

}

question from:https://stackoverflow.com/questions/66045616/how-to-create-exam-time-table-in-ionic

Answer 1

Waitting for answers