uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-29 23:33:28 +00:00
parent 5fcf910eab
commit bcddd4dbee
1 changed files with 65 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
ts_web/elements/upl-statuspage-statusmonth.ts
View File

@@ -67,8 +67,8 @@ export class UplStatuspageStatusmonth extends DeesElement {
.mainbox { .mainbox {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: ${unsafeCSS(spacing.md)}; gap: ${unsafeCSS(spacing.lg)};
} }
.statusMonth { .statusMonth {
@@ -77,89 +77,102 @@ export class UplStatuspageStatusmonth extends DeesElement {
border-radius: ${unsafeCSS(borderRadius.base)}; border-radius: ${unsafeCSS(borderRadius.base)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
position: relative; position: relative;
transition: border-color 0.2s ease; transition: all 0.2s ease;
display: flex;
flex-direction: column;
min-height: 280px;
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
} }
.statusMonth:hover { .statusMonth:hover {
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')}; border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
} }
.month-header { .month-header {
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 600;
margin-bottom: ${unsafeCSS(spacing.md)}; margin-bottom: ${unsafeCSS(spacing.md)};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
letter-spacing: -0.01em; letter-spacing: 0.02em;
text-transform: uppercase;
}
.days-container {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: ${unsafeCSS(spacing.lg)};
} }
.days-grid { .days-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 2px; gap: 3px;
width: 100%;
} }
.weekday-label { .weekday-label {
font-size: 11px; font-size: 10px;
text-align: center; text-align: center;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
font-weight: 400; font-weight: 500;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
margin-bottom: ${unsafeCSS(spacing.sm)}; margin-bottom: ${unsafeCSS(spacing.sm)};
text-transform: uppercase;
} }
.statusDay { .statusDay {
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 2px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: opacity 0.15s ease; transition: all 0.15s ease;
position: relative; position: relative;
} }
.statusDay:hover:not(.empty) { .statusDay:hover:not(.empty) {
opacity: 0.8; transform: scale(1.15);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
} }
.statusDay.operational { .statusDay.operational {
background: ${colors.status.operational}; background: ${cssManager.bdTheme('#10b981', '#10b981')};
} }
.statusDay.degraded { .statusDay.degraded {
background: ${colors.status.degraded}; background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
} }
.statusDay.partial_outage { .statusDay.partial_outage {
background: ${colors.status.partial}; background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
} }
.statusDay.major_outage { .statusDay.major_outage {
background: ${colors.status.major}; background: ${cssManager.bdTheme('#dc2626', '#dc2626')};
} }
.statusDay.no-data { .statusDay.no-data {
background: ${colors.border.muted}; background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
opacity: 0.3; opacity: 0.5;
} }
.statusDay.empty { .statusDay.empty {
background: transparent; background: transparent;
cursor: default; cursor: default;
} pointer-events: none;
.statusDay.empty:hover {
transform: none;
box-shadow: none;
} }
.overall-uptime { .overall-uptime {
font-size: 13px; font-size: 12px;
margin-top: ${unsafeCSS(spacing.md)}; margin-top: auto;
padding-top: ${unsafeCSS(spacing.md)}; padding-top: ${unsafeCSS(spacing.md)};
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
} }
.uptime-stat { .uptime-stat {
@@ -169,17 +182,17 @@ export class UplStatuspageStatusmonth extends DeesElement {
} }
.uptime-value { .uptime-value {
font-weight: 500; font-weight: 600;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 13px;
} }
.loading-skeleton { .loading-skeleton {
height: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${unsafeCSS(spacing.sm)}; gap: ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(spacing.lg)}; height: 100%;
} }
.skeleton-header { .skeleton-header {
@@ -263,6 +276,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
.statusMonth { .statusMonth {
padding: ${unsafeCSS(spacing.md)}; padding: ${unsafeCSS(spacing.md)};
min-height: 260px;
} }
.loading-skeleton { .loading-skeleton {
@@ -285,11 +299,14 @@ export class UplStatuspageStatusmonth extends DeesElement {
<div class="statusMonth"> <div class="statusMonth">
<div class="loading-skeleton"> <div class="loading-skeleton">
<div class="skeleton-header"></div> <div class="skeleton-header"></div>
<div class="skeleton-grid"> <div class="days-container">
${Array(35).fill(0).map((_, i) => html` <div class="skeleton-grid">
<div class="skeleton-day" style="--index: ${i}"></div> ${Array(42).fill(0).map((_, i) => html`
`)} <div class="skeleton-day" style="--index: ${i}"></div>
`)}
</div>
</div> </div>
<div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
</div> </div>
</div> </div>
`)} `)}
@@ -310,10 +327,13 @@ export class UplStatuspageStatusmonth extends DeesElement {
return html` return html`
<div class="statusMonth" @mouseleave=${this.hideTooltip}> <div class="statusMonth" @mouseleave=${this.hideTooltip}>
<div class="month-header">${monthName}</div> <div class="month-header">${monthName}</div>
<div class="days-grid"> <div class="days-container">
${this.renderWeekdayLabels()} <div class="days-grid">
${this.renderEmptyDays(firstDayOfWeek)} ${this.renderWeekdayLabels()}
${monthData.days.map(day => this.renderDay(day))} ${this.renderEmptyDays(firstDayOfWeek)}
${monthData.days.map(day => this.renderDay(day))}
${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
</div>
</div> </div>
<div class="overall-uptime"> <div class="overall-uptime">
<div class="uptime-stat"> <div class="uptime-stat">
@@ -340,6 +360,12 @@ export class UplStatuspageStatusmonth extends DeesElement {
return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`); return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
} }
private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
const remainder = totalCells % 7;
const trailingCount = remainder === 0 ? 0 : 7 - remainder;
return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
}
private renderDay(day: any): TemplateResult { private renderDay(day: any): TemplateResult {
const status = day.status || 'no-data'; const status = day.status || 'no-data';
const date = new Date(day.date); const date = new Date(day.date);