AndrewTrieu/shopping-lists
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update interface

Browse Source
This commit is contained in:
Andrew Trieu
2023-01-07 14:45:26 +02:00
committed by GitHub
parent 55a036adcd
commit 08c947ddf3
3 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
shopping-lists/views/list.eta
View File

@@ -1,32 +1,46 @@
<% 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>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><%= it.listData.name %></h1>
</div>
</div>
<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>No items in this list yet!</p>
<p class="lead">No items in this list yet!</p>
<% } else { %>
<table cellspacing="3" bgcolor="#000000">
<tr bgcolor="#ffffff">
<th>Items</th>
<th>Collected</th>
<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 bgcolor="#ffffff">
<tr>
<% if (item.collected) { %>
<td><del><%= item.name %></del></td>
<td>X</td>
@@ -34,13 +48,15 @@
<td><%= item.name %></td>
<td>
<form method="POST" action="/lists/<%= item.shopping_list_id %>/items/<%= item.id %>/collect">
<input type="submit" value="Mark collected!" />
<button type="submit" class="btn btn-secondary btn-sm">Mark collected</button>
</form>
</td>
<% } %>
</tr>
<% }); %>
</tbody>
</table>
<% } %>
<a href="/lists">Shopping lists</a>
<a class="btn btn-primary mt-3" href="/lists" role="button">Shopping lists</a>
</div>

37
shopping-lists/views/lists.eta
View File

@@ -1,24 +1,43 @@
<% layout("./layouts/layout.eta") %>
<h1>Shopping lists</h1>
<style>
.jumbotron {
background-color: lightblue;
}
.list-group-item {
background-color: lightyellow;
}
</style>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Shopping lists</h1>
</div>
</div>
<div class="container mt-5">
<h2>Add a shopping list</h2>
<form method="POST">
Name: <input type="text" name="name" />
<input type="submit" value="Create!" />
<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>
<h2>Active shopping lists</h2>
<h2 class="mt-5">Active shopping lists</h2>
<ul>
<ul class="list-group">
<% it.lists.forEach((list) => { %>
<li>
<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">
<input type="submit" value="Deactivate list!" />
<button type="submit" class="btn btn-secondary btn-sm">Deactivate list</button>
</form>
</li>
<% }); %>
</ul>
<a href="/">Main page</a>
<a class="btn btn-primary mt-3" href="/" role="button">Main page</a>
</div>

25
shopping-lists/views/main.eta
View File

@@ -1,12 +1,23 @@
<% layout("./layouts/layout.eta") %>
<h1>Shared shopping lists</h1>
<ul>
<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) { %>
<li>No shopping lists yet.</li>
<p class="lead">No shopping lists yet.</p>
<% } else { %>
<li>Shopping lists: <%= it.listCount %></li>
<li>Shopping list items: <%= it.itemCount %></li>
</ul>
<p class="lead">Shopping lists: <%= it.listCount %></p>
<p class="lead">Shopping list items: <%= it.itemCount %></p>
<% } %>
<a href="/lists">Lists</a>
<a class="btn btn-primary btn-lg" href="/lists" role="button">View Lists</a>
</div>