Mercurial > code > home > repos > front-door-display

comparison src/WeekGuide.ts @ 0:d09d690419e0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start
author drewp@bigasterisk.com
date Sat, 18 Mar 2023 19:34:12 -0700
parents
children deb0c25655eb
comparison
equal deleted inserted replaced
-1:000000000000 0:d09d690419e0
1 import { format } from "date-fns";
2 import { css, html, LitElement } from "lit";
3 import { customElement } from "lit/decorators.js";
4 import { shared } from "./shared";
5
6 @customElement("fd-week-guide")
7 export class WeekGuide extends LitElement {
8 constructor() {
9 super();
10 setInterval(this.requestUpdate.bind(this), 5 * 60 * 1000);
11 }
12 static styles = [
13 shared,
14 css`
15 :host {
16 display: inline-block;
17 }
18 .wday > span {
19 display: inline-block;
20 background: #282a36;
21 padding: 5px;
22 border: 3px outset #333;
23 text-align: center;
24 vertical-align: middle;
25 border-radius: 10px;
26 }
27 .wday > span.today {
28 background: #282a36;
29 border-color: #ff79c6;
30 color: #ff79c6;
31 text-shadow: 0 0 8px #ff79c6;
32 }
33 `,
34 ];
35 render() {
36 const day = format(new Date(), "EEE").toLowerCase();
37
38 return html`
39 <div class="wday">
40 <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
41 <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
42 <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
43 <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
44 <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
45 <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
46 <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
47 </div>
48 `;
49 }
50 }