373 lines
12 KiB
TypeScript
373 lines
12 KiB
TypeScript
import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
|
||
import type { IView, IGlobalMessage } from './dees-simple-appdash.js';
|
||
import '../../00group-form/dees-form/dees-form.js';
|
||
import '../../00group-input/dees-input-text/dees-input-text.js';
|
||
import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
|
||
import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
|
||
import '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
|
||
import '../../00group-form/dees-form-submit/dees-form-submit.js';
|
||
import '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
|
||
import type { IStatsTile } from '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
|
||
|
||
// Create demo view components
|
||
@customElement('demo-view-dashboard')
|
||
class DemoViewDashboard extends DeesElement {
|
||
static styles = [
|
||
cssManager.defaultStyles,
|
||
css`
|
||
:host {
|
||
display: block;
|
||
padding: 40px;
|
||
}
|
||
h1 {
|
||
margin: 0 0 20px 0;
|
||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||
}
|
||
dees-statsgrid {
|
||
margin-top: 20px;
|
||
}
|
||
`
|
||
];
|
||
|
||
private statsTiles: IStatsTile[] = [
|
||
{
|
||
id: 'users',
|
||
title: 'Active Users',
|
||
value: 1234,
|
||
type: 'number',
|
||
icon: 'faUsers',
|
||
description: '+15% from last week',
|
||
color: '#22c55e'
|
||
},
|
||
{
|
||
id: 'pageviews',
|
||
title: 'Page Views',
|
||
value: 56700,
|
||
type: 'number',
|
||
icon: 'faEye',
|
||
description: '56.7k total views',
|
||
color: '#3b82f6'
|
||
},
|
||
{
|
||
id: 'uptime',
|
||
title: 'System Uptime',
|
||
value: 89,
|
||
unit: '%',
|
||
type: 'gauge',
|
||
icon: 'faServer',
|
||
description: 'Last 30 days',
|
||
color: '#10b981',
|
||
gaugeOptions: {
|
||
min: 0,
|
||
max: 100,
|
||
thresholds: [
|
||
{ value: 80, color: '#ef4444' },
|
||
{ value: 90, color: '#f59e0b' },
|
||
{ value: 100, color: '#10b981' }
|
||
]
|
||
}
|
||
},
|
||
{
|
||
id: 'response',
|
||
title: 'Avg Response Time',
|
||
value: 3.2,
|
||
unit: 's',
|
||
type: 'number',
|
||
icon: 'faClock',
|
||
description: '-0.5s improvement',
|
||
color: '#f59e0b'
|
||
},
|
||
{
|
||
id: 'revenue',
|
||
title: 'Monthly Revenue',
|
||
value: 48520,
|
||
unit: '$',
|
||
type: 'trend',
|
||
icon: 'faDollarSign',
|
||
description: '+8.2% growth',
|
||
color: '#22c55e',
|
||
trendData: [35000, 38000, 37500, 41000, 39800, 42000, 44100, 43200, 45600, 47100, 46800, 48520]
|
||
},
|
||
{
|
||
id: 'traffic',
|
||
title: 'Traffic Trend',
|
||
value: 1680,
|
||
type: 'trend',
|
||
icon: 'faChartLine',
|
||
description: 'Last 7 days',
|
||
color: '#3b82f6',
|
||
trendData: [1200, 1350, 1100, 1450, 1600, 1550, 1680]
|
||
}
|
||
];
|
||
|
||
render() {
|
||
return html`
|
||
<h1>Dashboard</h1>
|
||
<p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
|
||
<dees-statsgrid
|
||
.tiles=${this.statsTiles}
|
||
@tile-action=${(e: CustomEvent) => {
|
||
console.log('Tile action:', e.detail);
|
||
}}
|
||
></dees-statsgrid>
|
||
|
||
<h2 style="margin-top: 40px;">Recent Activity</h2>
|
||
<p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
|
||
|
||
${[
|
||
{ time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
|
||
{ time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
|
||
{ time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
|
||
{ time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
|
||
{ time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
|
||
{ time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
|
||
{ time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
|
||
{ time: '1 hour ago', event: 'API rate limit reached for client app-mobile-ios (429 responses)', type: 'warning' },
|
||
{ time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
|
||
{ time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
|
||
{ time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
|
||
{ time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
|
||
{ time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
|
||
{ time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
|
||
].map(item => html`
|
||
<div style="
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
|
||
font-size: 13px;
|
||
">
|
||
<span style="
|
||
flex-shrink: 0;
|
||
width: 100px;
|
||
font-size: 11px;
|
||
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
|
||
">${item.time}</span>
|
||
<span style="
|
||
color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
|
||
item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
|
||
item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
|
||
cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
|
||
">${item.event}</span>
|
||
</div>
|
||
`)}
|
||
`;
|
||
}
|
||
}
|
||
|
||
@customElement('demo-view-analytics')
|
||
class DemoViewAnalytics extends DeesElement {
|
||
static styles = [
|
||
cssManager.defaultStyles,
|
||
css`
|
||
:host {
|
||
display: block;
|
||
padding: 40px;
|
||
}
|
||
h1 {
|
||
margin: 0 0 20px 0;
|
||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||
}
|
||
`
|
||
];
|
||
|
||
render() {
|
||
return html`
|
||
<h1>Analytics</h1>
|
||
<p>This is the analytics view. You can add charts and metrics here.</p>
|
||
`;
|
||
}
|
||
}
|
||
|
||
@customElement('demo-view-settings')
|
||
class DemoViewSettings extends DeesElement {
|
||
static styles = [
|
||
cssManager.defaultStyles,
|
||
css`
|
||
:host {
|
||
display: block;
|
||
padding: 40px;
|
||
}
|
||
h1 {
|
||
margin: 0 0 20px 0;
|
||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||
}
|
||
.settings-section {
|
||
margin-top: 30px;
|
||
}
|
||
.settings-section h2 {
|
||
font-size: 18px;
|
||
margin: 0 0 15px 0;
|
||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||
}
|
||
.horizontal-form-section {
|
||
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
`
|
||
];
|
||
|
||
render() {
|
||
return html`
|
||
<h1>Settings</h1>
|
||
<p>Configure your application settings below:</p>
|
||
|
||
<div class="settings-section">
|
||
<h2>General Settings</h2>
|
||
<dees-form>
|
||
<dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
|
||
<dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
|
||
<dees-input-dropdown
|
||
key="environment"
|
||
label="Environment"
|
||
.options=${[
|
||
{ option: 'Development', key: 'dev' },
|
||
{ option: 'Staging', key: 'staging' },
|
||
{ option: 'Production', key: 'prod' }
|
||
]}
|
||
.selectedOption=${{ option: 'Production', key: 'prod' }}
|
||
></dees-input-dropdown>
|
||
<dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
|
||
<dees-input-checkbox key="enableAnalytics" label="Enable Analytics" value="false"></dees-input-checkbox>
|
||
<dees-form-submit>Save General Settings</dees-form-submit>
|
||
</dees-form>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h2>Display Preferences</h2>
|
||
<div class="horizontal-form-section">
|
||
<p style="margin-top: 0; margin-bottom: 16px;">Quick display settings using horizontal layout:</p>
|
||
<dees-form horizontal-layout>
|
||
<dees-input-dropdown
|
||
key="theme"
|
||
label="Theme"
|
||
.enableSearch=${false}
|
||
.options=${[
|
||
{ option: 'Light', key: 'light' },
|
||
{ option: 'Dark', key: 'dark' },
|
||
{ option: 'Auto', key: 'auto' }
|
||
]}
|
||
.selectedOption=${{ option: 'Dark', key: 'dark' }}
|
||
></dees-input-dropdown>
|
||
<dees-input-dropdown
|
||
key="language"
|
||
label="Language"
|
||
.enableSearch=${false}
|
||
.options=${[
|
||
{ option: 'English', key: 'en' },
|
||
{ option: 'German', key: 'de' },
|
||
{ option: 'Spanish', key: 'es' },
|
||
{ option: 'French', key: 'fr' }
|
||
]}
|
||
.selectedOption=${{ option: 'English', key: 'en' }}
|
||
></dees-input-dropdown>
|
||
<dees-input-checkbox key="compactMode" label="Compact Mode"></dees-input-checkbox>
|
||
</dees-form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h2>Notification Settings</h2>
|
||
<dees-form>
|
||
<dees-input-radiogroup
|
||
.label=${'Email Frequency'}
|
||
.options=${['Real-time', 'Daily Digest', 'Weekly Summary', 'Never']}
|
||
.selectedOption=${'Real-time'}
|
||
.key=${'emailFrequency'}
|
||
></dees-input-radiogroup>
|
||
<dees-input-checkbox key="pushNotifications" label="Enable Push Notifications" value="true"></dees-input-checkbox>
|
||
<dees-input-checkbox key="soundAlerts" label="Play Sound for Alerts" value="true"></dees-input-checkbox>
|
||
<dees-form-submit>Update Notifications</dees-form-submit>
|
||
</dees-form>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
export const demoFunc = () => html`
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.demo-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
</style>
|
||
<div class="demo-container">
|
||
<dees-simple-appdash
|
||
name="My Application"
|
||
terminalSetupCommand="echo 'Welcome to the terminal!'"
|
||
.globalMessages=${[
|
||
{
|
||
id: 'update',
|
||
type: 'info',
|
||
message: 'A new version (v3.50.0) is available with performance improvements and bug fixes.',
|
||
dismissible: true,
|
||
actions: [
|
||
{
|
||
name: 'Update Now',
|
||
iconName: 'lucide:download',
|
||
action: () => alert('Updating...'),
|
||
},
|
||
{
|
||
name: 'Release Notes',
|
||
action: () => alert('Opening release notes...'),
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 'maintenance',
|
||
type: 'warning',
|
||
message: 'Scheduled maintenance window: April 5, 2026 02:00–06:00 UTC. Some services may be temporarily unavailable.',
|
||
dismissible: true,
|
||
},
|
||
{
|
||
id: 'critical',
|
||
type: 'error',
|
||
message: 'Your SSL certificate expires in 3 days. Renew now to avoid service disruption.',
|
||
dismissible: false,
|
||
actions: [
|
||
{
|
||
name: 'Renew Certificate',
|
||
iconName: 'lucide:shieldCheck',
|
||
action: () => alert('Renewing certificate...'),
|
||
},
|
||
],
|
||
},
|
||
] as IGlobalMessage[]}
|
||
.viewTabs=${[
|
||
{
|
||
name: 'Dashboard',
|
||
iconName: 'lucide:home',
|
||
element: DemoViewDashboard,
|
||
},
|
||
{
|
||
name: 'Analytics',
|
||
iconName: 'lucide:lineChart',
|
||
element: DemoViewAnalytics,
|
||
},
|
||
{
|
||
name: 'Settings',
|
||
iconName: 'lucide:settings',
|
||
element: DemoViewSettings,
|
||
}
|
||
] as IView[]}
|
||
@logout=${() => {
|
||
console.log('Logout event triggered');
|
||
alert('Logout clicked!');
|
||
}}
|
||
@view-select=${(e: CustomEvent) => {
|
||
console.log('View selected:', e.detail.view.name);
|
||
}}
|
||
></dees-simple-appdash>
|
||
</div>
|
||
`;
|