disable tab badges when no loads available

shonya3 · Jun 27, 2024 · dd34b6f · dd34b6f
1 parent 9b5ccd7
commit dd34b6f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 28 deletions.
diff --git a/packages/wc/src/wc/stashes/stashes-view.ts b/packages/wc/src/wc/stashes/stashes-view.ts
@@ -82,8 +82,9 @@ export class StashesViewElement extends BaseElement {
 	@state() fetchingStash: boolean = false;
 	@state() stashLoader!: IStashLoader;
 	@state() errors: Array<ErrorLabel> = [];
-	@state() private stashLoadsAvailable = 30;
-	@state() private availableInTenSeconds = 15;
+	// @state() stashLoadsAvailable = 30;
+	@state() stashLoadsAvailable = 1;
+	@state() availableInTenSeconds = 15;
 	@state() hoveredErrorTabId: string | null = null;
 	@state() downloadedStashTabs: Array<TabWithItems> = [];
 	@state() openedTabId: string | null = null;
@@ -93,11 +94,7 @@ export class StashesViewElement extends BaseElement {
 			if (!stashTabId) {
 				return null;
 			}
-
-			const tab = await this.stashLoader.tab(stashTabId, this.league);
-			this.#loadSingleTabContent(stashTabId, this.league, this.stashLoader.tab);
-			this.downloadedStashTabs.push(tab);
-			return tab;
+			return await this.#loadSingleTabContent(stashTabId, this.league, this.stashLoader.tab);
 		},
 		args: () => [this.openedTabId],
 	});
@@ -197,6 +194,7 @@ export class StashesViewElement extends BaseElement {
 				@upd:selectedTabs=${this.#onUpdSelectedTabs}
 				@tab-click=${this.#onTabClick}
 				@upd:multiselect=${this.#handleUpdMultiselect}
+				.badgesDisabled=${this.stashLoadsAvailable === 0 || this.availableInTenSeconds === 0}
 			></wc-tab-badge-group>
 			${this.openedTabId
 				? this.stashTabTask.render({
@@ -216,9 +214,21 @@ export class StashesViewElement extends BaseElement {
 								.tab=${tab}
 							></e-stash-tab-container>`,
 						initial: () => {
-							console.log('initial');
 							return html`initial`;
 						},
+						error: (err: unknown) => {
+							if (
+								!(
+									typeof err === 'object' &&
+									err !== null &&
+									'message' in err &&
+									typeof err.message === 'string'
+								)
+							) {
+								return;
+							}
+							return html`<div>${err.message}</div>`;
+						},
 				  })
 				: null}
 		</div>`;
@@ -296,16 +306,6 @@ export class StashesViewElement extends BaseElement {
 			for (const { id, name } of this.selectedTabs.values()) {
 				this.fetchingStashTab = true;
 				try {
-					if (this.stashLoadsAvailable === 0) {
-						this.msg = 'Loads available: 0. Waiting for cooldown.';
-						await sleepSecs(1);
-						continue;
-					}
-					if (this.availableInTenSeconds === 0) {
-						this.msg = 'Sleep for short cooldown';
-						await sleepSecs(0.5);
-						continue;
-					}
 					switch (this.downloadAs) {
 						case 'divination-cards-sample': {
 							const sample = await this.#loadSingleTabContent(id, league, this.stashLoader.sampleFromTab);
@@ -341,6 +341,22 @@ export class StashesViewElement extends BaseElement {
 		}
 	}
 
+	async #waitForLoadsAvailable() {
+		while (this.stashLoadsAvailable === 0 || this.availableInTenSeconds === 0) {
+			if (this.stashLoadsAvailable === 0) {
+				this.msg = 'Loads available: 0. Waiting for cooldown.';
+				await sleepSecs(1);
+				continue;
+			}
+			if (this.availableInTenSeconds === 0) {
+				this.msg = 'Sleep for short cooldown';
+				await sleepSecs(0.5);
+				continue;
+			}
+		}
+		this.msg = '';
+	}
+
 	async #loadSingleTabContent<T>(
 		id: string,
 		league: League,
@@ -350,19 +366,21 @@ export class StashesViewElement extends BaseElement {
 			throw new Error('No stash loader');
 		}
 
-		this.msg = '';
+		await this.#waitForLoadsAvailable();
+		this.stashLoadsAvailable--;
+		this.availableInTenSeconds--;
+		setTimeout(() => {
+			this.stashLoadsAvailable++;
+		}, SECS_300);
+		setTimeout(() => {
+			this.availableInTenSeconds++;
+		}, SECS_10);
 		try {
 			const singleTabContent = await loadFunction(id, league);
 			return singleTabContent;
 		} finally {
-			this.stashLoadsAvailable--;
-			this.availableInTenSeconds--;
-			setTimeout(() => {
-				this.stashLoadsAvailable++;
-			}, SECS_300);
-			setTimeout(() => {
-				this.availableInTenSeconds++;
-			}, SECS_10);
+			// run again go clear wait-messages when time comes
+			this.#waitForLoadsAvailable();
 		}
 	}
 }

diff --git a/packages/wc/src/wc/stashes/tab-badge-group.ts b/packages/wc/src/wc/stashes/tab-badge-group.ts
@@ -40,6 +40,7 @@ export class TabBadgeGroupElement extends BaseElement {
 	static override tag = 'wc-tab-badge-group';
 	static override styles = [styles()];
 
+	@property({ type: Boolean, attribute: 'badges-disabled' }) badgesDisabled = false;
 	@property({ type: Boolean }) multiselect = false;
 	@property({ type: Array }) stashes: NoItemsTab[] = [];
 	@property({ reflect: true }) league: League = ACTIVE_LEAGUE;
@@ -153,6 +154,7 @@ export class TabBadgeGroupElement extends BaseElement {
 							.as=${this.multiselect ? 'checkbox' : 'button'}
 							.tab=${tab}
 							.selected=${this.selectedTabs.has(tab.id)}
+							.disabled=${this.badgesDisabled}
 						></wc-tab-badge>
 					</li>`;
 				})}

diff --git a/packages/wc/src/wc/stashes/tab-badge.ts b/packages/wc/src/wc/stashes/tab-badge.ts
@@ -19,6 +19,7 @@ export interface Events {
 export class TabBadgeElement extends BaseElement {
 	static override tag = 'wc-tab-badge';
 	@property({ type: Object }) tab!: NoItemsTab;
+	@property({ type: Boolean }) disabled = false;
 	@property({ type: Boolean, reflect: true }) selected = false;
 	// /** Any valid CSS color */
 	@property({ reflect: true, attribute: 'color' }) color?: string;
@@ -67,7 +68,12 @@ export class TabBadgeElement extends BaseElement {
 		}
 
 		if (this.as === 'button') {
-			return html`<button @click=${this.#onButtonClick} style=${cssProps} class="tab-badge-as-button">
+			return html`<button
+				.disabled=${this.disabled}
+				@click=${this.#onButtonClick}
+				style=${cssProps}
+				class="tab-badge-as-button"
+			>
 				${this.nameLabel()}
 			</button>`;
 		}
@@ -101,6 +107,9 @@ export class TabBadgeElement extends BaseElement {
 			position: relative;
 			&:hover {
 			}
+			&:disabled {
+				filter: grayscale(0.6);
+			}
 			.name {
 				pointer-events: none;
 			}