IDs replaced with names to view at the frontend

src/Pages/CreateClassroom.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import ClassTableComponent from './Components/ClassTableComponent';
-import {get_class,} from './Components/API'
+import {get_class,get_school} from './Components/API'
 
 class CreateSchool extends React.Component {
 
@@ -12,6 +12,12 @@ class CreateSchool extends React.Component {
       .then(res => {
         const classes = res.data;
         this.setState({ClassesPresent:classes})
+        get_school(schoolid)
+        .then(res => {
+          const school = res.data;
+          this.setState({schoolname:school.name})
+          console.log("School name"+this.state.schoolname)
+        })
       })
     console.log(this.state.ClassesPresent)
   }
@@ -28,7 +34,8 @@ class CreateSchool extends React.Component {
     {
       ClassesPresent:[],
       NewClass:this.initialClassDetail,
-      deleteclassid:''
+      deleteclassid:'',
+      schoolname:''
     }
   }
 
@@ -59,7 +66,7 @@ class CreateSchool extends React.Component {
 
           <div className="row h-100 justify-content-center m-3 align-items-center">
             <div className="col-sm-12"> 
-            <p style={{fontSize:20}}>Classes present in <strong>School {SchoolId}</strong> are: </p>
+            <p style={{fontSize:20}}>Classes present in <strong>School {this.state.schoolname}</strong> are: </p>
               <em>Click on a class to explore it.</em>
               <br/>
               <br/>

src/Pages/CreateSingleClassroomNavbar.js

@@ -74,12 +74,12 @@ class CreateSingleClassroomNavbar extends React.Component {
           <div className="col-sm-12">
 
             <p style={{fontSize:20}}>
-            Create a Classroom in School 
+            Create a Classroom in School &nbsp;
 
                 <select onChange={(event)=>this.myfun(event.target.value)}>
 
                 {this.state.SchoolsPresent.map((header,index)=>{
-                return(<option key={index}>{header.id}</option>);
+                return(<option key={index} value={header.id}>{header.name}</option>);
                       })}
                 </select>
 

src/Pages/CreateSingleStudent.js

@@ -109,20 +109,20 @@ class CreateSingleStudent extends React.Component{
         return(
             <div className="justify-content-center align-items-center" style={{"color":"black", "fontSize":20}}>
 
-                Class 
+                Class &nbsp; 
 
                 <select onChange={(event)=>this.myfunclass(event.target.value)}>
                 <option defaultChecked="">Please Select</option>
                     {this.state.classesPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index}value={header.id}>{header.className}</option>);
                         })}
                 </select> 
 
-                of School 
+                &nbsp; of School &nbsp; 
                 <select onChange={(event)=>this.myfun(event.target.value)}>
                 <option defaultChecked="">Please Select</option>
                     {this.state.schoolsPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index}value={header.id}>{header.name}</option>);
                         })}
                 </select>
                 <div className="col-sm-12">

src/Pages/ViewAllClasses.js

@@ -78,16 +78,16 @@ class ViewAllClasses extends React.Component {
           <div className="row h-100 justify-content-center m-3 align-items-center">
             <div className="col-sm-12"> 
               <p style={{fontSize:20}}>
-                Classes present in School 
+                Classes present in School &nbsp; 
 
                 <select onChange={(event)=>this.myfun(event.target.value)}>
 
                 {this.state.SchoolsPresent.map((header,index)=>{
-                return(<option key={index}>{header.id}</option>);
+                return(<option key={index} value={header.id}>{header.name}</option>);
                       })}
                 </select>
 
-                are: 
+                &nbsp; are: 
               </p>
               <em>Click on a classto explore it.</em>
               <br/>

src/Pages/ViewClass.js

@@ -3,9 +3,37 @@ import React from 'react';
 import ViewSubject from './ViewSubject';
 
 import ViewAllStudent from './ViewAllStudent';
+import {get_class,get_school} from './Components/API'
 
 class ViewClass extends React.Component{
 
+    componentDidMount()
+  {
+    const schoolid = this.props.match.params.SchoolId;
+    const classId = this.props.match.params.ClassId;
+    get_class(schoolid,classId)
+      .then(res => {
+        const classes = res.data;
+        this.setState({classname:classes.className})
+        get_school(schoolid)
+        .then(res => {
+          const school = res.data;
+          this.setState({schoolname:school.name})
+          console.log("School name"+this.state.schoolname)
+        })
+      })
+    console.log(this.state.ClassesPresent)
+  }
+  constructor(props)
+  {
+    super(props);
+
+    this.state =
+    {
+      schoolname:'',
+      classname:''
+    }
+  }
     render()
     {
         const SchoolId = this.props.match.params.SchoolId;
@@ -14,7 +42,7 @@ class ViewClass extends React.Component{
         return(
             <div className="justify-content-center align-items-center" style={{"color":"black", "fontSize":20}}>
 
-                Class {ClassId} of School {SchoolId}
+                Class <strong>{this.state.classname}</strong> of School <strong>{this.state.schoolname}</strong>
 
                 <ViewSubject SchoolId ={SchoolId} ClassId = {ClassId}/>
 

src/Pages/ViewSingleClass.js

@@ -89,26 +89,28 @@ class ViewSingleClass extends React.Component{
         return(
             <div className="justify-content-center align-items-center" style={{"color":"black", "fontSize":20}}>
 
-                Class 
+                Class &nbsp;  
 
                 <select onChange={(event)=>this.myfunclass(event.target.value)}>
                 <option defaultChecked="">Please Select</option>
                     {this.state.classesPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index} value={header.id}>{header.className}</option>);
                         })}
                 </select> 
 
-                of School 
+                &nbsp; of School &nbsp; 
                 <select onChange={(event)=>this.myfun(event.target.value)}>
                 <option defaultChecked="">Please Select</option>
                     {this.state.schoolsPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index}value={header.id}>{header.name}</option>);
                         })}
                 </select>
 
 
                 <div className="row h-100 justify-content-center align-items-center" style={{fontSize:12}}>
                     <div> 
+                        <br />
+                        <br />
                         <p style={{fontSize:20}}>Subjects taught are :</p>
                         <div style={{background:'white'}}>
                                 <SubjectTableComponent data={this.state.subjectsTaught} headers={["Subject Id","Subject Name","Description"]}/>

src/Pages/ViewStudent.js

@@ -20,8 +20,9 @@ class ViewStudent extends React.Component {
     .then(res => {
       const semesters = res.data;
       this.setState({SemestersPresent:semesters})
+      console.log(schoolId+" "+classId+" "+this.state.SemestersPresent);
     })
-
+    
 
 
   }
@@ -38,6 +39,8 @@ class ViewStudent extends React.Component {
       marks:[],
       semesterselected :'',
       examselected :'',
+      semestername :'',
+      examname :''
 
     }
     this.myfun = this.myfun.bind(this);
@@ -47,8 +50,15 @@ class ViewStudent extends React.Component {
 myfun(value){
     const schoolId = this.props.match.params.SchoolId;
     const classId = this.props.match.params.ClassId;
-    this.setState({semesterselected:value})
-    this.setState({examselected:''})
+
+    get_semester(schoolId,value)
+    .then(res => {
+      const semester = res.data;
+      this.setState({semestername:semester.name})
+      this.setState({semesterselected:value})
+      this.setState({examselected:''})
+    })
+
     console.log("Class Id"+classId)
   get_exam(schoolId,value,classId)
     .then(res => {
@@ -61,6 +71,11 @@ myfunexam(value)
   this.setState({examselected:value});
   const schoolId = this.props.match.params.SchoolId;
   console.log("School Id "+schoolId+' semester '+this.state.semesterselected+' exam: '+value +' student: '+this.props.match.params.StudentId)
+  get_exam(schoolId,this.state.semesterselected,this.props.match.params.ClassId,value)
+    .then(res => {
+      const exams = res.data;
+      this.setState({examname:exams.name})
+    })
   get_marks(schoolId,this.state.semesterselected,value,this.props.match.params.StudentId)
     .then(res => {
       const mark = res.data;
@@ -89,7 +104,7 @@ myfunexam(value)
               <select id="semester" name="semester" onChange={(event)=>this.myfun(event.target.value)}>
               <option defaultChecked="">Please Select</option>
               {this.state.SemestersPresent.map((header,index)=>{
-              return(<option key={index}>{header.id}</option>);
+              return(<option key={index} value={header.id}>{header.name}</option>);
                     })}
               </select>
             </div>
@@ -100,13 +115,13 @@ myfunexam(value)
           <select  id="exam" name="exam" onChange={(event)=>this.myfunexam(event.target.value)}>
                 <option defaultChecked="">Please Select</option>
                 {this.state.ExamsPresent.map((header,index)=>{
-                  return(<option key={index}>{`${header.id} `}</option>);
+                  return(<option key={index} value={header.id}>{header.name}</option>);
                     })}
               </select>
           </div>
 
           <div className="col-sm-12"> 
-            <p style={{fontSize:20}}> Marks for Semester {this.state.semesterselected} and Exam {this.state.examselected} are: </p>
+            <p style={{fontSize:20}}> Marks for Semester <strong>{this.state.semestername}</strong> and Exam <strong>{this.state.examname}</strong> are: </p>
 
             <div style={{background:'white'}}>
                       <MarksTableComponent data={this.state.marks} headers={["Subject Id","Marks Obtained"]}/>

src/Pages/ViewStudentReport.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {get_class,get_school,get_student,get_semester,get_exam,get_marks} from './Components/API';
 
-import SubjectTableComponent from './Components/SubjectTableComponent';
+
 import StudentTableComponent from './Components/StudentTableComponent';
-import Button from 'react-bootstrap/Button';
+
 import MarksTableComponent from './Components/MarksTableComponent';
 
 class ViewStudentReport extends React.Component{
@@ -37,7 +37,9 @@ class ViewStudentReport extends React.Component{
         ExamsPresent:[],
         marks:[],
         semesterselected :'',
-        examselected :''
+        examselected :'',
+        semesterselectedname :'',
+        examselectedname :''
 
       }
         this.myfun = this.myfun.bind(this);
@@ -46,7 +48,7 @@ class ViewStudentReport extends React.Component{
 
     myfun(value)
     {
-        console.log(value);
+        console.log("School "+value);
         get_class(value).then(res=>{ 
             const classes = res.data;
             this.setState({classesPresent:classes})
@@ -88,9 +90,15 @@ class ViewStudentReport extends React.Component{
     myfunsemester(value){
         const schoolId = this.state.schoolselected;
         const classId = this.state.classselected;
+        get_semester(schoolId,value)
+        .then(res => {
+        const semester = res.data;
+        this.setState({semesterselectedname:semester.name})
         this.setState({semesterselected:value})
         this.setState({examselected:''})
-        console.log("Class Id"+classId)
+        this.setState({examselectedname:''})
+        })
+
       get_exam(schoolId,value,classId)
         .then(res => {
           const exams = res.data;
@@ -102,12 +110,18 @@ class ViewStudentReport extends React.Component{
       this.setState({examselected:value});
       const schoolId = this.state.schoolselected;
       console.log("School Id "+schoolId+' semester '+this.state.semesterselected+' exam: '+value +' student: '+this.state.studentselected)
-      get_marks(schoolId,this.state.semesterselected,value,this.state.studentselected)
+      get_exam(schoolId,this.state.semesterselected,this.state.classselected,value)
+        .then(res => {
+        const exams = res.data;
+        this.setState({examselectedname:exams.name})
+        get_marks(schoolId,this.state.semesterselected,value,this.state.studentselected)
         .then(res => {
           const mark = res.data;
           this.setState({marks:mark})
           console.log("Marks obtained: ",this.state.marks)
         })
+        })
+
 
     }
     render()
@@ -120,9 +134,9 @@ class ViewStudentReport extends React.Component{
 
                 <p style={{fontSize:20}}>School &nbsp;
                 <select onChange={(event)=>this.myfun(event.target.value)}>
-                <option defaultChecked="">Select School</option>
+                <option defaultChecked="">Please Select</option>
                     {this.state.schoolsPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index} value={header.id}>{header.name}</option>);
                         })}
                 </select></p>
 
@@ -131,7 +145,7 @@ class ViewStudentReport extends React.Component{
                 <select onChange={(event)=>this.myfunclass(event.target.value)}>
                 <option defaultChecked="">Select Class</option>
                     {this.state.classesPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index} value={header.id}>{header.className}</option>);
                         })}
                 </select> </p>
 
@@ -140,7 +154,7 @@ class ViewStudentReport extends React.Component{
                 <select onChange={(event)=>this.myfunstudent(event.target.value)}>
                 <option defaultChecked="">Select Student</option>
                     {this.state.studentsPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index} value={header.id}>{header.name}</option>);
                         })}
                 </select> </p>
 
@@ -157,10 +171,11 @@ class ViewStudentReport extends React.Component{
                 <div className="col-sm-6"> 
                     <p style={{fontSize:20}}> Select semester:</p>
                     <div > 
-                    <select id="semester" name="semester" onChange={(event)=>this.myfunsemester(event.target.value)}>
+                    <select id="semester" name="semester" onChange={(event)=>this.myfunsemester(event.target.value,event.target.name)}>
+
                     <option defaultChecked="">Please Select</option>
                     {this.state.SemestersPresent.map((header,index)=>{
-                    return(<option key={index}>{header.id}</option>);
+                    return(<option key={index} value={header.id} name1={header.name}>{header.name}</option>);
                             })}
                     </select>
                     </div>
@@ -171,13 +186,13 @@ class ViewStudentReport extends React.Component{
                 <select  id="exam" name="exam" onChange={(event)=>this.myfunexam(event.target.value)}>
                         <option defaultChecked="">Please Select</option>
                         {this.state.ExamsPresent.map((header,index)=>{
-                        return(<option key={index}>{`${header.id} `}</option>);
+                        return(<option key={index} value={header.id}>{`${header.name} `}</option>);
                             })}
                     </select>
                 </div>
 
                 <div className="col-sm-12"> 
-                    <p style={{fontSize:20}}> Marks for Semester {this.state.semesterselected} and Exam {this.state.examselected} are: </p>
+    <p style={{fontSize:20}}> Marks obtained in exam <strong>{this.state.examselectedname}</strong> &nbsp; for semester <strong>{this.state.semesterselectedname}</strong> &nbsp;are: </p>
 
                     <div style={{background:'white'}}>
                             <MarksTableComponent data={this.state.marks} headers={["Subject Id","Marks Obtained"]}/>