252 lines
8.1 KiB
TypeScript
252 lines
8.1 KiB
TypeScript
import * as colors from './00colors.js';
|
|
import * as plugins from './00plugins.js';
|
|
|
|
import { demoFunc } from './dees-dataview-statusobject.demo.js';
|
|
import {
|
|
DeesElement,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
property,
|
|
state,
|
|
cssManager,
|
|
css,
|
|
type CSSResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as tsclass from '@tsclass/tsclass';
|
|
import { DeesContextmenu } from './dees-contextmenu.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-dataview-statusobject': DeesDataviewStatusobject;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-dataview-statusobject')
|
|
export class DeesDataviewStatusobject extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
}
|
|
|
|
.mainbox {
|
|
border-radius: 8px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
|
min-height: 48px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
|
cursor: default;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.heading {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 48px auto 100px;
|
|
height: 56px;
|
|
padding: 0 16px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
}
|
|
|
|
h1 {
|
|
display: block;
|
|
margin: 0px;
|
|
padding: 0px 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
|
|
}
|
|
|
|
.statusdot {
|
|
height: 10px;
|
|
width: 10px;
|
|
border-radius: 50%;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
|
|
margin: auto;
|
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 0% 63.9% / 0.2)', 'hsl(0 0% 45.1% / 0.2)')};
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.copyMain {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
text-align: center;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.copyMain:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
|
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
|
|
}
|
|
|
|
.copyMain:active {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 14.9%)')};
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.statusdot.ok {
|
|
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.2)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
|
|
}
|
|
|
|
.statusdot.not_ok {
|
|
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.2)', 'hsl(0 72.2% 50.6% / 0.2)')};
|
|
}
|
|
|
|
.statusdot.partly_ok {
|
|
background: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(25 95% 53% / 0.2)', 'hsl(25 95% 63% / 0.2)')};
|
|
}
|
|
|
|
.detail {
|
|
min-height: 60px;
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 48px auto;
|
|
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
|
|
transition: background-color 0.15s ease;
|
|
padding-right: 16px;
|
|
cursor: context-menu;
|
|
}
|
|
|
|
.detail:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
|
}
|
|
|
|
.detail:active {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
|
}
|
|
|
|
.detail .detailsText {
|
|
padding: 12px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.detail .detailsText .label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
|
|
margin-bottom: 2px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.detail .detailsText .value {
|
|
font-size: 14px;
|
|
font-family: 'Intel One Mono', 'Geist Mono', monospace;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
line-height: 1.5;
|
|
}
|
|
`,
|
|
];
|
|
|
|
render(): TemplateResult {
|
|
return html`
|
|
<div class="mainbox">
|
|
<div class="heading">
|
|
<div class="statusdot ${this.statusObject?.combinedStatus}"></div>
|
|
<h1>${this.statusObject?.name || 'No status object assigned'}</h1>
|
|
<div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
|
|
</div>
|
|
${this.statusObject?.details?.map((detailArg) => {
|
|
return html`
|
|
<div
|
|
class="detail"
|
|
@contextmenu=${(event: MouseEvent) => {
|
|
event.preventDefault();
|
|
DeesContextmenu.openContextMenuWithOptions(event, [
|
|
{
|
|
name: 'Copy Value',
|
|
iconName: 'lucideCopy',
|
|
action: async () => {
|
|
await this.copyToClipboard(detailArg.value, 'Value');
|
|
},
|
|
},
|
|
{
|
|
name: 'Copy Key',
|
|
iconName: 'lucideKey',
|
|
action: async () => {
|
|
await this.copyToClipboard(detailArg.name, 'Key');
|
|
},
|
|
},
|
|
{
|
|
name: 'Copy Key:Value',
|
|
iconName: 'lucideCopyPlus',
|
|
action: async () => {
|
|
await this.copyToClipboard(`${detailArg.name}: ${detailArg.value}`, 'Key:Value');
|
|
},
|
|
},
|
|
]);
|
|
}}
|
|
>
|
|
<div class="statusdot ${detailArg.status}"></div>
|
|
<div class="detailsText">
|
|
<div class="label">${detailArg.name}</div>
|
|
<div class="value">${detailArg.value}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async firstUpdated() {}
|
|
|
|
private async copyToClipboard(text: string, type: string = 'Text') {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
console.log(`${type} copied to clipboard`);
|
|
// You could add visual feedback here if needed
|
|
} catch (err) {
|
|
console.error(`Failed to copy ${type}:`, err);
|
|
}
|
|
}
|
|
|
|
private async handleCopyAsJson() {
|
|
if (!this.statusObject) return;
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
|
|
|
|
// Show feedback
|
|
const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
|
|
const originalText = button.textContent;
|
|
button.textContent = 'Copied!';
|
|
|
|
// Apply success styles based on theme
|
|
const isDark = !this.goBright;
|
|
button.style.background = isDark ? 'hsl(142.1 70.6% 45.3% / 0.1)' : 'hsl(142.1 76.2% 36.3% / 0.1)';
|
|
button.style.borderColor = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
|
|
button.style.color = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
|
|
|
|
setTimeout(() => {
|
|
button.textContent = originalText;
|
|
button.style.background = '';
|
|
button.style.borderColor = '';
|
|
button.style.color = '';
|
|
}, 1500);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
}
|
|
}
|
|
}
|