|
0
|
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`
|
|
17
|
15 span {
|
|
0
|
16 display: inline-block;
|
|
|
17 background: #282a36;
|
|
17
|
18 padding: 2px;
|
|
|
19 border: 2px outset #333;
|
|
0
|
20 text-align: center;
|
|
|
21 vertical-align: middle;
|
|
|
22 border-radius: 10px;
|
|
|
23 }
|
|
17
|
24 span.today {
|
|
0
|
25 background: #282a36;
|
|
|
26 border-color: #ff79c6;
|
|
|
27 color: #ff79c6;
|
|
|
28 text-shadow: 0 0 8px #ff79c6;
|
|
|
29 }
|
|
|
30 `,
|
|
|
31 ];
|
|
|
32 render() {
|
|
|
33 const day = format(new Date(), "EEE").toLowerCase();
|
|
|
34
|
|
|
35 return html`
|
|
17
|
36 <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
|
|
|
37 <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
|
|
|
38 <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
|
|
|
39 <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
|
|
|
40 <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
|
|
|
41 <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
|
|
|
42 <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
|
|
0
|
43 `;
|
|
|
44 }
|
|
|
45 }
|
