📄
MatDenDagen/Components/Pages/Home.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@page "/"
@using MatDenDagen.Models
@using MatDenDagen.Services
@inject DateService dateService
@inject TimeProvider timeProvider
@layout MainLayout
<div class="home-content">
<h1>Välkommen till Mat den <span class="highlight">dagen</span></h1>
<div class="cookbook-intro card">
<p>Vi delar recept och matupplevelser från en och samma dag.</p>
</div>
@if (dateSpan is null)
{
<div class="card">
<p>Ingen datumspan är konfigurerad ännu. Kontakta administratören.</p>
</div>
}
else
{
<div class="date-section card">
<h2>Datumspan</h2>
<p><span class="highlight">Dagen</span> kommer att inträffa någon gång mellan:</p>
<div class="date-range">
<span class="date-start"><code>@dateSpan.Start</code></span>
<span class="date-separator">och</span>
<span class="date-end"><code>@dateSpan.End</code></span>
</div>
@if (actualDate is null)
{
<p>Datumet för <span class="highlight">dagen</span> har inte slumpats ännu.</p>
}
else
{
<div class="date-reveal-container">
<input type="checkbox" id="today-reveal-checkbox" class="date-reveal-checkbox" style="display: none;">
<label for="today-reveal-checkbox" class="date-reveal-toggle">
<span class="reveal-button">Är det idag?</span>
</label>
<div class="date-reveal-content">
@if (today == actualDate)
{
<h2>Ja</h2>
<p>Idag är <span class="highlight">dagen</span>!</p>
}
else if (today < actualDate)
{
<h2>Nej</h2>
<p>Inte än</p>
}
else
{
<h2>Nej</h2>
<p><span class="highlight">Dagen</span> har redan varit</p>
}
</div>
</div>
<div class="date-reveal-container">
<input type="checkbox" id="date-reveal-checkbox" class="date-reveal-checkbox" style="display: none;">
<label for="date-reveal-checkbox" class="date-reveal-toggle">
<span class="reveal-button">Avslöja dagen</span>
</label>
<div class="date-reveal-content">
<h2><span class="highlight">Dagen</span> @(today <= actualDate ? "är" : "var") den <code>@actualDate</code></h2>
</div>
</div>
}
</div>
}
<div class="action-buttons">
<a href="/submission" class="btn">Till formuläret!</a>
</div>
</div>
@code {
private DateSpan? dateSpan { get; set; }
private DateOnly? actualDate { get; set; }
private DateOnly? today { get; set; }
protected override async Task OnInitializedAsync()
{
dateSpan = await dateService.GetDateSpanAsync();
actualDate = (await dateService.GetDateConfigAsync())?.TheDay;
today = DateOnly.FromDateTime(timeProvider.GetLocalNow().LocalDateTime);
}
}