improve user channel select

radio4000 · May 16, 2024 · 30232f3 · 30232f3
1 parent 29f968e
commit 30232f3
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/src/components/r4-app-user-menu.js b/src/components/r4-app-user-menu.js
@@ -8,9 +8,13 @@ export default class R4AppUserMenu extends LitElement {
 		return this
 	}
 	static properties = {
+		/* props */
 		href: {type: String},
 		channel: {type: Object || null},
 		channels: {type: Array || null},
+
+		/* state */
+		path: {type: String, state: true},
 	}
 	constructor() {
 		super()
@@ -34,28 +38,31 @@ export default class R4AppUserMenu extends LitElement {
 	}
 
 	render() {
-		console.log('channels', this.channels, this.channel)
 		const {href, path} = this
 		return html`
 			<menu>
-				<li>${this.renderChannel()}</li>
 				<li>${this.channel ? this.renderAdd() : null}</li>
+				<li>${this.renderChannelLinks()}</li>
+				<li>${this.channels ? this.renderChannelSelect() : null}</li>
 			</menu>
 		`
 	}
-	renderChannel() {
+	renderChannelLinks() {
+		if (this.channel) {
+			return html`<a aria-current=${this.isCurrent(`/${this.channel.slug}`)} href=${this.href + '/' + this.channel.slug}
+				>@${this.channel.slug}</a
+			>`
+		} else {
+			return html`<a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a>`
+		}
+	}
+	renderChannelSelect() {
 		if (this.channels) {
 			return html`<r4-user-channels-select
 				.channels=${this.channels}
 				.channel=${this.channel}
 				@select=${this.onChannelSelect}
 			></r4-user-channels-select>`
-		} else if (this.channel) {
-			return html`<a aria-current=${this.isCurrent(`/${this.channel.slug}`)} href=${this.href + '/' + this.channel.slug}
-				>@${this.channel.slug}</a
-			>`
-		} else {
-			return html`<a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a>`
 		}
 	}
 	renderAdd() {

diff --git a/src/components/r4-app.js b/src/components/r4-app.js
@@ -234,9 +234,12 @@ export default class R4App extends LitElement {
 
 	onChannelSelect({detail: channel}) {
 		if (channel) {
-			const {slug} = channel
-			this.selectedSlug = slug
-			/* page(`/${this.selectedSlug}`) */
+			if (this.selectedSlug === channel.slug) {
+				/* page(`/${this.selectedSlug}`) */
+			} else {
+				this.selectedSlug = channel.slug
+				this.refreshUserData()
+			}
 		}
 	}
 

diff --git a/src/components/r4-user-channels-select.js b/src/components/r4-user-channels-select.js
@@ -25,7 +25,7 @@ export default class R4UserChannelsSelect extends LitElement {
 			<label>
 				<select @change=${this.onSelect} title="Selected Radio">
 					<optgroup label="Selected">
-						<option>${this.channel.slug}</option>
+						<option value=${this.channel.id}>${this.channel.slug}</option>
 					</optgroup>
 					<optgroup label="Channels">${this._renderOptions()}</optgroup>
 				</select>

diff --git a/src/index.css b/src/index.css
@@ -664,6 +664,10 @@ r4-app r4-app-menu r4-title::after {
 	content: '.v2';
 }
 
+r4-app r4-app-user-menu menu {
+	flex-wrap: nowrap;
+}
+
 /* icon done in css and unicode ascii only */
 r4-icon[icon]::before {
 	content: attr(icon);

diff --git a/src/pages/r4-page-home.js b/src/pages/r4-page-home.js
@@ -69,7 +69,11 @@ export default class R4PageHome extends R4Page {
 
 	renderSignIn() {
 		return html`
-			<p><a href="${this.config.href}/sign/in">Sign in to your existing account</a> or <a href="${this.config.href}/sign/up">register a new account</a> to create, import or manage a Radio4000 channel.</p>
+			<p>
+				<a href="${this.config.href}/sign/in">Sign in to your existing account</a> or
+				<a href="${this.config.href}/sign/up">register a new account</a> to create, import or manage a Radio4000
+				channel.
+			</p>
 			${this.featuredChannels?.length ? this.renderFeaturedChannels() : nothing}
 			${this.latestTracks?.length ? this.renderTracks() : nothing}
 		`
@@ -132,9 +136,7 @@ export default class R4PageHome extends R4Page {
 					<p>
 						Welcome to the new <strong><r4-title></r4-title></strong>, version 2 (<strong>v2</strong>).
 					</p>
-					<p>
-						To import a radio channel from v1 to v2, <a href="${this.config.hrefMigrate}">migrate</a>.
-					</p>
+					<p>To import a radio channel from v1 to v2, <a href="${this.config.hrefMigrate}">migrate</a>.</p>
 					<p>
 						All previous radio channels are still available on the
 						<a href="${this.config.hrefV1}">v1</a> website.