388 lines
15 KiB
PHP
388 lines
15 KiB
PHP
<?php
|
|
include "../functions.php";
|
|
|
|
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
|
|
if ($_SESSION["userId"] <> "") {
|
|
$_SESSION["isLoggedIn"] = true;
|
|
//$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
|
|
} else {
|
|
$_SESSION["isLoggedIn"] = false;
|
|
header("location: login.php");
|
|
exit();
|
|
}
|
|
if($_SESSION["user_type"]!="admin"){
|
|
header("location: login.php?alert=Only admins allowed here!");
|
|
}
|
|
$users = getUsers();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
|
|
<head>
|
|
<style>
|
|
.pagination {
|
|
display: flex;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
padding: 5px 10px;
|
|
border: 1px solid #ccc;
|
|
margin: 0 5px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pagination a.active {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Ekka - Admin Dashboard HTML Template.">
|
|
|
|
<!-- <title>Ekka - Admin Dashboard HTML Template.</title> -->
|
|
<title>oBanana B2B - Admin Dashboard</title>
|
|
|
|
<!-- GOOGLE FONTS -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
|
|
|
|
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
|
|
<!-- PLUGINS CSS STYLE -->
|
|
<link href="assets/plugins/simplebar/simplebar.css" rel="stylesheet" />
|
|
|
|
<!-- No Extra plugin used -->
|
|
|
|
<!-- ekka CSS -->
|
|
<link id="ekka-css" rel="stylesheet" href="assets/css/ekka.css" />
|
|
|
|
<!-- FAVICON -->
|
|
<!-- <link href="assets/img/favicon.png" rel="shortcut icon" /> -->
|
|
<link href="assets/img/favicon/favicon.png" rel="shortcut icon" />
|
|
|
|
</head>
|
|
|
|
<body class="ec-header-fixed ec-sidebar-fixed ec-sidebar-dark ec-header-light" id="body">
|
|
|
|
<!-- WRAPPER -->
|
|
<div class="wrapper">
|
|
|
|
<!-- LEFT MAIN SIDEBAR -->
|
|
<?php include 'left-main-sidebar.php' ?>
|
|
|
|
<!-- PAGE WRAPPER -->
|
|
<div class="ec-page-wrapper">
|
|
|
|
<!-- HEADER -->
|
|
<?php include 'header.php' ?>
|
|
|
|
<!-- CONTENT WRAPPER -->
|
|
<div class="ec-content-wrapper ec-ec-content-wrapper mb-m-24px">
|
|
<div class="content">
|
|
<div class="breadcrumb-wrapper breadcrumb-contacts">
|
|
<div>
|
|
<h1>User Card</h1>
|
|
<p class="breadcrumbs"><span><a href="index.php">Home</a></span>
|
|
<span><i class="mdi mdi-chevron-right"></i></span>User
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<?php
|
|
$totalUsers = count($users);
|
|
$usersPerPage = 20;
|
|
$totalPages = ceil($totalUsers / $usersPerPage);
|
|
$currentPage = isset($_GET['page']) ? $_GET['page'] : 1;
|
|
$start = ($currentPage - 1) * $usersPerPage;
|
|
$end = $start + $usersPerPage - 1;
|
|
|
|
for ($x = $start; $x <= $end && $x < $totalUsers; $x++) {
|
|
$user = $users[$x];
|
|
?>
|
|
<div class="col-lg-6 col-xl-4 mb-24px">
|
|
<div class="ec-user-card card card-default p-4">
|
|
<a href="javascript:0" class="view-detail" id="modalTrigger-<?php echo $user['_id']; ?>"><i class="mdi mdi-eye-plus-outline"></i></a>
|
|
<!-- <a href="javascript:0" data-bs-toggle="modal" data-bs-target="#modalContact-<?php echo $user['_id']; ?>" class="view-detail"><i class="mdi mdi-eye-plus-outline"></i></a> -->
|
|
<a href="javascript:0" class="media text-secondary">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg" class="mr-3 img-fluid" alt="Avatar Image">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-2 text-dark"><?php echo $user['username'] ?></h5>
|
|
<div class="icon">
|
|
<li class="d-flex mb-1">
|
|
<i class="mdi mdi-account-key" style="font-size: 20px;"></i>
|
|
<span><?php echo $user['user_type'] ?></span>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<?php foreach ($users as $user) { ?>
|
|
<div class="modal fade modal-contact-detail" id="modalContact-<?php echo $user['_id']; ?>" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header justify-content-end border-bottom-0">
|
|
<button type="button" class="btn-close-icon" data-bs-dismiss="modal" aria-label="Close">
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body pt-0">
|
|
<div class="row no-gutters">
|
|
<div class="col-md-12">
|
|
<div class="profile-content-left px-4">
|
|
<form action="user-card-action.php" method="post">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="text-dark font-weight-medium pt-3 mb-2">Email</label>
|
|
<input type="text" name="username" class="form-control" value="<?php echo $user['username']; ?>" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="text-dark font-weight-medium pt-3 mb-2">User Type</label>
|
|
<select class="form-select" name="user_type">
|
|
<option value="">Select User Type</option>
|
|
<option value="admin" <?php echo ($user['user_type'] === 'admin') ? 'selected' : ''; ?>>admin</option>
|
|
<option value="vendor" <?php echo ($user['user_type'] === 'vendor') ? 'selected' : ''; ?>>vendor</option>
|
|
<option value="customer" <?php echo ($user['user_type'] === 'customer') ? 'selected' : ''; ?>>customer</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="hidden" name="_id" class="form-control" value="<?php echo $user['_id']; ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
<?php foreach ($users as $user) { ?>
|
|
registerModalTrigger('<?php echo $user['_id']; ?>');
|
|
<?php } ?>
|
|
});
|
|
|
|
function registerModalTrigger(userId) {
|
|
var modalTrigger = document.getElementById('modalTrigger-' + userId);
|
|
var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
|
|
var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
|
|
var password = '<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>';
|
|
|
|
if (modalTrigger) {
|
|
modalTrigger.addEventListener('click', function() {
|
|
renewToken(sessionToken, email, password, userId);
|
|
});
|
|
}
|
|
}
|
|
|
|
function renewToken(sessionToken, email, password, userId) {
|
|
login(email, password, sessionToken, function() {
|
|
showTheModal(userId);
|
|
});
|
|
}
|
|
|
|
function login(username, password, sessionToken, callback) {
|
|
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Api-Key": "{{apiKey}}"
|
|
},
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error("Unable to login");
|
|
}
|
|
})
|
|
.then(data => {
|
|
// Update the session token on the server side
|
|
fetch("update-token-session.php", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
token: data.token
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.status === 'success') {
|
|
// Update the session token in the client-side variable
|
|
sessionToken = data.token;
|
|
console.log("New Token:", sessionToken);
|
|
callback();
|
|
} else {
|
|
throw new Error("Unable to update session token");
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error("Error:", error.message);
|
|
});
|
|
}
|
|
|
|
function showTheModal(userId) {
|
|
// Add your logic here to show the modal
|
|
// You may need to trigger it manually if using Bootstrap modal
|
|
$('#modalContact-' + userId).modal('show');
|
|
}
|
|
</script>
|
|
|
|
<!-- Pagination Links -->
|
|
<div class="pagination">
|
|
<?php
|
|
for ($page = 1; $page <= $totalPages; $page++) {
|
|
echo '<a href="?page=' . $page . '">' . $page . '</a>';
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
|
|
<!-- Contact Modal -->
|
|
|
|
|
|
|
|
<!-- Add Contact Button -->
|
|
<div class="modal fade modal-add-contact" id="modal-add-contact" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<form>
|
|
<div class="modal-header px-4">
|
|
<h5 class="modal-title" id="exampleModalCenterTitle">Add New User</h5>
|
|
</div>
|
|
|
|
<div class="modal-body px-4">
|
|
<div class="form-group row mb-6">
|
|
<label for="coverImage" class="col-sm-4 col-lg-2 col-form-label">User
|
|
Image</label>
|
|
|
|
<div class="col-sm-8 col-lg-10">
|
|
<div class="custom-file mb-1">
|
|
<input type="file" class="custom-file-input" id="coverImage" required>
|
|
<label class="custom-file-label" for="coverImage">Choose
|
|
file...</label>
|
|
<div class="invalid-feedback">Example invalid custom file feedback
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label for="firstName">First name</label>
|
|
<input type="text" class="form-control" id="firstName" value="John">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label for="lastName">Last name</label>
|
|
<input type="text" class="form-control" id="lastName" value="Deo">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="form-group mb-4">
|
|
<label for="userName">User name</label>
|
|
<input type="text" class="form-control" id="userName" value="johndoe">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="form-group mb-4">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control" id="email" value="johnexample@gmail.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="form-group mb-4">
|
|
<label for="Birthday">Birthday</label>
|
|
<input type="text" class="form-control" id="Birthday" value="10-12-1991">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="form-group mb-4">
|
|
<label for="event">Address</label>
|
|
<input type="text" class="form-control" id="event" value="Address here">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer px-4">
|
|
<button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary btn-pill">Save Contact</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- End Content -->
|
|
</div> <!-- End Content Wrapper -->
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer mt-auto">
|
|
<div class="copyright bg-white">
|
|
<p>
|
|
Copyright © <span id="ec-year"></span><a class="text-primary" href="https://themeforest.net/user/ashishmaraviya" target="_blank"> Ekka Admin
|
|
Dashboard</a>. All Rights Reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div> <!-- End Page Wrapper -->
|
|
</div> <!-- End Wrapper -->
|
|
|
|
<!-- Common Javascript -->
|
|
<script src="assets/plugins/jquery/jquery-3.5.1.min.js"></script>
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/plugins/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/plugins/jquery-zoom/jquery.zoom.min.js"></script>
|
|
<script src="assets/plugins/slick/slick.min.js"></script>
|
|
|
|
<!-- Option Switcher -->
|
|
<script src="assets/plugins/options-sidebar/optionswitcher.js"></script>
|
|
|
|
<!-- Ekka Custom -->
|
|
<script src="assets/js/ekka.js"></script>
|
|
</body>
|
|
|
|
</html>
|