update
This commit is contained in:
3
ts_web/pages/index.ts
Normal file
3
ts_web/pages/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './mainpage.js';
|
||||
export * from './sz-demo-app.js';
|
||||
export * from './sz-demo-app-shell.js';
|
||||
46
ts_web/pages/mainpage.ts
Normal file
46
ts_web/pages/mainpage.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const mainpage = () => html`
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.demo-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
.demo-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 48px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 32px 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 28px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.component-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h1>Serve.Zone Catalog</h1>
|
||||
<div class="component-demo">
|
||||
<sz-hello></sz-hello>
|
||||
<sz-hello text="Welcome to Serve.Zone!"></sz-hello>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
179
ts_web/pages/sz-demo-app-shell.ts
Normal file
179
ts_web/pages/sz-demo-app-shell.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { DeesAppui } from '@design.estate/dees-catalog';
|
||||
import '@design.estate/dees-catalog';
|
||||
import '../elements/index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-demo-app-shell': SzDemoAppShell;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-demo-app-shell')
|
||||
export class SzDemoAppShell extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
dees-appui {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<dees-appui></dees-appui>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
const appui = this.shadowRoot?.querySelector('dees-appui') as DeesAppui;
|
||||
|
||||
if (!appui) return;
|
||||
|
||||
// Configure the application shell
|
||||
appui.configure({
|
||||
branding: {
|
||||
logoIcon: 'lucide:Box',
|
||||
logoText: 'serve.zone',
|
||||
},
|
||||
appBar: {
|
||||
showSearch: true,
|
||||
breadcrumbs: 'serve.zone',
|
||||
menuItems: [
|
||||
{
|
||||
name: 'File',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'New Service', shortcut: 'Cmd+N', action: async () => { console.log('New Service'); } },
|
||||
{ name: 'Import Configuration', action: async () => { console.log('Import'); } },
|
||||
{ name: 'Export Configuration', action: async () => { console.log('Export'); } },
|
||||
{ divider: true },
|
||||
{ name: 'Preferences', shortcut: 'Cmd+,', action: async () => { appui.navigateToView('settings'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'View',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Dashboard', shortcut: 'Cmd+1', action: async () => { appui.navigateToView('dashboard'); } },
|
||||
{ name: 'Services', shortcut: 'Cmd+2', action: async () => { appui.navigateToView('services'); } },
|
||||
{ name: 'Network', shortcut: 'Cmd+3', action: async () => { appui.navigateToView('network'); } },
|
||||
{ divider: true },
|
||||
{ name: 'Activity Log', shortcut: 'Cmd+Shift+A', action: async () => { appui.toggleActivityLog(); } },
|
||||
{ name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => { appui.setMainMenuCollapsed(!(appui as any).mainmenuCollapsed); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Services',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Deploy New Service', action: async () => { console.log('Deploy'); } },
|
||||
{ name: 'Start All', action: async () => { console.log('Start all'); } },
|
||||
{ name: 'Stop All', action: async () => { console.log('Stop all'); } },
|
||||
{ divider: true },
|
||||
{ name: 'Garbage Collect', action: async () => { console.log('GC'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Help',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Documentation', action: async () => { window.open('https://docs.serve.zone', '_blank'); } },
|
||||
{ name: 'Release Notes', action: async () => { console.log('Release notes'); } },
|
||||
{ divider: true },
|
||||
{ name: 'About serve.zone', action: async () => { console.log('About'); } },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
views: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:LayoutDashboard',
|
||||
content: 'sz-demo-view-dashboard',
|
||||
},
|
||||
{
|
||||
id: 'services',
|
||||
name: 'Services',
|
||||
iconName: 'lucide:Server',
|
||||
content: 'sz-demo-view-services',
|
||||
},
|
||||
{
|
||||
id: 'network',
|
||||
name: 'Network',
|
||||
iconName: 'lucide:Network',
|
||||
content: 'sz-demo-view-network',
|
||||
},
|
||||
{
|
||||
id: 'registries',
|
||||
name: 'Registries',
|
||||
iconName: 'lucide:Archive',
|
||||
content: 'sz-demo-view-registries',
|
||||
},
|
||||
{
|
||||
id: 'tokens',
|
||||
name: 'Tokens',
|
||||
iconName: 'lucide:Key',
|
||||
content: 'sz-demo-view-tokens',
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:Settings',
|
||||
content: 'sz-demo-view-settings',
|
||||
},
|
||||
],
|
||||
mainMenu: {
|
||||
sections: [
|
||||
{
|
||||
name: 'Overview',
|
||||
views: ['dashboard'],
|
||||
},
|
||||
{
|
||||
name: 'Infrastructure',
|
||||
views: ['services', 'network', 'registries'],
|
||||
},
|
||||
{
|
||||
name: 'Administration',
|
||||
views: ['tokens', 'settings'],
|
||||
},
|
||||
],
|
||||
},
|
||||
defaultView: 'dashboard',
|
||||
onViewChange: (viewId, view) => {
|
||||
console.log('View changed to:', viewId, view);
|
||||
},
|
||||
});
|
||||
|
||||
// Set user profile
|
||||
appui.setUser({
|
||||
name: 'Admin User',
|
||||
email: 'admin@serve.zone',
|
||||
status: 'online',
|
||||
});
|
||||
|
||||
// Set profile menu items
|
||||
appui.setProfileMenuItems([
|
||||
{ name: 'Profile', iconName: 'lucide:User', action: async () => { console.log('Profile'); } },
|
||||
{ name: 'Preferences', iconName: 'lucide:SlidersHorizontal', action: async () => { console.log('Preferences'); } },
|
||||
{ divider: true },
|
||||
{ name: 'Sign Out', iconName: 'lucide:LogOut', action: async () => { console.log('Sign Out'); } },
|
||||
]);
|
||||
}
|
||||
}
|
||||
20
ts_web/pages/sz-demo-app.ts
Normal file
20
ts_web/pages/sz-demo-app.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const szDemoApp = () => html`
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
sz-demo-app-shell {
|
||||
display: block;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
<sz-demo-app-shell></sz-demo-app-shell>
|
||||
`;
|
||||
Reference in New Issue
Block a user