mirror of
https://github.com/hargata/lubelog.git
synced 2025-12-10 00:46:08 -06:00
Merge pull request #1079 from hargata/Hargata/nav.overhaul
Add navigatable tabs.
This commit is contained in:
Hargata Softworks
GitHub
commit
92b5840073
@ -55,9 +55,9 @@ namespace CarCareTracker.Controllers
|
||||
{
|
||||
return int.Parse(User.FindFirstValue(ClaimTypes.NameIdentifier));
|
||||
}
|
||||
public IActionResult Index(string tab = "garage")
|
||||
public IActionResult Index()
|
||||
{
|
||||
return View(model: tab);
|
||||
return View();
|
||||
}
|
||||
[Route("/kiosk")]
|
||||
public IActionResult Kiosk(string exclusions, KioskMode kioskMode = KioskMode.Vehicle)
|
||||
|
||||
@ -123,27 +123,13 @@ namespace CarCareTracker.Helper
|
||||
}
|
||||
public static string DefaultActiveTab(UserConfig userConfig, ImportMode tab)
|
||||
{
|
||||
var defaultTab = userConfig.DefaultTab;
|
||||
var visibleTabs = userConfig.VisibleTabs;
|
||||
if (visibleTabs.Contains(tab) && tab == defaultTab)
|
||||
{
|
||||
return "active";
|
||||
}
|
||||
else if (!visibleTabs.Contains(tab))
|
||||
if (!visibleTabs.Contains(tab))
|
||||
{
|
||||
return "d-none";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
public static string DefaultActiveTabContent(UserConfig userConfig, ImportMode tab)
|
||||
{
|
||||
var defaultTab = userConfig.DefaultTab;
|
||||
if (tab == defaultTab)
|
||||
{
|
||||
return "show active";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
public static string DefaultTabSelected(UserConfig userConfig, ImportMode tab)
|
||||
{
|
||||
var defaultTab = userConfig.DefaultTab;
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
var userConfig = config.GetUserConfig(User);
|
||||
var userLanguage = userConfig.UserLanguage;
|
||||
}
|
||||
@model string
|
||||
@{
|
||||
ViewData["Title"] = "Garage";
|
||||
}
|
||||
@ -25,7 +24,7 @@
|
||||
</div>
|
||||
<ul class="nav nav-tabs lubelogger-tab flex-grow-1" id="homeTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link resizable-nav-link @(Model == "garage" ? "active" : "")" oncontextmenu="sortGarage(this)" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front"></i><span class="ms-2">@translator.Translate(userLanguage, "Garage")</span></button>
|
||||
<button class="nav-link resizable-nav-link" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front"></i><span class="ms-2">@translator.Translate(userLanguage, "Garage")</span></button>
|
||||
</li>
|
||||
@if (config.GetServerEnableShopSupplies())
|
||||
{
|
||||
@ -45,7 +44,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-auto" role="presentation">
|
||||
<button class="nav-link resizable-nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><i class="bi bi-gear"></i><span class="ms-2">@translator.Translate(userLanguage, "Settings")</span></button>
|
||||
<button class="nav-link resizable-nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><i class="bi bi-gear"></i><span class="ms-2">@translator.Translate(userLanguage, "Settings")</span></button>
|
||||
</li>
|
||||
@if (User.IsInRole("CookieAuth") || User.IsInRole("APIAuth"))
|
||||
{
|
||||
@ -88,7 +87,7 @@
|
||||
<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
|
||||
<ul class="navbar-nav" id="homeTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link user-select-none @(Model == "garage" ? "active" : "")" ontouchstart="detectLongTouch(this)" ontouchend="detectTouchEndPremature(this)" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>@translator.Translate(userLanguage,"Garage")</span></button>
|
||||
<button class="nav-link" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>@translator.Translate(userLanguage,"Garage")</span></button>
|
||||
</li>
|
||||
@if(config.GetServerEnableShopSupplies())
|
||||
{
|
||||
@ -102,7 +101,7 @@
|
||||
</li>
|
||||
}
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>@translator.Translate(userLanguage,"Settings")</span></button>
|
||||
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>@translator.Translate(userLanguage,"Settings")</span></button>
|
||||
</li>
|
||||
@if (User.IsInRole("CookieAuth") || User.IsInRole("APIAuth"))
|
||||
{
|
||||
@ -131,16 +130,13 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="tab-content" id="homeTab">
|
||||
<div class="tab-pane fade @(Model == "garage" ? "show active" : "")" id="garage-tab-pane" role="tabpanel" tabindex="0">
|
||||
<div id="garageContainer">
|
||||
|
||||
</div>
|
||||
<div class="tab-pane fade" id="garage-tab-pane" role="tabpanel" tabindex="0">
|
||||
</div>
|
||||
<div class="tab-pane fade" id="supply-tab-pane" role="tabpanel" tabindex="0">
|
||||
</div>
|
||||
<div class="tab-pane fade" id="calendar-tab-pane" role="tabpanel" tabindex="0">
|
||||
</div>
|
||||
<div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
|
||||
<div class="tab-pane fade" id="settings-tab-pane" role="tabpanel" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,7 +168,8 @@
|
||||
<div class="stickerPrintContainer hideOnPrint">
|
||||
</div>
|
||||
<script>
|
||||
loadGarage();
|
||||
bindTabEvent();
|
||||
loadTabFromURL();
|
||||
bindWindowResize();
|
||||
checkNavBarOverflow();
|
||||
</script>
|
||||
@ -10,6 +10,7 @@
|
||||
var searchExist = userConfig.ShowSearch && Model.Count() > 1;
|
||||
var renderTopRow = tagsExist || searchExist;
|
||||
}
|
||||
<div id="garageContainer">
|
||||
@if (renderTopRow)
|
||||
{
|
||||
<div class='row'>
|
||||
@ -102,3 +103,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,17 +136,17 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="tab-content" id="vehicleTabContent">
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.ServiceRecord)" id="servicerecord-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.GasRecord)" id="gas-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.TaxRecord)" id="tax-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.NoteRecord)" id="notes-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.RepairRecord)" id="accident-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.ReminderRecord)" id="reminder-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.Dashboard)" id="report-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.UpgradeRecord)" id="upgrade-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.SupplyRecord)" id="supply-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.PlanRecord)" id="plan-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade @StaticHelper.DefaultActiveTabContent(userConfig, ImportMode.OdometerRecord)" id="odometer-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="servicerecord-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="gas-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="tax-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="notes-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="accident-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="reminder-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="report-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="upgrade-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="supply-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="plan-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
<div class="tab-pane fade" id="odometer-tab-pane" role="tabpanel" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" data-bs-focus="false" id="editVehicleModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
|
||||
@ -16,9 +16,7 @@ function hideAddVehicleModal() {
|
||||
//refreshable function to reload Garage PartialView
|
||||
function loadGarage() {
|
||||
$.get('/Home/Garage', function (data) {
|
||||
$("#garageContainer").html(data);
|
||||
loadSettings();
|
||||
bindTabEvent();
|
||||
$("#garage-tab-pane").html(data);
|
||||
});
|
||||
}
|
||||
function loadSettings() {
|
||||
@ -40,6 +38,12 @@ function GetVehicleId() {
|
||||
function bindTabEvent() {
|
||||
$('button[data-bs-toggle="tab"]').on('show.bs.tab', function (e) {
|
||||
switch (e.target.id) {
|
||||
case "garage-tab":
|
||||
loadGarage();
|
||||
break;
|
||||
case "settings-tab":
|
||||
loadSettings();
|
||||
break;
|
||||
case "supply-tab":
|
||||
getVehicleSupplyRecords();
|
||||
break;
|
||||
@ -47,7 +51,16 @@ function bindTabEvent() {
|
||||
getVehicleCalendarEvents();
|
||||
break;
|
||||
}
|
||||
$(`.lubelogger-tab #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.target.id}`).addClass('active');
|
||||
if (e.relatedTarget != null) {
|
||||
switch (e.relatedTarget.id) { //clear out previous tabs with grids in them to help with performance
|
||||
case "garage-tab":
|
||||
$("#garage-tab-pane").html("");
|
||||
break;
|
||||
case "settings-tab":
|
||||
$("#settings-tab-pane").html("");
|
||||
break;
|
||||
case "supply-tab":
|
||||
$("#supply-tab-pane").html("");
|
||||
break;
|
||||
@ -55,10 +68,10 @@ function bindTabEvent() {
|
||||
$("#calendar-tab-pane").html("");
|
||||
break;
|
||||
}
|
||||
$(`.lubelogger-tab #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-tab #${e.relatedTarget.id}`).removeClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.relatedTarget.id}`).removeClass('active');
|
||||
}
|
||||
setBrowserHistory('tab', getTabNameForURL(e.target.id));
|
||||
});
|
||||
}
|
||||
function getVehicleCalendarEvents() {
|
||||
@ -483,3 +496,7 @@ function generateTokenForUser() {
|
||||
}
|
||||
});
|
||||
}
|
||||
function loadTabFromURL() {
|
||||
let tabFromURL = getTabNameFromURL('garage');
|
||||
waitForElement(`#${tabFromURL}`, () => { $(`#${tabFromURL}`).tab('show'); }, '');
|
||||
}
|
||||
@ -1739,3 +1739,21 @@ function openAttachmentPreview(fileName, fileLocation) {
|
||||
function closeAttachmentPreview() {
|
||||
$('#attachmentPreviewModal').modal('hide');
|
||||
}
|
||||
function setBrowserHistory(param, val) {
|
||||
let currentParams = new URLSearchParams(window.location.search);
|
||||
currentParams.set(param, val);
|
||||
let updatedURL = `${window.location.origin}${window.location.pathname}?${currentParams.toString()}`;
|
||||
window.history.pushState({}, '', updatedURL);
|
||||
}
|
||||
function getTabNameForURL(tabName) {
|
||||
return tabName.toLowerCase().split('-')[0];
|
||||
}
|
||||
function getTabNameFromURL(defaultValue) {
|
||||
let currentParams = new URLSearchParams(window.location.search);
|
||||
let currentTab = currentParams.get('tab');
|
||||
if (currentTab == null || currentTab == undefined || currentTab == '') {
|
||||
return `${defaultValue.toLowerCase()}-tab`;
|
||||
} else {
|
||||
return `${currentTab}-tab`;
|
||||
}
|
||||
}
|
||||
@ -37,6 +37,9 @@
|
||||
getVehicleOdometerRecords(vehicleId);
|
||||
break;
|
||||
}
|
||||
$(`.lubelogger-tab #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.target.id}`).addClass('active');
|
||||
if (e.relatedTarget != null) {
|
||||
switch (e.relatedTarget.id) { //clear out previous tabs with grids in them to help with performance
|
||||
case "servicerecord-tab":
|
||||
$("#servicerecord-tab-pane").html("");
|
||||
@ -72,47 +75,12 @@
|
||||
$("#odometer-tab-pane").html("");
|
||||
break;
|
||||
}
|
||||
$(`.lubelogger-tab #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.target.id}`).addClass('active');
|
||||
$(`.lubelogger-tab #${e.relatedTarget.id}`).removeClass('active');
|
||||
$(`.lubelogger-mobile-nav #${e.relatedTarget.id}`).removeClass('active');
|
||||
});
|
||||
var defaultTab = GetDefaultTab().tab;
|
||||
switch (defaultTab) {
|
||||
case "ServiceRecord":
|
||||
getVehicleServiceRecords(vehicleId);
|
||||
break;
|
||||
case "NoteRecord":
|
||||
getVehicleNotes(vehicleId);
|
||||
break;
|
||||
case "GasRecord":
|
||||
getVehicleGasRecords(vehicleId);
|
||||
break;
|
||||
case "RepairRecord":
|
||||
getVehicleCollisionRecords(vehicleId);
|
||||
break;
|
||||
case "TaxRecord":
|
||||
getVehicleTaxRecords(vehicleId);
|
||||
break;
|
||||
case "Dashboard":
|
||||
getVehicleReport(vehicleId);
|
||||
break;
|
||||
case "ReminderRecord":
|
||||
getVehicleReminders(vehicleId);
|
||||
break;
|
||||
case "UpgradeRecord":
|
||||
getVehicleUpgradeRecords(vehicleId);
|
||||
break;
|
||||
case "SupplyRecord":
|
||||
getVehicleSupplyRecords(vehicleId);
|
||||
break;
|
||||
case "PlanRecord":
|
||||
getVehiclePlanRecords(vehicleId);
|
||||
break;
|
||||
case "OdometerRecord":
|
||||
getVehicleOdometerRecords(vehicleId);
|
||||
break;
|
||||
}
|
||||
setBrowserHistory('tab', getTabNameForURL(e.target.id));
|
||||
});
|
||||
loadDefaultTab();
|
||||
});
|
||||
|
||||
function getVehicleNotes(vehicleId) {
|
||||
@ -746,3 +714,47 @@ function loadGlobalSearchResult(recordId, recordType) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
function loadDefaultTab() {
|
||||
//check if tab param exists
|
||||
let userDefaultTab = getDefaultTabName();
|
||||
let tabFromURL = getTabNameFromURL(userDefaultTab);
|
||||
waitForElement(`#${tabFromURL}`, () => { $(`#${tabFromURL}`).tab('show'); }, '');
|
||||
}
|
||||
function getDefaultTabName() {
|
||||
var defaultTab = GetDefaultTab().tab;
|
||||
switch (defaultTab) {
|
||||
case "ServiceRecord":
|
||||
return 'servicerecord';
|
||||
break;
|
||||
case "NoteRecord":
|
||||
return 'notes';
|
||||
break;
|
||||
case "GasRecord":
|
||||
return 'gas';
|
||||
break;
|
||||
case "RepairRecord":
|
||||
return 'accident';
|
||||
break;
|
||||
case "TaxRecord":
|
||||
return 'tax';
|
||||
break;
|
||||
case "Dashboard":
|
||||
return 'report';
|
||||
break;
|
||||
case "ReminderRecord":
|
||||
return 'reminder';
|
||||
break;
|
||||
case "UpgradeRecord":
|
||||
return 'upgrade';
|
||||
break;
|
||||
case "SupplyRecord":
|
||||
return 'supply';
|
||||
break;
|
||||
case "PlanRecord":
|
||||
return 'plan';
|
||||
break;
|
||||
case "OdometerRecord":
|
||||
return 'odometer';
|
||||
break;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user