Merge branch 'creme332:main' into nestedcomments

public/js_original/cart-view.js

@@ -4,6 +4,7 @@
 
 import Cart from "./models/Cart";
 import CartItem from "./models/CartItem";
+import ModalManager from "./modal";
 
 function updateCart(e) {
   const sectionNode = e.target.parentNode.parentNode;
@@ -23,6 +24,13 @@ function updateCart(e) {
   const unitPrice = parseFloat(sectionNode.getAttribute("data-unitprice"));
   const newSubTotal = Math.round(newQuantity * unitPrice * 100) / 100;
 
+  // update cart total
+  let cartTotal = parseFloat(document.querySelector("#cart-total").textContent);
+  cartTotal = cartTotal + unitPrice * (newQuantity - currentCartItem.quantity);
+  document.querySelector("#cart-total").textContent = cartTotal
+    .toFixed(2)
+    .toString();
+
   // display new subtotal
   const priceNode = sectionNode.querySelector(".container > strong");
   priceNode.textContent = "Rs " + newSubTotal;
@@ -41,12 +49,67 @@ function updateCart(e) {
   }
 }
 
-window.addEventListener("DOMContentLoaded", function () {
+async function checkout() {
+  const myCart = Cart();
+  const items = myCart.getItems();
+
+  const data = {
+    items,
+    store_id: document.querySelector("#store_location").value,
+  };
+
+  const response = await fetch(window.location.href + "/checkout", {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+
+  if (response.ok) {
+    // Clear cart items from localStorage if checkout is successful
+    myCart.clear();
+    ModalManager("my-modal").openModal();
+    return;
+  }
+  const x = await response.json();
+  window.alert(x.error);
+}
+
+function preventKeyboardInput(event) {
+  event.preventDefault();
+}
+
+/**
+ * This function must be called after DOM has loaded.
+ */
+function initCartPage() {
   const quantityInputs = [
     ...document.querySelectorAll("section input[type='number']"),
   ];
 
+  ModalManager("my-modal").init();
+
+  document.querySelector("#checkout-btn").addEventListener("click", checkout);
+
   quantityInputs.forEach((input) => {
     input.addEventListener("change", updateCart);
+    input.addEventListener("keydown", preventKeyboardInput);
+  });
+}
+
+async function uploadCart() {
+  const items = Cart().getItems();
+
+  const response = await fetch(window.location.href + "/upload", {
+    method: "POST",
+    body: JSON.stringify(items),
   });
-});
+
+  // add loading delay of 1s
+  await new Promise((r) => setTimeout(r, 1000));
+
+  if (response.ok) {
+    document.body.innerHTML = await response.text();
+    initCartPage();
+  }
+}
+
+window.addEventListener("DOMContentLoaded", uploadCart);

public/styles/global.css

@@ -1,14 +1,8 @@
-.warning {
-  /*noinspection CssUnresolvedCustomProperty*/
-  color: var(--form-element-invalid-border-color); /* defined in picocss */
-}
-
 body > nav {
   position: sticky;
   top: 0;
   z-index: 3;
-  /*noinspection CssUnresolvedCustomProperty*/
-  background-color: var(--background-color); /* defined in picocss */
+  background-color: var(--background-color);
 }
 
 body > nav .icon {
@@ -22,7 +16,7 @@ body > nav > ul li:nth-child(1) > a {
   gap: 1rem;
 }
 
-body > nav [data-tooltip]:not(a,button,input){
+body > nav [data-tooltip]:not(a,button,input) {
   border-bottom: 0;
 }
 
@@ -32,38 +26,6 @@ body > nav [data-tooltip]:not(a,button,input){
   justify-content: center;
 }
 
-#cart-modal article {
-  padding: 40px 30px;
-}
-
-#cart-modal article footer {
-  margin: 0;
-}
-
-#cart-modal article footer h5 {
-  display: grid;
-  place-items: center;
-  margin: 0;
-}
-
-
-#cart-modal #cart-items {
-  height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 5px;
-}
-
-#cart-items article {
-  min-width: 40vw;
-  max-width: 100%;
-  margin: 0;
-  padding-bottom: 0;
-  padding-top: 20px;
+.warning {
+  color: var(--form-element-invalid-border-color);
 }
-
-#cart-items article button {
-  /*noinspection CssUnresolvedCustomProperty*/
-  background-color: var(--del-color); /* defined in picocss */
-  border: 0;
-}

public/styles/views/Cart.css

@@ -1,16 +1,13 @@
-section {
-  margin-bottom: 0;
-}
-
 .cart-item {
-  padding-top: 10px;
   display: flex;
   gap: 1em;
-  border-bottom: 1px solid gray;
+  min-height: 270px;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  padding: 10px 20px;
 }
 
-section:nth-child(2) {
-  border-top: 1px solid gray;
+.cart-item:hover {
+  box-shadow: rgba(99, 99, 99, 0.2) 1px 3px 8px 1px;
 }
 
 .cart-item > img {

public/styles/views/Shop.css

@@ -10,7 +10,17 @@
   display: flex;
   flex-direction: column;
   align-content: center;
-  outline: 1px dotted gray;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+}
+
+#item-grid > a:focus{
+  background-color: transparent;
+}
+
+/*item name*/
+#item-grid > a > hgroup > h5:nth-child(1) {
+  margin-bottom: 0;
 }
 
 #item-grid > a img {

resources/database/dump/cafe.sql

@@ -182,7 +182,8 @@ CREATE TABLE `order_product` (
   CONSTRAINT `order_product_2fk` FOREIGN KEY (`product_id`) REFERENCES `product` (`product_id`) ON UPDATE CASCADE,
   CONSTRAINT `cup_size` CHECK (`cup_size` in ('small','medium','large')),
   CONSTRAINT `milk_type` CHECK (`milk_type` in ('almond','coconut','oat','soy')),
-  CONSTRAINT `quantity_range` CHECK (`quantity` > 0)
+  CONSTRAINT `quantity_range` CHECK (`quantity` > 0),
+  CONSTRAINT `unit_price_range` CHECK (`unit_price` > 0)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 /*!40101 SET character_set_client = @saved_cs_client */;
 
@@ -392,4 +393,4 @@ UNLOCK TABLES;
 /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
 /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
 
--- Dump completed on 2024-04-25 14:25:08
+-- Dump completed on 2024-05-15 16:01:14

resources/schema/Comment.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Comment",
+  "type": "object",
+  "properties": {
+    "comment_id": { "type": "integer" },
+    "text": { "type": "string", "minLength": 1, "maxLength": 2000 },
+    "created_date": { "type": "string", "format": "date-time" },
+    "parent_comment_id": { "type": "integer" },
+    "user_id": { "type": "integer" },
+    "review_id": { "type": "integer" }
+  },
+  "required": ["comment_id", "text", "created_date", "user_id"]
+}

resources/schema/Product.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Product",
+  "description": "Schema for a product object",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the product",
+      "minLength": 3,
+      "maxLength": 255
+    },
+    "calories": {
+      "type": "integer",
+      "description": "The number of calories in the product",
+      "minimum": 0
+    },
+    "img_url": {
+      "type": "string",
+      "format": "uri",
+      "description": "The URL of the product image"
+    },
+    "img_alt_text": {
+      "type": "string",
+      "description": "The alternate text for the product image",
+      "minLength": 5,
+      "maxLength": 150
+    },
+    "category": {
+      "type": "string",
+      "description": "The category of the product",
+      "minLength": 3,
+      "maxLength": 50
+    },
+    "price": {
+      "type": "number",
+      "description": "The price of the product",
+      "minimum": 0
+    },
+    "description": {
+      "type": "string",
+      "description": "Description of the product",
+      "minLength": 1
+    },
+    "created_date": {
+      "type": "string",
+      "format": "date-time",
+      "description": "The date and time when the product was created"
+    }
+  },
+  "required": ["name", "calories", "img_url", "img_alt_text", "category", "price", "description", "created_date"],
+  "additionalProperties": false,
+  "patternProperties": {
+    "img_url": {
+      "pattern": "^.+\\.(png|jpeg|avif|jpg|webp)$",
+      "description": "The URL should end with one of the supported image formats: png, jpeg, avif, jpg, webp"
+    }
+  }
+}

resources/schema/Review.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Review",
+  "type": "object",
+  "properties": {
+    "review_id": { "type": "integer" },
+    "rating": { "type": "integer", "minimum": 1, "maximum": 5 },
+    "created_date": { "type": "string", "format": "date-time" },
+    "text": { "type": "string", "minLength": 2, "maxLength": 2000 },
+    "client_id": { "type": "integer" },
+    "product_id": { "type": "integer" }
+  },
+  "required": ["review_id", "rating", "created_date", "text", "client_id", "product_id"]
+}