update
This commit is contained in:
@@ -6,10 +6,14 @@ import {
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import type { IServiceStatus } from '../interfaces/index.js';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
|
||||
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-assetsselector.demo.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -19,9 +23,22 @@ declare global {
|
||||
|
||||
@customElement('upl-statuspage-assetsselector')
|
||||
export class UplStatuspageAssetsselector extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
|
||||
`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Array })
|
||||
public services: IServiceStatus[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
public filterText: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public filterCategory: string = 'all';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showOnlySelected: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -29,35 +46,398 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
commonStyles,
|
||||
css`
|
||||
:host {
|
||||
padding: 0px 0px 15px 0px;
|
||||
display: block;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
|
||||
font-family: Inter;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
margin: auto;
|
||||
max-width: 900px;
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 240px;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
background: ${colors.background.primary};
|
||||
color: ${colors.text.primary};
|
||||
font-size: 14px;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: ${colors.text.primary};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${colors.text.muted};
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
background: transparent;
|
||||
color: ${colors.text.primary};
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background: ${colors.text.primary};
|
||||
color: ${colors.background.primary};
|
||||
border-color: ${colors.text.primary};
|
||||
}
|
||||
|
||||
.filter-button.active:hover {
|
||||
background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
|
||||
border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
|
||||
}
|
||||
|
||||
.assets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.background.card};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
min-height: 200px;
|
||||
box-shadow: ${unsafeCSS(shadows.sm)};
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.background.secondary};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid ${colors.border.default};
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.asset-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: ${unsafeCSS(shadows.md)};
|
||||
border-color: ${colors.border.muted};
|
||||
}
|
||||
|
||||
.asset-card.selected {
|
||||
border-color: ${colors.text.primary};
|
||||
background: ${colors.background.muted};
|
||||
box-shadow: 0 0 0 1px ${colors.text.primary};
|
||||
}
|
||||
|
||||
.asset-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: ${colors.text.primary};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: ${unsafeCSS(spacing.xs)};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.asset-description {
|
||||
font-size: 13px;
|
||||
color: ${colors.text.secondary};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.asset-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
}
|
||||
|
||||
.status-indicator.operational { background: ${colors.status.operational}; }
|
||||
.status-indicator.degraded { background: ${colors.status.degraded}; }
|
||||
.status-indicator.partial_outage { background: ${colors.status.partial}; }
|
||||
.status-indicator.major_outage { background: ${colors.status.major}; }
|
||||
.status-indicator.maintenance { background: ${colors.status.maintenance}; }
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
text-transform: capitalize;
|
||||
color: ${colors.text.secondary};
|
||||
}
|
||||
|
||||
.loading-message,
|
||||
.no-results {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#333333')};;
|
||||
padding: ${unsafeCSS(spacing['2xl'])};
|
||||
color: ${colors.text.secondary};
|
||||
}
|
||||
|
||||
.summary {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
color: ${colors.text.secondary};
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.assets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
padding: ${unsafeCSS(spacing.sm)};
|
||||
}
|
||||
}
|
||||
`,
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
const filteredServices = this.getFilteredServices();
|
||||
const selectedCount = this.services.filter(s => s.selected).length;
|
||||
const categories = this.getUniqueCategories();
|
||||
|
||||
return html`
|
||||
<style>
|
||||
<div class="container">
|
||||
<uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
|
||||
|
||||
</style>
|
||||
<uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
|
||||
<div class="mainbox">
|
||||
Hello!
|
||||
<div class="controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Search services..."
|
||||
.value=${this.filterText}
|
||||
@input=${(e: Event) => {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === 'all' ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = 'all'; }}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
${categories.map(category => html`
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === category ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = category; }}
|
||||
>
|
||||
${category}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
<button
|
||||
class="filter-button ${this.showOnlySelected ? 'active' : ''}"
|
||||
@click=${() => { this.showOnlySelected = !this.showOnlySelected; }}
|
||||
>
|
||||
${this.showOnlySelected ? 'Show All' : 'Selected Only'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectAll()}
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectNone()}
|
||||
>
|
||||
Select None
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="assets-grid">
|
||||
${this.loading ? html`
|
||||
<div class="loading-message">Loading services...</div>
|
||||
` : filteredServices.length === 0 ? html`
|
||||
<div class="no-results">No services found matching your criteria</div>
|
||||
` : filteredServices.map(service => html`
|
||||
<div
|
||||
class="asset-card ${service.selected ? 'selected' : ''}"
|
||||
@click=${() => this.toggleService(service.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="asset-checkbox"
|
||||
.checked=${service.selected}
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
@change=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.toggleService(service.id);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="asset-info">
|
||||
<div class="asset-name">${service.displayName}</div>
|
||||
${service.description ? html`
|
||||
<div class="asset-description">${service.description}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="asset-status">
|
||||
<div class="status-indicator ${service.currentStatus}"></div>
|
||||
<div class="status-text">${service.currentStatus.replace(/_/g, ' ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
${selectedCount} of ${this.services.length} services selected
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private getFilteredServices(): IServiceStatus[] {
|
||||
return this.services.filter(service => {
|
||||
// Apply text filter
|
||||
if (this.filterText && !service.displayName.toLowerCase().includes(this.filterText.toLowerCase()) &&
|
||||
(!service.description || !service.description.toLowerCase().includes(this.filterText.toLowerCase()))) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Apply category filter
|
||||
if (this.filterCategory !== 'all' && service.category !== this.filterCategory) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Apply selected filter
|
||||
if (this.showOnlySelected && !service.selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
private getUniqueCategories(): string[] {
|
||||
const categories = new Set<string>();
|
||||
this.services.forEach(service => {
|
||||
if (service.category) {
|
||||
categories.add(service.category);
|
||||
}
|
||||
});
|
||||
return Array.from(categories).sort();
|
||||
}
|
||||
|
||||
private toggleService(serviceId: string) {
|
||||
const service = this.services.find(s => s.id === serviceId);
|
||||
if (service) {
|
||||
service.selected = !service.selected;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(new CustomEvent('selectionChanged', {
|
||||
detail: {
|
||||
serviceId,
|
||||
selected: service.selected,
|
||||
selectedServices: this.services.filter(s => s.selected).map(s => s.id)
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private selectAll() {
|
||||
const filteredServices = this.getFilteredServices();
|
||||
filteredServices.forEach(service => {
|
||||
service.selected = true;
|
||||
});
|
||||
this.requestUpdate();
|
||||
this.emitSelectionUpdate();
|
||||
}
|
||||
|
||||
private selectNone() {
|
||||
const filteredServices = this.getFilteredServices();
|
||||
filteredServices.forEach(service => {
|
||||
service.selected = false;
|
||||
});
|
||||
this.requestUpdate();
|
||||
this.emitSelectionUpdate();
|
||||
}
|
||||
|
||||
private emitSelectionUpdate() {
|
||||
this.dispatchEvent(new CustomEvent('selectionChanged', {
|
||||
detail: {
|
||||
selectedServices: this.services.filter(s => s.selected).map(s => s.id)
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user