ContactApp: contact count indicator

Lanayx · Feb 28, 2024 · a9207b9 · a9207b9
1 parent 4731dda
commit a9207b9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/examples/ContactApp/ContactService.fs b/examples/ContactApp/ContactService.fs
@@ -1,6 +1,7 @@
 module ContactApp.ContactService
 
 open System
+open System.Threading
 open ContactApp.Models
 
 let private contactDb = ResizeArray([
@@ -18,6 +19,10 @@ let private contactDb = ResizeArray([
     { Id = 12; First =  "Edith4"; Last = "Neutvaar"; Email = "en4@example.com"; Phone = "123-456-7890" }
 ])
 
+let count() =
+    Thread.Sleep 2000
+    contactDb.Count
+
 let searchContact (search: string) =
     contactDb
     |> Seq.filter(fun c -> c.First.Contains(search, StringComparison.OrdinalIgnoreCase)

diff --git a/examples/ContactApp/Handlers.fs b/examples/ContactApp/Handlers.fs
@@ -26,6 +26,11 @@ let getContacts: EndpointHandler =
                 |> Seq.toArray
             ctx |> writeHtml (index.html "" page result)
 
+let getContactsCount: EndpointHandler =
+    fun ctx ->
+        let count = ContactService.count()
+        ctx.WriteText $"({count} total Contacts)"
+
 let getNewContact: EndpointHandler =
     let newContact = {
         id = 0

diff --git a/examples/ContactApp/Program.fs b/examples/ContactApp/Program.fs
@@ -13,6 +13,7 @@ let endpoints = [
         subRoute "/contacts" [
             route "/" getContacts
             route "/new" getNewContact
+            route "/count" getContactsCount
             routef "/{%i}" viewContact
             routef "/{%i}/edit" getEditContact
             routef "/{%i}/email" validateEmail

diff --git a/examples/ContactApp/templates/index.fs b/examples/ContactApp/templates/index.fs
@@ -58,6 +58,9 @@ let html q page (contacts: Contact[]) =
 
         p() {
             a(href="/contacts/new") { "Add Contact" }
+            span(hxGet="/contacts/count", hxTrigger="revealed"){
+                img(class'="spinner htmx-indicator", src="/spinning-circles.svg")
+            }
         }
     }
     |> layout.html