cphipps/lubelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added vehicle tags.

Browse Source
This commit is contained in:
DESKTOP-GENO133\IvanPlex
2024-01-31 08:10:49 -07:00
parent 2eadd05289
commit a54857c6bf
7 changed files with 68 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Models/Vehicle.cs
View File

@@ -10,5 +10,6 @@
public string LicensePlate { get; set; }
public bool IsElectric { get; set; } = false;
public bool UseHours { get; set; } = false;
public List<string> Tags { get; set; } = new List<string>();
}
}

5
Views/Home/Index.cshtml
View File

@@ -70,9 +70,8 @@
</ul>
<div class="tab-content" id="homeTab">
<div class="tab-pane fade @(Model == "garage" ? "show active" : "")" id="garage-tab-pane" role="tabpanel" tabindex="0">
<div class="row">
<div id="garageContainer" class="row gy-3 align-items-stretch">
</div>
<div id="garageContainer">
</div>
</div>
<div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">

50
Views/Home/_GarageDisplay.cshtml
View File

@@ -1,24 +1,38 @@
@model List<Vehicle>
@if (Model.Any())
@{
var recordTags = Model.SelectMany(x => x.Tags).Distinct();
}
@if (recordTags.Any())
{
foreach (Vehicle vehicle in Model)
{
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none" id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="card" onclick="viewVehicle(@vehicle.Id)">
<img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
<div class="card-body">
<h5 class="card-title text-truncate">@($"{vehicle.Year}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
<p class="card-text text-truncate">@vehicle.LicensePlate</p>
<div class='row'>
<div class="d-flex align-items-center flex-wrap mt-4">
@foreach (string recordTag in recordTags)
{
<span onclick="filterGarage(this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
}
</div>
</div>
}
<div class="row">
<div class="row gy-3 align-items-stretch">
@foreach (Vehicle vehicle in Model)
{
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="card" onclick="viewVehicle(@vehicle.Id)">
<img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
<div class="card-body">
<h5 class="card-title text-truncate">@($"{vehicle.Year}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
<p class="card-text text-truncate">@vehicle.LicensePlate</p>
</div>
</div>
</div>
}
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card" onclick="showAddVehicleModal()" style="height:100%;">
<img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
</div>
</div>
}
}
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card" onclick="showAddVehicleModal()" style="height:100%;">
<img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
</div>
</div>
</div>

7
Views/Vehicle/_VehicleModal.cshtml
View File

@@ -37,6 +37,13 @@
<input class="form-check-input" type="checkbox" role="switch" id="inputUseHours" checked="@Model.UseHours">
<label class="form-check-label" for="inputUseHours">Use Engine Hours</label>
</div>
<label for="inputTag">Tags(optional)</label>
<select multiple class="form-select" id="inputTag">
@foreach (string tag in Model.Tags)
{
<!option value="@tag">@tag</!option>
}
</select>
@if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
{
<label for="inputImage">Replace picture(optional)</label>

24
wwwroot/js/garage.js
View File

@@ -3,9 +3,10 @@
$.get('/Vehicle/AddVehiclePartialView', function (data) {
if (data) {
$("#addVehicleModalContent").html(data);
initTagSelector($("#inputTag"));
$('#addVehicleModal').modal('show');
}
})
$('#addVehicleModal').modal('show');
}
function hideAddVehicleModal() {
$('#addVehicleModal').modal('hide');
@@ -53,4 +54,25 @@ function loadPinnedNotes(vehicleId) {
}
function hidePinnedNotes(vehicleId) {
$(`#gridVehicle_${vehicleId}`).tooltip("hide");
}
function filterGarage(sender) {
var tagName = sender.textContent;
var rowData = $(".garage-item");
if ($(sender).hasClass("bg-primary")) {
rowData.removeClass('override-hide');
$(sender).removeClass('bg-primary');
$(sender).addClass('bg-secondary');
} else {
//hide table rows.
rowData.addClass('override-hide');
$(`[data-tags~='${tagName}']`).removeClass('override-hide');
if ($(".tagfilter.bg-primary").length > 0) {
//disabling other filters
$(".tagfilter.bg-primary").addClass('bg-secondary');
$(".tagfilter.bg-primary").removeClass('bg-primary');
}
$(sender).addClass('bg-primary');
$(sender).removeClass('bg-secondary');
}
}

2
wwwroot/js/shared.js
View File

@@ -36,6 +36,7 @@ function saveVehicle(isEdit) {
var vehicleYear = $("#inputYear").val();
var vehicleMake = $("#inputMake").val();
var vehicleModel = $("#inputModel").val();
var vehicleTags = $("#inputTag").val();
var vehicleLicensePlate = $("#inputLicensePlate").val();
var vehicleIsElectric = $("#inputIsElectric").is(":checked");
var vehicleUseHours = $("#inputUseHours").is(":checked");
@@ -76,6 +77,7 @@ function saveVehicle(isEdit) {
model: vehicleModel,
licensePlate: vehicleLicensePlate,
isElectric: vehicleIsElectric,
tags: vehicleTags,
useHours: vehicleUseHours
}, function (data) {
if (data) {

1
wwwroot/js/vehicle.js
View File

@@ -214,6 +214,7 @@ function editVehicle(vehicleId) {
$.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
if (data) {
$("#editVehicleModalContent").html(data);
initTagSelector($("#inputTag"));
$('#editVehicleModal').modal('show');
}
});