feat: poll for changed data every 10 seconds

Tarow · Dec 28, 2023 · 089c3c4 · 089c3c4
1 parent f189511
commit 089c3c4
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 26 deletions.
diff --git a/internal/api/handler.go b/internal/api/handler.go
@@ -36,6 +36,16 @@ func (h Handler) GetIndex(c echo.Context) error {
 	return render(c, http.StatusOK, index)
 }
 
+func (h Handler) GetGameList(c echo.Context) error {
+	games, err := h.service.List()
+	if err != nil {
+		c.Logger().Error(err)
+		return err
+	}
+	gameList := component.GameList(games)
+	return render(c, http.StatusOK, gameList)
+}
+
 func (h Handler) GetGameDetails(c echo.Context) error {
 	gameId := c.Param("id")
 

diff --git a/main.go b/main.go
@@ -39,6 +39,7 @@ type Form struct {
 func registerRoutes(e *echo.Echo, handler api.Handler) {
 	e.StaticFS("/static", echo.MustSubFS(staticAssets, "static"))
 	e.GET("/", handler.GetIndex)
+	e.GET("/games", handler.GetGameList)
 
 	e.POST("/games", handler.CreateGame)
 	e.GET("/games/create", handler.GetCreateGameForm)

diff --git a/templates/GameDetails.templ b/templates/GameDetails.templ
@@ -2,6 +2,7 @@ package template
 
 import "github.com/tarow/skat-counter/internal/skat"
 import "github.com/tarow/skat-counter/templates/components"
+import "fmt"
 
 templ GameDetailsNavbar() {
 	<div class="navbar bg-base-200">
@@ -18,14 +19,26 @@ templ GameDetailsNavbar() {
 templ GameDetails (game skat.Game) {
 	@Base() {
 		@GameDetailsNavbar()
-		<div class="container flex pt-4 mx-auto">
-			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around  items-end">
-				@component.RoundsList(game)
+		<div class="container flex pt-4 mx-auto" hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML">
+			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end" hx-disinherit="*">
+				<div id="roundlist">
+					@component.RoundsList(game)
+				</div>
 				<div class="flex flex-col items-center gap-4">
-					@component.GameCard(game, false, true, true)
-					@component.AddRoundForm(game)
+					<div id="gamecard">
+						@component.GameCard(game, false, true, true)
+					</div>
+					<div id="roundform">
+						@component.AddRoundForm(game)
+					</div>
 				</div>
 			</div>
 		</div>
+		<dialog id="edit_round_modal" class="modal">
+			<div id="edit_round_form"></div>
+		</dialog>
+		<dialog id="edit_game_modal" class="modal">
+			<div id="edit_game_form" class="modal-box"></div>
+		</dialog>
 	}
 }
diff --git a/templates/GameDetails_templ.go b/templates/GameDetails_templ.go
diff --git a/templates/GameOverview.templ b/templates/GameOverview.templ
@@ -11,7 +11,6 @@ templ GameOverviewNavbar() {
 				Skatcounter
 			</a>
 			<button
- 				onclick="create_game_modal.showModal()"
  				hx-target="#create_game_form"
  				hx-get="/games/create"
  				class="btn btn-primary justify-self-center col-span-1"
@@ -30,6 +29,8 @@ templ GameOverviewNavbar() {
 templ GameOverview(games []skat.Game) {
 	@Base() {
 		@GameOverviewNavbar()
-		@component.GameList(games)
+		<div id="gamelist" hx-get="/" hx-select="#gamelist" hx-swap="outerHTML" hx-trigger="every 10s">
+			@component.GameList(games)
+		</div>
 	}
 }
diff --git a/templates/GameOverview_templ.go b/templates/GameOverview_templ.go
diff --git a/templates/base.templ b/templates/base.templ
@@ -14,7 +14,7 @@ templ Base() {
 			<script src="/static/sortable.js"></script>
 			<script src="/static/theme-change.js"></script>
 		</head>
-		<body>
+		<body id="content">
 			{ children... }
 			@initSortable()
 			@initThemeChange()

diff --git a/templates/base_templ.go b/templates/base_templ.go
diff --git a/templates/components/game_card.templ b/templates/components/game_card.templ
@@ -57,7 +57,7 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
 					{ fmt.Sprintf("%d", len(game.Rounds)) }
 				</div>
 			</div>
-			<div class="card-actions justify-end ">
+			<div class="card-actions justify-end" hx-disinherit="*">
 				if detailsBtn {
 					<a class="btn" hx-boost="true" href={ templ.URL(fmt.Sprintf("/games/%v", game.ID)) } method="get">
 						Details
@@ -86,9 +86,6 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
 			</div>
 		</div>
 	</div>
-	<dialog id="edit_game_modal" class="modal">
-		<div id="edit_game_form" class="modal-box"></div>
-	</dialog>
 }
 
 templ GameList(games []skat.Game) {

diff --git a/templates/components/game_card_templ.go b/templates/components/game_card_templ.go
diff --git a/templates/components/rounds_list.templ b/templates/components/rounds_list.templ
@@ -42,7 +42,6 @@ templ RoundsList(game skat.Game) {
 								<li>
 									<a
  										hx-delete={ fmt.Sprintf("/games/%v/rounds/%v", game.ID, round.ID) }
- 										hx-swap="outerHTML"
  										hx-target="closest body"
 									>
 										<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 sm:w-6 sm:h-6 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -75,9 +74,6 @@ templ RoundsList(game skat.Game) {
 			</tfoot>
 		</table>
 	</div>
-	<dialog id="edit_round_modal" class="modal">
-		<div id="edit_round_form"></div>
-	</dialog>
 }
 
 templ AddRoundForm(game skat.Game) {

diff --git a/templates/components/rounds_list_templ.go b/templates/components/rounds_list_templ.go