Merge branch 'main' into Hargata/update.docs

Helper/ConfigHelper.cs

@@ -197,6 +197,7 @@ namespace CarCareTracker.Helper
                 EnableShopSupplies = bool.Parse(_config[nameof(UserConfig.EnableShopSupplies)]),
                 EnableExtraFieldColumns = bool.Parse(_config[nameof(UserConfig.EnableExtraFieldColumns)]),
                 VisibleTabs = _config.GetSection(nameof(UserConfig.VisibleTabs)).Get<List<ImportMode>>(),
+                TabOrder = _config.GetSection(nameof(UserConfig.TabOrder)).Get<List<ImportMode>>(),
                 UserColumnPreferences = _config.GetSection(nameof(UserConfig.UserColumnPreferences)).Get<List<UserColumnPreference>>() ?? new List<UserColumnPreference>(),
                 ReminderUrgencyConfig = _config.GetSection(nameof(UserConfig.ReminderUrgencyConfig)).Get<ReminderUrgencyConfig>() ?? new ReminderUrgencyConfig(),
                 DefaultTab = (ImportMode)int.Parse(_config[nameof(UserConfig.DefaultTab)]),

Models/UserConfig.cs

@@ -35,7 +35,21 @@
             ImportMode.UpgradeRecord, 
             ImportMode.TaxRecord, 
             ImportMode.ReminderRecord, 
-            ImportMode.NoteRecord};
+            ImportMode.NoteRecord
+        };
         public ImportMode DefaultTab { get; set; } = ImportMode.Dashboard;
+        public List<ImportMode> TabOrder { get; set; } = new List<ImportMode>() {
+            ImportMode.Dashboard,
+            ImportMode.PlanRecord,
+            ImportMode.OdometerRecord,
+            ImportMode.ServiceRecord,
+            ImportMode.RepairRecord,
+            ImportMode.UpgradeRecord,
+            ImportMode.GasRecord,
+            ImportMode.SupplyRecord,
+            ImportMode.TaxRecord,
+            ImportMode.NoteRecord,
+            ImportMode.ReminderRecord
+        };
     }
 }

Views/Home/_Settings.cshtml

@@ -91,7 +91,14 @@
     <div class="col-12 col-md-6">
         <div class="row" id="visibleTabs">
             <div class="col-12">
-                <span class="lead">@translator.Translate(userLanguage, "Visible Tabs")</span>
+                <div class="row">
+                    <div class="col-11">
+                        <span class="lead">@translator.Translate(userLanguage, "Visible Tabs")</span>
+                    </div>
+                    <div class="col-1">
+                        <button onclick="showTabReorderModal()" class="btn text-secondary btn-sm"><i class="bi bi-arrow-down-up"></i></button>
+                    </div>
+                </div>
             </div>
             <div class="col-12 col-md-6">
                 <ul class="list-group">
@@ -196,11 +203,11 @@
                     <span class="lead">@translator.Translate(userLanguage, "Backups")</span>
                     <div class="row">
                         <div class="col-6 d-grid">
-                            <button onclick="makeBackup()" class="btn btn-primary btn-md">@translator.Translate(userLanguage, "Create")</button>
+                            <button onclick="makeBackup()" class="btn btn-primary btn-md text-truncate">@translator.Translate(userLanguage, "Create")</button>
                         </div>
                         <div class="col-6 d-grid">
                             <input onChange="restoreBackup(this)" type="file" accept=".zip" class="d-none" id="inputBackup">
-                            <button onclick="openRestoreBackup()" class="btn btn-secondary btn-md">@translator.Translate(userLanguage, "Restore")</button>
+                            <button onclick="openRestoreBackup()" class="btn btn-secondary btn-md text-truncate">@translator.Translate(userLanguage, "Restore")</button>
                         </div>
                     </div>
                 </div>
@@ -210,7 +217,7 @@
                         <div class="col-6 d-grid">
                             <input onChange="uploadLanguage(this)" type="file" accept=".json" class="d-none" id="inputLanguage">
                             <div class="btn-group">
-                                <button onclick="openUploadLanguage()" class="btn btn-primary btn-md">@translator.Translate(userLanguage, "Upload")</button>
+                                <button onclick="openUploadLanguage()" class="btn btn-primary btn-md text-truncate"><i class="bi bi-upload"></i><span class="ms-2 d-sm-inline d-md-none d-xl-inline">@translator.Translate(userLanguage, "Upload")</span></button>
                                 <button type="button" class="btn btn-md btn-primary btn-md dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                     <span class="visually-hidden">Toggle Dropdown</span>
                                 </button>
@@ -221,25 +228,25 @@
                             
                         </div>
                         <div class="col-6 d-grid">
-                            <button onclick="deleteLanguage()" @(Model.UserConfig.UserLanguage == "en_US" ? "disabled" : "") class="btn btn-danger btn-md">@translator.Translate(userLanguage, "Delete")</button>
+                            <button onclick="deleteLanguage()" @(Model.UserConfig.UserLanguage == "en_US" ? "disabled" : "") class="btn btn-danger btn-md text-truncate"><i class="bi bi-trash"></i><span class="ms-2 d-sm-inline d-md-none d-xl-inline">@translator.Translate(userLanguage, "Delete")</span></button>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row">
                 <div class="col-12 col-md-6">
-                    <span class="lead">@translator.Translate(userLanguage, "Server-wide Settings")</span>
+                    <span class="lead text-wrap">@translator.Translate(userLanguage, "Server-wide Settings")</span>
                     <div class="row">
                         <div class="col-6 d-grid">
-                            <button onclick="showExtraFieldModal()" class="btn btn-primary btn-md">@translator.Translate(userLanguage, "Extra Fields")</button>
+                            <button onclick="showExtraFieldModal()" class="btn btn-primary btn-md text-truncate">@translator.Translate(userLanguage, "Extra Fields")</button>
                         </div>
                         <div class="col-6 d-grid">
-                            <button onclick="showReminderUrgencyThresholdModal()" class="btn btn-primary btn-md">@translator.Translate(userLanguage, "Reminders")</button>
+                            <button onclick="showReminderUrgencyThresholdModal()" class="btn btn-primary btn-md text-truncate">@translator.Translate(userLanguage, "Reminders")</button>
                         </div>
                     </div>
                 </div>
                 <div class="col-12 col-md-6">
-                    <span class="lead">@translator.Translate(userLanguage, "Default Reminder Email")</span>
+                    <span class="lead text-wrap">@translator.Translate(userLanguage, "Default Reminder Email")</span>
                     <div class="row">
                         <div class="col-12 d-grid">
                             <div class="input-group">
@@ -323,6 +330,40 @@
         </div>
     </div>
 </div>
+<div class="modal fade" data-bs-focus="false" id="tabReorderModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content" id="tabReorderModalContent">
+            <div class="modal-header">
+                <h5 class="modal-title" id="translationEditorModalLabel">@translator.Translate(userLanguage, "Reorder Tabs")</h5>
+                <button type="button" class="btn-close" onclick="hideTabReorderModal()" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-12">
+                        <ul class="list-group lubelog-tab-groups">
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.Dashboard)" draggable="true" data-tab="@ImportMode.Dashboard">@translator.Translate(userLanguage, "Dashboard")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.PlanRecord)" draggable="true" data-tab="@ImportMode.PlanRecord">@translator.Translate(userLanguage, "Planner")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.OdometerRecord)" draggable="true" data-tab="@ImportMode.OdometerRecord">@translator.Translate(userLanguage, "Odometer")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.ServiceRecord)" draggable="true" data-tab="@ImportMode.ServiceRecord">@translator.Translate(userLanguage, "Service Records")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.RepairRecord)" draggable="true" data-tab="@ImportMode.RepairRecord">@translator.Translate(userLanguage, "Repairs")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.UpgradeRecord)" draggable="true" data-tab="@ImportMode.UpgradeRecord">@translator.Translate(userLanguage, "Upgrades")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.GasRecord)" draggable="true" data-tab="@ImportMode.GasRecord">@translator.Translate(userLanguage, "Fuel")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.SupplyRecord)" draggable="true" data-tab="@ImportMode.SupplyRecord">@translator.Translate(userLanguage, "Supplies")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.TaxRecord)" draggable="true" data-tab="@ImportMode.TaxRecord">@translator.Translate(userLanguage, "Taxes")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.NoteRecord)" draggable="true" data-tab="@ImportMode.NoteRecord">@translator.Translate(userLanguage, "Notes")</li>
+                            <li class="list-group-item" style="order: @Model.UserConfig.TabOrder.FindIndex(x=>x == ImportMode.ReminderRecord)" draggable="true" data-tab="@ImportMode.ReminderRecord">@translator.Translate(userLanguage, "Reminder")</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger me-auto" onclick="resetTabOrder()">@translator.Translate(userLanguage, "Reset Tab Order")</button>
+                <button type="button" class="btn btn-secondary" onclick="hideTabReorderModal()">@translator.Translate(userLanguage, "Cancel")</button>
+                <button type="button" class="btn btn-primary" onclick="updateSettings()">@translator.Translate(userLanguage, "Save Tab Order")</button>
+            </div>
+        </div>
+    </div>
+</div>
 <script>
     function showReminderUrgencyThresholdModal(){
         Swal.fire({

Views/Vehicle/Index.cshtml

@@ -27,43 +27,43 @@
 }
 <div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
     <ul class="nav navbar-nav" id="vehicleTab" role="tablist">
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: -2">
             <button class="nav-link" onclick="returnToGarage()"><span class="display-3 ms-2"><i class="bi bi-arrow-left-square me-2"></i>@translator.Translate(userLanguage,"Garage")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: -1">
             <button class="nav-link" onclick="editVehicle(@Model.Id)"><span class="display-3 ms-2"><i class="bi bi-pencil-square me-2"></i>@translator.Translate(userLanguage, "Edit Vehicle")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.Dashboard)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.Dashboard)" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-file-bar-graph me-2"></i>@translator.Translate(userLanguage, "Dashboard")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.PlanRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.PlanRecord)" id="plan-tab" data-bs-toggle="tab" data-bs-target="#plan-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-bar-chart-steps me-2"></i>@translator.Translate(userLanguage, "Planner")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.OdometerRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.OdometerRecord)" id="odometer-tab" data-bs-toggle="tab" data-bs-target="#odometer-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-speedometer me-2"></i>@translator.Translate(userLanguage, "Odometer")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.ServiceRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.ServiceRecord)" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><span class="display-3 ms-2"><i class="bi bi-card-checklist me-2"></i>@translator.Translate(userLanguage, "Service Records")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.RepairRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.RepairRecord)" id="accident-tab" data-bs-toggle="tab" data-bs-target="#accident-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-exclamation-octagon me-2"></i>@translator.Translate(userLanguage,"Repairs")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.UpgradeRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.UpgradeRecord)" id="upgrade-tab" data-bs-toggle="tab" data-bs-target="#upgrade-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-wrench-adjustable me-2"></i>@translator.Translate(userLanguage, "Upgrades")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.GasRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.GasRecord)" id="gas-tab" data-bs-toggle="tab" data-bs-target="#gas-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-fuel-pump me-2"></i>@translator.Translate(userLanguage, "Fuel")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.SupplyRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.SupplyRecord)" id="supply-tab" data-bs-toggle="tab" data-bs-target="#supply-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-shop me-2"></i>@translator.Translate(userLanguage, "Supplies")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.TaxRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.TaxRecord)" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-currency-dollar me-2"></i>@translator.Translate(userLanguage, "Taxes")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.NoteRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.NoteRecord)" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-journal-bookmark me-2"></i>@translator.Translate(userLanguage, "Notes")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.ReminderRecord)">
             <button class="nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.ReminderRecord)" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><div class="reminderBellDiv" style="display:inline-flex;"><i class="reminderBell bi bi-bell me-2"></i></div>@translator.Translate(userLanguage, "Reminders")</span></button>
         </li>
     </ul>
@@ -81,37 +81,37 @@
     </div>
     <hr />
     <ul class="nav nav-tabs lubelogger-tab" id="vehicleTab" role="tablist">
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.Dashboard)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.Dashboard)" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-file-bar-graph"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Dashboard")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.PlanRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.PlanRecord)" id="plan-tab" data-bs-toggle="tab" data-bs-target="#plan-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-bar-chart-steps"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Planner")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.OdometerRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.OdometerRecord)" id="odometer-tab" data-bs-toggle="tab" data-bs-target="#odometer-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-speedometer"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Odometer")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.ServiceRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.ServiceRecord)" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><i class="bi bi-card-checklist"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Service Records")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.RepairRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.RepairRecord)" id="accident-tab" data-bs-toggle="tab" data-bs-target="#accident-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-exclamation-octagon"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Repairs")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.UpgradeRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.UpgradeRecord)" id="upgrade-tab" data-bs-toggle="tab" data-bs-target="#upgrade-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-wrench-adjustable"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Upgrades")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.GasRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.GasRecord)" id="gas-tab" data-bs-toggle="tab" data-bs-target="#gas-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-fuel-pump"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Fuel")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.SupplyRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.SupplyRecord)" id="supply-tab" data-bs-toggle="tab" data-bs-target="#supply-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-shop"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Supplies")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.TaxRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.TaxRecord)" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-currency-dollar"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Taxes")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.NoteRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.NoteRecord)" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-journal-bookmark"></i><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Notes")</span></button>
         </li>
-        <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" style="order: @userConfig.TabOrder.FindIndex(x=>x == ImportMode.ReminderRecord)">
             <button class="nav-link resizable-nav-link @StaticHelper.DefaultActiveTab(userConfig, ImportMode.ReminderRecord)" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><div class="reminderBellDiv" style="display:inline-flex;"><i class="reminderBell bi bi-bell"></i></div><span class="ms-2 d-sm-none d-md-inline">@translator.Translate(userLanguage, "Reminders")</span></button>
         </li>
     </ul>

appsettings.json

@@ -28,8 +28,9 @@
   "PreferredGasUnit": "",
   "UserLanguage": "en_US",
   "VisibleTabs": [ 0, 1, 4, 2, 3, 6, 5, 8 ],
+  "TabOrder": [ 8, 9, 10, 0, 1, 4, 2, 7, 3, 6, 5 ],
   "DefaultTab": 8,
   "UserNameHash": "",
   "UserPasswordHash": "",
-  "DefaultReminderEmail":  ""
+  "DefaultReminderEmail": ""
 }

docs/screenshots.md

@@ -1,42 +1,52 @@
 ## Garage
-![image](https://github.com/hargata/lubelog/assets/155338622/c15a4efb-89d5-4eca-bccd-f148bf063f80)
+![image](https://github.com/user-attachments/assets/b25835c8-3393-4cad-b2a7-7d2797ab4c9d)
 
 ## Planner(Kanban Board)
-![image](https://github.com/hargata/lubelog/assets/155338622/6775d553-1545-4655-b9f9-259618af283b)
+![image](https://github.com/user-attachments/assets/76f49bac-c33b-4853-84ca-68fd108cda5f)
 
 ## Dashboard
-![image](https://github.com/hargata/lubelog/assets/155338622/970f8e8e-bef9-4de2-b43c-dfa1d43c2d87)
+![image](https://github.com/user-attachments/assets/4b8110d3-f3fd-4ac7-b0ba-77aa9d81f110)
 
 ## Track Service Records / Repairs / Upgrades
-![image](https://github.com/hargata/lubelog/assets/155338622/26c6fd47-66b5-4135-8cee-e6c89bc671be)
+![image](https://github.com/user-attachments/assets/eaaff505-3ffe-4c12-9a17-1537b3c48886)
 
 ## Attach Files to Records (i.e.: Receipts, Invoices, etc)
-![image](https://github.com/hargata/lubelog/assets/155338622/1c52c3a3-f750-4327-ae91-0c345f305e52)
+![image](https://github.com/user-attachments/assets/f01a4722-ad7a-4d10-872e-eff65b54d2d2)
 
 ## Import/Export from/to CSV (Supports Imports from Fuelly)
-![image](https://github.com/hargata/lubelog/assets/155338622/d5fbcade-17fd-4b46-95eb-2ecafbbf6614)
+![image](https://github.com/user-attachments/assets/816120e9-72da-436b-862b-1478c91bd299)
 
 ## Track Gas Records(Supports MPG, L/100KM)
-### Even supports British use-cases - Purchase Gas in Liters and Calculates in Miles per UK Gallons
+
-![image](https://github.com/hargata/lubelog/assets/155338622/2bb61362-93b3-45c1-a02e-34b65ed883c0)
+Supports
+- MPG
+- L/100KM and KM/L
+- British use-case: Purchase gas in liters and calculate fuel economy in miles per UK Gallon(imp gal)
+  
+![image](https://github.com/user-attachments/assets/8fbdf60f-18c6-4ead-9e28-6b92c64dbb1a)
 
 ## Reminders
-![image](https://github.com/hargata/lubelog/assets/155338622/51b224e2-eaf3-4895-85af-8264a944ff99)
+![image](https://github.com/user-attachments/assets/ca104765-2482-4bea-976c-8d333832ffe7)
 
 ## Set Reminders based on Odometer, Date, or whichever comes first
-![image](https://github.com/hargata/lubelog/assets/155338622/ab326041-9d65-4bd9-9543-1549be80a88b)
+![image](https://github.com/user-attachments/assets/0dd9e668-f445-403f-80f4-9a89aefe8295)
 
 ## Settings
-![image](https://github.com/hargata/lubelog/assets/155338622/c20550ec-c195-40c0-a857-3cbb5479bf78)
+![image](https://github.com/user-attachments/assets/b3a55635-8279-43c7-92a5-3bc555b6a2c7)
 
 ## Admin Panel (Generate Tokens for new users to sign up)
-![image](https://github.com/hargata/lubelog/assets/155338622/60cd0dc1-3444-4917-aaf9-aa64a5e62202)
+![image](https://github.com/user-attachments/assets/51ace6fd-1056-4c09-86c5-221be7e2be10)
+
+![image](https://github.com/user-attachments/assets/4b9998cf-731c-4860-8a0d-7878f0453110)
 
 ## Token Based Registration for New Users
 ![image](https://github.com/hargata/lubelog/assets/155338622/261a143f-cac0-4961-bcd0-bdb61be6990a)
 
 ## Track Supplies and Parts purchased for your vehicle
-![image](https://github.com/hargata/lubelog/assets/155338622/fa380cd1-209f-4d50-a001-cda9531c42ef)
+![image](https://github.com/user-attachments/assets/b393baeb-bc93-4f0f-86f4-e049671c9370)
+
+## Supports Custom Fields
+![image](https://github.com/user-attachments/assets/f74b63ff-b87d-456c-97cf-078da5736359)
 
 ## Add Collaborators (Multiple People can Add/Edit Records for same Vehicle)
 ![image](https://github.com/hargata/lubelog/assets/155338622/0ec57dc4-c552-48b9-9a8e-4d89b691aade)

wwwroot/js/settings.js

@@ -41,6 +41,7 @@ function updateSettings() {
     if (!visibleTabs.includes(defaultTab)) {
         defaultTab = "Dashboard"; //default to dashboard.
     }
+    var tabOrder = getTabOrder();
     //Root User Only Settings that aren't rendered:
     var defaultReminderEmail = $("#inputDefaultEmail").length > 0 ? $("#inputDefaultEmail").val() : "";
     var disableRegistration = $("#disableRegistration").length > 0 ? $("#disableRegistration").is(":checked") : false;
@@ -66,6 +67,7 @@ function updateSettings() {
         userLanguage: $("#defaultLanguage").val(),
         visibleTabs: visibleTabs,
         defaultTab: defaultTab,
+        tabOrder: tabOrder,
         disableRegistration: disableRegistration,
         defaultReminderEmail: defaultReminderEmail,
         enableRootUserOIDC: enableRootUserOIDC
@@ -266,4 +268,86 @@ function downloadAllTranslations() {
             errorToast(data.message);
         }
     })
+}
+//tabs reorder
+function showTabReorderModal() {
+    //reorder the list items based on the CSS attribute
+    var sortedOrderedTabs = $(".lubelog-tab-groups > li").toArray().sort((a, b) => {
+        var currentVal = $(a).css("order");
+        var nextVal = $(b).css("order");
+        return currentVal - nextVal;
+    });
+    $(".lubelog-tab-groups").html(sortedOrderedTabs);
+    $("#tabReorderModal").modal('show');
+    bindTabReorderEvents();
+}
+function hideTabReorderModal() {
+    $("#tabReorderModal").modal('hide');
+}
+var tabDraggedToReorder = undefined;
+function handleTabDragStart(e) {
+    tabDraggedToReorder = $(e.target).closest('.list-group-item');
+    //clear out order attribute.
+    $(".lubelog-tab-groups > li").map((index, elem) => {
+        $(elem).css('order', 0);
+    })
+}
+function handleTabDragOver(e) {
+    if (tabDraggedToReorder == undefined || tabDraggedToReorder == "") {
+        return;
+    }
+    var potentialDropTarget = $(e.target).closest('.list-group-item').attr("data-tab");
+    var draggedTarget = tabDraggedToReorder.closest('.list-group-item').attr("data-tab");
+    if (draggedTarget != potentialDropTarget) {
+        var targetObj = $(e.target).closest('.list-group-item');
+        var draggedOrder = tabDraggedToReorder.index();
+        var targetOrder = targetObj.index();
+        if (draggedOrder < targetOrder) {
+            tabDraggedToReorder.insertAfter(targetObj);
+        } else {
+            tabDraggedToReorder.insertBefore(targetObj);
+        }
+    }
+    else {
+        event.preventDefault();
+    }
+}
+function bindTabReorderEvents() {
+    $(".lubelog-tab-groups > li").on('dragstart', event => {
+        handleTabDragStart(event);
+    });
+    $(".lubelog-tab-groups > li").on('dragover', event => {
+        handleTabDragOver(event);
+    });
+    $(".lubelog-tab-groups > li").on('dragend', event => {
+        //reset order attribute
+        $(".lubelog-tab-groups > li").map((index, elem) => {
+            $(elem).css('order', $(elem).index());
+        })
+    });
+}
+function getTabOrder() {
+    var tabOrderArray = [];
+    //check if any tabs have -1 order
+    var resetTabs = $(".lubelog-tab-groups > li").filter((index, elem) => $(elem).css('order') == -1).length > 0;
+    if (resetTabs) {
+        return tabOrderArray; //return empty array.
+    }
+    var sortedOrderedTabs = $(".lubelog-tab-groups > li").toArray().sort((a, b) => {
+        var currentVal = $(a).css("order");
+        var nextVal = $(b).css("order");
+        return currentVal - nextVal;
+    });
+    sortedOrderedTabs.map(elem => {
+        var elemName = $(elem).attr("data-tab");
+        tabOrderArray.push(elemName);
+    });
+    return tabOrderArray;
+}
+function resetTabOrder() {
+    //set all orders to -1
+    $(".lubelog-tab-groups > li").map((index, elem) => {
+        $(elem).css('order', -1);
+    })
+    updateSettings();
 }