added sold and purchased date to vehicle.

Models/Vehicle.cs

@@ -8,6 +8,8 @@
         public string Make { get; set; }
         public string Model { get; set; }
         public string LicensePlate { get; set; }
+        public string PurchaseDate { get; set; }
+        public string SoldDate { get; set; }
         public bool IsElectric { get; set; } = false;
         public bool UseHours { get; set; } = false;
         public List<ExtraField> ExtraFields { get; set; } = new List<ExtraField>();

Views/Home/_GarageDisplay.cshtml

@@ -1,5 +1,10 @@
-@model List<Vehicle>
+@using CarCareTracker.Helper
+@inject IConfigHelper config
+@inject ITranslationHelper translator
+@model List<Vehicle>
 @{
+    var userConfig = config.GetUserConfig(User);
+    var userLanguage = userConfig.UserLanguage;
     var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
 @if (recordTags.Any())
@@ -25,7 +30,11 @@
         {
             <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" 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; pointer-events:none;" />
+                    <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down; pointer-events:none; @(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
+                    @if (!string.IsNullOrWhiteSpace(vehicle.SoldDate))
+                    {
+                        <div class="vehicle-sold-banner"><p class='display-6 mb-0'>@translator.Translate(userLanguage, "SOLD")</p></div>
+                    }
                     <div class="card-body">
                         <h5 class="card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
                         <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
@@ -41,4 +50,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

Views/Vehicle/_VehicleModal.cshtml

@@ -34,6 +34,10 @@
             <input type="text" id="inputModel" class="form-control" placeholder="@translator.Translate(userLanguage, "Model")" value="@Model.Model">
             <label for="inputLicensePlate">@translator.Translate(userLanguage, "License Plate")</label>
             <input type="text" id="inputLicensePlate" class="form-control" placeholder="@translator.Translate(userLanguage, "License Plate")" value="@Model.LicensePlate">
+            <label for="inputPurchaseDate">@translator.Translate(userLanguage, "Purchased Date(optional)")</label>
+            <input type="text" id="inputPurchaseDate" class="form-control" placeholder="@translator.Translate(userLanguage, "Purchased Date")" value="@Model.PurchaseDate">
+            <label for="inputSoldDate">@translator.Translate(userLanguage, "Sold Date(optional)")</label>
+            <input type="text" id="inputSoldDate" class="form-control" placeholder="@translator.Translate(userLanguage, "Sold Date")" value="@Model.SoldDate">
             <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" role="switch" id="inputIsElectric" checked="@Model.IsElectric">
                 <label class="form-check-label" for="inputIsElectric">@translator.Translate(userLanguage, "Electric Vehicle")</label>

wwwroot/css/site.css

@@ -358,4 +358,12 @@ input[type="file"] {
 .zero-y-padding{
     padding-top: 0rem;
     padding-bottom: 0rem;
+}
+.vehicle-sold-banner {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    z-index: 10;
 }

wwwroot/js/garage.js

@@ -4,6 +4,8 @@
         if (data) {
             $("#addVehicleModalContent").html(data);
             initTagSelector($("#inputTag"));
+            initDatePicker($('#inputPurchaseDate'));
+            initDatePicker($('#inputSoldDate'));
             $('#addVehicleModal').modal('show');
         }
     })

wwwroot/js/shared.js

@@ -37,6 +37,8 @@ function saveVehicle(isEdit) {
     var vehicleMake = $("#inputMake").val();
     var vehicleModel = $("#inputModel").val();
     var vehicleTags = $("#inputTag").val();
+    var vehiclePurchaseDate = $("#inputPurchaseDate").val();
+    var vehicleSoldDate = $("#inputSoldDate").val();
     var vehicleLicensePlate = $("#inputLicensePlate").val();
     var vehicleIsElectric = $("#inputIsElectric").is(":checked");
     var vehicleUseHours = $("#inputUseHours").is(":checked");
@@ -83,7 +85,9 @@ function saveVehicle(isEdit) {
         isElectric: vehicleIsElectric,
         tags: vehicleTags,
         useHours: vehicleUseHours,
-        extraFields: extraFields.extraFields
+        extraFields: extraFields.extraFields,
+        purchaseDate: vehiclePurchaseDate,
+        soldDate: vehicleSoldDate
     }, function (data) {
         if (data) {
             if (!isEdit) {

wwwroot/js/vehicle.js

@@ -215,6 +215,8 @@ function editVehicle(vehicleId) {
         if (data) {
             $("#editVehicleModalContent").html(data);
             initTagSelector($("#inputTag"), true);
+            initDatePicker($('#inputPurchaseDate'));
+            initDatePicker($('#inputSoldDate'));
             $('#editVehicleModal').modal('show');
         }
     });