voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 10 days ago

Commit

d42f6ff

verified ·

1 Parent(s): b2aa51e

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +67 -194

templates/menu_page.html CHANGED Viewed

@@ -67,6 +67,42 @@
       border-radius: 4px;
       border: 1px solid #ccc;
     }
   </style>
 </head>
 <body>
@@ -125,201 +161,38 @@
     <button id="back-to-cart-btn" class="order-btn">Back to Cart</button>
   </div>
-  <script>
-    // Sample menu data
-    const menuData = {
-      'Main Course': [
-        { name: "Chicken Biryani", price: 250 },
-        { name: "Veg Biryani", price: 200 },
-        { name: "Mutton Biryani", price: 300 }
-      ],
-      'Appetizers': [
-        { name: "Paneer Tikka", price: 180 },
-        { name: "Chicken Wings", price: 220 }
-      ]
-    };
-    // Initialize cart as an empty array
-    let cart = [];
-    // Select page elements
-    const categoryPage = document.getElementById('page1');
-    const mainCoursePage = document.getElementById('main-course-page');
-    const appetizerPage = document.getElementById('appetizer-page');
-    const cartPage = document.getElementById('cart-page');
-    const orderPage = document.getElementById('order-page');
-    // Category selection event listeners
-    document.getElementById("main-course-btn").addEventListener("click", () => {
-      categoryPage.style.display = "none";
-      mainCoursePage.style.display = "block";
-      displayMenuItems('Main Course');
-    });
-    document.getElementById("appetizer-btn").addEventListener("click", () => {
-      categoryPage.style.display = "none";
-      appetizerPage.style.display = "block";
-      displayMenuItems('Appetizers');
-    });
-    // Back to category selection buttons
-    document.getElementById("back-to-category-btn").addEventListener("click", () => {
-      mainCoursePage.style.display = "none";
-      categoryPage.style.display = "block";
-    });
-    document.getElementById("back-to-category-btn2").addEventListener("click", () => {
-      appetizerPage.style.display = "none";
-      categoryPage.style.display = "block";
-    });
-    // View Cart buttons
-    document.getElementById("view-cart-btn1").addEventListener("click", () => {
-      mainCoursePage.style.display = "none";
-      cartPage.style.display = "block";
-      displayCartItems();
-    });
-    document.getElementById("view-cart-btn2").addEventListener("click", () => {
-      appetizerPage.style.display = "none";
-      cartPage.style.display = "block";
-      displayCartItems();
-    });
-    // Navigation from Cart page
-    document.getElementById("back-to-menu-btn").addEventListener("click", () => {
-      cartPage.style.display = "none";
-      categoryPage.style.display = "block";
-    });
-    document.getElementById("proceed-order-btn").addEventListener("click", () => {
-      cartPage.style.display = "none";
-      orderPage.style.display = "block";
-    });
-    // Navigation from Order page back to Cart
-    document.getElementById("back-to-cart-btn").addEventListener("click", () => {
-      orderPage.style.display = "none";
-      cartPage.style.display = "block";
-      displayCartItems();
-    });
-    // Function to populate menu items based on category
-    function displayMenuItems(category) {
-      const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
-      menuContainer.innerHTML = '';
-      if (menuData[category]) {
-        menuData[category].forEach(item => {
-          const itemElement = document.createElement('div');
-          itemElement.classList.add('menu-item');
-          itemElement.innerHTML = `
-            <div class="details">
-              <h3>${item.name}</h3>
-              <p class="price">Price: ₹${item.price}</p>
-            </div>
-            <button class="order-btn" onclick="addToCart('${item.name}', 1)">Order</button>
-          `;
-          menuContainer.appendChild(itemElement);
-        });
-      }
-    }
-    // Function to add an item to the cart
-    function addToCart(itemName, quantity) {
-      const item = findItem(itemName);
-      if (item) {
-        // Check if item already exists in the cart and update quantity
-        const cartItem = cart.find(ci => ci.name.toLowerCase() === itemName.toLowerCase());
-        if (cartItem) {
-          cartItem.quantity += quantity;
-        } else {
-          cart.push({ name: item.name, price: item.price, quantity: quantity });
-        }
-        alert(item.name + " added to cart!");
-      }
-    }
-    // Function to find item in the menu (checks both categories)
-    function findItem(itemName) {
-      let item = menuData['Main Course'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
-      if (!item) {
-        item = menuData['Appetizers'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
-      }
-      return item;
-    }
-    // Function to display cart items
-    function displayCartItems() {
-      const cartItemsContainer = document.getElementById('cart-items');
-      cartItemsContainer.innerHTML = '';
-      let total = 0;
-      if (cart.length === 0) {
-        cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
-      } else {
-        cart.forEach(item => {
-          const itemDiv = document.createElement('div');
-          itemDiv.classList.add('menu-item');
-          itemDiv.innerHTML = `
-            <div class="details">
-              <h3>${item.name}</h3>
-              <p>Price: ₹${item.price} x ${item.quantity}</p>
-            </div>
-          `;
-          cartItemsContainer.appendChild(itemDiv);
-          total += item.price * item.quantity;
-        });
-      }
-      document.getElementById('cart-total').innerText = "Total: ₹" + total;
-    }
-    // Handle Order Form Submission and Salesforce integration
-    document.getElementById("order-form").addEventListener("submit", function(e) {
-      e.preventDefault();
-      // Collecting the form data
-      const customerName = document.getElementById("customer-name").value;
-      const customerEmail = document.getElementById("customer-email").value;
-      const customerPhone = document.getElementById("customer-phone").value;
-      const customerAddress = document.getElementById("customer-address").value;
-      // Calculate total amount
-      let total = 0;
-      cart.forEach(item => {
-        total += item.price * item.quantity;
-      });
-      // Prepare the order details
-      const orderDetails = {
-        customerName,
-        customerEmail,
-        customerPhone,
-        customerAddress,
-        items: cart,
-        totalAmount: total
-      };
-      // Example Salesforce integration
-      // Replace the URL below with your actual Salesforce endpoint and configure authentication as needed.
-      fetch('https://your-salesforce-endpoint.com/api/orders', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': 'Bearer YOUR_OAUTH_TOKEN'  // Replace with actual OAuth token
-        },
-        body: JSON.stringify(orderDetails)
-      })
-      .then(response => response.json())
-      .then(data => {
-        alert("Order placed successfully! Order ID: " + data.orderId);
-        // Clear the cart after successful order placement
-        cart = [];
-        // Navigate back to the category selection page
-        orderPage.style.display = "none";
-        categoryPage.style.display = "block";
-      })
-      .catch(error => {
-        console.error("Error placing order:", error);
-        alert("There was an error placing your order. Please try again.");
-      });
-    });
   </script>
 </body>

       border-radius: 4px;
       border: 1px solid #ccc;
     }
+    /* Salesforce OAuth Setup Styling */
+    .oauth-setup {
+      background-color: #e7f5ff;
+      padding: 20px;
+      border-radius: 8px;
+      margin-top: 30px;
+      border: 1px solid #d1e0e8;
+    }
+    .oauth-setup h2 {
+      color: #0070d2;
+      font-size: 1.8rem;
+      text-align: center;
+    }
+    .oauth-setup ol {
+      font-size: 1.1rem;
+      padding-left: 20px;
+    }
+    .oauth-setup li {
+      margin-bottom: 10px;
+    }
+    .oauth-setup pre {
+      background-color: #f1f1f1;
+      padding: 15px;
+      border-radius: 5px;
+      margin-top: 10px;
+    }
+    .oauth-setup code {
+      font-size: 1rem;
+      font-family: monospace;
+    }
   </style>
 </head>
 <body>
     <button id="back-to-cart-btn" class="order-btn">Back to Cart</button>
   </div>
+  <!-- Salesforce OAuth Setup Section -->
+  <div class="oauth-setup">
+    <h2>Salesforce OAuth Setup for API Integration</h2>
+    <p>Follow these steps to create a Salesforce Connected App for API integration:</p>
+    <ol>
+      <li>Go to Salesforce Setup by clicking on the gear icon in the top right corner.</li>
+      <li>In the quick find box, type <strong>App Manager</strong> and click on it.</li>
+      <li>Click on <strong>New Connected App</strong> (this is where you set up OAuth).</li>
+      <li>Fill out the Connected App details:</li>
+      <ul>
+        <li><strong>App Name:</strong> "BiryaniHub API Integration"</li>
+        <li><strong>API Name:</strong> Automatically filled.</li>
+        <li><strong>Contact Email:</strong> Your email.</li>
+      </ul>
+      <li>Under <strong>API (Enable OAuth Settings)</strong>, check <strong>Enable OAuth Settings</strong> and provide the following:</li>
+      <ul>
+        <li><strong>Callback URL:</strong> <code>https://login.salesforce.com</code></li>
+        <li><strong>Selected OAuth Scopes:</strong> Choose <code>Full Access (full)</code> or <code>API (api)</code>.</li>
+      </ul>
+      <li>Click <strong>Save</strong> to create the Connected App.</li>
+    </ol>
+    <pre><code>Consumer Key: 3MVG9WVXk15qiz1JbtW1tT9a7Wnkos2RuGamw6p1lC5uPescT5NB2nPygpo6rQ87K1T.zBEn.wR.A6JdgHnIU</code></pre>
+    <pre><code>Consumer Secret: A75C6B7801D5D20BED0E46631CF58C4F7FF28E4DAF442FE667553D29C35C0451</code></pre>
+    <div>
+      <button class="order-btn">Go to Salesforce Setup</button>
+    </div>
+  </div>
+  <script>
+    // JavaScript code for menu functionality, order submission, etc.
   </script>
 </body>