statuspage/ts_web/elements/upl-statuspage-statusmonth.ts
2023-01-05 13:37:28 +01:00

131 lines
3.4 KiB
TypeScript

import {
DeesElement,
property,
html,
customElement,
TemplateResult,
css,
cssManager
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import './internal/uplinternal-miniheading.js';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-statusmonth': UplStatuspageStatusmonth;
}
}
@customElement('upl-statuspage-statusmonth')
export class UplStatuspageStatusmonth extends DeesElement {
public static demo = () => html` <upl-statuspage-statusmonth></upl-statuspage-statusmonth> `;
constructor() {
super();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
position: relative;
padding: 0px 0px 15px 0px;
display: block;
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};;
font-family: Inter;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
display: grid;
grid-template-columns: repeat(5, calc(100% / 5 - 80px / 5));
grid-column-gap: 20px;
}
.statusMonth {
background: ${cssManager.bdTheme('#ffffff', '#333333')};;
min-height: 20px;
display: grid;
padding: 10px;
grid-template-columns: repeat(6, auto);
grid-gap: 9px;
border-radius: 3px;
}
.statusMonth .statusDay {
width: 16px;
height: 16px;
background: #2deb51;
border-radius: 3px;
}
`
]
public render(): TemplateResult {
return html`
<style></style>
<uplinternal-miniheading>Last 150 days</uplinternal-miniheading>
<div class="mainbox">
<div class="statusMonth">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 30) {
counter++;
returnArray.push(html` <div class="statusDay"></div> `);
}
return returnArray;
})()}
</div>
<div class="statusMonth">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 30) {
counter++;
returnArray.push(html` <div class="statusDay"></div> `);
}
return returnArray;
})()}
</div>
<div class="statusMonth">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 30) {
counter++;
returnArray.push(html` <div class="statusDay"></div> `);
}
return returnArray;
})()}
</div>
<div class="statusMonth">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 30) {
counter++;
returnArray.push(html` <div class="statusDay"></div> `);
}
return returnArray;
})()}
</div>
<div class="statusMonth">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 30) {
counter++;
returnArray.push(html` <div class="statusDay"></div> `);
}
return returnArray;
})()}
</div>
</div>
`;
}
}