feat: Enhance UI/UX across multiple views with consistent styling and improved layout
This commit is contained in:
Blake Ridgway
parent
9931687419
commit
36d4ae00dd
16 changed files with 609 additions and 60 deletions
137
Views/LawnCareEvents/Calendar.cshtml
Normal file
137
Views/LawnCareEvents/Calendar.cshtml
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
@{
|
||||
ViewData["Title"] = "Lawn Care Calendar";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>@ViewData["Title"]</h1>
|
||||
<a asp-action="Create" asp-controller="LawnCareEvents" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle-fill"></i> Create New Event
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="calendar-container">
|
||||
<div class="calendar-header">
|
||||
<button id="prevMonth" class="btn btn-secondary">< Prev</button>
|
||||
<h2 id="currentMonthYear"></h2>
|
||||
<button id="nextMonth" class="btn btn-secondary">Next ></button>
|
||||
</div>
|
||||
<div class="calendar-grid">
|
||||
<div class="day-name">Sun</div>
|
||||
<div class="day-name">Mon</div>
|
||||
<div class="day-name">Tue</div>
|
||||
<div class="day-name">Wed</div>
|
||||
<div class="day-name">Thu</div>
|
||||
<div class="day-name">Fri</div>
|
||||
<div class="day-name">Sat</div>
|
||||
</div>
|
||||
<div id="calendarDays" class="calendar-grid">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
const calendarDaysEl = $('#calendarDays');
|
||||
const currentMonthYearEl = $('#currentMonthYear');
|
||||
const prevMonthBtn = $('#prevMonth');
|
||||
const nextMonthBtn = $('#nextMonth');
|
||||
|
||||
let currentMonth = new Date().getMonth();
|
||||
let currentYear = new Date().getFullYear();
|
||||
let allEvents = [];
|
||||
|
||||
function renderCalendar(month, year) {
|
||||
calendarDaysEl.empty();
|
||||
currentMonthYearEl.text(new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' }));
|
||||
|
||||
const firstDayOfMonth = new Date(year, month, 1);
|
||||
const lastDayOfMonth = new Date(year, month + 1, 0);
|
||||
const daysInMonth = lastDayOfMonth.getDate();
|
||||
|
||||
const startDayOfWeek = firstDayOfMonth.getDay();
|
||||
|
||||
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
||||
for (let i = startDayOfWeek; i > 0; i--) {
|
||||
const dayNum = prevMonthLastDay - i + 1;
|
||||
calendarDaysEl.append(`<div class="calendar-day other-month"><span class="day-number">${dayNum}</span></div>`);
|
||||
}
|
||||
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
const dateString = date.toISOString().split('T')[0];
|
||||
|
||||
let dayHtml = `<div class="calendar-day" data-date="${dateString}">`;
|
||||
dayHtml += `<span class="day-number">${day}</span>`;
|
||||
|
||||
const eventsOnThisDay = allEvents.filter(event => event.start === dateString);
|
||||
|
||||
eventsOnThisDay.forEach(event => {
|
||||
const typeClass = event.title.split(' ')[0].toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
dayHtml += `<div class="event-indicator ${typeClass}" data-event-id="${event.id}" data-event-url="${event.url}">${event.title}</div>`;
|
||||
});
|
||||
|
||||
dayHtml += `</div>`;
|
||||
calendarDaysEl.append(dayHtml);
|
||||
}
|
||||
|
||||
const totalDaysDisplayed = startDayOfWeek + daysInMonth;
|
||||
const remainingCells = 42 - totalDaysDisplayed;
|
||||
for (let i = 1; i <= remainingCells && totalDaysDisplayed + i <= 42; i++) {
|
||||
calendarDaysEl.append(`<div class="calendar-day other-month"><span class="day-number">${i}</span></div>`);
|
||||
}
|
||||
|
||||
$('.calendar-day .event-indicator').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
const url = $(this).data('event-url');
|
||||
if (url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
});
|
||||
|
||||
$('.calendar-day:not(.other-month)').on('click', function () {
|
||||
const date = $(this).data('date');
|
||||
window.location.href = `/LawnCareEvents/Create?date=${date}`;
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchEvents() {
|
||||
try {
|
||||
const response = await fetch('/LawnCareEvents/GetEventsJson');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
allEvents = await response.json();
|
||||
renderCalendar(currentMonth, currentYear);
|
||||
} catch (error) {
|
||||
console.error('Error fetching events:', error);
|
||||
}
|
||||
}
|
||||
|
||||
prevMonthBtn.on('click', function () {
|
||||
currentMonth--;
|
||||
if (currentMonth < 0) {
|
||||
currentMonth = 11;
|
||||
currentYear--;
|
||||
}
|
||||
renderCalendar(currentMonth, currentYear);
|
||||
});
|
||||
|
||||
nextMonthBtn.on('click', function () {
|
||||
currentMonth++;
|
||||
if (currentMonth > 11) {
|
||||
currentMonth = 0;
|
||||
currentYear++;
|
||||
}
|
||||
renderCalendar(currentMonth, currentYear);
|
||||
});
|
||||
|
||||
fetchEvents();
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link href="~/css/calendar.css" rel="stylesheet" asp-append-version="true" />
|
||||
}
|
||||
|
|
@ -39,7 +39,11 @@
|
|||
|
||||
<form asp-action="Delete">
|
||||
<input type="hidden" asp-for="Id" />
|
||||
<input type="submit" value="Delete" class="btn btn-danger" /> |
|
||||
<a asp-action="Index">Back to List</a>
|
||||
<input type="submit" value="Delete" class="btn btn-danger" />
|
||||
|
||||
</form>
|
||||
|
||||
<div class="mt-3">
|
||||
<a asp-action="Index">Back to List</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Save" class="btn btn-primary" />
|
||||
<a asp-action="Delete" asp-route-id="@Model.Id" class="btn btn-danger ms-2">Delete</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,74 @@
|
|||
@model turf_tasker.Models.LawnCareEvent
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Edit";
|
||||
ViewData["Title"] = "Edit";
|
||||
}
|
||||
|
||||
<h1>Edit</h1>
|
||||
|
||||
<h4>LawnCareEvent</h4>
|
||||
<h4>Lawn Care Event</h4>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<form asp-action="Edit">
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
|
||||
<input type="hidden" asp-for="Id" />
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label asp-for="EventType" class="control-label"></label>
|
||||
<select asp-for="EventType" class="form-control" asp-items="Html.GetEnumSelectList<LawnCareEventType>()"></select>
|
||||
<span asp-validation-for="EventType" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label asp-for="EventDate" class="control-label"></label>
|
||||
<input asp-for="EventDate" class="form-control" />
|
||||
<span asp-validation-for="EventDate" class="text-danger"></span>
|
||||
</div>
|
||||
<div id="mowingPatternGroup">
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label asp-for="MowingPattern" class="control-label"></label>
|
||||
<select asp-for="MowingPattern" class="form-control" asp-items="Html.GetEnumSelectList<MowingPattern>()"></select>
|
||||
<span asp-validation-for="MowingPattern" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label asp-for="Notes" class="control-label"></label>
|
||||
<textarea asp-for="Notes" class="form-control"></textarea>
|
||||
<span asp-validation-for="Notes" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group mt-3">
|
||||
<input type="submit" value="Save" class="btn btn-primary" />
|
||||
<!-- NEW: Add a space/margin and use Razor syntax to pass the Id -->
|
||||
<a asp-action="Delete" asp-route-id="@Model.Id" class="btn btn-danger">Delete</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mt-3">
|
||||
<a asp-action="Index">Back to List</a>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
|
||||
function toggleMowingPattern() {
|
||||
var selectedEventType = $("#EventType").val();
|
||||
function toggleMowingPattern() {
|
||||
var selectedEventType = $("#EventType").val();
|
||||
|
||||
if (selectedEventType == '0') { // '0' corresponds to Mowing
|
||||
$("#mowingPatternGroup").show();
|
||||
} else {
|
||||
$("#mowingPatternGroup").hide();
|
||||
}
|
||||
if (selectedEventType == '0') { // '0' corresponds to Mowing
|
||||
$("#mowingPatternGroup").show();
|
||||
} else {
|
||||
$("#mowingPatternGroup").hide();
|
||||
}
|
||||
}
|
||||
|
||||
toggleMowingPattern();
|
||||
|
||||
$("#EventType").on("change", function () {
|
||||
toggleMowingPattern();
|
||||
|
||||
$("#EventType").on("change", function () {
|
||||
toggleMowingPattern();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
|
@ -4,11 +4,14 @@
|
|||
ViewData["Title"] = "Lawn Care Log";
|
||||
}
|
||||
|
||||
<h1>@ViewData["Title"]</h1>
|
||||
<div class="text-center">
|
||||
<h1>@ViewData["Title"]</h1>
|
||||
|
||||
<p>
|
||||
<a asp-action="Create" class="btn btn-primary">Create New Event</a>
|
||||
</p>
|
||||
<p>
|
||||
<a asp-action="Create" class="btn btn-primary">Create New Event</a>
|
||||
<a asp-action="Calendar" class="btn btn-info ms-2">View Calendar</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Add the search form -->
|
||||
<form asp-action="Index" method="get">
|
||||
|
|
@ -16,8 +19,8 @@
|
|||
<p>
|
||||
Find by type or note:
|
||||
<input type="text" name="searchString" value="@ViewData["CurrentFilter"]" />
|
||||
<input type="submit" value="Search" class="btn btn-secondary" /> |
|
||||
<a asp-action="Index">Back to Full List</a>
|
||||
<input type="submit" value="Search" class="btn btn-secondary" />
|
||||
<a asp-action="Index" class="btn btn-primary">Reset Filter</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -63,9 +66,11 @@
|
|||
@Html.DisplayFor(modelItem => item.Notes)
|
||||
</td>
|
||||
<td>
|
||||
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
|
||||
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
|
||||
<a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary">Edit</a>
|
||||
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-info">Details</a>
|
||||
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-outline-danger">Delete</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue