update

ts_web/elements/upl-statuspage-assetsselector.ts

@@ -40,6 +40,9 @@ export class UplStatuspageAssetsselector extends DeesElement {
   @property({ type: Boolean })
   public loading: boolean = false;
   
+  @property({ type: Boolean })
+  public expanded: boolean = false;
+
   constructor() {
     super();
   }
@@ -64,106 +67,151 @@ export class UplStatuspageAssetsselector extends DeesElement {
         .controls {
           display: flex;
           gap: ${unsafeCSS(spacing.sm)};
-          margin-bottom: ${unsafeCSS(spacing.lg)};
+          margin-bottom: ${unsafeCSS(spacing.md)};
           flex-wrap: wrap;
           align-items: center;
         }
 
         .search-input {
           flex: 1;
-          min-width: 240px;
+          min-width: 200px;
-          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
+          padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
-          border: 1px solid ${colors.border.default};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           border-radius: ${unsafeCSS(borderRadius.base)};
-          background: ${colors.background.primary};
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-          color: ${colors.text.primary};
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          font-size: 14px;
+          font-size: 13px;
           font-family: ${unsafeCSS(fonts.base)};
           transition: all 0.2s ease;
+          height: 32px;
         }
 
         .search-input:focus {
           outline: none;
-          border-color: ${colors.text.primary};
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          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};
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
         }
 
         .filter-button {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
+          padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
-          border: 1px solid ${colors.border.default};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           border-radius: ${unsafeCSS(borderRadius.base)};
           background: transparent;
-          color: ${colors.text.primary};
+          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
           cursor: pointer;
-          font-size: 14px;
+          font-size: 13px;
-          font-weight: 500;
+          font-weight: 400;
           font-family: ${unsafeCSS(fonts.base)};
           transition: all 0.2s ease;
-          height: 36px;
+          height: 32px;
         }
 
         .filter-button:hover {
-          background: ${colors.background.secondary};
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          border-color: ${colors.border.muted};
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          transform: translateY(-1px);
-        }
-
-        .filter-button:active {
-          transform: translateY(0);
         }
 
         .filter-button.active {
-          background: ${colors.text.primary};
+          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          color: ${colors.background.primary};
+          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-          border-color: ${colors.text.primary};
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
         }
 
-        .filter-button.active:hover {
+        .selected-services {
-          background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
+          display: flex;
-          border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
+          flex-wrap: wrap;
+          gap: ${unsafeCSS(spacing.sm)};
+          align-items: center;
+        }
+        
+        .service-pill {
+          display: inline-flex;
+          align-items: center;
+          gap: ${unsafeCSS(spacing.xs)};
+          padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: ${unsafeCSS(borderRadius.full)};
+          font-size: 13px;
+          transition: all 0.2s ease;
+        }
+        
+        .service-pill:hover {
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        }
+        
+        .service-pill .status-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+        }
+        
+        .manage-button {
+          display: inline-flex;
+          align-items: center;
+          gap: ${unsafeCSS(spacing.xs)};
+          padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
+          background: transparent;
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: ${unsafeCSS(borderRadius.base)};
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+          font-family: ${unsafeCSS(fonts.base)};
+        }
+        
+        .manage-button:hover {
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        }
+        
+        .expandable-section {
+          margin-top: ${unsafeCSS(spacing.lg)};
+          overflow: hidden;
+          transition: all 0.3s ease;
+        }
+        
+        .expandable-content {
+          padding: ${unsafeCSS(spacing.lg)};
+          background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: ${unsafeCSS(borderRadius.base)};
         }
         
         .assets-grid {
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-          gap: ${unsafeCSS(spacing.md)};
+          gap: ${unsafeCSS(spacing.sm)};
-          background: ${colors.background.card};
+          margin-top: ${unsafeCSS(spacing.md)};
-          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)};
+          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
-          background: ${colors.background.secondary};
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
           border-radius: ${unsafeCSS(borderRadius.base)};
           cursor: pointer;
           transition: all 0.2s ease;
-          border: 1px solid ${colors.border.default};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          gap: ${unsafeCSS(spacing.md)};
+          gap: ${unsafeCSS(spacing.sm)};
         }
 
         .asset-card:hover {
-          transform: translateY(-2px);
+          border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
-          box-shadow: ${unsafeCSS(shadows.md)};
-          border-color: ${colors.border.muted};
         }
 
         .asset-card.selected {
-          border-color: ${colors.text.primary};
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          background: ${colors.background.muted};
+          background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
-          box-shadow: 0 0 0 1px ${colors.text.primary};
         }
 
         .asset-checkbox {
@@ -209,11 +257,11 @@ export class UplStatuspageAssetsselector extends DeesElement {
           border-radius: ${unsafeCSS(borderRadius.full)};
         }
 
-        .status-indicator.operational { background: ${colors.status.operational}; }
+        .status-indicator.operational, .status-dot.operational { background: ${cssManager.bdTheme('#10b981', '#10b981')}; }
-        .status-indicator.degraded { background: ${colors.status.degraded}; }
+        .status-indicator.degraded, .status-dot.degraded { background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; }
-        .status-indicator.partial_outage { background: ${colors.status.partial}; }
+        .status-indicator.partial_outage, .status-dot.partial_outage { background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; }
-        .status-indicator.major_outage { background: ${colors.status.major}; }
+        .status-indicator.major_outage, .status-dot.major_outage { background: ${cssManager.bdTheme('#dc2626', '#dc2626')}; }
-        .status-indicator.maintenance { background: ${colors.status.maintenance}; }
+        .status-indicator.maintenance, .status-dot.maintenance { background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; }
 
         .status-text {
           font-size: 12px;
@@ -225,15 +273,23 @@ export class UplStatuspageAssetsselector extends DeesElement {
         .no-results {
           grid-column: 1 / -1;
           text-align: center;
-          padding: ${unsafeCSS(spacing['2xl'])};
+          padding: ${unsafeCSS(spacing.xl)};
-          color: ${colors.text.secondary};
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+          font-size: 13px;
         }
 
         .summary {
           text-align: right;
-          font-size: 13px;
+          font-size: 12px;
           margin-top: ${unsafeCSS(spacing.md)};
-          color: ${colors.text.secondary};
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+        }
+        
+        .no-services {
+          padding: ${unsafeCSS(spacing.xl)};
+          text-align: center;
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+          font-size: 13px;
         }
 
         @media (max-width: 640px) {
@@ -250,9 +306,21 @@ export class UplStatuspageAssetsselector extends DeesElement {
             width: 100%;
           }
 
+          .selected-services {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          
+          .service-pill {
+            width: auto;
+          }
+          
+          .expandable-content {
+            padding: ${unsafeCSS(spacing.md)};
+          }
+          
           .assets-grid {
             grid-template-columns: 1fr;
-            padding: ${unsafeCSS(spacing.md)};
           }
 
           .asset-card {
@@ -263,102 +331,124 @@ export class UplStatuspageAssetsselector extends DeesElement {
   ]
 
   public render(): TemplateResult {
-    const filteredServices = this.getFilteredServices();
+    const selectedServices = this.services.filter(s => s.selected);
-    const selectedCount = this.services.filter(s => s.selected).length;
+    const selectedCount = selectedServices.length;
     const categories = this.getUniqueCategories();
 
     return html`
       <div class="container">
         <uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
         
-        <div class="controls">
+        <div class="selected-services">
-          <input
+          ${selectedCount === 0 ? html`
-            type="text"
+            <span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; font-size: 13px;">
-            class="search-input"
+              No services selected
-            placeholder="Search services..."
+            </span>
-            .value=${this.filterText}
+          ` : selectedCount > 5 && !this.expanded ? html`
-            @input=${(e: Event) => {
+            ${selectedServices.slice(0, 4).map(service => html`
-              this.filterText = (e.target as HTMLInputElement).value;
+              <div class="service-pill">
-            }}
+                <span class="status-dot ${service.currentStatus}"></span>
-          />
+                <span>${service.displayName}</span>
-          
-          <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>
+            `)}
+            <span style="color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; font-size: 12px;">
+              +${selectedCount - 4} more
+            </span>
+          ` : selectedServices.map(service => html`
+            <div class="service-pill">
+              <span class="status-dot ${service.currentStatus}"></span>
+              <span>${service.displayName}</span>
             </div>
           `)}
+          
+          <button 
+            class="manage-button"
+            @click=${() => { this.expanded = !this.expanded; }}
+          >
+            ${this.expanded ? 'Close' : 'Manage Services'}
+            <svg 
+              width="10" 
+              height="6" 
+              viewBox="0 0 10 6" 
+              fill="none" 
+              xmlns="http://www.w3.org/2000/svg"
+              style="transform: rotate(${this.expanded ? '180deg' : '0'}); transition: transform 0.2s;"
+            >
+              <path 
+                d="M1 1L5 5L9 1" 
+                stroke="currentColor" 
+                stroke-width="1.5" 
+                stroke-linecap="round" 
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
         </div>
         
-        <div class="summary">
+        ${this.expanded ? html`
-          ${selectedCount} of ${this.services.length} services selected
+          <div class="expandable-section">
-        </div>
+            <div class="expandable-content">
+              <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>
+                ` : this.renderServiceGrid()}
+              </div>
+              
+              <div class="summary">
+                ${selectedCount} of ${this.services.length} services selected
+              </div>
+            </div>
+          </div>
+        ` : ''}
       </div>
     `;
   }
@@ -440,4 +530,42 @@ export class UplStatuspageAssetsselector extends DeesElement {
       composed: true
     }));
   }
+  
+  private renderServiceGrid(): TemplateResult {
+    const filteredServices = this.getFilteredServices();
+    
+    if (filteredServices.length === 0) {
+      return html`<div class="no-results">No services found matching your criteria</div>`;
+    }
+    
+    return html`${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>
+    `)}`;
+  }
 }