fernando/music-to-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add refresh button to random albums

Browse Source
This commit is contained in:
Araozu 2024-12-08 18:08:00 -05:00
parent f354b76cc3
commit 8f3d9351ed
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/modules/index/index.go
View File

@ -19,11 +19,17 @@ func SetupRoutes(g *echo.Group) {
} }
func indexPage(c echo.Context) error { func indexPage(c echo.Context) error {
refreshQuery := c.QueryParam("refresh")
sessionToken, navidromeUrl := utils.Credentials(c) sessionToken, navidromeUrl := utils.Credentials(c)
albums, err := getRandomAlbums(sessionToken, navidromeUrl, 10) albums, err := getRandomAlbums(sessionToken, navidromeUrl, 10)
if err != nil { if err != nil {
return c.HTML(http.StatusBadRequest, fmt.Sprintf("%s", err)) return c.HTML(http.StatusBadRequest, fmt.Sprintf("%s", err))
} }
if refreshQuery == "true" {
return utils.RenderTempl(c, http.StatusOK, RandomAlbumsFragment(albums))
}
return utils.RenderTempl(c, http.StatusOK, IndexTempl(albums)) return utils.RenderTempl(c, http.StatusOK, IndexTempl(albums))
} }

43
src/modules/index/index.templ
View File

@ -3,6 +3,7 @@ package index
import ( import (
"acide/src/utils" "acide/src/utils"
"fmt" "fmt"
"strconv"
) )
templ IndexTempl(albums []utils.Album) { templ IndexTempl(albums []utils.Album) {
@ -15,17 +16,33 @@ templ IndexTempl(albums []utils.Album) {
Albums Albums
</a> </a>
</div> </div>
<h2 class="font-bold text-xl px-2 pt-2"> <h2 class="font-bold text-xl px-2 pt-2 flex items-center gap-4">
Random Albums Random Albums
<button
type="button"
class="disabled:cursor-not-allowed"
data-loading-class="animate-spin"
data-loading-disable
data-loading-path="/?refresh=true"
hx-get="/?refresh=true"
hx-target="#random-albums"
hx-swap="outerHTML"
>
@arrowClockwiseIcon(24)
</button>
</h2> </h2>
<div class="overflow-x-scroll whitespace-nowrap py-2 flex gap-2 px-2"> @RandomAlbumsFragment(albums)
for _, album := range albums {
@AlbumCard(album)
}
</div>
} }
} }
templ RandomAlbumsFragment(albums []utils.Album) {
<div id="random-albums" class="overflow-x-scroll whitespace-nowrap py-2 flex gap-2 px-2">
for _, album := range albums {
@AlbumCard(album)
}
</div>
}
templ AlbumCard(album utils.Album) { templ AlbumCard(album utils.Album) {
<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800"> <div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
<div class="h-30 w-28 relative"> <div class="h-30 w-28 relative">
@ -44,3 +61,17 @@ templ AlbumCard(album utils.Album) {
</div> </div>
</div> </div>
} }
templ arrowClockwiseIcon(size int) {
<svg
xmlns="http://www.w3.org/2000/svg"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
>
<path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"></path>
</svg>
}

5
src/utils/utils.templ
View File

@ -19,8 +19,9 @@ templ SkeletonTempl() {
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js" defer></script> <script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js" defer></script>
<script src="https://unpkg.com/htmx-ext-loading-states@2.0.0/loading-states.js" defer></script>
</head> </head>
<body> <body hx-ext="loading-states">
<main hx-boost="true" hx-target="this" hx-swap="innerHTML" id="boost-target" class="pb-16"> <main hx-boost="true" hx-target="this" hx-swap="innerHTML" id="boost-target" class="pb-16">
{ children... } { children... }
</main> </main>
@ -79,7 +80,7 @@ templ MusicPlayer() {
</button> </button>
@fullMusicPlayer() @fullMusicPlayer()
<script> <script>
console.log("I'm being re-run :o"); console.log("I am the music player, and I am being re-run v:<");
document.addEventListener('alpine:init', () => { document.addEventListener('alpine:init', () => {
Alpine.data("player", function() { Alpine.data("player", function() {
return { return {