From f8b5e6ca39604d6d671e810f36c5096e8ec66fc6 Mon Sep 17 00:00:00 2001 From: lucsoft Date: Sun, 24 Nov 2024 14:19:52 +0100 Subject: [PATCH] Add WebGen Routing and add moved /c/music to pages --- assets/css/main.css | 134 -------------------------- assets/css/music.css | 34 +------ components/nav.ts | 12 ++- pages/music/main.ts | 99 +++++++++++++++---- pages/music/pages/artists.ts | 35 +++++++ pages/music/pages/draftDrops.ts | 36 +++++++ pages/music/pages/payouts.ts | 35 +++++++ pages/music/pages/publishedDrops.ts | 35 +++++++ pages/music/pages/unpublishedDrops.ts | 39 ++++++++ serve.ts | 3 +- 10 files changed, 273 insertions(+), 189 deletions(-) create mode 100644 pages/music/pages/artists.ts create mode 100644 pages/music/pages/draftDrops.ts create mode 100644 pages/music/pages/payouts.ts create mode 100644 pages/music/pages/publishedDrops.ts create mode 100644 pages/music/pages/unpublishedDrops.ts diff --git a/assets/css/main.css b/assets/css/main.css index 2abf9d5..f21b2d3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -15,138 +15,4 @@ body { background-color: #f3f5fa !important; } -} - -.link { - padding: 0 .3rem; - height: 20px; -} - -.limited-width { - max-width: 80rem; - width: calc(100% - 2rem); - margin: 0 auto 0; -} - -.wtags .wbutton { - --background-color-h: 31 !important; - --background-color-s: 100% !important; - --background-color-l: 66% !important; -} - -.image-preview .wimage { - aspect-ratio: 1 / 1; - border-radius: 10px; - height: 100%; -} - -.subtitle { - opacity: 69%; -} - -.wbutton ul { - max-height: 14rem; - overflow: auto; -} - -.upload-image { - position: relative; -} - -.upload-image .wimage { - height: 12rem; - aspect-ratio: 1/1; -} - -.upload-image .wiconbutton { - position: absolute; - top: .4rem; - right: .4rem; - transform: translate(50%, -50%) scale(0.8); - border-radius: 100%; - padding: 1px 0 2px 1px; -} - -.error-message { - padding: 0.5rem 0.8rem; - font-size: 0.8rem; -} - -.error-message.hidden-message { - display: none; -} - -.same-height { - line-height: 1; -} - -/** - * Safari Hack: Custom Style for sliders. - * Why? Chromes Firefox and Edge have now usable sliders! Except Safari. so yeah fuck it. - */ -@supports (-webkit-appearance: -apple-pay-button) { - .wslider { - -webkit-appearance: none; - background: transparent; - height: 16px; - } - - .wslider::-webkit-slider-runnable-track { - position: relative; - width: 100%; - background: rgb(190, 190, 190); - height: 8px; - border-radius: 10px; - } - - .wslider::-webkit-slider-thumb { - margin-top: -5px; - color: blue; - } -} - -.wtable .wbutton.low-level:has(ul.open) { - z-index: 10; -} - -.list-title { - width: 100%; - margin: 0 auto; - padding-top: 22px; - font-weight: 700; - font-size: 23.17px; -} - -.image-square { - height: 5rem; - aspect-ratio: 1 / 1; - border-radius: 15px; -} - -.small .image-square { - height: 44px; -} - -.image-square .wimage { - height: 100%; - width: 100%; -} - -.mobile-navigation { - margin: 1rem auto 1rem; -} - -.navigation { - margin: 5rem auto 1rem; -} - -.profile-picture { - aspect-ratio: 1/1; - display: flex; - justify-content: center; - align-items: center; - border-radius: 3px; - border-radius: 9px; - font-weight: 800; - overflow: hidden; } \ No newline at end of file diff --git a/assets/css/music.css b/assets/css/music.css index 3ba7a14..c8e0197 100644 --- a/assets/css/music.css +++ b/assets/css/music.css @@ -1,41 +1,15 @@ -.entry-subtitle { - color: rgb(255 255 255 / 80%); -} - -.under-review { - background-color: #BCBCBC; - color: rgba(0, 0, 0, 0.8); - border-radius: 10rem; - font-weight: 700; - font-size: 15px; - padding: 0.2rem 0.8rem; - margin: 0 2rem; -} - -.small-preview.image-preview .wimage { - height: 2.2rem; - border-radius: 3px; - margin: 0 0.4rem 0 0; -} - @media (prefers-color-scheme: dark) { body { + background-color: black !important; background-image: linear-gradient(360deg, #00000000, #f19d2d2b); background-size: 100vw 100vh; background-repeat: no-repeat; } } -nav.music { - background: linear-gradient(166deg, #F19D2D 6.59%, #DB5721 101.73%); -} -@media (max-width: 800px) { - nav.music { - background: linear-gradient(166deg, #F19D2D 6.59%, #db7621 101.73%); +@media (prefers-color-scheme: dark) { + body { + --wg-reverse-neutral: rgba(255, 255, 255, 2%); } -} - -div.navigation>div.vertical-stack { - gap: unset !important; } \ No newline at end of file diff --git a/components/nav.ts b/components/nav.ts index ed3204c..bd9732a 100644 --- a/components/nav.ts +++ b/components/nav.ts @@ -24,7 +24,9 @@ const navMenuPopover = Popover( ) .setTemplateColumns("12rem max-content") .addClass("small-entry") - .onClick(() => location.pathname = route) + .onClick(() => { + location.href = route; + }) : Empty() ), perm.length @@ -101,7 +103,6 @@ function NavigationBar(type: NavigationType) { showProfilePicture(IsLoggedIn()!).setWidth("29px").setHeight("29px"), Label(activeUser.username.value) .setFontWeight("bold"), - Empty(), ) .setGap(".7rem") .setTemplateColumns("max-content max-content") @@ -110,7 +111,8 @@ function NavigationBar(type: NavigationType) { .onClick(() => location.href = "/settings") .addClass("profile-button"); }), - ), + ) + .setCssStyle("display", "contents"), ) .setTemplateColumns("max-content max-content") .setJustifyContent("space-between") @@ -178,7 +180,6 @@ export function DynaNavigation(type: NavigationType) { top: anchor(bottom); left: anchor(left); border: none; - background: ${Color.reverseNeutral.toString()}; overflow: hidden; padding: 5px 10px; border-radius: var(--wg-radius-large); @@ -197,5 +198,8 @@ export function DynaNavigation(type: NavigationType) { :host([type="Music-Landing"]) { backdrop-filter: blur(10px); } + :host([type="Music"]) { + background: linear-gradient(166deg, #F19D2D 6.59%, #DB5721 101.73%); + } `); } diff --git a/pages/music/main.ts b/pages/music/main.ts index 9135dad..e49b708 100644 --- a/pages/music/main.ts +++ b/pages/music/main.ts @@ -1,35 +1,94 @@ -import { RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts"; +import "./pages/artists.ts"; +import "./pages/draftDrops.ts"; +import "./pages/payouts.ts"; +import "./pages/publishedDrops.ts"; +import "./pages/unpublishedDrops.ts"; + +/// + +import { activeUser, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts"; import { API, stupidErrorAlert } from "shared/restSpec.ts"; -import { appendBody, Content, DialogContainer, WebGenTheme } from "webgen/mod.ts"; +import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton, StartRouting, WebGenTheme } from "webgen/mod.ts"; import "../../assets/css/main.css"; import "../../assets/css/music.css"; import { DynaNavigation } from "../../components/nav.ts"; import { DropType } from "../../spec/music.ts"; -import { menuState, musicMenu } from "./views/menu.ts"; +import { draftsDropsPage } from "./pages/draftDrops.ts"; +import { publishedDrops } from "./pages/publishedDrops.ts"; await RegisterAuthRefresh(); +createRoute({ + path: "/c/music", + events: { + onActive: async () => { + const list = await API.music.drops.list().then(stupidErrorAlert); + const published = list.filter((x) => x.type === DropType.Published); + + if (published.length >= 1) { + publishedDrops.route.navigate({}); + } else { + draftsDropsPage.route.navigate({}); + } + }, + }, +}); + +export function Navigation() { + return Box( + Content( + Grid( + Label(ref`Hi ${activeUser.username} 👋`) + .setFontWeight("bold") + .setTextSize("4xl"), + Grid( + menuList + .map((item) => + item + .filter((item) => item.route.entry.patternUrl.startsWith("/c/music?list=")) + .map((item) => + Box(activeRoute.map((activeRoute) => + (activeRoute == item.route.entry ? PrimaryButton(item.label) : SecondaryButton(item.label)) + .onPromiseClick(async () => { + await window.navigation.navigate(item.route.entry.patternUrl).finished; + }) + )) + ) + ), + ) + .setGap(".8rem") + .setAutoFlow("column") + .setAutoColumn("max-content"), + ) + .setGap("1rem") + .setMargin("4rem 0 1rem"), + ) + .addStyle(css` + :host { + --wg-button-border-radius: var(--wg-radius-large); + } + `), + PageRouter, + ); +} + appendBody( WebGenTheme( DialogContainer(sheetStack.visible(), sheetStack), Content( - DynaNavigation("Music"), - musicMenu, + FullWidthSection( + DynaNavigation("Music"), + ), ), - ), + Navigation(), + ) + .addStyle(css` + :host { + --wg-primary: rgb(255, 171, 82); + --content-max-width: 1200px; + } + `), ); -renewAccessTokenIfNeeded() - .then(async () => { - const list = await API.music.drops.list().then(stupidErrorAlert); - - menuState.published = list.filter((x) => x.type === DropType.Published); - menuState.drafts = list.filter((x) => x.type === DropType.Unsubmitted); - menuState.unpublished = list.filter((x) => - x.type === DropType.UnderReview || - x.type === DropType.Private || - x.type === DropType.ReviewDeclined - ); - menuState.payouts = await API.payment.payouts.get().then(stupidErrorAlert); - menuState.artists = await API.music.artists.list().then(stupidErrorAlert); - }); +StartRouting(); +renewAccessTokenIfNeeded(); diff --git a/pages/music/pages/artists.ts b/pages/music/pages/artists.ts new file mode 100644 index 0000000..a0796fb --- /dev/null +++ b/pages/music/pages/artists.ts @@ -0,0 +1,35 @@ +import { API, stupidErrorAlert } from "shared/restSpec.ts"; +import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts"; +import { Artist } from "../../../spec/music.ts"; + +const data = asRef<"loading" | Artist[]>("loading"); + +const source = data.map((data) => data === "loading" ? [] : data); + +export const artistsPage = createPage( + { + label: "Artists", + weight: 5, + route: createRoute({ + path: "/c/music?list=artists", + events: { + onLazyInit: async () => { + const list = await API.music.artists.list().then(stupidErrorAlert); + data.value = list; + }, + }, + }), + }, + Content( + Box(data.map((data) => data === "loading" ? Spinner() : [])), + Grid( + source.map((items) => + items.map((item) => + Entry( + Label(item.name), + ) + ) + ), + ), + ), +); diff --git a/pages/music/pages/draftDrops.ts b/pages/music/pages/draftDrops.ts new file mode 100644 index 0000000..52a5040 --- /dev/null +++ b/pages/music/pages/draftDrops.ts @@ -0,0 +1,36 @@ +import { API, stupidErrorAlert } from "shared/restSpec.ts"; +import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts"; +import { Drop, DropType } from "../../../spec/music.ts"; + +const data = asRef<"loading" | Drop[]>("loading"); + +const source = data.map((data) => data === "loading" ? [] : data); + +export const draftsDropsPage = createPage( + { + label: "Drafts", + route: createRoute({ + path: "/c/music?list=drafts", + events: { + onLazyInit: async () => { + const list = await API.music.drops.list().then(stupidErrorAlert); + data.value = list.filter((x) => x.type === DropType.Unsubmitted); + }, + }, + }), + }, + Content( + Box(data.map((data) => data === "loading" ? Spinner() : [])), + Grid( + source.map((items) => + items.map((item) => + Entry( + Label(item.title ?? "(Untitled)") + .setMargin("35px 0"), + ) + .onClick(() => {}) + ) + ), + ), + ), +); diff --git a/pages/music/pages/payouts.ts b/pages/music/pages/payouts.ts new file mode 100644 index 0000000..7e1dce5 --- /dev/null +++ b/pages/music/pages/payouts.ts @@ -0,0 +1,35 @@ +import { API, stupidErrorAlert } from "shared/mod.ts"; +import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts"; +import { Payout } from "../../../spec/music.ts"; + +const data = asRef<"loading" | Payout[]>("loading"); + +const source = data.map((data) => data === "loading" ? [] : data); + +export const payoutsPage = createPage( + { + label: "Payouts", + weight: 10, + route: createRoute({ + path: "/c/music?list=payouts", + events: { + onLazyInit: async () => { + const list = await API.payment.payouts.get().then(stupidErrorAlert); + data.value = list; + }, + }, + }), + }, + Content( + Box(data.map((data) => data === "loading" ? Spinner() : [])), + Grid( + source.map((items) => + items.map((item) => + Entry( + Label(item.period), + ) + ) + ), + ), + ), +); diff --git a/pages/music/pages/publishedDrops.ts b/pages/music/pages/publishedDrops.ts new file mode 100644 index 0000000..bcd8fc8 --- /dev/null +++ b/pages/music/pages/publishedDrops.ts @@ -0,0 +1,35 @@ +import { API, stupidErrorAlert } from "shared/mod.ts"; +import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts"; +import { Drop, DropType } from "../../../spec/music.ts"; + +const data = asRef<"loading" | Drop[]>("loading"); + +const source = data.map((data) => data === "loading" ? [] : data); + +export const publishedDrops = createPage( + { + label: "Published", + weight: -10, + route: createRoute({ + path: "/c/music?list=published", + events: { + onLazyInit: async () => { + const list = await API.music.drops.list().then(stupidErrorAlert); + data.value = list.filter((x) => x.type === DropType.Published); + }, + }, + }), + }, + Content( + Box(data.map((data) => data === "loading" ? Spinner() : [])), + Grid( + source.map((items) => + items.map((item) => + Entry( + Label(item.title), + ) + ) + ), + ), + ), +); diff --git a/pages/music/pages/unpublishedDrops.ts b/pages/music/pages/unpublishedDrops.ts new file mode 100644 index 0000000..28c2803 --- /dev/null +++ b/pages/music/pages/unpublishedDrops.ts @@ -0,0 +1,39 @@ +import { API, stupidErrorAlert } from "shared/mod.ts"; +import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts"; +import { Drop, DropType } from "../../../spec/music.ts"; + +const data = asRef<"loading" | Drop[]>("loading"); + +const source = data.map((data) => data === "loading" ? [] : data); + +export const unpublishedDropsPage = createPage( + { + label: "Unpublished", + weight: -8, + route: createRoute({ + path: "/c/music?list=unpublished", + events: { + onLazyInit: async () => { + const list = await API.music.drops.list().then(stupidErrorAlert); + data.value = list.filter((x) => + x.type === DropType.UnderReview || + x.type === DropType.Private || + x.type === DropType.ReviewDeclined + ); + }, + }, + }), + }, + Content( + Box(data.map((data) => data === "loading" ? Spinner() : [])), + Grid( + source.map((items) => + items.map((item) => + Entry( + Label(item.title), + ) + ) + ), + ), + ), +); diff --git a/serve.ts b/serve.ts index 90e3dea..cffcb78 100644 --- a/serve.ts +++ b/serve.ts @@ -62,7 +62,7 @@ serve({ // "callback": "./pages/misc/callback.ts", // "oauth": "./pages/user/oauth.ts", // "music": "./pages/music-landing/main.ts", - // "c/music": "./pages/music/main.ts", + "c/music": "./pages/music/main.ts", // "c/music/new-drop": "./pages/music/newDrop.ts", // "c/music/edit": "./pages/music/edit.ts", // "c/music/payout": "./pages/payout/main.ts", @@ -80,6 +80,7 @@ serve({ "./bug-reporter.ts", "https://cdn.jsdelivr.net/npm/native-file-system-adapter@3.0.1/mod.js", "https://unpkg.com/urlpattern-polyfill", + "https://esm.sh/@virtualstate/navigation@1.0.1-alpha.206/polyfill", ], });