Notes

/// ADMIN SERVICE ///

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Menu } from '../shared/adminMenu';


@Injectable({
providedIn: 'root'
})
export class AdminService {

url="http://localhost:1000/api/"

constructor(private http: HttpClient) { }

public addMenu(menu:Menu): Observable<any>
{
const headers = {'content-type':'application/json'};
const body = JSON.stringify(menu)
return this.http.post(this.url+'add',body,{'headers':headers})
}

public getMenu():Observable<Menu[]>
{
return this.http.get<Menu[]>(this.url+ 'getMenu')
}

public getbyTag(tags:string[]):Observable<any>
{
return this.http.get<any>(this.url+'getByTag/'+ tags)
}

public updateItem(menu:Menu):Observable<any>
{
return this.http.put(this.url+'updateMenu',menu)
}

public deleteItem(menu:Menu):Observable<any>
{
return this.http.delete(this.url+'deleteFood/'+menu.name)
}
}




//// ADMIN ///
////ADMIN HTML///
<p>
<mat-toolbar color="danger" class="mat-elevation-z1">
<span class="example-spacer"></span>
<a mat-raised-button routerLink="/home">Logout</a> &nbsp;

</mat-toolbar>
</p>


<!-- SEARCH / GET BY TAG-->
<div class="container">
<div class="row">
<div class="col" style="margin-top: 40px;">
<div class="input-group">
<input type="text" placeholder="Search by Tag" [(ngModel)]="menu.tags">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="searchItem()">Search</button>
</div>
</div>
</div>
</div>
</div>


<div class="container">
<div class="row">
<!--DELETE-->
<div class="col">
<div class="jumbotron col-md-9">
<br>
<h3><strong>For Deleting Food Items</strong></h3>
<hr>
<form #deleteForm>
<div class="form-group">
<label for="name" class="control-label">Food Name</label>
<input type="text" placeholder="Food Name" [(ngModel)]="menu.name" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<br>
<div class="text-right">
<button type="submit" class="btn btn-danger btn-md" (click)="deleteFood()">Delete</button>
</div>
</form>
</div>
</div>

<!-- FOR UPDATING MENU-->
<div class="col">
<div class="jumbotron col-md-9">
<br>
<h3><strong>For Updating Food Items</strong></h3>
<hr>
<form #updateForm>
<!-- <div class="form-group">
<label for="image">File</label>
<input
id="image"
type="file"
class="form-control"
(change)="onFileChange($event)">
<img [src]="imageSrc" *ngIf="imageSrc" style="height: 100px; width:100px" (change)="onFileChange($event)" [(ngModel)]="menu.image" [ngModelOptions]="{standalone: true}">
</div> -->
<!-- <div class="form-group">
<img [src]="imageSrc" *ngIf="imageSrc" style="height: 100px; width:100px" [(ngModel)]="menu.image" [ngModelOptions]="{standalone: true}">
</div>-->

<div class="form-group">
<!-- <label for="id" class="control-label">Food ID</label> -->
<input type="text" placeholder="Food Id" [(ngModel)]="menu.id" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<!-- <label for="name" class="control-label">Food Name</label> -->
<input type="text" placeholder="Food Name" [(ngModel)]="menu.name" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<!-- <label for="price" class="control-label">Price</label> -->
<input type="text" placeholder="Price" [(ngModel)]="menu.price" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<!-- <label for="tags" class="control-label">Tags</label> -->
<input type="text" placeholder="Tags" [(ngModel)]="menu.tags" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<!-- <label for="origins" class="control-label">Origin</label> -->
<input type="text" placeholder="Origins" [(ngModel)]="menu.origins" class="form-control" [ngModelOptions]="{standalone: true}">
</div>
<br>
<div class="text-right">
<button type="submit" class="btn btn-success btn-md" (click)="updateFood()">Update</button>&nbsp;
<button type="submit" class="btn btn-success btn-md" (click)="addFood()">Add</button>
</div>
</form>
</div>
</div>
</div>
</div>
<br>



<!-- TABLE -->
<table class="table">
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Tag</th>
<th>Origin</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let item of response index as i;">
<td><img src="{{ item.image }}" style="height: 100px; width: 100px;"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.tags}}</td>
<td>{{ item.origins}}</td>
</tr>
</tbody>
</table>


////////ADMIN CSS/////
.form-group {
margin-bottom: 5px;
}

*{
font-family: cursive;
font-weight: bold;
}

mat-toolbar{
background-color: brown;
}

.example-spacer {
flex: auto 1 1;
}


a{
text-decoration: none;
color: black;
}
a:focus{
background-color: gray
}


*{
box-sizing: border-box;
}




/// ADMIN TS////
import { Component, OnInit } from '@angular/core';
import { AdminService } from 'src/app/services/admin.service';


@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

public response:any;
public menu:any;

imageSrc!: string;

constructor(public service:AdminService) {
this.menu = {
id:"",
name:"",
price:"",
tags:"",
image:"",
origins:""
}
}

ngOnInit(): void {
this.service.getMenu().subscribe(data => {
this.response = data;
console.log(data);
})
}


// onFileChange(event:any) {
// const reader = new FileReader();

// if(event.target.files && event.target.files.length) {
// const [file] = event.target.files;
// reader.readAsDataURL(file);

// reader.onload = () => {

// this.imageSrc = reader.result as string;

// this.menu.image = reader.result as string;

// this.response.patchValue({
// fileSource: reader.result
// });

// };

// }
// }

public addFood() {
this.service.addMenu(this.menu)
.subscribe(data => {
console.log(data)
this.refreshMenu();
})
}

public searchItem() {
this.service.getbyTag(this.menu.tags)
.subscribe(data => {
//console.log(JSON.stringify(data))
this.response = data;
//this.response.push(JSON.stringify(data))
})
}

public updateFood(){
this.service.updateItem(this.menu)
.subscribe(data=> {
console.log(data)
this.refreshMenu();
})
}

public deleteFood() {
this.service.deleteItem(this.menu)
.subscribe(data => {
console.log(data)
this.refreshMenu();
})
}

public refreshMenu() {
this.service.getMenu().subscribe(data => {
this.response = data;
})
}

}