diff --git a/examples/ContactApp/ContactService.fs b/examples/ContactApp/ContactService.fs index 2f0bbe5..999aec4 100644 --- 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 index 9ea0968..a7e7911 100644 --- 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 index b9b36bf..be1dd23 100644 --- 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 index ab3d716..e329ca2 100644 --- 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