142 lines
9.0 KiB
Plaintext
142 lines
9.0 KiB
Plaintext
@using CarCareTracker.Helper
|
|
@inject IConfigHelper config
|
|
@inject ITranslationHelper translator
|
|
@model OdometerRecordInput
|
|
@{
|
|
var isNew = Model.Id == 0;
|
|
var userConfig = config.GetUserConfig(User);
|
|
var userLanguage = userConfig.UserLanguage;
|
|
}
|
|
<div class="modal-header">
|
|
<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 d-none trip-modal">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="alert alert-warning alert-dismissable" role="alert">
|
|
@translator.Translate(userLanguage, "Experimental Feature - Your browser must be granted access to your precise location and support Geolocation and Wakelock API for this feature to function. Do not exit or minimize this app when recording. Verify all starting and ending odometers. Accuracy subject to hardware limitations.")
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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" onclick="toggleSubOdometer()"></h1>
|
|
<h1 class="display-6 trip-odometer-sub ms-2 d-none">0</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body odometer-modal" onkeydown="handleEnter(this)">
|
|
<form>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-6 col-12">
|
|
<input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
|
|
<label for="odometerRecordDate">@translator.Translate(userLanguage,"Date")</label>
|
|
<div class="input-group">
|
|
<input type="text" id="odometerRecordDate" class="form-control" placeholder="@translator.Translate(userLanguage,"Date recorded")" value="@Model.Date">
|
|
<span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
|
|
</div>
|
|
<label for="initialOdometerRecordMileage">@translator.Translate(userLanguage, "Initial Odometer")</label>
|
|
<div class="input-group">
|
|
<input type="number" inputmode="numeric" id="initialOdometerRecordMileage" @(Model.InitialMileage != default ? "disabled" : "") class="form-control" placeholder="@translator.Translate(userLanguage,"Initial Odometer reading")" value="@(Model.InitialMileage)">
|
|
@if (Model.InitialMileage != default)
|
|
{
|
|
<div class="input-group-text">
|
|
<button type="button" class="btn btn-sm btn-secondary zero-y-padding" onclick="toggleInitialOdometerEnabled()"><i class="bi bi-pencil"></i></button>
|
|
</div>
|
|
}
|
|
</div>
|
|
<label for="odometerRecordMileage">@translator.Translate(userLanguage,"Odometer")</label>
|
|
<div class="input-group">
|
|
<input type="number" inputmode="numeric" id="odometerRecordMileage" class="form-control" placeholder="@translator.Translate(userLanguage,"Odometer reading")" value="@(isNew ? "" : Model.Mileage)">
|
|
@if (isNew)
|
|
{
|
|
<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>
|
|
<select multiple class="form-select" id="odometerRecordTag">
|
|
@foreach (string tag in Model.Tags)
|
|
{
|
|
<!option value="@tag">@tag</!option>
|
|
}
|
|
</select>
|
|
@foreach (ExtraField field in 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>
|
|
<textarea id="odometerRecordNotes" class="form-control" rows="5">@Model.Notes</textarea>
|
|
@if (Model.Files.Any())
|
|
{
|
|
<div>
|
|
@await Html.PartialAsync("_UploadedFiles", Model.Files)
|
|
<label for="odometerRecordFiles">@translator.Translate(userLanguage,"Upload more documents")</label>
|
|
<input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept="@config.GetAllowedFileUploadExtensions()" class="form-control-file" id="odometerRecordFiles">
|
|
<br /><small class="text-body-secondary">@translator.Translate(userLanguage,"Max File Size: 28.6MB")</small>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<label for="odometerRecordFiles">@translator.Translate(userLanguage,"Upload documents(optional)")</label>
|
|
<input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept="@config.GetAllowedFileUploadExtensions()" class="form-control-file" id="odometerRecordFiles">
|
|
<br /><small class="text-body-secondary">@translator.Translate(userLanguage,"Max File Size: 28.6MB")</small>
|
|
}
|
|
<div id="filesPendingUpload"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<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>
|
|
}
|
|
<button type="button" class="btn btn-secondary" onclick="hideAddOdometerRecordModal()">@translator.Translate(userLanguage,"Cancel")</button>
|
|
@if (isNew)
|
|
{
|
|
<button type="button" class="btn btn-primary" onclick="saveOdometerRecordToVehicle()">@translator.Translate(userLanguage,"Add New Odometer Record")</button>
|
|
}
|
|
else if (!isNew)
|
|
{
|
|
<button type="button" class="btn btn-primary" onclick="saveOdometerRecordToVehicle(true)">@translator.Translate(userLanguage,"Edit Odometer Record")</button>
|
|
}
|
|
</div>
|
|
<script>
|
|
var uploadedFiles = [];
|
|
getUploadedFilesFromModel();
|
|
function getUploadedFilesFromModel() {
|
|
@foreach (UploadedFiles filesUploaded in Model.Files)
|
|
{
|
|
@:uploadedFiles.push({ name: "@filesUploaded.Name", location: "@filesUploaded.Location" });
|
|
}
|
|
}
|
|
function getOdometerRecordModelData() {
|
|
return { id: @Model.Id}
|
|
}
|
|
</script> |