-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #115 from infoshareacademy/feature/ja-121-calendar…
…-component Feature/JA-121 Calendar Component
- Loading branch information
Showing
18 changed files
with
516 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
@using System.Text.Json | ||
@using TutorLizard.Shared.Models.DTOs | ||
@inject NavigationManager navigation | ||
|
||
<div class="calendar-container my-2"> | ||
<div class="calendar-header"> | ||
<div class="previous"> | ||
<button class="btn btn-success" @onclick="() => Navigate(controller, action)"> | ||
<i class="bi bi-arrow-left"></i> | ||
</button> | ||
</div> | ||
<h3>@Month/@Year</h3> | ||
<div class="next"> | ||
<button class="btn btn-success" @onclick="() => Navigate(controller, action)"> | ||
<i class="bi bi-arrow-right"></i> | ||
</button> | ||
</div> | ||
</div> | ||
<div class="calendar-main"> | ||
<div class="seven-column-section days-header"> | ||
<div class="d-none d-xxl-block">Poniedziałek</div> | ||
<div class="d-none d-xxl-block">Wtorek</div> | ||
<div class="d-none d-xxl-block">Środa</div> | ||
<div class="d-none d-xxl-block">Czwartek</div> | ||
<div class="d-none d-xxl-block">Piątek</div> | ||
<div class="d-none d-xxl-block">Sobota</div> | ||
<div class="d-none d-xxl-block">Niedziela</div> | ||
|
||
<div class="d-xxl-none">Pn</div> | ||
<div class="d-xxl-none">Wt</div> | ||
<div class="d-xxl-none">Śr</div> | ||
<div class="d-xxl-none">Czw</div> | ||
<div class="d-xxl-none">Pt</div> | ||
<div class="d-xxl-none">Sb</div> | ||
<div class="d-xxl-none">Nd</div> | ||
</div> | ||
<div class="seven-column-section calendar-grid"> | ||
<div class="@(DayOfWeekOnFirst()) @(IsSelected(1) ? "selected" : "")" @onclick="() => HandleDaySelected(1)"> | ||
1 | ||
<CalendarItemsCountIndicator AsTutor="GetScheduleItemCountsAsTutor(1)" | ||
AsStudent="GetScheduleItemCountsAsStudent(1)"/> | ||
</div> | ||
@for (int i = 2; i <= DateTime.DaysInMonth(Year, Month); i++) | ||
{ | ||
int day = i; | ||
<div class="@(IsSelected(day) ? "selected" : "")" @onclick="() => HandleDaySelected(day)"> | ||
@day | ||
<CalendarItemsCountIndicator AsTutor="GetScheduleItemCountsAsTutor(day)" | ||
AsStudent="GetScheduleItemCountsAsStudent(day)" /> | ||
</div> | ||
} | ||
</div> | ||
</div> | ||
</div> | ||
|
||
@code { | ||
[Parameter, EditorRequired] | ||
public int Year { get; set; } | ||
[Parameter, EditorRequired] | ||
public int Month { get; set; } | ||
[Parameter, EditorRequired] | ||
public List<IScheduleItemSummaryDto> Schedule { get; set; } = []; | ||
[Parameter, EditorRequired] | ||
public Action<int, int, int>? OnDaySelected { get; set; } | ||
[Parameter, EditorRequired] | ||
public int DaySelected { get; set; } | ||
|
||
private string controller = "Browse"; | ||
private string action = "Ads"; | ||
|
||
private string DayOfWeekOnFirst() | ||
{ | ||
DateTime first = new DateTime(Year, Month, 1); | ||
return first.DayOfWeek.ToString().ToLower(); | ||
} | ||
|
||
private void Navigate(string controller, string action) | ||
{ | ||
navigation.NavigateTo($"{controller}/{action}"); | ||
} | ||
|
||
private void HandleDaySelected(int day) | ||
{ | ||
OnDaySelected?.Invoke(Year, Month, day); | ||
} | ||
|
||
private int GetScheduleItemCountsAsTutor(int day) | ||
{ | ||
DateTime date = new DateTime(Year, Month, day); | ||
return Schedule | ||
.Where(si => | ||
si.DateTime.Date == date.Date && | ||
si is TutorsScheduleItemSummaryDto) | ||
.Count(); | ||
} | ||
|
||
private int GetScheduleItemCountsAsStudent(int day) | ||
{ | ||
DateTime date = new DateTime(Year, Month, day); | ||
return Schedule | ||
.Where(si => | ||
si.DateTime.Date == date.Date && | ||
si is StudentsScheduleItemSummaryDto) | ||
.Count(); | ||
} | ||
|
||
private bool IsSelected(int day) | ||
{ | ||
return day == DaySelected; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
.calendar-container { | ||
display: flex; | ||
flex-direction: column; | ||
background-color: darkgreen; | ||
border-radius: 1rem; | ||
padding: 1rem; | ||
} | ||
|
||
.calendar-container h3 { | ||
text-align: center; | ||
color: white; | ||
margin: 0; | ||
} | ||
|
||
.calendar-header { | ||
display: grid; | ||
grid-template-columns: repeat(3, 1fr); | ||
padding-bottom: 1rem; | ||
} | ||
|
||
.previous { | ||
color: white; | ||
display: flex; | ||
align-items: center; | ||
justify-content: left; | ||
padding-left: 1rem; | ||
font-size: 2rem; | ||
} | ||
|
||
.next { | ||
color: white; | ||
display: flex; | ||
align-items: center; | ||
justify-content: right; | ||
padding-right: 1rem; | ||
font-size: 2rem; | ||
} | ||
|
||
.calendar-main { | ||
border-radius: .5rem; | ||
overflow: hidden; | ||
background-color: whitesmoke; | ||
} | ||
|
||
.seven-column-section { | ||
display: grid; | ||
grid-template-columns: repeat(7, minmax(0, 1fr)); | ||
column-gap: .5rem; | ||
row-gap: .5rem; | ||
} | ||
|
||
.days-header { | ||
padding-bottom: .5rem; | ||
} | ||
|
||
.days-header div { | ||
padding: 1rem 0; | ||
background-color: white; | ||
text-align: center; | ||
font-weight: bold; | ||
} | ||
|
||
.calendar-grid { | ||
} | ||
|
||
.calendar-grid div { | ||
background-color: white; | ||
font-size: 2rem; | ||
display:flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
position:relative; | ||
height: 7rem; | ||
} | ||
|
||
.calendar-grid div:hover { | ||
background-color: darkgreen; | ||
transition: .35s; | ||
color: white; | ||
font-weight: bold; | ||
cursor: pointer; | ||
} | ||
|
||
.selected { | ||
font-weight: bold; | ||
} | ||
|
||
.monday { | ||
grid-column: 1; | ||
} | ||
|
||
.tuesday { | ||
grid-column: 2; | ||
} | ||
|
||
.wednesday { | ||
grid-column: 3; | ||
} | ||
|
||
.thursday { | ||
grid-column: 4; | ||
} | ||
|
||
.friday { | ||
grid-column: 5; | ||
} | ||
|
||
.saturday { | ||
grid-column: 6; | ||
} | ||
|
||
.sunday { | ||
grid-column: 7; | ||
} |
17 changes: 17 additions & 0 deletions
17
TutorLizard.Blazor/Components/CalendarItemsCountIndicator.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<div class="indicator-container"> | ||
@if (AsTutor > 0) | ||
{ | ||
<span class="badge bg-success mx-md-1">N: @AsTutor</span> | ||
} | ||
@if (AsStudent > 0) | ||
{ | ||
<span class="badge bg-primary mx-md-1">U: @AsStudent</span> | ||
} | ||
</div> | ||
|
||
@code { | ||
[Parameter, EditorRequired] | ||
public int AsTutor { get; set; } | ||
[Parameter, EditorRequired] | ||
public int AsStudent { get; set; } | ||
} |
6 changes: 6 additions & 0 deletions
6
TutorLizard.Blazor/Components/CalendarItemsCountIndicator.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
.indicator-container { | ||
position: absolute; | ||
bottom: 0; | ||
font-size: .75rem; | ||
padding-bottom: .5rem; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
@using System.Text.Json | ||
@using TutorLizard.Shared.Models.DTOs | ||
|
||
<div class="row"> | ||
<div class="col-lg-8"> | ||
<Calendar Year="@Year" | ||
Month="@Month" | ||
Schedule="@schedule" | ||
OnDaySelected="@DisplayScheduleForDay" | ||
DaySelected="@selectedDay.Day"/> | ||
</div> | ||
<div class="col-lg-4"> | ||
<ScheduleForDay Schedule="@scheduleForDay" | ||
Day="@selectedDay.Day" | ||
Month="@selectedDay.Month" | ||
Year="@selectedDay.Year" /> | ||
</div> | ||
</div> | ||
|
||
@code { | ||
[Parameter, EditorRequired] | ||
public int Year { get; set; } | ||
[Parameter, EditorRequired] | ||
public int Month { get; set; } | ||
[Parameter, EditorRequired] | ||
public string? TutorsSchedule { get; set; } | ||
[Parameter, EditorRequired] | ||
public string? StudentsSchedule { get; set; } | ||
|
||
private List<IScheduleItemSummaryDto> schedule = []; | ||
private List<IScheduleItemSummaryDto> scheduleForDay = []; | ||
|
||
DateTime selectedDay = DateTime.Now; | ||
|
||
protected override void OnParametersSet() | ||
{ | ||
schedule.Clear(); | ||
try | ||
{ | ||
if (String.IsNullOrWhiteSpace(StudentsSchedule) == false) | ||
{ | ||
var studentsSchedule = JsonSerializer | ||
.Deserialize<IEnumerable<StudentsScheduleItemSummaryDto>>(StudentsSchedule); | ||
schedule.AddRange(studentsSchedule); | ||
} | ||
if (String.IsNullOrWhiteSpace(TutorsSchedule) == false) | ||
{ | ||
var tutorsSchedule = JsonSerializer | ||
.Deserialize<IEnumerable<TutorsScheduleItemSummaryDto>>(TutorsSchedule); | ||
schedule.AddRange(tutorsSchedule); | ||
} | ||
} | ||
catch | ||
{ } | ||
|
||
if (Year == DateTime.Now.Year && Month == DateTime.Now.Month) | ||
{ | ||
DisplayScheduleForDay(Year, Month, DateTime.Now.Day); | ||
} | ||
else | ||
{ | ||
DisplayScheduleForDay(Year, Month, 1); | ||
} | ||
|
||
base.OnParametersSet(); | ||
} | ||
|
||
private void DisplayScheduleForDay(int year, int month, int day) | ||
{ | ||
selectedDay = new DateTime(year, month, day); | ||
scheduleForDay = schedule | ||
.Where(si => si.DateTime.Date == selectedDay.Date) | ||
.ToList(); | ||
StateHasChanged(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
@using TutorLizard.Shared.Models.DTOs | ||
<div class="schedule-container my-2"> | ||
<h3>@($"{Day}.{Month}.{Year}")</h3> | ||
<div class="schedule-list"> | ||
@if (Schedule.Count == 0) | ||
{ | ||
<div class="text-light text-center">Brak terminów.</div> | ||
} | ||
@foreach (var item in Schedule) | ||
{ | ||
if (item is StudentsScheduleItemSummaryDto studentsScheduleItem) | ||
{ | ||
<StudentsScheduleItem ScheduleItem="@studentsScheduleItem" /> | ||
} | ||
if (item is TutorsScheduleItemSummaryDto tutorsScheduleItem) | ||
{ | ||
<TutorsScheduleItem ScheduleItem="@tutorsScheduleItem" /> | ||
} | ||
} | ||
</div> | ||
</div> | ||
|
||
@code { | ||
[Parameter, EditorRequired] | ||
public int Day { get; set; } | ||
[Parameter, EditorRequired] | ||
public int Month { get; set; } | ||
[Parameter, EditorRequired] | ||
public int Year { get; set; } | ||
[Parameter, EditorRequired] | ||
public List<IScheduleItemSummaryDto> Schedule { get; set; } = []; | ||
|
||
protected override void OnParametersSet() | ||
{ | ||
base.OnParametersSet(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
.schedule-container { | ||
background-color: slateblue; | ||
padding: 1rem; | ||
border-radius: 1rem; | ||
} | ||
|
||
.schedule-container h3 { | ||
color:white; | ||
margin: 0; | ||
text-align: center; | ||
padding-bottom: 1rem; | ||
} | ||
|
||
.schedule-list { | ||
border-radius: .5rem; | ||
display: flex; | ||
flex-direction: column; | ||
} |
Oops, something went wrong.