update
This commit is contained in:
241
ts_web/elements/upl-statuspage-header.demo.ts
Normal file
241
ts_web/elements/upl-statuspage-header.demo.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.demo-section {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.demo-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.demo-button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<!-- Basic Header -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Basic Header with Dynamic Title</div>
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
|
||||
|
||||
// Demo different titles
|
||||
const titles = [
|
||||
'MyService Status Page',
|
||||
'Production Environment Status',
|
||||
'API Health Dashboard',
|
||||
'Global Infrastructure Status',
|
||||
'🚀 Rocket Systems Monitor',
|
||||
'Multi-Region Service Status'
|
||||
];
|
||||
|
||||
let titleIndex = 0;
|
||||
header.pageTitle = titles[titleIndex];
|
||||
|
||||
// Add event listeners
|
||||
header.addEventListener('reportNewIncident', (event: CustomEvent) => {
|
||||
console.log('Report incident clicked');
|
||||
alert('Report Incident form would open here');
|
||||
});
|
||||
|
||||
header.addEventListener('statusSubscribe', (event: CustomEvent) => {
|
||||
console.log('Subscribe clicked');
|
||||
alert('Subscribe modal would open here');
|
||||
});
|
||||
|
||||
// Cycle through titles
|
||||
setInterval(() => {
|
||||
titleIndex = (titleIndex + 1) % titles.length;
|
||||
header.pageTitle = titles[titleIndex];
|
||||
}, 2000);
|
||||
}}
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
|
||||
<!-- Header with Hidden Buttons -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Header with Configurable Buttons</div>
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
|
||||
header.pageTitle = 'Configurable Button States';
|
||||
|
||||
// Add properties to control button visibility
|
||||
header.showReportButton = true;
|
||||
header.showSubscribeButton = true;
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'demo-controls';
|
||||
controls.innerHTML = `
|
||||
<button class="demo-button" id="toggleReport">Toggle Report Button</button>
|
||||
<button class="demo-button" id="toggleSubscribe">Toggle Subscribe Button</button>
|
||||
<button class="demo-button" id="toggleBoth">Hide Both</button>
|
||||
<button class="demo-button" id="showBoth">Show Both</button>
|
||||
`;
|
||||
wrapperElement.appendChild(controls);
|
||||
|
||||
controls.querySelector('#toggleReport')?.addEventListener('click', () => {
|
||||
header.showReportButton = !header.showReportButton;
|
||||
});
|
||||
|
||||
controls.querySelector('#toggleSubscribe')?.addEventListener('click', () => {
|
||||
header.showSubscribeButton = !header.showSubscribeButton;
|
||||
});
|
||||
|
||||
controls.querySelector('#toggleBoth')?.addEventListener('click', () => {
|
||||
header.showReportButton = false;
|
||||
header.showSubscribeButton = false;
|
||||
});
|
||||
|
||||
controls.querySelector('#showBoth')?.addEventListener('click', () => {
|
||||
header.showReportButton = true;
|
||||
header.showSubscribeButton = true;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
|
||||
<!-- Header with Custom Styling -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Header with Custom Branding</div>
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
|
||||
header.pageTitle = 'Enterprise Cloud Platform';
|
||||
|
||||
// Custom branding properties
|
||||
header.brandColor = '#1976D2';
|
||||
header.logoUrl = 'https://via.placeholder.com/120x40/1976D2/ffffff?text=LOGO';
|
||||
header.customStyles = true;
|
||||
|
||||
// Simulate different brand states
|
||||
const brands = [
|
||||
{ title: 'Enterprise Cloud Platform', color: '#1976D2', logo: 'ENTERPRISE' },
|
||||
{ title: 'StartUp SaaS Monitor', color: '#00BCD4', logo: 'STARTUP' },
|
||||
{ title: 'Government Services Status', color: '#4CAF50', logo: 'GOV' },
|
||||
{ title: 'Financial Systems Health', color: '#673AB7', logo: 'FINTECH' }
|
||||
];
|
||||
|
||||
let brandIndex = 0;
|
||||
setInterval(() => {
|
||||
brandIndex = (brandIndex + 1) % brands.length;
|
||||
const brand = brands[brandIndex];
|
||||
header.pageTitle = brand.title;
|
||||
header.brandColor = brand.color;
|
||||
header.logoUrl = `https://via.placeholder.com/120x40/${brand.color.slice(1)}/ffffff?text=${brand.logo}`;
|
||||
}, 3000);
|
||||
}}
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
|
||||
<!-- Header with Loading State -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Header with Loading States</div>
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
|
||||
header.pageTitle = 'Loading State Demo';
|
||||
header.loading = true;
|
||||
|
||||
// Simulate loading completion
|
||||
setTimeout(() => {
|
||||
header.loading = false;
|
||||
header.pageTitle = 'Status Page Loaded';
|
||||
}, 2000);
|
||||
|
||||
// Add loading toggle
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'demo-controls';
|
||||
controls.innerHTML = `
|
||||
<button class="demo-button" id="toggleLoading">Toggle Loading State</button>
|
||||
`;
|
||||
wrapperElement.appendChild(controls);
|
||||
|
||||
controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
|
||||
header.loading = !header.loading;
|
||||
if (header.loading) {
|
||||
header.pageTitle = 'Loading...';
|
||||
setTimeout(() => {
|
||||
header.loading = false;
|
||||
header.pageTitle = 'Status Page Ready';
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
|
||||
<!-- Header with Event Counter -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Header with Event Tracking</div>
|
||||
<dees-demowrapper
|
||||
.runAfterRender=${async (wrapperElement: any) => {
|
||||
const header = wrapperElement.querySelector('upl-statuspage-header') as any;
|
||||
header.pageTitle = 'Event Tracking Demo';
|
||||
|
||||
let reportCount = 0;
|
||||
let subscribeCount = 0;
|
||||
|
||||
// Create counter display
|
||||
const counterDisplay = document.createElement('div');
|
||||
counterDisplay.style.marginTop = '16px';
|
||||
counterDisplay.style.fontSize = '14px';
|
||||
counterDisplay.innerHTML = `
|
||||
<div>Report Clicks: <strong id="reportCount">0</strong></div>
|
||||
<div>Subscribe Clicks: <strong id="subscribeCount">0</strong></div>
|
||||
`;
|
||||
wrapperElement.appendChild(counterDisplay);
|
||||
|
||||
header.addEventListener('reportNewIncident', () => {
|
||||
reportCount++;
|
||||
counterDisplay.querySelector('#reportCount').textContent = reportCount.toString();
|
||||
console.log(`Report incident clicked ${reportCount} times`);
|
||||
});
|
||||
|
||||
header.addEventListener('statusSubscribe', () => {
|
||||
subscribeCount++;
|
||||
counterDisplay.querySelector('#subscribeCount').textContent = subscribeCount.toString();
|
||||
console.log(`Subscribe clicked ${subscribeCount} times`);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<upl-statuspage-header></upl-statuspage-header>
|
||||
</dees-demowrapper>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user