From 08c947ddf31a5e42ef32511ad766745c80ee78f5 Mon Sep 17 00:00:00 2001
From: Andrew Trieu <68151686+AndrewTrieu@users.noreply.github.com>
Date: Sat, 7 Jan 2023 14:45:26 +0200
Subject: [PATCH] Update interface

---
 shopping-lists/views/list.eta  | 90 ++++++++++++++++++++--------------
 shopping-lists/views/lists.eta | 55 ++++++++++++++-------
 shopping-lists/views/main.eta  | 31 ++++++++----
 3 files changed, 111 insertions(+), 65 deletions(-)

diff --git a/shopping-lists/views/list.eta b/shopping-lists/views/list.eta
index d244c41..ca63148 100644
--- a/shopping-lists/views/list.eta
+++ b/shopping-lists/views/list.eta
@@ -1,46 +1,62 @@
 <% layout("./layouts/layout.eta") %>
 
-<h1><%= it.listData.name %></h1>
-
-<h2>Add an item</h2>
-
-<form method="POST" action="/lists/<%= it.listData.id %>/items">
-  Name: <input type="text" name="name" />
-  <input type="submit" value="Add!" />
-</form>
-
-<h2>Items in this list</h2>
-
 <style>
   td, th {
     text-align: center;
   }
+  .jumbotron {
+      background-color: lightblue;
+  }
 </style>
 
-<% if (it.flag) { %>
-  <p>No items in this list yet!</p>
-<% } else { %>
-  <table cellspacing="3" bgcolor="#000000">
-    <tr bgcolor="#ffffff">
-      <th>Items</th>
-      <th>Collected</th>
-    </tr>
-    <% it.items.forEach((item) => { %>
-    <tr bgcolor="#ffffff">
-      <% if (item.collected) { %>
-      <td><del><%= item.name %></del></td>
-      <td>X</td>
-      <% } else { %>
-      <td><%= item.name %></td>
-      <td>
-        <form method="POST" action="/lists/<%= item.shopping_list_id %>/items/<%= item.id %>/collect">
-          <input type="submit" value="Mark collected!" />
-        </form>
-      </td>
-      <% } %>
-    </tr>
-    <% }); %>
-  </table>
-<% } %>
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1 class="display-4"><%= it.listData.name %></h1>
+  </div>
+</div>
 
-<a href="/lists">Shopping lists</a>
+<div class="container mt-5">
+  <h2>Add an item</h2>
+
+  <form method="POST" action="/lists/<%= it.listData.id %>/items" class="form-inline">
+    <div class="form-group mr-3">
+      <label for="name" class="sr-only">Name:</label>
+      <input type="text" class="form-control" id="name" name="name" placeholder="Name">
+    </div>
+    <button type="submit" class="btn btn-primary">Add!</button>
+  </form>
+
+  <h2 class="mt-5">Items in this list</h2>
+
+  <% if (it.flag) { %>
+    <p class="lead">No items in this list yet!</p>
+  <% } else { %>
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <th scope="col">Items</th>
+          <th scope="col">Collected</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% it.items.forEach((item) => { %>
+        <tr>
+          <% if (item.collected) { %>
+          <td><del><%= item.name %></del></td>
+          <td>X</td>
+          <% } else { %>
+          <td><%= item.name %></td>
+          <td>
+            <form method="POST" action="/lists/<%= item.shopping_list_id %>/items/<%= item.id %>/collect">
+              <button type="submit" class="btn btn-secondary btn-sm">Mark collected</button>
+            </form>
+          </td>
+          <% } %>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+  <% } %>
+
+  <a class="btn btn-primary mt-3" href="/lists" role="button">Shopping lists</a>
+</div>
diff --git a/shopping-lists/views/lists.eta b/shopping-lists/views/lists.eta
index 4a4b7ba..c379ad7 100644
--- a/shopping-lists/views/lists.eta
+++ b/shopping-lists/views/lists.eta
@@ -1,24 +1,43 @@
 <% layout("./layouts/layout.eta") %>
-<h1>Shopping lists</h1>
 
-<h2>Add a shopping list</h2>
+<style>
+    .jumbotron {
+        background-color: lightblue;
+    }
+    .list-group-item {
+        background-color: lightyellow;
+    }
+</style>
 
-<form method="POST">
-  Name: <input type="text" name="name" />
-  <input type="submit" value="Create!" />
-</form>
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1 class="display-4">Shopping lists</h1>
+  </div>
+</div>
 
-<h2>Active shopping lists</h2>
+<div class="container mt-5">
+  <h2>Add a shopping list</h2>
 
-<ul>
-<% it.lists.forEach((list) => { %>
-  <li>
-    <a href="/lists/<%= list.id %>"><%= list.name %></a>
-    <form method="POST" action="/lists/<%= list.id %>/deactivate">
-      <input type="submit" value="Deactivate list!" />
-    </form>
-  </li>
-<% }); %>
-</ul>
+  <form method="POST" class="form-inline">
+    <div class="form-group mr-3">
+      <label for="name" class="sr-only">Name:</label>
+      <input type="text" class="form-control" id="name" name="name" placeholder="Name">
+    </div>
+    <button type="submit" class="btn btn-primary">Create!</button>
+  </form>
 
-<a href="/">Main page</a>
+  <h2 class="mt-5">Active shopping lists</h2>
+
+  <ul class="list-group">
+  <% it.lists.forEach((list) => { %>
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      <a href="/lists/<%= list.id %>"><%= list.name %></a>
+      <form method="POST" action="/lists/<%= list.id %>/deactivate">
+        <button type="submit" class="btn btn-secondary btn-sm">Deactivate list</button>
+      </form>
+    </li>
+  <% }); %>
+  </ul>
+
+  <a class="btn btn-primary mt-3" href="/" role="button">Main page</a>
+</div>
diff --git a/shopping-lists/views/main.eta b/shopping-lists/views/main.eta
index 9e52804..38c50ed 100644
--- a/shopping-lists/views/main.eta
+++ b/shopping-lists/views/main.eta
@@ -1,12 +1,23 @@
 <% layout("./layouts/layout.eta") %>
-<h1>Shared shopping lists</h1>
 
-<ul>
-<% if (it.flag) { %>
-    <li>No shopping lists yet.</li>
-<% } else { %>
-    <li>Shopping lists: <%= it.listCount %></li>
-    <li>Shopping list items: <%= it.itemCount %></li>
-</ul>
-<% } %>
-<a href="/lists">Lists</a>
\ No newline at end of file
+<style>
+    .jumbotron {
+        background-color: lightblue;
+    }
+</style>
+
+<div class="jumbotron jumbotron-fluid">
+    <div class="container">
+        <h1 class="display-4">Shared shopping lists</h1>
+    </div>
+</div>
+
+<div class="container mt-5">
+    <% if (it.flag) { %>
+        <p class="lead">No shopping lists yet.</p>
+    <% } else { %>
+        <p class="lead">Shopping lists: <%= it.listCount %></p>
+        <p class="lead">Shopping list items: <%= it.itemCount %></p>
+    <% } %>
+    <a class="btn btn-primary btn-lg" href="/lists" role="button">View Lists</a>
+</div>
\ No newline at end of file