Hugging Face's logo

Spaces:
Rammohan0504
/
BiryaniHubflask37-1
Sleeping

App Files Community
Rammohan0504 commited on
Commit
368bf06
·
verified ·
1 Parent(s): 861315a

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +109 -87
templates/order_history.html CHANGED
@@ -73,105 +73,127 @@
73
  padding: 15px 10px;
74
  margin-top: 20px;
75
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </style>
77
  </head>
78
  <body>
79
 
80
- <div class="container">
81
- <div class="order-history-container">
82
- <h4 class="mb-4 text-center">Your Order History</h4>
83
-
84
- {% if orders %}
85
- {% for order in orders %}
86
- <h5>Order on: {{ order.CreatedDate }}</h5>
87
-
88
- {% for line in order.Order_Details__c.split('\n') %}
89
- {% set item_parts = line.split('|') %}
90
-
91
- <!-- Extract image URL from the Order_Details string -->
92
- {% set image_url = item_parts[4].strip().split('Image: ')[-1] %}
93
-
94
- <div class="order-item">
95
- <!-- Display Item Image -->
96
- <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}"
97
- onerror="this.src='/static/placeholder.jpg';">
98
-
99
- <div class="order-item-details">
100
- <div class="order-item-title">{{ item_parts[0].strip() }}</div>
101
- <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
102
- <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div>
103
- </div>
104
-
105
- <button class="reorder-button"
106
- onclick="addToCart('{{ item_parts[0].strip() }}')"
107
- id="{{ item_parts[0].strip() }}"
108
- data-price="{{ item_parts[3].strip().replace('Price:', '') }}"
109
- data-image="{{ image_url }}"
110
- data-category="Main Course"
111
- data-section="Reordered Items">
112
- Reorder
113
- </button>
114
- </div>
115
- {% endfor %}
116
- {% endfor %}
117
- {% else %}
118
- <p class="text-center">No order History Available</p>
119
- {% endif %}
120
 
121
- </div>
122
- </div>
123
-
124
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
 
126
- <script>
127
- function addToCart(itemName) {
128
- const button = document.getElementById(itemName); // Get the button element by its ID
129
- let itemPrice = button.dataset.price; // Get price from data-price attribute
130
- const itemImage = button.dataset.image; // Get image URL from data-image attribute
131
- const category = button.dataset.category; // Category of the item
132
- const section = button.dataset.section; // Section of the item
133
 
134
- // Ensure the price is treated as a string (e.g., "$16.0")
135
- itemPrice = String(itemPrice); // Convert item price to a string (e.g., "$16.0")
 
136
 
137
- // Validate that all required data is available
138
- if (!itemPrice || !itemImage || !itemName || !category || !section) {
139
- alert('Missing required item data.');
140
- return;
141
- }
 
 
142
 
143
- // Send data to the backend as JSON
144
- const dataToSend = {
145
- itemName: itemName,
146
- itemPrice: itemPrice, // Send price as string
147
- itemImage: itemImage,
148
- addons: [], // Example: No addons for now
149
- instructions: "", // Example: No instructions for now
150
- category: category,
151
- section: section
152
- };
153
 
154
- fetch('/cart/add', {
155
- method: 'POST',
156
- headers: {
157
- 'Content-Type': 'application/json',
158
- },
159
- body: JSON.stringify(dataToSend),
160
- })
161
- .then(response => response.json())
162
- .then(data => {
163
- if (data.success) {
164
- alert('Item added to cart successfully!');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  } else {
166
- alert('Error: ' + data.error);
 
 
 
 
 
167
  }
168
- })
169
- .catch(error => {
170
- alert('An error occurred: ' + error);
171
- });
172
- }
173
-
174
- </script>
175
 
176
  </body>
177
  </html>
 
73
  padding: 15px 10px;
74
  margin-top: 20px;
75
  }
76
+ .show-more-btn {
77
+ background-color: #ff5722;
78
+ color: #ffffff;
79
+ padding: 8px 16px;
80
+ border-radius: 25px;
81
+ cursor: pointer;
82
+ }
83
+ .show-more-btn:hover {
84
+ background-color: #e64a19;
85
+ }
86
+ .nav-buttons {
87
+ display: flex;
88
+ justify-content: space-between;
89
+ margin-top: 20px;
90
+ }
91
  </style>
92
  </head>
93
  <body>
94
 
95
+ <div class="container">
96
+ <div class="order-history-container">
97
+ <h4 class="mb-4 text-center">Your Order History</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
 
99
+ {% if orders %}
100
+ <div id="order-list">
101
+ {% for order in orders[:5] %}
102
+ <h5>Order on: {{ order.CreatedDate }}</h5>
103
+ {% for line in order.Order_Details__c.split('\n') %}
104
+ {% set item_parts = line.split('|') %}
105
+
106
+ <!-- Extract image URL from the Order_Details string -->
107
+ {% set image_url = item_parts[4].strip().split('Image: ')[-1] %}
108
+
109
+ <div class="order-item">
110
+ <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}"
111
+ onerror="this.src='/static/placeholder.jpg';">
112
+
113
+ <div class="order-item-details">
114
+ <div class="order-item-title">{{ item_parts[0].strip() }}</div>
115
+ <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
116
+ <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div>
117
+ </div>
118
+ <button class="reorder-button"
119
+ onclick="addToCart('{{ item_parts[0].strip() }}')"
120
+ id="{{ item_parts[0].strip() }}"
121
+ data-price="{{ item_parts[3].strip().replace('Price:', '') }}"
122
+ data-image="{{ image_url }}"
123
+ data-category="Main Course"
124
+ data-section="Reordered Items">
125
+ Reorder
126
+ </button>
127
+ </div>
128
+ {% endfor %}
129
+ {% endfor %}
130
+ </div>
131
 
132
+ <!-- Show More / Show Less -->
133
+ <button id="show-more" class="show-more-btn" onclick="toggleOrders()">Show More</button>
 
 
 
 
 
134
 
135
+ {% else %}
136
+ <p class="text-center">No order history available.</p>
137
+ {% endif %}
138
 
139
+ <!-- Navigation Buttons -->
140
+ <div class="nav-buttons">
141
+ <a href="/menu" class="reorder-button">Back to Menu</a>
142
+ <a href="/cart" class="reorder-button">Go to Cart</a>
143
+ </div>
144
+ </div>
145
+ </div>
146
 
147
+ <script>
148
+ // Function to toggle showing more orders
149
+ function toggleOrders() {
150
+ const orderList = document.getElementById("order-list");
151
+ const showMoreBtn = document.getElementById("show-more");
 
 
 
 
 
152
 
153
+ // Show all orders
154
+ if (orderList.children.length === 5) {
155
+ // Add more orders dynamically (can be done by modifying backend response, or manually here)
156
+ {% for order in orders[5:] %}
157
+ {% for line in order.Order_Details__c.split('\n') %}
158
+ {% set item_parts = line.split('|') %}
159
+
160
+ <!-- Extract image URL from the Order_Details string -->
161
+ {% set image_url = item_parts[4].strip().split('Image: ')[-1] %}
162
+
163
+ const newOrderItem = document.createElement("div");
164
+ newOrderItem.classList.add("order-item");
165
+ newOrderItem.innerHTML = `
166
+ <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}"
167
+ onerror="this.src='/static/placeholder.jpg';">
168
+ <div class="order-item-details">
169
+ <div class="order-item-title">{{ item_parts[0].strip() }}</div>
170
+ <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
171
+ <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div>
172
+ </div>
173
+ <button class="reorder-button"
174
+ onclick="addToCart('{{ item_parts[0].strip() }}')"
175
+ id="{{ item_parts[0].strip() }}"
176
+ data-price="{{ item_parts[3].strip().replace('Price:', '') }}"
177
+ data-image="{{ image_url }}"
178
+ data-category="Main Course"
179
+ data-section="Reordered Items">
180
+ Reorder
181
+ </button>
182
+ `;
183
+ orderList.appendChild(newOrderItem);
184
+ {% endfor %}
185
+ {% endfor %}
186
+ showMoreBtn.innerText = "Show Less"; // Change button text to "Show Less"
187
  } else {
188
+ // Show only 5 orders initially
189
+ const allOrderItems = orderList.children;
190
+ while (allOrderItems.length > 5) {
191
+ orderList.removeChild(allOrderItems[5]); // Remove extra orders
192
+ }
193
+ showMoreBtn.innerText = "Show More"; // Change button text back to "Show More"
194
  }
195
+ }
196
+ </script>
 
 
 
 
 
197
 
198
  </body>
199
  </html>