Commit 03ee765f authored by jakkree kongpha's avatar jakkree kongpha

last change

parent 5c254a27
...@@ -15,11 +15,11 @@ mongoose.connection.on('error', () => { ...@@ -15,11 +15,11 @@ mongoose.connection.on('error', () => {
const animes = [ const animes = [
{ sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ', info: 'เป็นเพื่อนสนิทของมานี เลี้ยงแมวไว้ตัวหนึ่งชื่อ สีเทา เธอพักอยู่กับย่าและอาตั้งแต่ยังเล็ก โดยไม่ทราบว่าใครเป็นพ่อแม่ ซึ่งความจริงก็คือ พ่อเสียชีวิตตั้งแต่เธอมีอายุเพียง 1 ขวบ ส่วนแม่อาศัยอยู่ในต่างประเทศ และต่อมาก็เดินทางกลับมา ตั้งใจจะรับลูกสาวกลับไปอยู่ด้วยกัน แต่เธอเลือกจะอยู่กับย่าต่อไป' }, { animename: "dragoball", animetype: 'Fighting', animedetail: 'เลิศล้ำ' ,animeimage: src="" },
{ sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย', info: 'น้องสาวของมานะ เลี้ยงนกแก้วไว้ตัวหนึ่ง เมื่อขึ้นชั้นประถมศึกษาปีที่ 6 เพื่อนๆ เลือกตั้งให้เธอเป็นรองประธานนักเรียน' }, { animename: "one piece", animetype: 'Fighting', animedetail: 'เลิศล้ำ' },
{ sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น', info: 'เลี้ยงม้าไว้ตัวหนึ่งชื่อ เจ้าแก่ แต่ภายหลังก็ตายไปตามวัย ทำให้ปิติเสียใจมาก ต่อมาเขาถูกรางวัลสลากออมสิน เป็นเงิน 10,000 บาท จึงนำไปซื้อลูกม้าตัวใหม่ เพื่อทดแทนเจ้าแก่ และตั้งชื่อให้ว่า เจ้านิล' }, { animename: "naruto", animetype: 'Fighting', animedetail: 'เลิศล้ำ' },
{ sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย', info: 'พี่ชายของมานี เลี้ยงสุนัขไว้ตัวหนึ่งชื่อ เจ้าโต เขาขยันตั้งใจเรียน จึงมีผลการเรียนดี จึงเป็นนักเรียนคนเดียวของโรงเรียน ที่สามารถเข้าศึกษาต่อระดับมัธยมศึกษาในกรุงเทพมหานคร เมื่อจบการศึกษาชั้นประถมปีที่ 6' }, { animename: "fairy tail", animetype: 'Magic', animedetail: 'เลิศล้ำ' },
{ sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข', info: 'มีพ่อเป็นทหาร แต่เสียชีวิตในระหว่างรบ ตั้งแต่วีระยังอยู่ในท้อง ส่วนแม่ตรอมใจ เสียชีวิตหลังจากคลอดวีระได้ 15 วัน ทำให้เขาต้องอยู่กับลุงตั้งแต่เกิด และเลี้ยงลิงแสมไว้ตัวหนึ่งชื่อ เจ้าจ๋อ' } { animename: "Log Horizon", animetype: 'Magic', animedetail: 'เลิศล้ำ' },
]; ];
Anime.insertMany(animes, (error, docs) => { Anime.insertMany(animes, (error, docs) => {
......
...@@ -2,9 +2,10 @@ const Joi = require('joi'); ...@@ -2,9 +2,10 @@ const Joi = require('joi');
const Anime = require('../models/anime.model'); const Anime = require('../models/anime.model');
const animeSchema = Joi.object({ const animeSchema = Joi.object({
sid: Joi.number().integer().required(), animename: Joi.number().integer().required(),
first: Joi.string().required(), animetype: Joi.string().required(),
last: Joi.string().required() animedetail: Joi.string().required(),
//animeimage:Joi.string().required()
}) })
......
...@@ -5,11 +5,11 @@ const mongoose = require('mongoose'); ...@@ -5,11 +5,11 @@ const mongoose = require('mongoose');
*/ */
const AnimeSchema = new mongoose.Schema( const AnimeSchema = new mongoose.Schema(
{ {
sid: { type: String, required: true }, animename: { type: String, required: true },
first: { type: String, required: true }, animetype: { type: String, required: true },
last: { type: String, required: true }, animedetail: { type: String, required: true },
info: { type: String, required: true }, //animeimage: { type: File, required: true },
createdAt: { type: Date, default: Date.now }, createdAt: { type: Date, default: Date.now },
}, },
{ {
versionKey: false versionKey: false
......
...@@ -16,21 +16,22 @@ ...@@ -16,21 +16,22 @@
<div class="row"> <div class="row">
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group"> <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> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group"> <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>
</div> </div>
<div class="form-group"> <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> </div>
<button type="submit" >Add Anime</button> <button (click)="insert()" >Add Anime</button>
You have successsfully posted {{result}}
</form> </form>
</div> </div>
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { AnimeService} from '../shared/services/anime.service'
import { HttpClient } from '@angular/common/http';
@Component({ @Component({
selector: 'app-addanime', selector: 'app-addanime',
...@@ -7,9 +10,27 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +10,27 @@ import { Component, OnInit } from '@angular/core';
}) })
export class AddanimeComponent implements OnInit { export class AddanimeComponent implements OnInit {
constructor() { } name: string | undefined;
result: string | undefined;
constructor(private animeService: AnimeService ,private http: HttpClient ) { }
ngOnInit(): void { 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)
})
} }
} }
<!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>
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeroComponent } from './hero.component'; import { AnimeManageComponent } from './anime-manage.component';
describe('HeroComponent', () => { describe('AnimeManageComponent', () => {
let component: HeroComponent; let component: AnimeManageComponent;
let fixture: ComponentFixture<HeroComponent>; let fixture: ComponentFixture<AnimeManageComponent>;
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ HeroComponent ] declarations: [ AnimeManageComponent ]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(HeroComponent); fixture = TestBed.createComponent(AnimeManageComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
......
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;
});
}
}
...@@ -3,20 +3,17 @@ ...@@ -3,20 +3,17 @@
<div>{{ students | json }}</div> <div>{{ students | json }}</div>
--> -->
<mat-grid-list cols="3" rowHeight="720px" gutterSize="10px"> <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>
<mat-card-header> <mat-card-header>
<div mat-card-avatar class="student-header-image"></div> <div mat-card-avatar class="student-header-image"></div>
<mat-card-title>{{ s.first }} {{ s.last }}</mat-card-title> <mat-card-title>{{ s.animename }} {{ s.animetype }}</mat-card-title>
<mat-card-subtitle>{{ s.sid }}</mat-card-subtitle>
</mat-card-header> </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> <mat-card-content>
<p> {{ s.info }} </p> <p> {{ s.animedetail }} </p>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
</mat-grid-tile> </mat-grid-tile>
......
...@@ -8,13 +8,13 @@ import { AnimeService} from '../shared/services/anime.service' ...@@ -8,13 +8,13 @@ import { AnimeService} from '../shared/services/anime.service'
}) })
export class AnimelistComponent implements OnInit { export class AnimelistComponent implements OnInit {
students: any[] = []; animes: any[] = [];
constructor(private animeService: AnimeService) { } constructor(private animeService: AnimeService) { }
ngOnInit(): void { ngOnInit(): void {
this.animeService.getAll().subscribe( (resp: any) => { this.animeService.getAll().subscribe( (resp: any) => {
this.students = resp; this.animes = resp;
}); });
} }
......
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './shared/guards';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { HeroComponent } from './hero/hero.component';
import { AddanimeComponent } from './addanime/addanime.component'; import { AddanimeComponent } from './addanime/addanime.component';
import { AnimelistComponent } from './animelist/animelist.component'; import { AnimelistComponent } from './animelist/animelist.component';
import { AnimeManageComponent } from './anime-manage/anime-manage.component';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', path: '',
component: HomeComponent, component: HomeComponent,
//canActivate: [AuthGuard],
}, },
{ {
path: 'hero', path: 'animemanage',
component: HeroComponent, component: AnimeManageComponent,
}, },
{ {
path: 'animelist', path: 'animelist',
......
...@@ -12,10 +12,10 @@ import { AppRoutingModule } from './app-routing.module'; ...@@ -12,10 +12,10 @@ import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './header/header.component'; import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { AuthService } from './shared/services'; import { AuthService } from './shared/services';
import { HeroComponent } from './hero/hero.component';
import { AddanimeComponent } from './addanime/addanime.component'; import { AddanimeComponent } from './addanime/addanime.component';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { AnimelistComponent } from './animelist/animelist.component'; import { AnimelistComponent } from './animelist/animelist.component';
import { AnimeManageComponent } from './anime-manage/anime-manage.component';
export function appInitializerFactory(authService: AuthService) { export function appInitializerFactory(authService: AuthService) {
return () => authService.checkTheUserOnTheFirstLoad(); return () => authService.checkTheUserOnTheFirstLoad();
...@@ -23,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) { ...@@ -23,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) {
@NgModule({ @NgModule({
imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule, FormsModule], imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule, FormsModule],
declarations: [AppComponent, HeaderComponent, HomeComponent, HeroComponent, AddanimeComponent, AnimelistComponent], declarations: [AppComponent, HeaderComponent, HomeComponent, AddanimeComponent, AnimelistComponent, AnimeManageComponent],
providers: [ providers: [
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<div> <div>
<a class="links side" *ngIf="user" routerLink="/animelist">animeList</a> <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="/addanime">addAnime</a>
<a class="links side" *ngIf="user" routerLink="/animemanage">animeManage</a>
<a class="links side" *ngIf="user" [matMenuTriggerFor]="menu"> <a class="links side" *ngIf="user" [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>{{ user.fullname }} <mat-icon>account_circle</mat-icon>{{ user.fullname }}
</a> </a>
......
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 {
}
}
<p> <!DOCTYPE html>
home works! <html>
</p>
<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>
.centered-form{
text-align: center;
}
export interface Anime {
_id: string;
fullname: string;
createdAt: string;
roles: string[];
isAdmin: boolean;
}
...@@ -8,6 +8,7 @@ import { HttpClient } from '@angular/common/http'; ...@@ -8,6 +8,7 @@ import { HttpClient } from '@angular/common/http';
providedIn: 'root' providedIn: 'root'
}) })
export class AnimeService { export class AnimeService {
animeId: any;
constructor(private http: HttpClient) { } constructor(private http: HttpClient) { }
...@@ -15,3 +16,6 @@ export class AnimeService { ...@@ -15,3 +16,6 @@ export class AnimeService {
return this.http.get('api/anime/all'); return this.http.get('api/anime/all');
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment