Added order-page with working clock

raynelfss · Apr 18, 2022 · f91c5df · f91c5df
1 parent 6703e8d
commit f91c5df
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 3 deletions.
diff --git a/build/404.html b/build/404.html
@@ -2,5 +2,6 @@
 
 {% block body %}
     <h1>Oops! Looks like the page doesn't exist anymore</h1>
-    <a href="/"><p>Click Here</a>To go to the Home Page</p>
+    <a href="/"><p>Click Here</p></a>
+    <p>To go to the Home Page</p>
 {% endblock %}
diff --git a/build/orders-page.html b/build/orders-page.html
@@ -1,12 +1,30 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Item List</title>
+        <title>Active Orders</title>
         <link href="/styles/order-page.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
         <div class = "toolbar">
             <img src="/imgs/Logo.png" href="/" width="200px">
         </div>
+        <div class="header">
+            <h1>Active orders:</h1>
+            <h2>Current time:</h2>
+            <h2 id="currentTime"></h2>
+        </div>
+        <table class="ptable", id="ptable">
+            <tr>
+                <th>OrderID</th>
+                <th>Items</th>
+                <th>CustomerID</th>
+                <th>Total Price</th>
+                <th>Delivery Method</th>
+                <th>Order Status</th>
+                <th>Time Placed</th>
+                <th></th>
+            </tr>
+        </table>
     </body>
+    <script src="./scripts/order-page.js"></script>
 </html>
diff --git a/build/scripts/order-page.js b/build/scripts/order-page.js
@@ -0,0 +1,48 @@
+// Functions for the clock
+
+function currentTime() {
+    let clock = document.getElementById("currentTime")
+    var today = new Date()
+    let hours = hourParse(today)
+    let meridiam = ampm(today)
+    let min = parseTime(today.getMinutes())
+    let sec = parseTime(today.getSeconds())
+    var time = String(hours + ":" + min + ":" + sec + " " + meridiam)
+    clock.innerText = time
+}
+
+function hourParse(today) {
+    let hour = today.getHours()
+    if (hour%12 == 0) {
+        return 12
+    }
+    else {
+        return hour%12
+    }
+}
+
+function ampm(today) {
+    let hour = today.getHours()
+    if (hour < 12) {
+        return "AM"
+    }
+    else {
+        return "PM"
+    }
+}
+
+function parseTime(temp) {
+    if (temp < 10) {
+        return "0" + temp
+    }
+    else {
+        return temp
+    }
+}
+
+currentTime()
+
+setInterval(() => {
+    currentTime()    
+}, 1000);
+
diff --git a/build/styles/menu.css b/build/styles/menu.css
@@ -6,7 +6,8 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin: 40px;
+    border-radius: 10px;
+    padding: 40px;
     flex-wrap: wrap;
 }
 

diff --git a/build/styles/order-page.css b/build/styles/order-page.css
@@ -0,0 +1,37 @@
+body {
+    font-family: sans-serif;
+    background-color: rgb(255, 228, 233);
+    background-size: 100%;
+    background-attachment: fixed;
+    text-align: center;
+}
+
+table {
+    position: relative;
+    border: 2px solid rgb(133, 126, 127);
+    border-radius: 5px;
+    width: 80%;
+    /* margin: 20px 0px; */
+    left: 50%;
+    transform: translate(-50%, 0%);
+}
+
+th {
+    color: black;
+    padding: 10px;
+}
+
+tr:first-child {
+    background-color: rgb(255, 106, 188);
+}
+
+tr:nth-child(even) {
+    background-color: white;
+    color: magenta;
+}
+
+tr {
+    background-color: rgb(245, 158, 245);
+    color: white;
+    padding: 10px;
+}
diff --git a/database/database.db b/database/database.db