Update templates/order_history.html

#7
Files changed (1) hide show
  1. templates/order_history.html +152 -101
templates/order_history.html CHANGED
@@ -10,151 +10,202 @@
10
  background-color: #f8f9fa;
11
  margin: 0;
12
  padding: 0;
13
- text-align: center;
14
  }
15
 
16
  .container {
17
- max-width: 600px;
18
- margin: 40px auto;
19
- background: white;
20
  padding: 20px;
21
- border-radius: 10px;
22
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 
23
  }
24
 
25
- h2 {
26
- color: #007bff;
27
- margin-bottom: 15px;
 
 
28
  }
29
 
30
- .back-button {
31
- display: block;
32
- margin: 10px auto 20px;
33
- background-color: #007bff;
34
- color: white;
35
- padding: 10px 15px;
36
- border: none;
37
- border-radius: 5px;
38
  font-size: 16px;
39
- cursor: pointer;
40
- text-decoration: none;
41
- width: 50%;
42
  }
43
 
44
- .back-button:hover {
45
- background-color: #0056b3;
 
 
 
 
 
46
  }
47
 
48
- .order-card {
49
- background: #fff;
50
- padding: 15px;
 
51
  margin: 10px 0;
52
- border-radius: 8px;
53
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
54
- text-align: left;
55
  }
56
 
57
- .order-card p {
58
- margin: 5px 0;
59
- font-size: 14px;
 
 
 
 
 
 
 
 
 
60
  }
61
 
62
- .order-status {
 
 
 
 
 
63
  font-weight: bold;
64
- padding: 5px 10px;
65
- border-radius: 5px;
66
- display: inline-block;
 
 
 
 
 
 
 
67
  }
68
 
69
- .status-pending {
70
- background-color: #ffc107;
71
- color: #fff;
 
 
 
 
 
 
72
  }
73
 
74
- .status-completed {
75
- background-color: #28a745;
76
- color: #fff;
77
  }
78
 
79
- .status-cancelled {
80
- background-color: #dc3545;
81
- color: #fff;
82
  }
83
 
 
84
  .show-more-btn {
85
- background-color: #007bff;
86
  color: white;
87
- padding: 8px 15px;
88
  border: none;
89
- border-radius: 5px;
90
- font-size: 14px;
91
  cursor: pointer;
92
- margin-top: 10px;
93
- display: block;
94
- width: 50%;
95
- margin-left: auto;
96
- margin-right: auto;
97
  }
98
 
99
  .show-more-btn:hover {
100
- background-color: #0056b3;
101
  }
102
 
 
 
 
 
 
 
 
 
103
  </style>
104
  </head>
105
  <body>
106
 
107
- <div class="container">
108
- <h2>Order History</h2>
109
-
110
- <!-- Back to Menu Button -->
111
- <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
112
-
113
- {% if orders %}
114
- {% for order in orders %}
115
- <div class="order-card {% if loop.index > 3 %}hidden{% endif %}">
116
- <p><strong>Date:</strong> {{ order['CreatedDate'][:10] }}</p>
117
- <p><strong>Order:</strong> {{ order['Order_Details__c'] }}</p>
118
- <p><strong>Total Amount:</strong> ${{ order['Total_Amount__c'] }}</p>
119
- <p><strong>Discount:</strong> ${{ order['Discount__c'] }}</p>
120
- <p><strong>Total Bill:</strong> ${{ order['Total_Bill__c'] }}</p>
121
- <p class="order-status
122
- {% if order['Order_Status__c'] == 'Pending' %}status-pending
123
- {% elif order['Order_Status__c'] == 'Completed' %}status-completed
124
- {% elif order['Order_Status__c'] == 'Cancelled' %}status-cancelled{% endif %}">
125
- {{ order['Order_Status__c'] }}
126
- </p>
127
- </div>
128
- {% endfor %}
129
-
130
- <!-- Show More / Show Less Button -->
131
- {% if orders|length > 3 %}
132
- <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
133
- {% endif %}
134
- {% else %}
135
- <p>No past orders found.</p>
136
- {% endif %}
137
  </div>
 
 
 
 
 
 
 
 
 
 
138
 
139
- <script>
140
- function toggleOrders() {
141
- let hiddenOrders = document.querySelectorAll(".order-card.hidden");
142
- let button = document.querySelector(".show-more-btn");
143
 
144
- if (hiddenOrders[0].style.display === "none" || hiddenOrders[0].style.display === "") {
145
- hiddenOrders.forEach(order => order.style.display = "block");
146
- button.textContent = "Show Less";
147
- } else {
148
- hiddenOrders.forEach(order => order.style.display = "none");
149
- button.textContent = "Show More";
150
- }
151
- }
152
 
153
- // Initially hide extra orders
154
- document.addEventListener("DOMContentLoaded", () => {
155
- document.querySelectorAll(".order-card.hidden").forEach(order => order.style.display = "none");
156
- });
157
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
 
159
  </body>
160
  </html>
 
 
10
  background-color: #f8f9fa;
11
  margin: 0;
12
  padding: 0;
 
13
  }
14
 
15
  .container {
16
+ width: 70%;
17
+ margin: 30px auto;
 
18
  padding: 20px;
19
+ background-color: #fdf4e3;
20
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21
+ border-radius: 8px;
22
  }
23
 
24
+ .order-item {
25
+ padding: 10px;
26
+ border: 2px solid #ffe5b4;
27
+ margin-bottom: 20px;
28
+ border-radius:5px;
29
  }
30
 
31
+ .order-details {
 
 
 
 
 
 
 
32
  font-size: 16px;
33
+ font-weight: bold;
34
+ color: #f57c00;
 
35
  }
36
 
37
+ .order-details p {
38
+ margin: 5px 0;
39
+ }
40
+
41
+ .order-date-time {
42
+ font-size: 14px;
43
+ color: gray;
44
  }
45
 
46
+ .order-price {
47
+ font-size: 16px;
48
+ font-weight: bold;
49
+ color: #ff7f00;
50
  margin: 10px 0;
 
 
 
51
  }
52
 
53
+ .order-buttons {
54
+ margin-top: 10px;
55
+ }
56
+
57
+ .reorder-btn, .rate-order-btn {
58
+ background-color: #ff7f00;
59
+ color: white;
60
+ border: none;
61
+ padding: 8px 16px;
62
+ margin-right: 10px;
63
+ cursor: pointer;
64
+ border-radius: 4px;
65
  }
66
 
67
+ .reorder-btn:hover, .rate-order-btn:hover {
68
+ background-color: #f55b00;
69
+ }
70
+
71
+ .total-price {
72
+ font-size: 18px;
73
  font-weight: bold;
74
+ color: #333;
75
+ margin-top: 20px;
76
+ }
77
+
78
+ .order-heading {
79
+ font-size: 20px;
80
+ font-weight: bold;
81
+ color: #f57c00;
82
+ margin-bottom: 20px;
83
+ text-align:center;
84
  }
85
 
86
+ .back-button {
87
+ display: inline-block;
88
+ background-color: green;
89
+ color: white;
90
+ padding: 10px 20px;
91
+ text-decoration: none;
92
+ font-weight: bold;
93
+ border-radius: 4px;
94
+ margin-bottom: 20px;
95
  }
96
 
97
+ .back-button:hover {
98
+ background-color: darkgreen;
 
99
  }
100
 
101
+ /* Hide additional orders by default */
102
+ .more-orders {
103
+ display: none;
104
  }
105
 
106
+ /* Style for the Show More/Show Less button */
107
  .show-more-btn {
108
+ background-color: #ff7f00;
109
  color: white;
110
+ padding: 10px 20px;
111
  border: none;
 
 
112
  cursor: pointer;
113
+ border-radius: 4px;
114
+ margin-top: 20px;
 
 
 
115
  }
116
 
117
  .show-more-btn:hover {
118
+ background-color: #f55b00;
119
  }
120
 
121
+ @media (max-width: 768px) {
122
+ .order-details, .order-price, .order-date-time {
123
+ font-size: 14px;
124
+ }
125
+ .order-heading {
126
+ font-size: 18px;
127
+ }
128
+ }
129
  </style>
130
  </head>
131
  <body>
132
 
133
+ <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
134
+
135
+ <div class="container">
136
+ <div class="order-heading">Order History</div>
137
+
138
+ <!-- Loop through the orders (first 3) -->
139
+ {% for order in orders[:3] %}
140
+ <div class="order-item">
141
+ <!-- Order details: item names and quantities -->
142
+ <div class="order-details">
143
+ <p>{{ order.formatted_items }}</p>
144
+ </div>
145
+
146
+ <!-- Order date and time -->
147
+ <div class="order-date-time">
148
+ <p>{{ order.formatted_date }}</p>
149
+ </div>
150
+
151
+ <!-- Total price -->
152
+ <div class="order-price">
153
+ <p>Total: ₹{{ order.Total_Bill__c }}</p>
154
+ </div>
 
 
 
 
 
 
 
 
155
  </div>
156
+ {% endfor %}
157
+
158
+ <!-- Loop through the remaining orders (hidden initially) -->
159
+ <div class="more-orders" id="more-orders">
160
+ {% for order in orders[3:] %}
161
+ <div class="order-item">
162
+ <!-- Order details: item names and quantities -->
163
+ <div class="order-details">
164
+ <p>{{ order.formatted_items }}</p>
165
+ </div>
166
 
167
+ <!-- Order date and time -->
168
+ <div class="order-date-time">
169
+ <p>Order Placed:{{ order.formatted_date }}</p>
170
+ </div>
171
 
172
+ <!-- Total price -->
173
+ <div class="order-price">
174
+ <p>Total: ₹{{ order.Total_Bill__c }}</p>
175
+ </div>
176
+ </div>
177
+ {% endfor %}
178
+ </div>
 
179
 
180
+ <!-- Show More button -->
181
+ {% if orders|length > 3 %}
182
+ <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
183
+ {% endif %}
184
+
185
+ <!-- If no orders exist -->
186
+ {% if not orders %}
187
+ <div class="no-orders">
188
+ <p>No orders found.</p>
189
+ </div>
190
+ {% endif %}
191
+ </div>
192
+
193
+ <script>
194
+ // Function to toggle between Show More and Show Less
195
+ function toggleOrders() {
196
+ const moreOrders = document.getElementById("more-orders");
197
+ const button = document.querySelector(".show-more-btn");
198
+
199
+ if (moreOrders.style.display === "none") {
200
+ moreOrders.style.display = "block";
201
+ button.innerHTML = "Show Less"; // Change button text
202
+ } else {
203
+ moreOrders.style.display = "none";
204
+ button.innerHTML = "Show More"; // Change button text back
205
+ }
206
+ }
207
+ </script>
208
 
209
  </body>
210
  </html>
211
+