Hw1

src/app/app.component.css

@@ -47,7 +47,7 @@ p {
   margin: 82px auto 32px;
   padding: 0 16px;
   max-width: 960px;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
 }
 svg.material-icons {

src/app/app.component.html

@@ -6,11 +6,46 @@
   <a href="#">Login</a> -->
 </div>
 <div class="content" role="main">
-  <div class="card highlight-card card-small">
-    {{ title }}
+  <div class="column">
+    <div class="card highlight-card card-small">
+      รายชื่อนักศึกษา
+    </div>
+
+    <div *ngFor="let s of students" class="card">
+      <span>{{ s.id}} {{s.name}} {{s.email}}</span>
+    </div>
   </div>
-  <div *ngFor="let s of students" class="card">
-    <span>{{ s.id}} {{s.name}} {{s.email}}</span>
+  <div class="column">
+    <div class="card highlight-card card-small">
+      รายชื่ออาจารย์
+    </div>
+
+    <div *ngFor="let l of lectures" class="card">
+      <span>{{ l.name}} {{l.email}}</span>
+    </div>
   </div>
-</div>
-<!-- <router-outlet></router-outlet> -->
+  <div class="column">
+    <div class="card highlight-card card-small">
+      รายชื่อวิชา
+    </div>
+
+    <div *ngFor="let c of courses" class="card">
+      <span>{{ c.id}} {{c.name}}</span>
+      <span>
+        {{c.teachingTime}} {{c.Instructor}}
+      </span>
+    </div>
+  </div>
+  <div class="row">
+    <div class="card highlight-card card-small">
+      คะแนน {{courses[0].name}} รหัสวิชา {{courses[0].id}}
+    </div>
+
+    <div *ngFor="let sc of scores" class="card">
+      <span> {{sc.idStudent}} {{sc.nameStudent}} {{sc.score}} </span>
+    </div>
+   </div>
+
+
+<div>
+    <!-- <router-outlet></router-outlet> -->

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { Student} from './models/students';
 import { STUDENTS } from './mock/mock-students';
+import { Lecture} from './models/lectures';
+import { LECTURES } from './mock/mock-lectures';
+import { Course} from './models/courses';
+import { COURSES } from './mock/mock-courses';
+import { Score} from './models/scores';
+import { SCORES } from './mock/mock-scores';
 
 @Component({
   selector: 'app-root',
@@ -11,9 +17,14 @@ export class AppComponent {
   title = 'Course Web Application';
   desctiption = 'คำอธิบายรายวิชา';
   students: Student[] = STUDENTS;
+  lectures: Lecture[] = LECTURES;
+  courses: Course[] = COURSES;
+  scores: Score[] = SCORES;
+
+
+
 
 
-  
   // students = [
   //   //  {id: 601111111, name:"Tom Hank", email:"tom@gmail.com"},
   //   //  {id: 601111112, name:"Tim Hwak", email:"tim@gmail.com"},

src/app/mock/mock-courses.ts

+import { Course } from '../models/courses';
+import { Lecture } from '../models/lectures';
+import { Lexer } from '@angular/compiler';
+import { LECTURES } from './mock-lectures';
+export const COURSES: Course[] = [
+  {id:1100111, name:"Topic1", teachingTime:"พ. / 13.00-16.00 น.", classroom: "online", Instructor: LECTURES[0].name , unit: 3},
+  {id:1100112, name:"Web Application", teachingTime:"พฤ. /13.00-16.00 น.", classroom: "online", Instructor: LECTURES[1].name , unit: 3},
+  {id:1100113, name:"Data Com", teachingTime:"จ. /13.00-16.00 น.", classroom: "online", Instructor: LECTURES[2].name , unit: 3},
+  {id:1100114, name:"Artificial Intelligence", teachingTime:"จ. /9.00-12.00 น.", classroom: "online", Instructor: LECTURES[3].name , unit: 3},
+  {id:1100115, name:"Software En", teachingTime:"ศ. /9.00-12.00 น.", classroom: "online", Instructor: LECTURES[4].name , unit: 3},
+]

src/app/mock/mock-lectures.ts

+import { Lecture } from '../models/lectures';
+export const LECTURES: Lecture[] = [
+  {name:"Wichits Sombat", email:"pao@gmail.com"},
+     {name:"Warawoot pacharoen", email:"warawoot@gmail.com"},
+     {name:"Kriengsak treeprapin", email:"kriengsak@gmail.com"},
+     {name:"Paichayon kongchai", email:"paichayon@gmail.com"},
+     {name:"Wasana ngogate", email:"wasana@gmail.com"},
+]

src/app/mock/mock-scores.ts

+import { Score } from '../models/scores';
+import { LECTURES } from './mock-lectures';
+import { COURSES } from './mock-courses';
+import { STUDENTS } from './mock-students';
+
+
+export const SCORES: Score[] = [
+  {idCourse:COURSES[0].id, course:COURSES[0].name, lecture:LECTURES[0].name, idStudent: STUDENTS[0].id, nameStudent:STUDENTS[0].name, score:80},
+  {idCourse:COURSES[0].id, course:COURSES[0].name, lecture:LECTURES[0].name, idStudent: STUDENTS[1].id, nameStudent:STUDENTS[1].name, score:70},
+  {idCourse:COURSES[0].id, course:COURSES[0].name, lecture:LECTURES[0].name, idStudent: STUDENTS[2].id, nameStudent:STUDENTS[2].name, score:60},
+  {idCourse:COURSES[0].id, course:COURSES[0].name, lecture:LECTURES[0].name, idStudent: STUDENTS[3].id, nameStudent:STUDENTS[3].name, score:50},
+  {idCourse:COURSES[0].id, course:COURSES[0].name, lecture:LECTURES[0].name, idStudent: STUDENTS[4].id, nameStudent:STUDENTS[4].name, score:40},
+]

src/app/mock/mock-students.ts

@@ -4,4 +4,5 @@ export const STUDENTS: Student[] = [
      {id: 601111112, name:"Tim Hwak", email:"tim@gmail.com"},
      {id: 601111113, name:"Jerry Jones", email:"jerry@gmail.com"},
      {id: 601111114, name:"Jack Frost", email:"jack@gmail.com"},
+     {id: 601111115, name:"V BTS", email:"v_bts@gmail.com"},
 ]

src/app/models/courses.ts

+export interface Course
+ {
+  id: number;
+  name: string;
+  teachingTime: string;
+  classroom: string;
+  Instructor: string;
+  unit: number;
+ }

src/app/models/lectures.ts

+export interface Lecture
+ {
+  name: string;
+  email: string;
+ }

src/app/models/scores.ts

+export interface Score
+ {
+  idCourse: number;
+  course: string;
+  lecture: string;
+  idStudent:number;
+  nameStudent:string;
+  score:number;
+
+ }