last change

script/init-animes.js

@@ -15,11 +15,11 @@ mongoose.connection.on('error', () => {
 
 
 const animes = [
-  { sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ', info: 'เป็นเพื่อนสนิทของมานี เลี้ยงแมวไว้ตัวหนึ่งชื่อ สีเทา เธอพักอยู่กับย่าและอาตั้งแต่ยังเล็ก โดยไม่ทราบว่าใครเป็นพ่อแม่ ซึ่งความจริงก็คือ พ่อเสียชีวิตตั้งแต่เธอมีอายุเพียง 1 ขวบ ส่วนแม่อาศัยอยู่ในต่างประเทศ และต่อมาก็เดินทางกลับมา ตั้งใจจะรับลูกสาวกลับไปอยู่ด้วยกัน แต่เธอเลือกจะอยู่กับย่าต่อไป' },
-  { sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย', info: 'น้องสาวของมานะ เลี้ยงนกแก้วไว้ตัวหนึ่ง เมื่อขึ้นชั้นประถมศึกษาปีที่ 6 เพื่อนๆ เลือกตั้งให้เธอเป็นรองประธานนักเรียน' },
-  { sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น', info: 'เลี้ยงม้าไว้ตัวหนึ่งชื่อ เจ้าแก่ แต่ภายหลังก็ตายไปตามวัย ทำให้ปิติเสียใจมาก ต่อมาเขาถูกรางวัลสลากออมสิน เป็นเงิน 10,000 บาท จึงนำไปซื้อลูกม้าตัวใหม่ เพื่อทดแทนเจ้าแก่ และตั้งชื่อให้ว่า เจ้านิล' },
-  { sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย', info: 'พี่ชายของมานี เลี้ยงสุนัขไว้ตัวหนึ่งชื่อ เจ้าโต เขาขยันตั้งใจเรียน จึงมีผลการเรียนดี จึงเป็นนักเรียนคนเดียวของโรงเรียน ที่สามารถเข้าศึกษาต่อระดับมัธยมศึกษาในกรุงเทพมหานคร เมื่อจบการศึกษาชั้นประถมปีที่ 6' },
-  { sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข', info: 'มีพ่อเป็นทหาร แต่เสียชีวิตในระหว่างรบ ตั้งแต่วีระยังอยู่ในท้อง ส่วนแม่ตรอมใจ เสียชีวิตหลังจากคลอดวีระได้ 15 วัน ทำให้เขาต้องอยู่กับลุงตั้งแต่เกิด และเลี้ยงลิงแสมไว้ตัวหนึ่งชื่อ เจ้าจ๋อ' }
+  { animename: "dragoball",   animetype: 'Fighting', animedetail: 'เลิศล้ำ' ,animeimage: src="" },
+  { animename: "one piece",   animetype: 'Fighting', animedetail: 'เลิศล้ำ' },
+  { animename: "naruto",      animetype: 'Fighting', animedetail: 'เลิศล้ำ' },
+  { animename: "fairy tail",  animetype: 'Magic', animedetail: 'เลิศล้ำ' },
+  { animename: "Log Horizon", animetype: 'Magic', animedetail: 'เลิศล้ำ' },
 ];
 
 Anime.insertMany(animes, (error, docs) => {

server/controllers/anime.controller.js

@@ -2,9 +2,10 @@ const Joi = require('joi');
 const Anime = require('../models/anime.model');
 
 const animeSchema = Joi.object({
-  sid: Joi.number().integer().required(),
-  first: Joi.string().required(),
-  last: Joi.string().required()
+  animename: Joi.number().integer().required(),
+  animetype: Joi.string().required(),
+  animedetail: Joi.string().required(),
+  //animeimage:Joi.string().required()
 })
 
 

server/models/anime.model.js

@@ -5,11 +5,11 @@ const mongoose = require('mongoose');
  */
 const AnimeSchema = new mongoose.Schema(
   {
-    sid:       { type: String, required: true },
-    first:     { type: String, required: true },
-    last:      { type: String, required: true },
-    info:      { type: String, required: true },
-    createdAt: { type: Date, default: Date.now },
+    animename:     { type: String, required: true },
+    animetype:     { type: String, required: true },
+    animedetail:   { type: String, required: true },
+    //animeimage:    { type: File, required: true },
+    createdAt:     { type: Date, default: Date.now },
   },
   {
     versionKey: false

src/app/addanime/addanime.component.html

@@ -16,21 +16,22 @@
               <div class="row">
                 <div class="col-xs-6 col-sm-6 col-md-6">
                   <div class="form-group">
-                    <input type="text" name="animename" ngModel class="form-control input-sm" placeholder="Anime Name">
+                    <input type="text" name="animename"  class="form-control input-sm" placeholder="Anime Name">
                   </div>
                 </div>
                 <div class="col-xs-6 col-sm-6 col-md-6">
                   <div class="form-group">
-                    <input type="text" name="animetype" ngModel class="form-control input-sm" placeholder="Type Name">
+                    <input type="text" name="animetype"  class="form-control input-sm" placeholder="Type Name">
                   </div>
                 </div>
               </div>
 
               <div class="form-group">
-                <input type="text"  name="animedetail" ngModel class="form-control input-sm" placeholder="Anime Detail">
+                <input type="text"  name="animedetail"  class="form-control input-sm" placeholder="Anime Detail">
               </div>
 
-              <button type="submit" >Add Anime</button>
+              <button (click)="insert()" >Add Anime</button>
+              You have successsfully posted {{result}}
 
             </form>
           </div>

src/app/addanime/addanime.component.ts

 import { Component, OnInit } from '@angular/core';
+import { AnimeService} from '../shared/services/anime.service'
+import { HttpClient } from '@angular/common/http';
+
 
 @Component({
   selector: 'app-addanime',
@@ -7,9 +10,27 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AddanimeComponent implements OnInit {
 
-  constructor() { }
+  name: string | undefined;
+  result: string | undefined;
+  
 
+  constructor(private animeService: AnimeService ,private http: HttpClient ) { }
   ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  insert() {
+
+    let url = "http://localhost:4040/api/anime/add"
+    this.http.post(url, {
+      name:this.name
+    }).toPromise().then((data: any) => {
+      console.log(data)
+      console.log(JSON.stringify(data.json.name))
+      this.result = JSON.stringify(data.json.name)
+    })
   }
 
+
+
 }

src/app/anime-manage/anime-manage.component.html

+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.centered-form{
+  text-align: center;
+}
+
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 80%;
+}
+
+td, th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
+</style>
+</head>
+<body>
+
+<h2 class="centered-form">Anime Manage</h2>
+  <table class="center">
+    <tr >
+      <th>Animename </th>
+      <th>Animetype</th>
+      <th>Animedetail</th>
+      <th>update</th>
+      <th>delete</th>
+    </tr>
+    <tr *ngFor="let s of animes">
+      <td>{{ s.animename }}</td>
+      <td>{{ s.animetype }}</td>
+      <td>{{ s.animedetail }}</td>
+      <td> <button>Update</button> </td>
+      <td> <button>Delete</button> </td>
+    </tr>
+  </table>
+
+
+</body>
+</html>

src/app/hero/hero.component.spec.ts → src/app/anime-manage/anime-manage.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeroComponent } from './hero.component';
+import { AnimeManageComponent } from './anime-manage.component';
 
-describe('HeroComponent', () => {
-  let component: HeroComponent;
-  let fixture: ComponentFixture<HeroComponent>;
+describe('AnimeManageComponent', () => {
+  let component: AnimeManageComponent;
+  let fixture: ComponentFixture<AnimeManageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroComponent ]
+      declarations: [ AnimeManageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeroComponent);
+    fixture = TestBed.createComponent(AnimeManageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/anime-manage/anime-manage.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AnimeService} from '../shared/services/anime.service'
+
+@Component({
+  selector: 'app-anime-manage',
+  templateUrl: './anime-manage.component.html',
+  styleUrls: ['./anime-manage.component.css']
+})
+export class AnimeManageComponent implements OnInit {
+
+
+  animes: any[] = [];
+
+  constructor(private animeService: AnimeService) { }
+
+  ngOnInit(): void {
+    this.animeService.getAll().subscribe( (resp: any) => {
+      this.animes = resp;
+    });
+  }
+
+}

src/app/animelist/animelist.component.html

@@ -3,20 +3,17 @@
   <div>{{ students | json }}</div>
 -->
 <mat-grid-list cols="3" rowHeight="720px" gutterSize="10px">
-  <mat-grid-tile *ngFor="let s of students">
+  <mat-grid-tile *ngFor="let s of animes">
     <mat-card>
       <mat-card-header>
         <div mat-card-avatar class="student-header-image"></div>
-        <mat-card-title>{{ s.first }} {{ s.last }}</mat-card-title>
-        <mat-card-subtitle>{{ s.sid }}</mat-card-subtitle>
+        <mat-card-title>{{ s.animename }} {{ s.animetype }}</mat-card-title>
       </mat-card-header>
-      <img mat-card-image src="https://picsum.photos/id/{{ s.sid%1000 }}/750/600" alt="Photo of a {{ s.name }}">
+      <img mat-card-image src="../image/dragonball.jpg" >
       <mat-card-content>
-        <p> {{ s.info }} </p>
+        <p> {{ s.animedetail }} </p>
       </mat-card-content>
       <mat-card-actions>
-        <button mat-button>LIKE</button>
-        <button mat-button>SHARE</button>
       </mat-card-actions>
     </mat-card>
   </mat-grid-tile>

src/app/animelist/animelist.component.ts

@@ -8,13 +8,13 @@ import { AnimeService} from '../shared/services/anime.service'
 })
 export class AnimelistComponent implements OnInit {
 
-  students: any[] = [];
+  animes: any[] = [];
 
   constructor(private animeService: AnimeService) { }
 
   ngOnInit(): void {
     this.animeService.getAll().subscribe( (resp: any) => {
-      this.students = resp;
+      this.animes = resp;
     });
   }
 

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { AuthGuard } from './shared/guards';
 import { HomeComponent } from './home/home.component';
-import { HeroComponent } from './hero/hero.component';
 import { AddanimeComponent } from './addanime/addanime.component';
 import { AnimelistComponent } from './animelist/animelist.component';
+import { AnimeManageComponent } from './anime-manage/anime-manage.component';
 
 
 const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    //canActivate: [AuthGuard],
   },
   {
-    path: 'hero',
-    component: HeroComponent,
+    path: 'animemanage',
+    component: AnimeManageComponent,
   },
   {
     path: 'animelist',

src/app/app.module.ts

@@ -12,10 +12,10 @@ import { AppRoutingModule } from './app-routing.module';
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
 import { AuthService } from './shared/services';
-import { HeroComponent } from './hero/hero.component';
 import { AddanimeComponent } from './addanime/addanime.component';
 import { FormsModule } from '@angular/forms';
 import { AnimelistComponent } from './animelist/animelist.component';
+import { AnimeManageComponent } from './anime-manage/anime-manage.component';
 
 export function appInitializerFactory(authService: AuthService) {
   return () => authService.checkTheUserOnTheFirstLoad();
@@ -23,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) {
 
 @NgModule({
   imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule, FormsModule],
-  declarations: [AppComponent, HeaderComponent, HomeComponent, HeroComponent,  AddanimeComponent,  AnimelistComponent],
+  declarations: [AppComponent, HeaderComponent, HomeComponent, AddanimeComponent,  AnimelistComponent, AnimeManageComponent],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

src/app/header/header.component.html

@@ -6,6 +6,7 @@
     <div>
       <a class="links side" *ngIf="user" routerLink="/animelist">animeList</a>
       <a class="links side" *ngIf="user" routerLink="/addanime">addAnime</a>
+      <a class="links side" *ngIf="user" routerLink="/animemanage">animeManage</a>
       <a class="links side" *ngIf="user" [matMenuTriggerFor]="menu">
         <mat-icon>account_circle</mat-icon>{{ user.fullname }}
       </a>

src/app/hero/hero.component.html

-<p>Hero Update works!</p>

src/app/hero/hero.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-hero',
-  templateUrl: './hero.component.html',
-  styleUrls: ['./hero.component.css']
-})
-export class HeroComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/home/home.component.html

-<p>
-  home works!
-</p>
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Welcome Anime-sai-kou</title>
+</head>
+
+<body>
+
+  <h1 class="centered-form">Welcome to Anime-sai-kou</h1>
+  <h2 class="centered-form">This web for people like anime:</h2>
+
+  <h3 class="centered-form">Wehave animelist for you</h3>
+  <h3 class="centered-form">Fighting anime, Magic anime, Drama anime, Fantasy anime</h3>
+
+</body>
+
+</html>

src/app/home/home.component.scss

+.centered-form{
+  text-align: center;
+}
+

src/app/shared/interfaces/anime.interface.ts

+export interface Anime {
+  _id: string;
+  fullname: string;
+  createdAt: string;
+  roles: string[];
+  isAdmin: boolean;
+}

src/app/shared/services/anime.service.ts

@@ -8,6 +8,7 @@ import { HttpClient } from '@angular/common/http';
   providedIn: 'root'
 })
 export class AnimeService {
+  animeId: any;
 
   constructor(private http: HttpClient) { }
 
@@ -15,3 +16,6 @@ export class AnimeService {
     return this.http.get('api/anime/all');
   }
 }
+
+
+