feat(structure): adjust
This commit is contained in:
292
ts_web/elements/dees-simple-appdash/dees-simple-appdash.demo.ts
Normal file
292
ts_web/elements/dees-simple-appdash/dees-simple-appdash.demo.ts
Normal file
@@ -0,0 +1,292 @@
|
||||
import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
|
||||
import type { IView } from './dees-simple-appdash.js';
|
||||
import './dees-form.js';
|
||||
import './dees-input-text.js';
|
||||
import './dees-input-checkbox.js';
|
||||
import './dees-input-dropdown.js';
|
||||
import './dees-input-radiogroup.js';
|
||||
import './dees-form-submit.js';
|
||||
import './dees-statsgrid.js';
|
||||
import type { IStatsTile } from './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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@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!'"
|
||||
.viewTabs=${[
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'home',
|
||||
element: DemoViewDashboard,
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
iconName: 'lineChart',
|
||||
element: DemoViewAnalytics,
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: '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>
|
||||
`;
|
||||
Reference in New Issue
Block a user