📄
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
@page "/"
@using MatDenDagen.Models
@using MatDenDagen.Services
@inject DateService dateService
@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 "the day" har inte slumpats ännu.</p>
}
else
{
<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> är den <code>@actualDate</code></h2>
<p>Spara datumet i din almanacka och se fram emot en underbar matupplevelse!</p>
</div>
</div>
}
</div>
}
<div class="action-buttons">
<a href="/submission" class="btn">Skicka in din mat</a>
</div>
</div>
@code {
private DateSpan? dateSpan { get; set; }
private DateOnly? actualDate { get; set; }
protected override async Task OnInitializedAsync()
{
dateSpan = await dateService.GetDateSpanAsync();
actualDate = (await dateService.GetDateConfigAsync())?.TheDay;
}
}