Ionic TypeScript Homepage
Fri Jun 23 2023 08:06:46 GMT+0000 (Coordinated Universal Time)
Saved by @cameron_v_r #ionic #typescript #angular
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>
Comments