import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
standalone: true,
imports: [IonicModule, CommonModule],
})
export class HomePage {
restaurantList = [
{
name: "KFC",
dish: "KFC Bucket",
rating: 3.9,
distance: "4km",
price: 54.90,
image: "assets/KFC.png",
topDish: "Fast Food",
orderQuantity: 0,
},
{
name: "Burger King",
dish: "Whopper",
rating: 3.7,
distance: "6.7km",
price: 59.95,
image: "assets/BK.png",
topDish: "Fast Food",
orderQuantity: 0,
},
{
name: "Pizza Hut",
dish: "My Box",
rating: 4.0,
distance: "7.1km",
price: 44.90,
image: "assets/PH.png",
topDish: "Fast Food",
orderQuantity: 0,
},
{
name: "McDonalds",
dish: "Big Mac",
rating: 4.3,
distance: "3.2km",
price: 49.90,
image: "assets/Mac.png",
topDish: "Fast Food",
orderQuantity: 0,
},
];
addToCart(restaurant: {
name: string,
dish: string,
rating: number,
distance: string,
price: number,
topDish: string,
orderQuantity: number }) {
const orderList = JSON.parse(localStorage.getItem('orderList')??'[]');
const orderIndex = orderList.findIndex((order: {restaurantName:string;})=> order.restaurantName === restaurant.name );
if (orderIndex === -1) {
orderList.push({
dishPrice: restaurant.price,
restaurantName: restaurant.name,
dishName: restaurant.dish,
quantity: 1,
});
} else {
orderList[orderIndex].quantity++;
}
localStorage.setItem('orderList', JSON.stringify(orderList));
}
reOrderAddToCart(restaurant: {
name: string,
dish: string,
rating: number,
distance: string,
price: number,
topDish: string,
orderQuantity: number }) {
const paidorderList = JSON.parse(localStorage.getItem('paidList')??'[]');
console.log(paidorderList)
const orderIndex = paidorderList.findIndex((order: {name:string;})=> order.name === restaurant.name );
console.log(orderIndex)
if (orderIndex === -1) {
paidorderList.push({
dishPrice: restaurant.price,
restaurantName: restaurant.name,
dishName: restaurant.dish,
quantity: 1,
});
} else {
paidorderList[orderIndex].quantity++;
}
localStorage.setItem('orderList', JSON.stringify(paidorderList));
}
}
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<!-- ------------------ -->
<ion-searchbar (ionInput)="search($event)" animated="true" placeholder="Search"></ion-searchbar>
<ion-list *ngFor="let data of restaurantList">
<ion-item lines="none" color="light">
<ion-thumbnail slot="start">
<img alt="Silhouette of mountains" src={{data.image}}/>
</ion-thumbnail>
<ion-grid>
<ion-row>
<ion-col>
<ion-text>
{{data.name}}
</ion-text>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-text color="medium">
{{data.type}}
</ion-text>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-icon name="star"></ion-icon> {{data.rating}}
</ion-col>
<ion-col>
R{{data.price}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-icon name="car"></ion-icon> <ion-text color="danger"> {{data.distance}}</ion-text>
</ion-col>
</ion-row>
<ion-row>
<ion-button style="width: 100%">Add to cart</ion-button>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
</ion-content>
