Fixes/Updates from the Hypermedia Systems book

app.py

@@ -29,8 +29,8 @@ def contacts():
         if request.headers.get('HX-Trigger') == 'search':
             return render_template("rows.html", contacts=contacts_set)
     else:
-        contacts_set = Contact.all()
-    return render_template("index.html", contacts=contacts_set, archiver=Archiver.get())
+        contacts_set = Contact.all(page)
+    return render_template("index.html", contacts=contacts_set, page=page, archiver=Archiver.get())
 
 
 @app.route("/contacts/archive", methods=["POST"])
@@ -130,7 +130,7 @@ def contacts_delete_all():
         contact = Contact.find(contact_id)
         contact.delete()
     flash("Deleted Contacts!")
-    contacts_set = Contact.all(1)
+    contacts_set = Contact.all()
     return render_template("index.html", contacts=contacts_set)
 
 

templates/archive_ui.html

@@ -1,17 +1,22 @@
 <div id="archive-ui" hx-target="this" hx-swap="outerHTML">
     {% if archiver.status() == "Waiting" %}
-        <button hx-post="/contacts/archive">
-            Download Contact Archive
-        </button>
+    <button hx-post="/contacts/archive">
+        Download Contact Archive
+    </button>
     {% elif archiver.status() == "Running" %}
-        <div hx-get="/contacts/archive" hx-trigger="load delay:500ms">
-            Creating Archive...
-            <div class="progress" >
-                <div id="archive-progress" class="progress-bar" style="width:{{ archiver.progress() * 100 }}%"></div>
-            </div>
+    <div hx-get="/contacts/archive" hx-trigger="load delay:500ms">
+        Creating Archive...
+        <div class="progress">
+            <div id="archive-progress" 
+                role="progressbar" 
+                aria-valuenow="{{ archiver.progress() * 100 }}"
+                class="progress-bar" 
+                style="width:{{ archiver.progress() * 100 }}%"
+            ></div>
         </div>
+    </div>
     {% elif archiver.status() == "Complete" %}
-        <a hx-boost="false" href="/contacts/archive/file" _="on load click() me">Archive Downloading!  Click here if the download does not start.</a>
-        <button hx-delete="/contacts/archive">Clear Download</button>
+    <a hx-boost="false" href="/contacts/archive/file" _="on load click() me">Archive Ready! Click here if the download does not start.</a>
+    <button hx-delete="/contacts/archive">Clear Download</button>
     {% endif %}
 </div>

templates/edit.html

@@ -10,7 +10,7 @@
                     <label for="email">Email</label>
                     <input name="email" id="email" type="email"
                            hx-get="/contacts/{{ contact.id }}/email" hx-target="next .error"
-                           hx-trigger="change, keyup delay:200ms"
+                           hx-trigger="change, keyup delay:200ms changed"
                            placeholder="Email" value="{{ contact.email }}">
                     <span class="error">{{ contact.errors['email'] }}</span>
                 </p>
@@ -37,10 +37,16 @@
     </form>
 
     <button id="delete-btn"
+            class="bad bg color border"
             hx-delete="/contacts/{{ contact.id }}"
             hx-push-url="true"
-            hx-confirm="Are you sure you want to delete this contact?"
-            hx-target="body">
+            hx-trigger="confirmed"
+            hx-target="body"
+            @click="sweetConfirm($el, {
+                title: 'Delete this contacts?',
+                showCancelButton: true,
+                confirmButtonText: 'Delete'
+            })">
         Delete Contact
     </button>
 

templates/index.html

@@ -2,61 +2,74 @@
 
 {% block content %}
 
-    {% include 'archive_ui.html' %}
+{% include 'archive_ui.html' %}
 
-    <form action="/contacts" method="get" class="tool-bar">
-        <label for="search">Search Term</label>
-        <input id="search" type="search" name="q" value="{{ request.args.get('q') or '' }}"
-               hx-get="/contacts"
-               hx-trigger="search, keyup delay:200ms changed"
-               hx-target="tbody"
-               hx-push-url="true"
-               hx-indicator="#spinner"/>
-        <img style="height: 20px" id="spinner" class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
-        <input type="submit" value="Search"/>
-    </form>
+<form action="/contacts" method="get" class="tool-bar">
+    <label for="search">Search Term</label>
+    <input id="search" type="search" name="q" value="{{ request.args.get('q') or '' }}" 
+        hx-get="/contacts"
+        hx-trigger="search, keyup delay:200ms changed" 
+        hx-target="tbody" 
+        hx-push-url="true" 
+        hx-indicator="#spinner"
+        placeholder="Search Contacts" 
+        _="on keydown[altKey and code is 'KeyS'] from the window me.focus()" />
+    <img style="height: 20px" id="spinner" class="htmx-indicator" src="/static/img/spinning-circles.svg" />
+    <input type="submit" value="Search" />
+</form>
 
-    <form x-data="{ selected: [] }">
-    <template
+<form x-data="{ selected: [] }">
+    <template 
         x-if="selected.length > 0">
         <div class="box info tool-bar flxed top">
             <slot x-text="selected.length"></slot>
             contacts selected
-            
-            <button type="button" class="bad bg color border"
+
+            <button type="button" class="bad bg color border" 
                 @click="confirm(`Delete ${selected.length} contacts?`) &&
                     htmx.ajax('DELETE', '/contacts', { source: $root, target: document.body })"
             >Delete</button>
             <hr aria-orientation="vertical">
-            <button type="button" @click="selected = []">Cancel</button> 
+            <button type="button" @click="selected = []">Cancel</button>
         </div>
     </template>
     <table>
         <thead>
-        <tr>
-            <th></th>
-            <th>First</th>
-            <th>Last</th>
-            <th>Phone</th>
-            <th>Email</th>
-            <th></th>
-        </tr>
+            <tr>
+                <th></th>
+                <th>First</th>
+                <th>Last</th>
+                <th>Phone</th>
+                <th>Email</th>
+                <th></th>
+            </tr>
         </thead>
         <tbody>
-        {% include 'rows.html' %}
+            {% include 'rows.html' %}
+            {% if contacts|length == 10 %}
+            <tr>
+                <td colspan="5" style="text-align: center;">
+                    <button hx-target="closest tr" hx-swap="outerHTML" hx-select="tbody tr"
+                        hx-get="/contacts?page={{ page+1 }}">
+                        Load More
+                    </button>
+                </td>
+            </tr>
+            {% endif %}
         </tbody>
     </table>
-        <button hx-delete="/contacts"
-                hx-confirm="Are you sure you want to delete these contacts?"
-                hx-target="body">
-            Delete Selected Contacts
-        </button>
-    </form>
-    <p>
-        <a href="/contacts/new">Add Contact</a>
-        <span hx-get="/contacts/count" hx-trigger="revealed">
-          <img id="spinner" style="height: 20px"  class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
-        </span>
-    </p>
+    <button hx-delete="/contacts" 
+        hx-confirm="Are you sure you want to delete these contacts?" 
+        hx-target="body">
+        Delete Selected Contacts
+    </button>
+</form>
+
+<p>
+    <a href="/contacts/new">Add Contact</a>
+    <span hx-get="/contacts/count" hx-trigger="revealed">
+        <img id="spinner" style="height: 20px" class="htmx-indicator" src="/static/img/spinning-circles.svg" />
+    </span>
+</p>
 
 {% endblock %}

templates/layout.html

@@ -8,6 +8,7 @@
     <script src="/static/js/_hyperscript-0.9.7.js"></script>
     <script src="/static/js/rsjs-menu.js" type="module"></script>
     <script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>
+    <script defer src="https://unpkg.com/[email protected]/dist/sweetalert2.all.min.js"></script>
 </head>
 <body hx-boost="true">
 <main>
@@ -22,5 +23,15 @@ <h1>
     {% endfor %}
     {% block content %}{% endblock %}
 </main>
+
+<script>
+    function sweetConfirm(elt, config) {
+        Swal.fire(config).then((result) => {
+            if(result.isConfirmed) {
+                elt.dispatchEvent(new Event('confirmed'));
+            }
+        })
+    }
+</script>
 </body>
 </html>

templates/new.html

@@ -8,7 +8,7 @@
         <div class="table rows">
             <p>
                 <label for="email">Email</label>
-                <input name="email" id="email" type="text" placeholder="Email" value="{{ contact.email or '' }}">
+                <input name="email" id="email" type="email" placeholder="Email" value="{{ contact.email or '' }}">
                 <span class="error">{{ contact.errors['email'] }}</span>
             </p>
             <p>