ari/arimelody-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start huge dashboard rework; improve dark theme

Browse source
This commit is contained in:
ari melody 2025-10-21 15:37:40 +01:00
parent 14feb47640
commit f324c249f6
Signed by: ari
GPG key ID: CF99829C92678188
21 changed files with 365 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

20
admin/accounthttp.go
View file

@ -45,7 +45,7 @@ func accountIndexHandler(app *model.AppState) http.Handler {
} }
accountResponse struct { accountResponse struct {
Session *model.Session adminPageData
TOTPs []TOTP TOTPs []TOTP
} }
) )
@ -66,7 +66,7 @@ func accountIndexHandler(app *model.AppState) http.Handler {
session.Error = sessionError session.Error = sessionError
err = templates.AccountTemplate.Execute(w, accountResponse{ err = templates.AccountTemplate.Execute(w, accountResponse{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
TOTPs: totps, TOTPs: totps,
}) })
if err != nil { if err != nil {
@ -170,7 +170,7 @@ func deleteAccountHandler(app *model.AppState) http.Handler {
} }
type totpConfirmData struct { type totpConfirmData struct {
Session *model.Session adminPageData
TOTP *model.TOTP TOTP *model.TOTP
NameEscaped string NameEscaped string
QRBase64Image string QRBase64Image string
@ -179,13 +179,9 @@ type totpConfirmData struct {
func totpSetupHandler(app *model.AppState) http.Handler { func totpSetupHandler(app *model.AppState) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.Method == http.MethodGet { if r.Method == http.MethodGet {
type totpSetupData struct {
Session *model.Session
}
session := r.Context().Value("session").(*model.Session) session := r.Context().Value("session").(*model.Session)
err := templates.TOTPSetupTemplate.Execute(w, totpSetupData{ Session: session }) err := templates.TOTPSetupTemplate.Execute(w, adminPageData{ Path: "/account", Session: session })
if err != nil { if err != nil {
fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err) fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@ -222,7 +218,9 @@ func totpSetupHandler(app *model.AppState) http.Handler {
if err != nil { if err != nil {
fmt.Printf("WARN: Failed to create TOTP method: %s\n", err) fmt.Printf("WARN: Failed to create TOTP method: %s\n", err)
controller.SetSessionError(app.DB, session, "Something went wrong. Please try again.") controller.SetSessionError(app.DB, session, "Something went wrong. Please try again.")
err := templates.TOTPSetupTemplate.Execute(w, totpConfirmData{ Session: session }) err := templates.TOTPSetupTemplate.Execute(w, totpConfirmData{
adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
})
if err != nil { if err != nil {
fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err) fmt.Printf("WARN: Failed to render TOTP setup page: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@ -237,7 +235,7 @@ func totpSetupHandler(app *model.AppState) http.Handler {
} }
err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{ err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
TOTP: &totp, TOTP: &totp,
NameEscaped: url.PathEscape(totp.Name), NameEscaped: url.PathEscape(totp.Name),
QRBase64Image: qrBase64Image, QRBase64Image: qrBase64Image,
@ -298,7 +296,7 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
if code != confirmCodeOffset { if code != confirmCodeOffset {
session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." } session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." }
err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{ err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
TOTP: totp, TOTP: totp,
NameEscaped: url.PathEscape(totp.Name), NameEscaped: url.PathEscape(totp.Name),
QRBase64Image: qrBase64Image, QRBase64Image: qrBase64Image,

4
admin/artisthttp.go
View file

@ -33,7 +33,7 @@ func serveArtist(app *model.AppState) http.Handler {
} }
type ArtistResponse struct { type ArtistResponse struct {
Session *model.Session adminPageData
Artist *model.Artist Artist *model.Artist
Credits []*model.Credit Credits []*model.Credit
} }
@ -41,7 +41,7 @@ func serveArtist(app *model.AppState) http.Handler {
session := r.Context().Value("session").(*model.Session) session := r.Context().Value("session").(*model.Session)
err = templates.EditArtistTemplate.Execute(w, ArtistResponse{ err = templates.EditArtistTemplate.Execute(w, ArtistResponse{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
Artist: artist, Artist: artist,
Credits: credits, Credits: credits,
}) })

43
admin/http.go
View file

@ -21,6 +21,11 @@ import (
"golang.org/x/crypto/bcrypt" "golang.org/x/crypto/bcrypt"
) )
type adminPageData struct {
Path string
Session *model.Session
}
func Handler(app *model.AppState) http.Handler { func Handler(app *model.AppState) http.Handler {
mux := http.NewServeMux() mux := http.NewServeMux()
@ -67,12 +72,18 @@ func AdminIndexHandler(app *model.AppState) http.Handler {
session := r.Context().Value("session").(*model.Session) session := r.Context().Value("session").(*model.Session)
releases, err := controller.GetAllReleases(app.DB, false, 0, true) releases, err := controller.GetAllReleases(app.DB, false, 3, true)
if err != nil { if err != nil {
fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases: %s\n", err) fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
return return
} }
releaseCount, err := controller.GetReleasesCount(app.DB, false)
if err != nil {
fmt.Fprintf(os.Stderr, "WARN: Failed to pull releases count: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
return
}
artists, err := controller.GetAllArtists(app.DB) artists, err := controller.GetAllArtists(app.DB)
if err != nil { if err != nil {
@ -89,15 +100,17 @@ func AdminIndexHandler(app *model.AppState) http.Handler {
} }
type IndexData struct { type IndexData struct {
Session *model.Session adminPageData
Releases []*model.Release Releases []*model.Release
Artists []*model.Artist ReleaseCount int
Tracks []*model.Track Artists []*model.Artist
Tracks []*model.Track
} }
err = templates.IndexTemplate.Execute(w, IndexData{ err = templates.IndexTemplate.Execute(w, IndexData{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
Releases: releases, Releases: releases,
ReleaseCount: releaseCount,
Artists: artists, Artists: artists,
Tracks: tracks, Tracks: tracks,
}) })
@ -119,12 +132,8 @@ func registerAccountHandler(app *model.AppState) http.Handler {
return return
} }
type registerData struct {
Session *model.Session
}
render := func() { render := func() {
err := templates.RegisterTemplate.Execute(w, registerData{ Session: session }) err := templates.RegisterTemplate.Execute(w, adminPageData{ Path: r.URL.Path, Session: session })
if err != nil { if err != nil {
fmt.Printf("WARN: Error rendering create account page: %s\n", err) fmt.Printf("WARN: Error rendering create account page: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@ -229,12 +238,8 @@ func loginHandler(app *model.AppState) http.Handler {
session := r.Context().Value("session").(*model.Session) session := r.Context().Value("session").(*model.Session)
type loginData struct {
Session *model.Session
}
render := func() { render := func() {
err := templates.LoginTemplate.Execute(w, loginData{ Session: session }) err := templates.LoginTemplate.Execute(w, adminPageData{ Path: r.URL.Path, Session: session })
if err != nil { if err != nil {
fmt.Fprintf(os.Stderr, "WARN: Error rendering admin login page: %s\n", err) fmt.Fprintf(os.Stderr, "WARN: Error rendering admin login page: %s\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
@ -345,12 +350,8 @@ func loginTOTPHandler(app *model.AppState) http.Handler {
return return
} }
type loginTOTPData struct {
Session *model.Session
}
render := func() { render := func() {
err := templates.LoginTOTPTemplate.Execute(w, loginTOTPData{ Session: session }) err := templates.LoginTOTPTemplate.Execute(w, adminPageData{ Path: r.URL.Path, Session: session })
if err != nil { if err != nil {
fmt.Fprintf(os.Stderr, "WARN: Failed to render login TOTP page: %v\n", err) fmt.Fprintf(os.Stderr, "WARN: Failed to render login TOTP page: %v\n", err)
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)

4
admin/logshttp.go
View file

@ -51,12 +51,12 @@ func logsHandler(app *model.AppState) http.Handler {
} }
type LogsResponse struct { type LogsResponse struct {
Session *model.Session adminPageData
Logs []*log.Log Logs []*log.Log
} }
err = templates.LogsTemplate.Execute(w, LogsResponse{ err = templates.LogsTemplate.Execute(w, LogsResponse{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
Logs: logs, Logs: logs,
}) })
if err != nil { if err != nil {

4
admin/releasehttp.go
View file

@ -57,12 +57,12 @@ func serveRelease(app *model.AppState) http.Handler {
} }
type ReleaseResponse struct { type ReleaseResponse struct {
Session *model.Session adminPageData
Release *model.Release Release *model.Release
} }
err = templates.EditReleaseTemplate.Execute(w, ReleaseResponse{ err = templates.EditReleaseTemplate.Execute(w, ReleaseResponse{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
Release: release, Release: release,
}) })
if err != nil { if err != nil {

145
admin/static/admin.css
View file

@ -3,9 +3,9 @@
:root { :root {
--bg-0: #101010; --bg-0: #101010;
--bg-1: #141414; --bg-1: #181818;
--bg-2: #181818; --bg-2: #282828;
--bg-3: #202020; --bg-3: #404040;
--fg-0: #b0b0b0; --fg-0: #b0b0b0;
--fg-1: #c0c0c0; --fg-1: #c0c0c0;
@ -67,77 +67,111 @@
} }
body { body {
width: 100%; width: calc(100% - 180px);
height: calc(100vh - 1em); height: calc(100vh - 1em);
margin: 0; margin: 0 0 0 180px;
padding: 0; padding: 0;
display: flex;
flex-direction: row;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-size: 16px; font-size: 16px;
color: var(--fg-0); color: var(--fg-0);
background: var(--bg-0); background: var(--bg-0);
transition: background .1s ease-out, color .1s ease-out;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--fg-3); color: var(--fg-3);
} }
nav { header {
width: min(720px, calc(100% - 2em)); position: fixed;
height: 2em; left: 0;
margin: 1em auto; height: 100vh;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
width: 180px;
background-color: var(--bg-1);
box-shadow: var(--shadow-md);
transition: background .1s ease-out, color .1s ease-out;
}
nav {
height: 100%;
margin: 1em 0;
display: flex;
flex-direction: column;
justify-content: left; justify-content: left;
gap: .5em;
user-select: none; user-select: none;
} }
nav .icon { nav .icon {
height: 100%; width: fit-content;
border-radius: 100%; height: fit-content;
box-shadow: var(--shadow-sm); padding: 0;
overflow: hidden; margin: 0 auto 1em auto;
}
nav .icon img {
width: 100%;
height: 100%;
}
.nav-item {
width: auto;
height: 100%;
display: flex; display: flex;
color: var(--fg-2); border-radius: 100%;
background: var(--bg-2);
border-radius: 10em;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
overflow: clip;
}
nav .icon img {
width: 3em;
height: 3em;
}
.nav-item {
display: flex;
color: var(--fg-2);
line-height: 2em; line-height: 2em;
font-weight: 500; font-weight: 500;
transition: color .1s, background-color .1s;
} }
.nav-item:hover { .nav-item:hover {
background: var(--bg-1); background: var(--bg-2);
text-decoration: none; text-decoration: none;
} }
.nav-item.active {
border-left: 4px solid var(--fg-2);
}
.nav-item.active a {
padding-left: calc(1em - 4px);
}
nav a { nav a {
padding: 0 1em; padding: .2em 1em;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
width: 100%;
} }
nav a.icon { nav a.active {
padding: 0; border-left: 5px solid var(--fg-0);
padding-left: calc(1em - 5px);
} }
nav #logout { nav hr {
/* margin-left: auto; */ width: calc(100% - 2em);
margin: .5em auto;
border: none;
border-bottom: 1px solid var(--fg-0);
}
nav .section-label {
margin: 8px 0 2px 15px;
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
} }
main { main {
width: min(720px, calc(100% - 2em)); width: min(calc(100% - 16px), 720px);
height: fit-content;
min-height: calc(100vh - 2em);
margin: 0 auto; margin: 0 auto;
padding: 1em; padding: 1em;
} }
main.dashboard {
width: 100%;
}
a { a {
color: inherit; color: inherit;
@ -163,7 +197,24 @@ code {
.cards {
width: 100%;
height: fit-content;
display: flex;
gap: 2em;
flex-wrap: wrap;
}
.card { .card {
flex-basis: 40em;
padding: 1em;
background: var(--bg-1);
border-radius: 16px;
box-shadow: var(--shadow-lg);
transition: background .1s ease-out, color .1s ease-out;
}
main:not(.dashboard) .card {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -171,7 +222,7 @@ code {
margin: 0 0 .5em 0; margin: 0 0 .5em 0;
} }
.card-title { .card-header {
margin-bottom: 1em; margin-bottom: 1em;
display: flex; display: flex;
gap: 1em; gap: 1em;
@ -179,17 +230,31 @@ code {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.card-header h1,
.card-title h1, .card-header h2,
.card-title h2, .card-header h3 {
.card-title h3 {
margin: 0; margin: 0;
} }
.card-header a:hover {
text-decoration: underline;
}
.card-header small {
display: inline-block;
font-size: 15px;
transform: translateY(-2px);
color: var(--fg-0);
}
.flex-fill { .flex-fill {
flex-grow: 1; flex-grow: 1;
} }
.artists-group {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1em;
}
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
body { body {
font-size: 12px; font-size: 12px;

11
admin/static/edit-artist.css
View file

@ -28,7 +28,7 @@ h1 {
} }
.artist-avatar #remove-avatar { .artist-avatar #remove-avatar {
margin-top: .5em; margin-top: .5em;
padding: .3em .4em; padding: .3em .6em;
} }
.artist-info { .artist-info {
@ -75,7 +75,7 @@ input[type="text"]:focus {
justify-content: right; justify-content: right;
} }
.card-title a.button { .card-header a.button {
text-decoration: none; text-decoration: none;
} }
@ -90,6 +90,13 @@ input[type="text"]:focus {
border-radius: 16px; border-radius: 16px;
background: var(--bg-2); background: var(--bg-2);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
cursor: pointer;
transition: background .1s;
}
.credit:hover {
background: var(--bg-1);
} }
.release-artwork { .release-artwork {

8
admin/static/edit-artist.js
View file

@ -1,3 +1,5 @@
import { hijackClickEvent } from "./admin.js";
const artistID = document.getElementById("artist").dataset.id; const artistID = document.getElementById("artist").dataset.id;
const nameInput = document.getElementById("name"); const nameInput = document.getElementById("name");
const avatarImg = document.getElementById("avatar"); const avatarImg = document.getElementById("avatar");
@ -77,3 +79,9 @@ removeAvatarBtn.addEventListener("click", () => {
avatarImg.src = "/img/default-avatar.png" avatarImg.src = "/img/default-avatar.png"
saveBtn.disabled = false; saveBtn.disabled = false;
}); });
document.addEventListener('readystatechange', () => {
document.querySelectorAll('.card#releases .credit').forEach(el => {
hijackClickEvent(el, el.querySelector('.credit-name a'));
});
});

57
admin/static/edit-release.css
View file

@ -155,7 +155,7 @@ dialog div.dialog-actions {
gap: .5em; gap: .5em;
} }
.card-title a.button { .card-header a.button {
text-decoration: none; text-decoration: none;
} }
@ -163,7 +163,7 @@ dialog div.dialog-actions {
* RELEASE CREDITS * RELEASE CREDITS
*/ */
.card.credits .credit { .card#credits .credit {
margin-bottom: .5em; margin-bottom: .5em;
padding: .5em; padding: .5em;
display: flex; display: flex;
@ -172,24 +172,30 @@ dialog div.dialog-actions {
gap: 1em; gap: 1em;
border-radius: 16px; border-radius: 16px;
background: var(--bg-2); background-color: var(--bg-2);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
cursor: pointer;
transition: background .1s ease-out;
}
.card#credits .credit:hover {
background-color: var(--bg-1);
} }
.card.credits .credit p { .card#credits .credit p {
margin: 0; margin: 0;
} }
.card.credits .credit .artist-avatar { .card#credits .credit .artist-avatar {
border-radius: 12px; border-radius: 12px;
} }
.card.credits .credit .artist-name { .card#credits .credit .artist-name {
color: var(--fg-3); color: var(--fg-3);
font-weight: bold; font-weight: bold;
} }
.card.credits .credit .artist-role small { .card#credits .credit .artist-role small {
font-size: inherit; font-size: inherit;
opacity: .66; opacity: .66;
} }
@ -308,32 +314,33 @@ dialog div.dialog-actions {
* RELEASE LINKS * RELEASE LINKS
*/ */
.card.links { .card#links ul {
padding: 0;
display: flex; display: flex;
gap: .2em; gap: .2em;
} }
.card.links a.button:hover { .card#links a.button:hover {
color: var(--bg-3) !important; color: var(--bg-3) !important;
background-color: var(--fg-3) !important; background-color: var(--fg-3) !important;
} }
.card.links a.button[data-name="spotify"] { .card#links a.button[data-name="spotify"] {
color: #101010; color: #101010;
background-color: #8cff83 background-color: #8cff83
} }
.card.links a.button[data-name="apple music"] { .card#links a.button[data-name="apple music"] {
color: #101010; color: #101010;
background-color: #8cd9ff background-color: #8cd9ff
} }
.card.links a.button[data-name="soundcloud"] { .card#links a.button[data-name="soundcloud"] {
color: #101010; color: #101010;
background-color: #fdaa6d background-color: #fdaa6d
} }
.card.links a.button[data-name="youtube"] { .card#links a.button[data-name="youtube"] {
color: #101010; color: #101010;
background-color: #ff6e6e background-color: #ff6e6e
} }
@ -421,7 +428,7 @@ dialog div.dialog-actions {
* RELEASE TRACKS * RELEASE TRACKS
*/ */
.card.tracks .track { .card#tracks .track {
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em; padding: 1em;
display: flex; display: flex;
@ -433,43 +440,47 @@ dialog div.dialog-actions {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.card.tracks .track h3, .card#tracks .track h3,
.card.tracks .track p { .card#tracks .track p {
margin: 0; margin: 0;
} }
.card.tracks h2.track-title { .card#tracks h2.track-title {
margin: 0; margin: 0;
display: flex; display: flex;
gap: .5em; gap: .5em;
} }
.card.tracks h2.track-title .track-number { .card#tracks h2.track-title .track-number {
opacity: .5; opacity: .5;
} }
.card.tracks .track-album { .card#tracks a:hover {
text-decoration: underline;
}
.card#tracks .track-album {
margin-left: auto; margin-left: auto;
font-style: italic; font-style: italic;
font-size: .75em; font-size: .75em;
opacity: .5; opacity: .5;
} }
.card.tracks .track-album.empty { .card#tracks .track-album.empty {
color: #ff2020; color: #ff2020;
opacity: 1; opacity: 1;
} }
.card.tracks .track-description { .card#tracks .track-description {
font-style: italic; font-style: italic;
} }
.card.tracks .track-lyrics { .card#tracks .track-lyrics {
max-height: 10em; max-height: 10em;
overflow-y: scroll; overflow-y: scroll;
} }
.card.tracks .track .empty { .card#tracks .track .empty {
opacity: 0.75; opacity: 0.75;
} }

8
admin/static/edit-release.js
View file

@ -1,3 +1,5 @@
import { hijackClickEvent } from "./admin.js";
const releaseID = document.getElementById("release").dataset.id; const releaseID = document.getElementById("release").dataset.id;
const titleInput = document.getElementById("title"); const titleInput = document.getElementById("title");
const artworkImg = document.getElementById("artwork"); const artworkImg = document.getElementById("artwork");
@ -96,3 +98,9 @@ removeArtworkBtn.addEventListener("click", () => {
artworkData = ""; artworkData = "";
saveBtn.disabled = false; saveBtn.disabled = false;
}); });
document.addEventListener("readystatechange", () => {
document.querySelectorAll(".card#credits .credit").forEach(el => {
hijackClickEvent(el, el.querySelector(".artist-name a"));
});
});

15
admin/static/index.css
View file

@ -1,20 +1,16 @@
@import url("/admin/static/release-list-item.css"); @import url("/admin/static/release-list-item.css");
.artist { .artist {
margin-bottom: .5em;
padding: .5em; padding: .5em;
display: flex;
flex-direction: row;
align-items: center;
gap: .5em;
color: var(--fg-3); color: var(--fg-3);
background: var(--bg-2); background: var(--bg-2);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-radius: 16px; border-radius: 16px;
text-align: center;
transition: background .1s ease-out;
cursor: pointer; cursor: pointer;
transition: background .1s ease-out, color .1s ease-out;
} }
.artist:hover { .artist:hover {
@ -23,10 +19,9 @@
} }
.artist-avatar { .artist-avatar {
width: 32px; width: 100%;
height: 32px;
object-fit: cover; object-fit: cover;
border-radius: 100%; border-radius: 8px;
} }
.track { .track {
@ -39,6 +34,8 @@
border-radius: 8px; border-radius: 8px;
background: #f8f8f8f8; background: #f8f8f8f8;
border: 1px solid #808080; border: 1px solid #808080;
transition: background .1s ease-out, color .1s ease-out;
} }
.track p { .track p {

2
admin/static/index.js
View file

@ -76,7 +76,7 @@ newTrackBtn.addEventListener("click", event => {
}); });
document.addEventListener("readystatechange", () => { document.addEventListener("readystatechange", () => {
document.querySelectorAll(".card.artists .artist").forEach(el => { document.querySelectorAll("#artists .artist").forEach(el => {
hijackClickEvent(el, el.querySelector("a.artist-name")) hijackClickEvent(el, el.querySelector("a.artist-name"))
}); });
}); });

2
admin/static/release-list-item.css
View file

@ -8,6 +8,8 @@
border-radius: 16px; border-radius: 16px;
background: var(--bg-2); background: var(--bg-2);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transition: background .1s ease-out, color .1s ease-out;
} }
.release h3, .release h3,

18
admin/templates/html/edit-account.html
View file

@ -14,10 +14,10 @@
{{end}} {{end}}
<h1>Account Settings ({{.Session.Account.Username}})</h1> <h1>Account Settings ({{.Session.Account.Username}})</h1>
<div class="card-title">
<h2>Change Password</h2>
</div>
<div class="card"> <div class="card">
<div class="card-header">
<h2>Change Password</h2>
</div>
<form action="/admin/account/password" method="POST" id="change-password"> <form action="/admin/account/password" method="POST" id="change-password">
<label for="current-password">Current Password</label> <label for="current-password">Current Password</label>
<input type="password" id="current-password" name="current-password" value="" autocomplete="current-password" required> <input type="password" id="current-password" name="current-password" value="" autocomplete="current-password" required>
@ -32,10 +32,10 @@
</form> </form>
</div> </div>
<div class="card-title">
<h2>MFA Devices</h2>
</div>
<div class="card mfa-devices"> <div class="card mfa-devices">
<div class="card-header">
<h2>MFA Devices</h2>
</div>
{{if .TOTPs}} {{if .TOTPs}}
{{range .TOTPs}} {{range .TOTPs}}
<div class="mfa-device"> <div class="mfa-device">
@ -58,10 +58,10 @@
</div> </div>
</div> </div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger"> <div class="card danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p> <p>
Clicking the button below will delete your account. Clicking the button below will delete your account.
This action is <strong>irreversible</strong>. This action is <strong>irreversible</strong>.

16
admin/templates/html/edit-artist.html
View file

@ -29,10 +29,10 @@
</div> </div>
</div> </div>
<div class="card-title"> <div class="card" id="releases">
<h2>Featured in</h2> <div class="card-header">
</div> <h2>Featured in</h2>
<div class="card releases"> </div>
{{if .Credits}} {{if .Credits}}
{{range .Credits}} {{range .Credits}}
<div class="credit"> <div class="credit">
@ -54,10 +54,10 @@
{{end}} {{end}}
</div> </div>
<div class="card-title"> <div class="card" id="danger">
<h2>Danger Zone</h2> <div class="card-header">
</div> <h2>Danger Zone</h2>
<div class="card danger"> </div>
<p> <p>
Clicking the button below will delete this artist. Clicking the button below will delete this artist.
This action is <strong>irreversible</strong>. This action is <strong>irreversible</strong>.

76
admin/templates/html/edit-release.html
View file

@ -97,16 +97,16 @@
</div> </div>
</div> </div>
<div class="card-title"> <div class="card" id="credits">
<h2>Credits ({{len .Release.Credits}})</h2> <div class="card-header">
<a class="button edit" <h2>Credits ({{len .Release.Credits}})</h2>
href="/admin/release/{{.Release.ID}}/editcredits" <a class="button edit"
hx-get="/admin/release/{{.Release.ID}}/editcredits" href="/admin/release/{{.Release.ID}}/editcredits"
hx-target="body" hx-get="/admin/release/{{.Release.ID}}/editcredits"
hx-swap="beforeend" hx-target="body"
>Edit</a> hx-swap="beforeend"
</div> >Edit</a>
<div class="card credits"> </div>
{{range .Release.Credits}} {{range .Release.Credits}}
<div class="credit"> <div class="credit">
<img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar"> <img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
@ -126,31 +126,33 @@
{{end}} {{end}}
</div> </div>
<div class="card-title"> <div class="card" id="links">
<h2>Links ({{len .Release.Links}})</h2> <div class="card-header">
<a class="button edit" <h2>Links ({{len .Release.Links}})</h2>
href="/admin/release/{{.Release.ID}}/editlinks" <a class="button edit"
hx-get="/admin/release/{{.Release.ID}}/editlinks" href="/admin/release/{{.Release.ID}}/editlinks"
hx-target="body" hx-get="/admin/release/{{.Release.ID}}/editlinks"
hx-swap="beforeend" hx-target="body"
>Edit</a> hx-swap="beforeend"
</div> >Edit</a>
<div class="card links"> </div>
{{range .Release.Links}} <ul>
<a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a> {{range .Release.Links}}
{{end}} <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
{{end}}
</ul>
</div> </div>
<div class="card-title" id="tracks"> <div class="card" id="tracks">
<h2>Tracklist ({{len .Release.Tracks}})</h2> <div class="card-header" id="tracks">
<a class="button edit" <h2>Tracklist ({{len .Release.Tracks}})</h2>
href="/admin/release/{{.Release.ID}}/edittracks" <a class="button edit"
hx-get="/admin/release/{{.Release.ID}}/edittracks" href="/admin/release/{{.Release.ID}}/edittracks"
hx-target="body" hx-get="/admin/release/{{.Release.ID}}/edittracks"
hx-swap="beforeend" hx-target="body"
>Edit</a> hx-swap="beforeend"
</div> >Edit</a>
<div class="card tracks"> </div>
{{range $i, $track := .Release.Tracks}} {{range $i, $track := .Release.Tracks}}
<div class="track" data-id="{{$track.ID}}"> <div class="track" data-id="{{$track.ID}}">
<h2 class="track-title"> <h2 class="track-title">
@ -175,10 +177,10 @@
{{end}} {{end}}
</div> </div>
<div class="card-title"> <div class="card" id="danger">
<h2>Danger Zone</h2> <div class="card-header">
</div> <h2>Danger Zone</h2>
<div class="card danger"> </div>
<p> <p>
Clicking the button below will delete this release. Clicking the button below will delete this release.
This action is <strong>irreversible</strong>. This action is <strong>irreversible</strong>.

12
admin/templates/html/edit-track.html
View file

@ -39,10 +39,10 @@
</div> </div>
</div> </div>
<div class="card-title">
<h2>Featured in</h2>
</div>
<div class="card releases"> <div class="card releases">
<div class="card-header">
<h2>Featured in</h2>
</div>
{{if .Releases}} {{if .Releases}}
{{range .Releases}} {{range .Releases}}
{{block "release" .}}{{end}} {{block "release" .}}{{end}}
@ -52,10 +52,10 @@
{{end}} {{end}}
</div> </div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger"> <div class="card danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p> <p>
Clicking the button below will delete this track. Clicking the button below will delete this track.
This action is <strong>irreversible</strong>. This action is <strong>irreversible</strong>.

116
admin/templates/html/index.html
View file

@ -5,64 +5,70 @@
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<main> <main class="dashboard">
<h1>Dashboard</h1>
<div class="card-title"> <div class="cards">
<h1>Releases</h1> <div class="card" id="releases">
<a class="button new" id="create-release">Create New</a> <div class="card-header">
</div> <h2><a href="/admin/releases/">Releases</a> <small>({{.ReleaseCount}} total)</small></h2>
<div class="card releases"> <a class="button new" id="create-release">Create New</a>
{{range .Releases}} </div>
{{block "release" .}}{{end}} {{range .Releases}}
{{end}} {{block "release" .}}{{end}}
{{if not .Releases}}
<p>There are no releases.</p>
{{end}}
</div>
<div class="card-title">
<h1>Artists</h1>
<a class="button new" id="create-artist">Create New</a>
</div>
<div class="card artists">
{{range $Artist := .Artists}}
<div class="artist">
<img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
<a href="/admin/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
</div>
{{end}}
{{if not .Artists}}
<p>There are no artists.</p>
{{end}}
</div>
<div class="card-title">
<h1>Tracks</h1>
<a class="button new" id="create-track">Create New</a>
</div>
<div class="card tracks">
<p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
<br>
{{range $Track := .Tracks}}
<div class="track">
<h2 class="track-title">
<a href="/admin/track/{{$Track.ID}}">{{$Track.Title}}</a>
</h2>
{{if $Track.Description}}
<p class="track-description">{{$Track.GetDescriptionHTML}}</p>
{{else}}
<p class="track-description empty">No description provided.</p>
{{end}} {{end}}
{{if $Track.Lyrics}} {{if not .Releases}}
<p class="track-lyrics">{{$Track.GetLyricsHTML}}</p> <p>There are no releases.</p>
{{else}}
<p class="track-lyrics empty">There are no lyrics.</p>
{{end}} {{end}}
</div> </div>
{{end}}
{{if not .Artists}} <div class="card" id="artists">
<p>There are no artists.</p> <div class="card-header">
{{end}} <h2><a href="/admin/artists/">Artists</a></h2>
<a class="button new" id="create-artist">Create New</a>
</div>
{{if .Artists}}
<div class="artists-group">
{{range $Artist := .Artists}}
<div class="artist">
<img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
<a href="/admin/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
</div>
{{end}}
</div>
{{else}}
<p>There are no artists.</p>
{{end}}
</div>
<div class="card" id="tracks">
<div class="card-header">
<h2><a href="/admin/tracks/">Tracks</a></h2>
<a class="button new" id="create-track">Create New</a>
</div>
<p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
<br>
{{range $Track := .Tracks}}
<div class="track">
<h2 class="track-title">
<a href="/admin/track/{{$Track.ID}}">{{$Track.Title}}</a>
</h2>
{{if $Track.Description}}
<p class="track-description">{{$Track.GetDescriptionHTML}}</p>
{{else}}
<p class="track-description empty">No description provided.</p>
{{end}}
{{if $Track.Lyrics}}
<p class="track-lyrics">{{$Track.GetLyricsHTML}}</p>
{{else}}
<p class="track-lyrics empty">There are no lyrics.</p>
{{end}}
</div>
{{end}}
{{if not .Artists}}
<p>There are no artists.</p>
{{end}}
</div>
</div> </div>
</main> </main>

24
admin/templates/html/layout.html
View file

@ -17,28 +17,42 @@
<header> <header>
<nav> <nav>
<a href="/" class="nav icon" aria-label="ari melody" title="Return to Home"> <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
<img src="/img/favicon.png" alt=""> <img src="/img/favicon.png" alt="" width="64" height="64">
</a> </a>
<div class="nav-item"> <div class="nav-item{{if eq .Path "/"}} active{{end}}">
<a href="/admin">home</a> <a href="/admin">home</a>
</div> </div>
{{if .Session.Account}} {{if .Session.Account}}
<div class="nav-item"> <div class="nav-item{{if eq .Path "/logs"}} active{{end}}">
<a href="/admin/logs">logs</a> <a href="/admin/logs">logs</a>
</div> </div>
<hr>
<p class="section-label">music</p>
<div class="nav-item{{if eq .Path "/releases"}} active{{end}}">
<a href="/admin/releases">releases</a>
</div>
<div class="nav-item{{if eq .Path "/artists"}} active{{end}}">
<a href="/admin/artists">artists</a>
</div>
<div class="nav-item{{if eq .Path "/tracks"}} active{{end}}">
<a href="/admin/tracks">tracks</a>
</div>
{{end}} {{end}}
<div class="flex-fill"></div> <div class="flex-fill"></div>
{{if .Session.Account}} {{if .Session.Account}}
<div class="nav-item"> <div class="nav-item{{if eq .Path "/account"}} active{{end}}">
<a href="/admin/account">account ({{.Session.Account.Username}})</a> <a href="/admin/account">account ({{.Session.Account.Username}})</a>
</div> </div>
<div class="nav-item"> <div class="nav-item">
<a href="/admin/logout" id="logout">log out</a> <a href="/admin/logout" id="logout">log out</a>
</div> </div>
{{else}} {{else}}
<div class="nav-item"> <div class="nav-item{{if eq .Path "/login"}} active{{end}}">
<a href="/admin/login" id="login">log in</a>
</div>
<div class="nav-item{{if eq .Path "/register"}} active{{end}}">
<a href="/admin/register" id="register">create account</a> <a href="/admin/register" id="register">create account</a>
</div> </div>
{{end}} {{end}}

4
admin/trackhttp.go
View file

@ -33,7 +33,7 @@ func serveTrack(app *model.AppState) http.Handler {
} }
type TrackResponse struct { type TrackResponse struct {
Session *model.Session adminPageData
Track *model.Track Track *model.Track
Releases []*model.Release Releases []*model.Release
} }
@ -41,7 +41,7 @@ func serveTrack(app *model.AppState) http.Handler {
session := r.Context().Value("session").(*model.Session) session := r.Context().Value("session").(*model.Session)
err = templates.EditTrackTemplate.Execute(w, TrackResponse{ err = templates.EditTrackTemplate.Execute(w, TrackResponse{
Session: session, adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
Track: track, Track: track,
Releases: releases, Releases: releases,
}) })

11
controller/release.go
View file

@ -99,6 +99,17 @@ func GetAllReleases(db *sqlx.DB, onlyVisible bool, limit int, full bool) ([]*mod
return releases, nil return releases, nil
} }
func GetReleasesCount(db *sqlx.DB, onlyVisible bool) (int, error) {
query := "SELECT count(*) FROM musicrelease"
if onlyVisible {
query += " WHERE visible=true"
}
var count int
err := db.Get(&count, query)
return count, err
}
func CreateRelease(db *sqlx.DB, release *model.Release) error { func CreateRelease(db *sqlx.DB, release *model.Release) error {
_, err := db.Exec( _, err := db.Exec(