100% Completed

package.json

@@ -19,7 +19,11 @@
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
     "@tailwindcss/forms": "^0.5.3",
+    "crypto": "^1.0.1",
+    "crypto-browserify": "^3.12.0",
     "firebase": "^9.14.0",
+    "js-sha512": "^0.8.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/cart/Cart.ts

@@ -1,13 +1,42 @@
 import { Cup, cups } from "../products/Cup";
+import { collection, addDoc, getFirestore } from "firebase/firestore";
+import { app } from "src/main";
+import * as sha512 from 'js-sha512';
 
-export var cartArray: Object[] = cups;
+export var cartArray: Cup[] = [];
 
 export function addItems(cup: Cup) {
     cartArray.push(cup)
-    localStorage.setItem('cartItems', JSON.stringify(cartArray))
+    sessionStorage.setItem('cartItems', JSON.stringify(cartArray))
 }
 
 export function getCartItems() {
-    let data = localStorage.getItem('cartItems')
+    let data = sessionStorage.getItem('cartItems')
     if (data) return JSON.parse(data)
+}
+
+export function deleteCartItems() {
+    sessionStorage.removeItem('cartItems')
+}
+
+export function hasher(input: string) {
+    sha512.sha512(input);
+}
+
+export async function buy(cup: Cup, address: string) {
+    let rawData = sessionStorage.getItem('cartItems')
+    const db = getFirestore(app);
+    if (rawData) {
+        try {
+            const docRef = await addDoc(collection(db, Date()), {
+                name: cup.name,
+                price: cup.price,
+                address: address,
+                date: Date()
+            });
+            console.log("Document written with ID: ", docRef.id);
+        } catch (e) {
+            console.error("Error adding document: ", e);
+        }
+    }
 }

src/app/cart/cart.component.html

@@ -1,6 +1,24 @@
-<div class="p-20 bg-blue-100" *ngFor="let cup of cups">
+<div class="p-20 bg-blue-100" *ngFor="let cup of carts">
   <div class="p-6 bg-white rounded-lg shadow-lg">
-    <h2 class="mb-2 text-2xl font-bold text-gray-800">{{cup.name}}</h2>
-    <p class="text-gray-700">{{cup.desc}}</p>
+    <h2 class="mb-2 text-2xl font-bold text-gray-800">{{ cup.name }}</h2>
+    <p class="text-gray-700">{{ cup.desc }}</p>
+    <p class="text-gray-700">Total price: {{ cup.quantity * cup.price }} Rs.</p>
+    <form>
+      <input type="text" placeholder="Detailed Address" required #address/>
+      <br>
+      <button
+        class="p-3 font-mono font-bold text-white border-2 rounded-md border-sky-600 bg-red-600 hover:bg-red-800 hover:border-red-800"
+        (click)="deleteItems(cup)"
+      >
+        Remove all items
+      </button>
+      <button
+        type="submit"
+        class="p-3 m-3 font-mono font-bold text-white border-2 rounded-md border-sky-600 bg-sky-600 hover:bg-sky-800 hover:border-sky-800"
+        (click)="buy(cup, address.value)"
+      >
+        Buy all cups
+      </button>
+    </form>
   </div>
 </div>

src/app/cart/cart.component.ts

@@ -1,18 +1,33 @@
 import { Component, OnInit } from '@angular/core';
 import { Cup, cups } from '../products/Cup';
+import { buy, cartArray, deleteCartItems } from './Cart';
 
 @Component({
   selector: 'app-cart',
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.scss']
 })
 export class CartComponent implements OnInit {
-  
+
   cups: Cup[] = cups
+  carts: Cup[] = cartArray
+
+  deleteItems(cup: Cup) {
+    deleteCartItems()
+  }
+  buy(cup: Cup, address: string) {
+    buy(cup, address)
+  }
 
   constructor() { }
 
   ngOnInit(): void {
+    let a = sessionStorage.getItem('cartItems')
+    if (a) {
+      if (this.carts = []) {
+        this.carts = JSON.parse(a)
+      }
+    }
   }
 
 }

src/app/products/Cup.ts

@@ -1,10 +1,20 @@
 export class Cup {
     name!: string
     desc!: string
-    price!: string
+    price!: number
     imageLink!: string
     buyLink!: string
-    quantity!: string
+    quantity!: number
+    id!: number
+
+    constructor (_name: string, _desc: string, _price: number, _imageLink: string, _buyLink: string, _quantity: number) {
+        this.name = _name
+        this.desc = _desc
+        this.price = _price
+        this.imageLink = _imageLink
+        this.buyLink = _buyLink
+        this.quantity = _quantity
+    }
 }
 
 /**
@@ -14,9 +24,10 @@ export var cups: Cup[] = [
     {
         name: "Guava Cup",
         desc: "This cup is made out of Guava.",
-        price: "40 Rs. / Cup",
-        imageLink: "",
+        price: 40,
+        imageLink: "../../assets/uiimages/Guava.png",
         buyLink: "",
-        quantity: "00"
+        quantity: 0,
+        id: 0
     }
 ];

src/app/products/products.component.html

@@ -1,15 +1,13 @@
-<div *ngFor="let cup of cups">
-    <div class="max-w-sm overflow-hidden rounded shadow-lg">
-        <img class="w-full" src={{cup.imageLink}} alt="Sunset in the mountains">
+<div *ngFor="let cup of cups" class="p-5 text-center bg-lime-500">
+    <div class="max-w-sm m-5 bg-white shadow-2xl rounded-lg">
+        <img class="w-full rounded-t-lg" src={{cup.imageLink}} alt={{cup.imageLink}}>
         <div class="px-6 py-4">
           <div class="mb-2 text-xl font-bold">{{cup.name}}</div>
           <p class="text-base text-gray-700">
-            {{cup.desc}}
+            {{cup.price}} / Cup.
           </p>
-          <select name="Quantity: ">
-            <option *ngFor="let option of options" [value]="option.key" (click)="click(option, cup)"></option>
-          </select>
-          <button class="p-3 m-3 font-mono font-bold text-white border-2 rounded-md border-sky-600 bg-sky-600 hover:bg-sky-800 hover:border-sky-800">Buy</button>
+          <input type="text" name="Quantity" id="q" #input maxlength="1" placeholder="Quantity" class="p-3 rounded-lg border-gray-600 focus:border-blue-700 w-full">
+          <button class="p-3 m-3 font-mono font-bold text-white border-2 rounded-md border-sky-600 bg-sky-600 hover:bg-sky-800 hover:border-sky-800" (click)="cart(cup, input)">Add to Cart</button>
         </div>
       </div>
 </div>

src/app/products/products.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { addItems } from '../cart/Cart';
 import { Cup, cups } from './Cup';
 import { Option } from './Option';
 
@@ -30,16 +31,21 @@ export class ProductsComponent implements OnInit {
   }
 
   click(option: Option, cup: Cup) {
-    if (option.key = 1)   { cup.quantity  =  "01" }
-    if (option.key = 2)   { cup.quantity  =  "02" }
-    if (option.key = 3)   { cup.quantity  =  "03" }
-    if (option.key = 4)   { cup.quantity  =  "04" }
-    if (option.key = 5)   { cup.quantity  =  "05" }
-    if (option.key = 6)   { cup.quantity  =  "06" }
-    if (option.key = 7)   { cup.quantity  =  "07" }
-    if (option.key = 8)   { cup.quantity  =  "08" }
-    if (option.key = 9)   { cup.quantity  =  "09" }
-    if (option.key = 10)  { cup.quantity =   "10" }
+    if (option.key = 1)   { cup.quantity  =  1 }
+    if (option.key = 2)   { cup.quantity  =  2 }
+    if (option.key = 3)   { cup.quantity  =  3 }
+    if (option.key = 4)   { cup.quantity  =  4 }
+    if (option.key = 5)   { cup.quantity  =  5 }
+    if (option.key = 6)   { cup.quantity  =  6 }
+    if (option.key = 7)   { cup.quantity  =  7 }
+    if (option.key = 8)   { cup.quantity  =  8 }
+    if (option.key = 9)   { cup.quantity  =  9 }
+    if (option.key = 10)  { cup.quantity  =  10 }
+  }
+
+  cart(cup: Cup, inp: HTMLInputElement) {
+    let cupo = new Cup(cup.name, cup.desc, cup.price, cup.imageLink, cup.buyLink, Number.parseInt(inp.value))
+    addItems(cupo)
   }
 
 }

src/main.ts

@@ -25,5 +25,5 @@ const firebaseConfig = {
 };
 
 // Initialize Firebase
-const app = initializeApp(firebaseConfig);
+export const app = initializeApp(firebaseConfig);
 getAnalytics(app);