|
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`
|
|
|
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 }
|
