GPS methods to track vehicle odometer. experimental feature.

Views/Vehicle/_OdometerRecordModal.cshtml

@@ -11,7 +11,20 @@
     <h5 class="modal-title">@(isNew ? translator.Translate(userLanguage, "Add New Odometer Record") : translator.Translate(userLanguage, "Edit Odometer Record"))<small style="display:none; @(isNew ? "" : "cursor:pointer;")" class="cached-banner ms-2 text-warning" onclick='@(isNew ? "" : $"showEditOdometerRecordModal({Model.Id}, true)" )'>@translator.Translate(userLanguage, "Unsaved Changes")</small></h5>
     <button type="button" class="btn-close" onclick="hideAddOdometerRecordModal()" aria-label="Close"></button>
 </div>
-<div class="modal-body" onkeydown="handleEnter(this)">
+<div class="modal-body d-none trip-modal">
+    <div class="row">
+        <div class="col-12 d-flex justify-content-center">
+            <h1 class="display-6 text-body-secondary">@translator.Translate(userLanguage, "Current Odometer")</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 d-flex justify-content-center align-items-center">
+            <h1 class="display-1 trip-odometer"></h1>
+            <h1 class="display-6 trip-odometer-sub ms-2">0</h1>
+        </div>
+    </div>
+</div>
+<div class="modal-body odometer-modal" onkeydown="handleEnter(this)">
     <form>
         <div class="form-group">
             <div class="row">
@@ -40,6 +53,9 @@
                             <div class="input-group-text">
                                 <button type="button" class="btn btn-sm btn-primary zero-y-padding" onclick="getLastOdometerReadingAndIncrement('odometerRecordMileage')"><i class="bi bi-plus"></i></button>
                             </div>
+                            <div class="input-group-text">
+                                <button type="button" class="btn btn-sm btn-danger zero-y-padding" onclick="showTripModal()"><i class="bi bi-record-fill"></i></button>
+                            </div>
                         }
                     </div>
                     <label for="odometerRecordTag">@translator.Translate(userLanguage,"Tags(optional)")</label>
@@ -82,7 +98,13 @@
         </div>
     </form>
 </div>
-<div class="modal-footer">
+<div class="modal-footer d-none trip-modal">
+    <button type="button" class="btn btn-danger trip-start" onclick="startRecording()" style="margin-right:auto;">@translator.Translate(userLanguage, "Start Recording")</button>
+    <button type="button" class="btn btn-danger d-none trip-stop" onclick="stopRecording()" style="margin-right:auto;">@translator.Translate(userLanguage, "Stop Recording")</button>
+    <button type="button" class="btn btn-secondary" onclick="hideTripModal()">@translator.Translate(userLanguage, "Cancel")</button>
+    <button type="button" class="btn btn-primary d-none trip-save" onclick="saveRecordedOdometer()">@translator.Translate(userLanguage, "Save")</button>
+</div>
+<div class="modal-footer odometer-modal">
     @if (!isNew)
     {
         <button type="button" class="btn btn-danger" onclick="deleteOdometerRecord(@Model.Id)" style="margin-right:auto;">@translator.Translate(userLanguage,"Delete")</button>

wwwroot/js/odometerrecord.js

@@ -218,4 +218,101 @@ function toggleInitialOdometerEnabled() {
         $("#initialOdometerRecordMileage").prop("disabled", true);
     }
     
+}
+function showTripModal() {
+    $(".odometer-modal").addClass('d-none');
+    $(".trip-modal").removeClass('d-none');
+    //set current odometer
+    $(".trip-odometer").text($("#initialOdometerRecordMileage").val());
+}
+function hideTripModal() {
+    $(".odometer-modal").removeClass('d-none');
+    $(".trip-modal").addClass('d-none');
+}
+//Trip Recording Variables
+let tripTimer; //interval to check GPS Location every 5 seconds.
+let tripWakeLock; //wakelock handler to prevent screen from going to sleep.
+let tripLastPosition; //last coordinates to compare/calculate distance from.
+function startRecording() {
+    if (navigator.geolocation && navigator.wakeLock) {
+        try {
+            navigator.wakeLock.request('screen').then((wl) => {
+                tripWakeLock = wl;
+                tripTimer = setInterval(() => {
+                    navigator.geolocation.getCurrentPosition(recordPosition, stopRecording, { maximumAge: 10000, timeout: 5000, enableHighAccuracy: true });
+                }, 5000);
+                $(".trip-start").addClass('d-none');
+                $(".trip-stop").removeClass('d-none');
+            });
+        } catch (err) {
+            errorSwal('Location Services not Enabled');
+        }
+    } else {
+        errorSwal('Browser does not support GeoLocation and/or WakeLock API');
+    }
+}
+function recordPosition(position) {
+    var currentLat = position.coords.latitude;
+    var currentLong = position.coords.longitude;
+    if (tripLastPosition == undefined) {
+        tripLastPosition = {
+            latitude: currentLat,
+            longitude: currentLong
+        }
+    } else {
+        //calculate distance
+        var distanceTraveled = calculateDistance(tripLastPosition.latitude, tripLastPosition.longitude, currentLat, currentLong);
+        var recordedTotalOdometer = getRecordedOdometer();
+        if (distanceTraveled > 0.1) { //if greater than 0.1 mile or KM then it's significant
+            recordedTotalOdometer += distanceTraveled.toFixed(1);
+            var recordedOdometerString = recordedTotalOdometer.toString().split('.');
+            $(".trip-odometer").html(recordedOdometerString[0]);
+            if (recordedOdometerString.length > 2) {
+                $(".trip-odometer-sub").html(recordedOdometerString[1]);
+            }
+        }
+    }
+}
+function stopRecording() {
+    if (tripTimer != undefined) {
+        clearInterval(tripTimer);
+    }
+    if (tripWakeLock != undefined) {
+        tripWakeLock.release();
+    }
+    $(".trip-start").removeClass('d-none');
+    $(".trip-stop").addClass('d-none');
+    if (getRecordedOdometer() != $("#initialOdometerRecordMileage").val()) {
+        $(".trip-save").removeClass('d-none');
+    }
+}
+// Converts numeric degrees to radians
+function toRad(Value) {
+    return Value * Math.PI / 180;
+}
+//haversine
+function calculateDistance(lat1, lon1, lat2, lon2) {
+    var earthRadius = 6371; // km radius of the earth
+    var dLat = toRad(lat2 - lat1);
+    var dLon = toRad(lon2 - lon1);
+    var lat1 = toRad(lat1);
+    var lat2 = toRad(lat2);
+
+    var sinOne = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
+    var tanOne = 2 * Math.atan2(Math.sqrt(sinOne), Math.sqrt(1 - sinOne));
+    var calculatedDistance = earthRadius * tanOne; 
+    if (getGlobalConfig().useMPG) {
+        calculatedDistance *= 0.621; //convert to mile if needed.
+    }
+    return Math.abs(calculatedDistance);
+}
+function getRecordedOdometer() {
+    var recordedOdometer = parseInt($(".trip-odometer").html());
+    var recordedSubOdometer = parseInt($(".trip-odometer-sub").html());
+    return parseFloat(`${recordedOdometer}.${recordedSubOdometer}`);
+}
+function saveRecordedOdometer() {
+    $("#initialOdometerRecordMileage").val(getRecordedOdometer());
+    hideTripModal();
 }