Merge pull request #900 from hargata/Hargata/612

Add extra field type.

Enum/ExtraFieldType.cs

@@ -0,0 +1,12 @@
+namespace CarCareTracker.Models
+{
+    public enum ExtraFieldType
+    {
+        Text = 0,
+        Number = 1,
+        Decimal = 2,
+        Date = 3,
+        Time = 4,
+        Location = 5
+    }
+}

Helper/StaticHelper.cs

@@ -262,7 +262,9 @@ namespace CarCareTracker.Helper
             //update isrequired setting
             foreach (ExtraField extraField in recordExtraFields)
             {
-                extraField.IsRequired = templateExtraFields.Where(x => x.Name == extraField.Name).First().IsRequired;
+                var firstMatchingField = templateExtraFields.First(x => x.Name == extraField.Name);
+                extraField.IsRequired = firstMatchingField.IsRequired;
+                extraField.FieldType = firstMatchingField.FieldType;
             }
             //append extra fields
             foreach (ExtraField extraField in templateExtraFields)

Models/Shared/ExtraField.cs

@@ -5,5 +5,6 @@
         public string Name { get; set; }
         public string Value { get; set; }
         public bool IsRequired { get; set; }
+        public ExtraFieldType FieldType { get; set; } = ExtraFieldType.Text;
     }
 }

Views/Home/_ExtraFields.cshtml

@@ -36,8 +36,9 @@
                     <table class="table table-hover">
                         <thead class="sticky-top">
                             <tr class="d-flex">
-                                <th scope="col" class="col-8">@translator.Translate(userLanguage, "Name")</th>
+                                <th scope="col" class="col-5">@translator.Translate(userLanguage, "Name")</th>
                                 <th scope="col" class="col-2">@translator.Translate(userLanguage, "Required")</th>
+                                <th scope="col" class="col-3">@translator.Translate(userLanguage, "Type")</th>
                                 <th scope="col" class="col-2">@translator.Translate(userLanguage, "Delete")</th>
                             </tr>
                         </thead>
@@ -47,11 +48,21 @@
                                 @foreach (ExtraField extraField in Model.ExtraFields)
                                 {
                                     <script>
-                                        extraFields.push({ name: decodeHTMLEntities('@extraField.Name'), isRequired: @extraField.IsRequired.ToString().ToLower()});
+                                        extraFields.push({ name: decodeHTMLEntities('@extraField.Name'), isRequired: @extraField.IsRequired.ToString().ToLower(), fieldType: decodeHTMLEntities('@extraField.FieldType')});
                                     </script>
                                     <tr class="d-flex">
-                                        <td class="col-8">@extraField.Name</td>
+                                        <td class="col-5">@extraField.Name</td>
                                         <td class="col-2"><input class="form-check-input" type="checkbox" onchange="updateExtraFieldIsRequired(decodeHTMLEntities('@extraField.Name'), this)" value="" @(extraField.IsRequired ? "checked" : "") /></td>
+                                        <td class="col-3">
+                                            <select class="form-select" onchange="updateExtraFieldType(decodeHTMLEntities('@extraField.Name'), this)">
+                                                <!option @(extraField.FieldType == ExtraFieldType.Text ? "selected" : "") value="@((int)ExtraFieldType.Text)">@translator.Translate(userLanguage, "Text")</!option>
+                                                <!option @(extraField.FieldType == ExtraFieldType.Number ? "selected" : "") value="@((int)ExtraFieldType.Number)">@translator.Translate(userLanguage, "Number")</!option>
+                                                <!option @(extraField.FieldType == ExtraFieldType.Decimal ? "selected" : "") value="@((int)ExtraFieldType.Decimal)">@translator.Translate(userLanguage, "Decimal")</!option>
+                                                <!option @(extraField.FieldType == ExtraFieldType.Date ? "selected" : "") value="@((int)ExtraFieldType.Date)">@translator.Translate(userLanguage, "Date")</!option>
+                                                <!option @(extraField.FieldType == ExtraFieldType.Time ? "selected" : "") value="@((int)ExtraFieldType.Time)">@translator.Translate(userLanguage, "Time")</!option>
+                                                <!option @(extraField.FieldType == ExtraFieldType.Location ? "selected" : "") value="@((int)ExtraFieldType.Location)">@translator.Translate(userLanguage, "Location")</!option>
+                                            </select>
+                                        </td>
                                         <td class="col-2"><button type="button" onclick="deleteExtraField(decodeHTMLEntities('@extraField.Name'))" class="btn btn-danger"><i class="bi bi-trash"></i></button></td>
                                     </tr>
                                 }
@@ -99,6 +110,12 @@
         extraFieldToEdit.isRequired = $(checkbox).is(":checked");
         updateExtraFields();
     }
+    function updateExtraFieldType(fieldId, dropDown){
+        var indexToEdit = extraFields.findIndex(x => x.name == fieldId);
+        var extraFieldToEdit = extraFields[indexToEdit];
+        extraFieldToEdit.fieldType = $(dropDown).val();
+        updateExtraFields();
+    }
     function deleteExtraField(fieldId) {
         extraFields = extraFields.filter(x => x.name != fieldId);
         updateExtraFields();

Views/Vehicle/_CollisionRecordModal.cshtml

@@ -52,14 +52,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="collisionRecordNotes">@translator.Translate(userLanguage, "Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_ExtraField.cshtml

@@ -0,0 +1,42 @@
+@model List<ExtraField>
+@if (Model.Any()){
+    @foreach (ExtraField field in Model)
+    {
+        var elementId = Guid.NewGuid();
+        <div class="extra-field">
+            <label for="@elementId">@field.Name</label>
+            @switch(field.FieldType){
+                case (ExtraFieldType.Text):
+                    <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                    break;
+                case (ExtraFieldType.Number):
+                    <input type="number" inputmode="numeric" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                    break;
+                case (ExtraFieldType.Decimal):
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                    break;
+                case (ExtraFieldType.Date):
+                    <div class="input-group">
+                        <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                        <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
+                    </div>
+                    <script>initExtraFieldDatePicker('@elementId')</script>
+                    break;
+                case (ExtraFieldType.Time):
+                    <input type="time" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                    break;
+                case (ExtraFieldType.Location):
+                    <div class="input-group">
+                        <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                        <div class="input-group-text">
+                            <button type="button" class="btn btn-sm btn-primary zero-y-padding" onclick="populateLocationField('@elementId')"><i class="bi bi-geo-alt"></i></button>
+                        </div>
+                    </div>
+                    break;
+                default:
+                    <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                    break;
+            }
+        </div>
+    }
+}

Views/Vehicle/_OdometerRecordModal.cshtml

@@ -72,14 +72,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="odometerRecordNotes">@translator.Translate(userLanguage,"Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_PlanRecordModal.cshtml

@@ -40,14 +40,7 @@
                         <!option value="InProgress" @(Model.Progress == PlanProgress.InProgress ? "selected" : "")>@translator.Translate(userLanguage, "Doing")</!option>
                         <!option value = "Testing" @(Model.Progress == PlanProgress.Testing ? "selected" : "")>@translator.Translate(userLanguage, "Testing")</!option>
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                     @if (!isNew)
                     {
                         <label>@($"{translator.Translate(userLanguage, "Date Created")}: {Model.DateCreated}")</label>

Views/Vehicle/_PlanRecordTemplateEditModal.cshtml

@@ -40,14 +40,7 @@
                         <!option value="InProgress" @(Model.Progress == PlanProgress.InProgress ? "selected" : "")>@translator.Translate(userLanguage, "Doing")</!option>
                         <!option value = "Testing" @(Model.Progress == PlanProgress.Testing ? "selected" : "")>@translator.Translate(userLanguage, "Testing")</!option>
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="planRecordNotes">@translator.Translate(userLanguage, "Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_ServiceRecordModal.cshtml

@@ -52,14 +52,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                         </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="serviceRecordNotes">@translator.Translate(userLanguage,"Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_SupplyRecordModal.cshtml

@@ -50,14 +50,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="supplyRecordNotes">@translator.Translate(userLanguage,"Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_TaxRecordModal.cshtml

@@ -41,14 +41,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="taxRecordNotes">@translator.Translate(userLanguage,"Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_UpgradeRecordModal.cshtml

@@ -52,14 +52,7 @@
                             <!option value="@tag">@tag</!option>
                         }
                     </select>
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                 </div>
                 <div class="col-md-6 col-12">
                     <label for="upgradeRecordNotes">@translator.Translate(userLanguage, "Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>

Views/Vehicle/_VehicleModal.cshtml

@@ -36,14 +36,7 @@
                     <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">
-                    @foreach (ExtraField field in Model.ExtraFields)
+                    @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-                    {
-                        var elementId = Guid.NewGuid();
-                        <div class="extra-field">
-                            <label for="@elementId">@field.Name</label>
-                            <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
-                        </div>
-                    }
                     <label for="inputIdentifier" class="@(!Model.ExtraFields.Any() ? "d-none" : "")">@translator.Translate(userLanguage, "Identifier")</label>
                     <select class="form-select @(!Model.ExtraFields.Any() ? "d-none" : "")" id="inputIdentifier" )>
                         <!option value="LicensePlate" @(Model.VehicleIdentifier == "LicensePlate" ? "selected" : "")>@translator.Translate(userLanguage, "License Plate")</!option>

wwwroot/js/shared.js

@@ -336,6 +336,16 @@ function isValidMoney(input) {
     const usRegex = /^\$?(?=\(.*\)|[^()]*$)\(?\d{1,3}((,\d{3}){0,8}|(\d{3}){0,8})(\.\d{1,3}?)?\)?$/;
     return (euRegex.test(input) || usRegex.test(input));
 }
+function initExtraFieldDatePicker(fieldName) {
+    let inputField = $(`#${fieldName}`);
+    if (inputField.length > 0) {
+        inputField.datepicker({
+            format: getShortDatePattern().pattern,
+            autoclose: true,
+            weekStart: getGlobalConfig().firstDayOfWeek
+        });
+    }
+}
 function initDatePicker(input, futureOnly) {
     if (futureOnly) {
         input.datepicker({
@@ -702,7 +712,7 @@ function getAndValidateExtraFields() {
     var extraFieldsVisible = $(".modal.fade.show").find(".extra-field");
     extraFieldsVisible.map((index, elem) => {
         var extraFieldName = $(elem).children("label").text();
-        var extraFieldInput = $(elem).children("input");
+        var extraFieldInput = $(elem).find("input");
         var extraFieldValue = extraFieldInput.val();
         var extraFieldIsRequired = extraFieldInput.hasClass('extra-field-required');
         if (extraFieldIsRequired && extraFieldValue.trim() == '') {
@@ -1542,3 +1552,28 @@ function callBackOnEnter(event, callBack) {
         callBack();
     }
 }
+
+function populateLocationField(fieldName) {
+    let populateLocationFieldCallBack = (position) => {
+        $(`#${fieldName}`).val(`${position.coords.latitude},${position.coords.longitude}`)
+    };
+    let populateLocationFieldErrorCallBack = (errMsg) => {
+        if (errMsg && errMsg.code) {
+            switch (errMsg.code) {
+                case 1:
+                    errorToast(errMsg.message);
+                    break;
+                case 2:
+                    errorToast("Location Unavailable");
+                    break;
+            }
+        }
+    };
+    if (navigator.geolocation) {
+        try {
+            navigator.geolocation.getCurrentPosition(populateLocationFieldCallBack, populateLocationFieldErrorCallBack, { maximumAge: 1000, timeout: 4000, enableHighAccuracy: true });
+        } catch (err) {
+            errorToast('Location Services not Enabled');
+        }
+    }
+}