Menu updates🧭

This commit is contained in:
Jokob-sk
2024-03-05 23:12:17 +11:00
parent b6c464be6d
commit 92801d6ddc
4 changed files with 122 additions and 79 deletions

View File

@@ -811,39 +811,40 @@ function updateApi()
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// handling smooth scrolling // handling smooth scrolling
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
function setupSmoothScrolling() { function setupSmoothScrolling() {
// Function to scroll to the element // Function to scroll to the element
function scrollToElement(id) { function scrollToElement(id) {
$('html, body').animate({ $('html, body').animate({
scrollTop: $("#" + id).offset().top - 50 scrollTop: $("#" + id).offset().top - 50
}, 500); }, 1000);
} }
// Scroll to the element when clicking on anchor links // Scroll to the element when clicking on anchor links
$('a[href*="#"]').on('click', function(event) { $('a[href*="#"]').on('click', function(event) {
var href = $(this).attr('href'); var href = $(this).attr('href');
if (href && href.includes('#')) { if (href && href.includes('#') && !$(this).is('[data-toggle="collapse"]')) {
var id = href.substring(href.indexOf("#") + 1); // Get the ID from the href attribute var id = href.substring(href.indexOf("#") + 1); // Get the ID from the href attribute
if ($("#" + id).length > 0) { if ($("#" + id).length > 0) {
event.preventDefault(); // Prevent default anchor behavior event.preventDefault(); // Prevent default anchor behavior
scrollToElement(id); // Scroll to the element scrollToElement(id); // Scroll to the element
} }
} }
}); });
// Check if there's an ID in the URL and scroll to it // Check if there's an ID in the URL and scroll to it
var url = window.location.href; var url = window.location.href;
if (url.includes("#")) { if (url.includes("#")) {
var idFromURL = url.substring(url.indexOf("#") + 1); var idFromURL = url.substring(url.indexOf("#") + 1);
if ($("#" + idFromURL).length > 0) { if ($("#" + idFromURL).length > 0) {
scrollToElement(idFromURL); scrollToElement(idFromURL);
} }
} }
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// initialize // initialize
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------

View File

@@ -859,51 +859,56 @@ function initializeSelectedColumns () {
// -------------------------------------------------------- // --------------------------------------------------------
function initializeTabs () { function initializeTabs () {
key = "activeMaintenanceTab" setTimeout(function() {
// default selection key = "activeMaintenanceTab"
selectedTab = "tab_Settings"
// the #target from the url // default selection
target = window.location.hash.substr(1) selectedTab = "tab_Settings"
// get only the part between #...? // the #target from the url
if(target.includes('?')) target = window.location.hash.substr(1)
{
target = target.split('?')[0]
}
console.log(target) // get only the part between #...?
if(target.includes('?'))
// update cookie if target specified
if(target != "")
{
setCache(key, target+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
}
// get the tab id from the cookie (already overriden by the target)
if(!emptyArr.includes(getCache(key)))
{
selectedTab = getCache(key);
}
// Activate panel
$('.nav-tabs a[id='+ selectedTab +']').tab('show');
// When changed save new current tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
setCache(key, $(e.target).attr('id'))
});
// events on tab change
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target == "#tab_Logging")
{ {
scrollDown(); target = target.split('?')[0]
} }
});
console.log(target)
// update cookie if target specified
if(target != "")
{
setCache(key, target+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
}
// get the tab id from the cookie (already overriden by the target)
if(!emptyArr.includes(getCache(key)))
{
selectedTab = getCache(key);
}
// Activate panel
$('.nav-tabs a[id='+ selectedTab +']').tab('show');
// When changed save new current tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
setCache(key, $(e.target).attr('id'))
});
// events on tab change
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target == "#tab_Logging")
{
scrollDown();
}
});
}, 50);
} }
// -------------------------------------------------------- // --------------------------------------------------------

View File

@@ -243,11 +243,35 @@ if ($ENABLED_DARKMODE === True) {
<a href="plugins.php"><i class="fa fa-fw fa-plug"></i> <span><?= lang('Navigation_Plugins');?></span></a> <a href="plugins.php"><i class="fa fa-fw fa-plug"></i> <span><?= lang('Navigation_Plugins');?></span></a>
</li> </li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('maintenance.php') ) ){ echo 'active'; } ?>"> <li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('maintenance.php') ) ){ echo 'active menu-open'; } ?>">
<a href="#">
<div class="info-icon-nav myhidden" id="version" data-build-time="<?php echo file_get_contents( "buildtimestamp.txt");?>">🆕</div> <div class="info-icon-nav myhidden" id="version" data-build-time="<?php echo file_get_contents( "buildtimestamp.txt");?>">🆕</div>
<a href="maintenance.php"><i class="fa fa-wrench "></i> <span><?= lang('Navigation_Maintenance');?></span></a> <i class="fa fa-wrench"></i> <span><?= lang('Navigation_Maintenance');?></span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu" style="display: <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('maintenance.php') ) ){ echo 'block'; } else {echo 'none';} ?>;">
<li>
<a href="maintenance.php#tab_Settings" onclick="initializeTabs()"> <?= lang("Maintenance_Tools_Tab_Settings");?> </a>
</li>
<li>
<a href="maintenance.php#tab_DBTools" onclick="initializeTabs()"> <?= lang("Maintenance_Tools_Tab_Tools");?> </a>
</li>
<li>
<a href="maintenance.php#tab_BackupRestore" onclick="initializeTabs()"> <?= lang("Maintenance_Tools_Tab_BackupRestore");?> </a>
</li>
<li>
<a href="maintenance.php#tab_Logging" onclick="initializeTabs()"> <?= lang("Maintenance_Tools_Tab_Logging");?> </a>
</li>
<li>
<a href="maintenance.php#tab_multiEdit" onclick="initializeTabs()"> <?= lang("Device_MultiEdit");?> </a>
</li>
</ul>
</li> </li>
<!-- <li class="treeview menu-open" style="height: auto;"> -->
<li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('settings.php') ) ){ echo 'active menu-open'; } ?>"> <li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('settings.php') ) ){ echo 'active menu-open'; } ?>">
<a href="#"> <a href="#">
<i class="fa fa-cog"></i> <span><?= lang('Navigation_Settings');?></span> <i class="fa fa-cog"></i> <span><?= lang('Navigation_Settings');?></span>
@@ -278,20 +302,32 @@ if ($ENABLED_DARKMODE === True) {
</ul> </ul>
</li> </li>
<li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('donations.php', 'help_faq.php', 'systeminfo.php' ) ) ){ echo 'active menu-open'; } ?>">
<a href="#">
<i class="fa fa-info"></i> <span><?= lang('Navigation_About');?></span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu " style="display: <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('donations.php', 'help_faq.php', 'systeminfo.php' ) ) ){ echo 'block'; } else {echo 'none';} ?>;">
<li>
<a href="donations.php"> <?= lang("Navigation_Donations");?> </a>
</li>
<li>
<a href="help_faq.php"> <?= lang("Navigation_HelpFAQ");?> </a>
</li>
<li>
<a href="systeminfo.php"> <?= lang("Navigation_SystemInfo");?> </a>
</li>
</ul>
</li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('workflows.php') ) ){ echo 'active'; } ?>"> <li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('workflows.php') ) ){ echo 'active'; } ?>">
<div class="info-icon-nav work-in-progress"> </div> <div class="info-icon-nav work-in-progress"> </div>
<a href="workflows.php"><i class="fa fa-shuffle"></i> <span><?= lang('Navigation_Workflows');?></span></a> <a href="workflows.php"><i class="fa fa-shuffle"></i> <span><?= lang('Navigation_Workflows');?></span></a>
</li> </li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('systeminfo.php') ) ){ echo 'active'; } ?>">
<a href="systeminfo.php"><i class="fa fa-microchip"></i> <span><?= lang('Navigation_SystemInfo');?></span></a>
</li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('help_faq.php') ) ){ echo 'active'; } ?>">
<a href="help_faq.php"><i class="fa fa-question"></i> <span><?= lang('Navigation_HelpFAQ');?></span></a>
</li>
<li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('donations.php') ) ){ echo 'active'; } ?>">
<a href="donations.php"><i class="fa fa-heart"></i> <span><?= lang('Navigation_Donations');?></span></a>
</li>
</ul> </ul>
<!-- /.sidebar-menu --> <!-- /.sidebar-menu -->

View File

@@ -431,6 +431,7 @@
"Maintenance_version": "App updates", "Maintenance_version": "App updates",
"NETWORK_DEVICE_TYPES_description": "Which device types are allowed to be used as network devices in the Network view. The device type has to match exactly the <code>Type</code> setting on a specific device in Device details. Do not remove existing types, only add new ones.", "NETWORK_DEVICE_TYPES_description": "Which device types are allowed to be used as network devices in the Network view. The device type has to match exactly the <code>Type</code> setting on a specific device in Device details. Do not remove existing types, only add new ones.",
"NETWORK_DEVICE_TYPES_name": "Network device types", "NETWORK_DEVICE_TYPES_name": "Network device types",
"Navigation_About": "About",
"Navigation_Devices": "Devices", "Navigation_Devices": "Devices",
"Navigation_Donations": "Donations", "Navigation_Donations": "Donations",
"Navigation_Events": "Events", "Navigation_Events": "Events",