I’m working on an admin page and so far I’ve only worked on PHP and a bit of HTML. But now, I have run into a problem, what I would like to know is how I could apply this configuration automatically through HTML as shown in the following script:
<?php
if(isset($_SESSION['userID']))
{
$sql_result=$db->ExecuteQuery("SELECT `admin_set` FROM `users` WHERE `id`={$_SESSION['userID']}");
if($sql_result!=false)
{
//exit("Ok");
$j_settings=$sql_result->fetch_assoc()['admin_set'];
$_SESSION['admin_set']=$j_settings;
include_once("./classes/admin_settings.class.php");
$settings=new AdminSettings((string)$j_settings);
//echo '<script language="javascript" type="text/javascript" src="path/to/your/file.js"> sidebarColor('.') </script>';
}
}
function GetThemeKey(int $index) : string
{
switch($index)
{
case 0:
return "primary";
case 1:
return "dark";
case 2:
return "info";
case 3:
return "success";
case 4:
return "warning";
case 5:
return "danger";
default:
return "primary";
}
}
?>
<div class="card-body pt-sm-3 pt-0">
<!-- Sidebar Backgrounds -->
<div>
<h6 class="mb-0">Sidebar Colors</h6>
</div>
<a href="javascript:void(0)" class="switch-trigger background-color">
<div class="badge-colors my-2 text-start">
<span class="badge filter bg-gradient-primary<?=($settings->HighlightColor==0? ' active':'')?>" data-color="primary" onclick="sidebarColor(this)"></span>
<span class="badge filter bg-gradient-dark<?=($settings->HighlightColor==1? ' active':'')?>" data-color="dark" onclick="sidebarColor(this)"></span>
<span class="badge filter bg-gradient-info<?=($settings->HighlightColor==2? ' active':'')?>" data-color="info" onclick="sidebarColor(this)"></span>
<span class="badge filter bg-gradient-success<?=($settings->HighlightColor==3? ' active':'')?>" data-color="success" onclick="sidebarColor(this)"></span>
<span class="badge filter bg-gradient-warning<?=($settings->HighlightColor==4? ' active':'')?>" data-color="warning" onclick="sidebarColor(this)"></span>
<span class="badge filter bg-gradient-danger<?=($settings->HighlightColor==5? ' active':'')?>" data-color="danger" onclick="sidebarColor(this)"></span>
</div>
</a>
<!-- Sidenav Type -->
<div class="mt-3">
<h6 class="mb-0">Sidenav Type</h6>
<p class="text-sm">Choose between 2 different sidenav types.</p>
</div>
<div class="d-flex">
<button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark" onclick="sidebarType(this)">Dark</button>
<button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent" onclick="sidebarType(this)">Transparent</button>
<button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white" onclick="sidebarType(this)">White</button>
</div>
<p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
<!-- Navbar Fixed -->
<div class="mt-3 d-flex">
<h6 class="mb-0">Navbar Fixed</h6>
<div class="form-check form-switch ps-0 ms-auto my-auto">
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
</div>
</div>
<hr class="horizontal dark my-3">
<div class="mt-2 d-flex">
<h6 class="mb-0">Sidenav Mini</h6>
<div class="form-check form-switch ps-0 ms-auto my-auto">
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarMinimize" onclick="navbarMinimize(this)">
</div>
</div>
<hr class="horizontal dark my-3">
<div class="mt-2 d-flex">
<h6 class="mb-0">Light / Dark</h6>
<div class="form-check form-switch ps-0 ms-auto my-auto">
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
</div>
</div>
Currently, what this script does is load a sidebar on the right that is displayed when a button is pressed. Specifically, my problem is that I want it to automatically apply the saved color when this element is loaded as well as make it change color when I click on one of the options and call the sidebarColor(this) function in a JavaScript file:
But if I refresh the page this color goes back to color 0 (pink). In the tests that I am doing, I have a PHP class called Admin Settings where I am setting the color 4 (orange) by default, as you can see in the previous code, I have modified the HTML so that the color is selected in the buttons based on this new default value and when I refresh the page, this button is correctly selected. But this color is not automatically applied on the page:
So my question is: Where and how would I have to apply the sidebarColor() function so that it is called automatically when the element loads?
sidebarColor function:
function sidebarColor(a) {
var parent = a.parentElement.children;
var color = a.getAttribute("data-color");
for (var i = 0; i < parent.length; i++) {
parent[i].classList.remove('active');
}
if (!a.classList.contains('active')) {
a.classList.add('active');
} else {
a.classList.remove('active');
}
var sidebar = document.querySelector('.sidenav');
sidebar.setAttribute("data-color", color);
if (document.querySelector('#sidenavCard')) {
var sidenavCard = document.querySelector('#sidenavCard');
let sidenavCardClasses = ['card', 'card-background', 'shadow-none', 'card-background-mask-' + color];
sidenavCard.className = '';
sidenavCard.classList.add(...sidenavCardClasses);
var sidenavCardIcon = document.querySelector('#sidenavCardIcon');
let sidenavCardIconClasses = ['ni', 'ni-diamond', 'text-gradient', 'text-lg', 'top-0', 'text-' + color];
sidenavCardIcon.className = '';
sidenavCardIcon.classList.add(...sidenavCardIconClasses);
}
}
