Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubsubbu12341
Sleeping

App Files Community
Subbu1304 commited on
Commit
96890cc
·
verified ·
1 Parent(s): 2d4a9a0

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +54 -73
templates/order_history.html CHANGED
@@ -1,13 +1,10 @@
1
-
2
-
3
-
4
  <!DOCTYPE html>
5
  <html lang="en">
6
  <head>
7
- <meta charset="UTF-8">
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
  <title>Order History</title>
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
11
  <style>
12
  /* Reset padding and margin for all elements */
13
  * {
@@ -17,37 +14,34 @@
17
  }
18
  body {
19
  font-family: Arial, sans-serif;
20
- background-color: #fdf4e3; /* Light orange background for the whole page */
21
  margin: 0;
22
  padding: 0;
23
  }
24
- /* Light Orange Background for the back-side */
25
  .background {
26
  padding: 8vw 0;
27
  position: relative;
28
  }
29
- /* Green Back Button styling */
30
  .back-button {
31
  position: absolute;
32
  top: 15px;
33
  left: 15px;
34
  display: inline-block;
35
- background-color: green; /* Green color */
36
  color: white;
37
  padding: 10px 20px;
38
  text-decoration: none;
39
  font-weight: bold;
40
  border-radius: 4px;
41
- z-index: 10; /* Ensure it stays above other content */
42
  }
43
  .back-button:hover {
44
- background-color: darkgreen; /* Darker green color on hover */
45
  }
46
- /* Container */
47
  .container {
48
- width: 85%; /* Decreased width for smaller template size */
49
- max-width: 450px; /* Reduced max-width */
50
- margin: 30px auto 0; /* Added margin-top to push content down */
51
  padding: 15px;
52
  background-color: white;
53
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -88,26 +82,22 @@
88
  .order-status.completed {
89
  color: #28a745;
90
  }
91
- .order-buttons {
92
- margin-top: 6px;
93
- }
94
  .generate-invoice-btn {
95
  background-color: #ff7f00;
96
  color: white;
97
  border: none;
98
  padding: 6px 12px;
99
- margin-right: 8px;
100
  cursor: pointer;
101
  border-radius: 4px;
 
102
  }
103
- .generate-invoice-btn:hover {
104
  background-color: #f55b00;
105
  }
106
- .total-price {
107
- font-size: 14px;
108
- font-weight: bold;
109
- color: #333;
110
- margin-top: 15px;
111
  }
112
  .order-heading {
113
  font-size: 16px;
@@ -129,7 +119,6 @@
129
  .show-more-btn:hover {
130
  background-color: #f55b00;
131
  }
132
- /* Responsive design adjustments */
133
  @media (max-width: 480px) {
134
  .container {
135
  width: 90%;
@@ -161,69 +150,56 @@
161
  </head>
162
  <body>
163
 
164
- <!-- Background container with light orange -->
165
  <div class="background">
166
  <a href="{{ url_for('menu.menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
167
 
168
  <div class="container">
169
  <div class="order-heading">Order History</div>
170
 
171
- <!-- Loop through the orders (first 3) -->
172
  {% for order in orders[:3] %}
173
  <div class="order-item">
174
  <div class="order-details">
175
  <p>{{ order.formatted_items }}</p>
176
  </div>
177
-
178
  <div class="order-date-time">
179
  <p>{{ order.formatted_date }}</p>
180
  </div>
181
-
182
  <div class="order-price">
183
  <p>Total: ₹{{ order.Total_Bill__c }}</p>
184
  </div>
185
-
186
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
187
  <p>Status: {{ order.order_status }}</p>
188
  </div>
189
-
190
- <!-- Add the Generate Invoice Button -->
191
- <button class="generate-invoice-btn" onclick="generateInvoice('{{ order.Id }}')">Generate Invoice</button>
192
  </div>
193
  {% endfor %}
194
 
195
- <!-- Loop through the remaining orders (hidden initially) -->
196
- <div class="more-orders" id="more-orders">
197
  {% for order in orders[3:] %}
198
  <div class="order-item">
199
  <div class="order-details">
200
  <p>{{ order.formatted_items }}</p>
201
  </div>
202
-
203
  <div class="order-date-time">
204
  <p>Order Placed: {{ order.formatted_date }}</p>
205
  </div>
206
-
207
  <div class="order-price">
208
  <p>Total: ₹{{ order.Total_Bill__c }}</p>
209
  </div>
210
-
211
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
212
  <p>Status: {{ order.order_status }}</p>
213
  </div>
214
-
215
- <!-- Add the Generate Invoice Button for the rest of the orders -->
216
- <button class="generate-invoice-btn" onclick="generateInvoice('{{ order.Id }}')">Generate Invoice</button>
217
  </div>
218
  {% endfor %}
219
  </div>
220
 
221
- <!-- Show More button -->
222
  {% if orders|length > 3 %}
223
  <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
224
  {% endif %}
225
 
226
- <!-- If no orders exist -->
227
  {% if not orders %}
228
  <div class="no-orders">
229
  <p>No orders found.</p>
@@ -233,43 +209,48 @@
233
  </div>
234
 
235
  <script>
236
- // Function to toggle between Show More and Show Less
237
  function toggleOrders() {
238
  const moreOrders = document.getElementById("more-orders");
239
  const button = document.querySelector(".show-more-btn");
240
- if (moreOrders.style.display === "none") {
 
241
  moreOrders.style.display = "block";
242
- button.innerHTML = "Show Less"; // Change button text
243
  } else {
244
  moreOrders.style.display = "none";
245
- button.innerHTML = "Show More"; // Change button text back
246
  }
247
  }
248
 
249
- // Function to generate the invoice for a specific order
250
- function generateInvoice(orderId) {
251
- fetch(`/generate_invoice/${orderId}`, {
252
- method: 'GET',
253
- headers: {
254
- 'Content-Type': 'application/json',
255
- },
256
- })
257
- .then(response => {
258
- if (!response.ok) {
259
- throw new Error('Error generating invoice: ' + response.statusText);
260
- }
261
- return response.blob(); // Handle the response as a blob (PDF file)
262
- })
263
- .then(blob => {
264
- const link = document.createElement('a');
265
- link.href = URL.createObjectURL(blob);
266
- link.download = `invoice_${orderId}.pdf`; // Set the name for the downloaded file
267
- link.click(); // Programmatically click the link to trigger the download
268
- })
269
- .catch(error => {
270
- console.error('Error:', error);
271
- alert('There was an error generating the invoice.');
272
- });
 
 
 
 
 
273
  }
274
  </script>
275
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Order History</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
8
  <style>
9
  /* Reset padding and margin for all elements */
10
  * {
 
14
  }
15
  body {
16
  font-family: Arial, sans-serif;
17
+ background-color: #fdf4e3;
18
  margin: 0;
19
  padding: 0;
20
  }
 
21
  .background {
22
  padding: 8vw 0;
23
  position: relative;
24
  }
 
25
  .back-button {
26
  position: absolute;
27
  top: 15px;
28
  left: 15px;
29
  display: inline-block;
30
+ background-color: green;
31
  color: white;
32
  padding: 10px 20px;
33
  text-decoration: none;
34
  font-weight: bold;
35
  border-radius: 4px;
36
+ z-index: 10;
37
  }
38
  .back-button:hover {
39
+ background-color: darkgreen;
40
  }
 
41
  .container {
42
+ width: 85%;
43
+ max-width: 450px;
44
+ margin: 30px auto 0;
45
  padding: 15px;
46
  background-color: white;
47
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
82
  .order-status.completed {
83
  color: #28a745;
84
  }
 
 
 
85
  .generate-invoice-btn {
86
  background-color: #ff7f00;
87
  color: white;
88
  border: none;
89
  padding: 6px 12px;
90
+ margin-top: 8px;
91
  cursor: pointer;
92
  border-radius: 4px;
93
+ font-weight: bold;
94
  }
95
+ .generate-invoice-btn:hover:not(:disabled) {
96
  background-color: #f55b00;
97
  }
98
+ .generate-invoice-btn:disabled {
99
+ background-color: #cccccc;
100
+ cursor: not-allowed;
 
 
101
  }
102
  .order-heading {
103
  font-size: 16px;
 
119
  .show-more-btn:hover {
120
  background-color: #f55b00;
121
  }
 
122
  @media (max-width: 480px) {
123
  .container {
124
  width: 90%;
 
150
  </head>
151
  <body>
152
 
 
153
  <div class="background">
154
  <a href="{{ url_for('menu.menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
155
 
156
  <div class="container">
157
  <div class="order-heading">Order History</div>
158
 
159
+ <!-- First 3 orders -->
160
  {% for order in orders[:3] %}
161
  <div class="order-item">
162
  <div class="order-details">
163
  <p>{{ order.formatted_items }}</p>
164
  </div>
 
165
  <div class="order-date-time">
166
  <p>{{ order.formatted_date }}</p>
167
  </div>
 
168
  <div class="order-price">
169
  <p>Total: ₹{{ order.Total_Bill__c }}</p>
170
  </div>
 
171
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
172
  <p>Status: {{ order.order_status }}</p>
173
  </div>
174
+ <button class="generate-invoice-btn" onclick="generateInvoice('{{ order.Id }}', this)">Generate Invoice</button>
 
 
175
  </div>
176
  {% endfor %}
177
 
178
+ <!-- Hidden more orders -->
179
+ <div class="more-orders" id="more-orders" style="display:none;">
180
  {% for order in orders[3:] %}
181
  <div class="order-item">
182
  <div class="order-details">
183
  <p>{{ order.formatted_items }}</p>
184
  </div>
 
185
  <div class="order-date-time">
186
  <p>Order Placed: {{ order.formatted_date }}</p>
187
  </div>
 
188
  <div class="order-price">
189
  <p>Total: ₹{{ order.Total_Bill__c }}</p>
190
  </div>
 
191
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
192
  <p>Status: {{ order.order_status }}</p>
193
  </div>
194
+ <button class="generate-invoice-btn" onclick="generateInvoice('{{ order.Id }}', this)">Generate Invoice</button>
 
 
195
  </div>
196
  {% endfor %}
197
  </div>
198
 
 
199
  {% if orders|length > 3 %}
200
  <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
201
  {% endif %}
202
 
 
203
  {% if not orders %}
204
  <div class="no-orders">
205
  <p>No orders found.</p>
 
209
  </div>
210
 
211
  <script>
 
212
  function toggleOrders() {
213
  const moreOrders = document.getElementById("more-orders");
214
  const button = document.querySelector(".show-more-btn");
215
+ if (!moreOrders || !button) return;
216
+ if (moreOrders.style.display === "none" || moreOrders.style.display === "") {
217
  moreOrders.style.display = "block";
218
+ button.innerHTML = "Show Less";
219
  } else {
220
  moreOrders.style.display = "none";
221
+ button.innerHTML = "Show More";
222
  }
223
  }
224
 
225
+ function generateInvoice(orderId, btn) {
226
+ btn.disabled = true;
227
+ btn.textContent = "Generating...";
228
+ fetch(`/generate_invoice/${orderId}`, {
229
+ method: 'GET',
230
+ headers: {
231
+ 'Content-Type': 'application/json',
232
+ },
233
+ })
234
+ .then(response => {
235
+ if (!response.ok) {
236
+ throw new Error('Error generating invoice: ' + response.statusText);
237
+ }
238
+ return response.blob();
239
+ })
240
+ .then(blob => {
241
+ const link = document.createElement('a');
242
+ link.href = URL.createObjectURL(blob);
243
+ link.download = `invoice_${orderId}.pdf`;
244
+ link.click();
245
+ })
246
+ .catch(error => {
247
+ alert('There was an error generating the invoice.');
248
+ console.error(error);
249
+ })
250
+ .finally(() => {
251
+ btn.disabled = false;
252
+ btn.textContent = "Generate Invoice";
253
+ });
254
  }
255
  </script>
256