uptime.link/catalog_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): add upladmin-option-card component and migrate option/status UIs to use it; refactor monitor form multitoggle subscriptions and event handling; improve theme color handling and dark-mode styles; add demos, Playwright snapshots, and migration plan

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-26 18:04:55 +00:00
parent e667370079
commit 6a7c69bad1
16 changed files with 869 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
ts_web/elements/upladmin-monitor-form/upladmin-monitor-form.ts
View File

@@ -10,6 +10,7 @@ import {
unsafeCSS,
state,
} from '@design.estate/dees-element';
import type { DeesInputMultitoggle } from '@design.estate/dees-catalog';
import * as sharedStyles from '../../styles/shared.styles.js';
import type { IMonitorFormData, IServiceStatus, ICheckConfig, TStatusType, TCheckType, TStatusMode } from '../../interfaces/index.js';
import { demoFunc } from './upladmin-monitor-form.demo.js';
@@ -60,6 +61,14 @@ export class UpladminMonitorForm extends DeesElement {
pagerank: 'PageRank',
};
private getCheckTypeLabel(): string {
return this.checkTypeLabels[this.formData.checkType] || 'Assumption';
}
private getStatusModeLabel(): string {
return this.formData.statusMode === 'auto' ? 'Auto' : 'Manual';
}
private intervalOptions = [
{ value: 60000, label: '1 min' },
{ value: 300000, label: '5 min' },
@@ -183,6 +192,8 @@ export class UpladminMonitorForm extends DeesElement {
`
];
private subscriptions: Array<{ unsubscribe: () => void }> = [];
async connectedCallback() {
await super.connectedCallback();
if (this.monitor) {
@@ -190,10 +201,47 @@ export class UpladminMonitorForm extends DeesElement {
}
}
async disconnectedCallback() {
await super.disconnectedCallback();
this.subscriptions.forEach(sub => sub.unsubscribe());
this.subscriptions = [];
}
async firstUpdated() {
await this.updateComplete;
this.setupMultitoggleSubscriptions();
}
updated(changedProperties: Map<string, unknown>) {
if (changedProperties.has('monitor') && this.monitor) {
this.formData = { ...this.monitor };
}
// Re-setup subscriptions after each render in case elements changed
this.setupMultitoggleSubscriptions();
}
private subscribedElements = new WeakSet<Element>();
private setupMultitoggleSubscriptions() {
// Subscribe to check type toggle (only if not already subscribed)
const checkTypeToggle = this.shadowRoot?.querySelector('#checkTypeToggle') as DeesInputMultitoggle;
if (checkTypeToggle && !this.subscribedElements.has(checkTypeToggle)) {
this.subscribedElements.add(checkTypeToggle);
const sub = checkTypeToggle.changeSubject.subscribe(() => {
this.handleCheckTypeChange(checkTypeToggle.selectedOption);
});
this.subscriptions.push(sub);
}
// Subscribe to status mode toggle (only if not already subscribed)
const statusModeToggle = this.shadowRoot?.querySelector('#statusModeToggle') as DeesInputMultitoggle;
if (statusModeToggle && !this.subscribedElements.has(statusModeToggle)) {
this.subscribedElements.add(statusModeToggle);
const sub = statusModeToggle.changeSubject.subscribe(() => {
this.handleStatusModeChange(statusModeToggle.selectedOption);
});
this.subscriptions.push(sub);
}
}
public render(): TemplateResult {
@@ -266,10 +314,10 @@ export class UpladminMonitorForm extends DeesElement {
<!-- Check Type -->
<div class="form-section">
<dees-input-multitoggle
id="checkTypeToggle"
.label=${'Check Type'}
.options=${Object.values(this.checkTypeLabels)}
.selectedOption=${this.checkTypeLabels[this.formData.checkType]}
@changeSubject=${(e: CustomEvent) => this.handleCheckTypeChange(e.detail.selectedOption)}
.options=${['Assumption', 'Function', 'PWA', 'PageRank']}
.selectedOption=${this.getCheckTypeLabel()}
></dees-input-multitoggle>
</div>
@@ -293,18 +341,18 @@ export class UpladminMonitorForm extends DeesElement {
.label=${'Pause Monitor'}
.description=${'When paused, status will show as "paused" and checks won\'t run'}
.value=${this.formData.paused}
@changeSubject=${(e: CustomEvent) => this.updateField('paused', e.detail.value)}
@newValue=${(e: CustomEvent) => this.updateField('paused', e.detail)}
></dees-input-checkbox>
<!-- Status Override (Edit mode only) -->
${isEdit ? html`
<div class="form-section">
<dees-input-multitoggle
id="statusModeToggle"
.label=${'Status Mode'}
.description=${'Auto uses check results, Manual lets you override'}
.options=${['Auto', 'Manual']}
.selectedOption=${this.formData.statusMode === 'auto' ? 'Auto' : 'Manual'}
@changeSubject=${(e: CustomEvent) => this.handleStatusModeChange(e.detail.selectedOption)}
.selectedOption=${this.getStatusModeLabel()}
></dees-input-multitoggle>
${this.formData.statusMode === 'manual' ? html`
@@ -319,7 +367,7 @@ export class UpladminMonitorForm extends DeesElement {
]}
.selectedOption=${this.formData.manualStatus || 'operational'}
.direction=${'horizontal'}
@changeSubject=${(e: CustomEvent) => this.updateField('manualStatus', e.detail.selectedOption)}
@change=${(e: CustomEvent) => this.updateField('manualStatus', e.detail.value)}
></dees-input-radiogroup>
` : ''}
</div>
@@ -435,12 +483,12 @@ export class UpladminMonitorForm extends DeesElement {
<dees-input-checkbox
.label=${'Google'}
.value=${config.checkGoogle !== false}
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('checkGoogle', e.detail.value)}
@newValue=${(e: CustomEvent) => this.updateCheckConfig('checkGoogle', e.detail)}
></dees-input-checkbox>
<dees-input-checkbox
.label=${'Bing'}
.value=${config.checkBing === true}
@changeSubject=${(e: CustomEvent) => this.updateCheckConfig('checkBing', e.detail.value)}
@newValue=${(e: CustomEvent) => this.updateCheckConfig('checkBing', e.detail)}
></dees-input-checkbox>
</div>
<div class="form-row">