I am trying to make a dropdown menu which shows certain elements depending on the type of user (admin = 1, poweruser = 2, read_only = 3).
What I'm doing is, first of all, show the menu with PHP (to have it as a module and be able to use it on several pages).
PHP code:
public function printNavBar(){
echo "
<div class='navbar'>
<div class='dropdown'>
<button class='dropbtn'><img src='../resources/icons/menu.png' alt='Menu Icon' class='dropdownMenuIcon'></button>
<div class='dropdown-content'>
<a href='userpanel.php?action=addResume' id='dropDownCreateResume'>
<img src='../resources/icons/resume.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>New CV</span>
</a>
<a href='userpanel.php?action=createUser' id='dropDownCreateUser'>
<img src='../resources/icons/add-new-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>New user</span>
</a>
<a href='userpanel.php?action=editUser' id='dropDownEditUser'>
<img src='../resources/icons/edit-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Edit user</span>
</a>
<a href='userpanel.php?action=changePassword' id='dropDownChangePassword'>
<img src='../resources/icons/change-password.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Change Password</span>
</a>
<a href='userpanel.php?action=showLog' id='dropDownShowLog'>
<img src='../resources/icons/log-file.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Log</span>
</a>
</div>
</div>
<a class='navBarElement' href='../index.php?logOut=true'>
<img class='logoutMenuIcon' src='../resources/icons/logout.png' alt='Logout icon'>
</a>
<a class='navBarElement' href='../index.php'>
<img class='homeIcon' src='../resources/icons/home.png' alt='Home icon'>
</a>
</div>''";
}
Once this is done, I call the javascript function that should add the class so that the elements are not displayed based on the user:
function showElements(idUser) {
// User type
const ADMIN_USER = 1;
const POWER_USER = 2;
const READ_ONLY_USER = 3;
// Switch user type, we add css to elements or not
switch (idUser) {
case POWER_USER:
document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
break;
case READ_ONLY_USER:
document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownCreateResume').setAttribute('class', 'hiddenDropdownElement');
break;
}
}
These functions are called on the main page.
Homepage:
<?php
session_start();
// Required files
require_once '../php/logOut.php';
require_once '../php/redirections.php';
require_once '../php/printDataProcess.php';
// Checking the session
if(!isset($_SESSION['userSession'])){
header("Location: ../index.php");
}
// Checking the session
if (!isset($_SESSION['created'])) {
$_SESSION['created'] = time();
} else if (time() - $_SESSION['created'] > 3600) {
// session started more than 1 hour ago
session_regenerate_id(true); // change session ID for the current session and invalidate old session ID
$_SESSION['created'] = time(); // update creation time
logOut();
}
if (isset($_GET['logOut'])) {
logOut();
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/hiddenNavBarData.js"></script>
<meta charset="utf-8">
<title>User panel</title>
</head>
<body>
<!-- Navigation Bar content -->
<?php
$userListHandler = PrintDataHandler::getInstance();
$userListHandler->printNavBar();
?>
<!-- Body content -->
<div class="bodyContainer">
<?php
echo "<div id='userGreet'>
<h3>Welcome, ".$_SESSION['userSession']['name']." ".$_SESSION['userSession']['surname']."</h3>
</div>";
?>
</div>
<?php
$userListHandler->printFooter();
?>
<script type="text/javascript">
var userLevel = <?php echo $_SESSION["userSession"]["level"]; ?>;
showElements(userLevel);
</script>
</body>
</html>
My problem is that it doesn't add the css classes to the elements.
I have been testing the console in the browser in case there were problems and it seems that there are not. Also, when using the debugger, it doesn't add the class.
How can I solve that?
Thanks.
To add class to an element with javascript is like this, you have to assign a space plus the name of the class you want to add
Or also if you want to make it shorter, it would be something like this.
Example of how to change a class