Initial Commit with files
This commit is contained in:
92
Users Page/page.html
Normal file
92
Users Page/page.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>User Database</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Users</a></li>
|
||||
<li><a href="#">Stuff</a></li>
|
||||
<li><a href="#">Things</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="subNavContainer">
|
||||
<h1 style="color: #333333; margin: 0.5rem;">User Database</h1>
|
||||
<form class="search-form" id="search-form">
|
||||
<label for="search">Search:</label>
|
||||
<input type="text" id="search" name="search" placeholder="Enter search term...">
|
||||
<input type="button" value="Search" onclick="searchUsers()">
|
||||
</form>
|
||||
<script>
|
||||
const searchForm = document.getElementById('search-form');
|
||||
searchForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault(); // prevent the form from submitting
|
||||
|
||||
searchUsers();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- <nav class="subnav">
|
||||
<ul class="subnav-links">
|
||||
<li><a href="#" class="active">All</a></li>
|
||||
<li><a href="#">Alpha</a></li>
|
||||
<li><a href="#">Echo</a></li>
|
||||
<li><a href="#">NCO</a></li>
|
||||
<li><a href="#">RRC</a></li>
|
||||
<li><a href="#">HHC</a></li>
|
||||
</ul>
|
||||
</nav> -->
|
||||
|
||||
<button onclick="showFilters()">Filter</button>
|
||||
|
||||
<div id="filter-box" style="display:none;">
|
||||
<nav class="subnav">
|
||||
<ul class="subnav-links">
|
||||
<li><a href="#" class="active">All</a></li>
|
||||
<li><a href="#">Alpha</a></li>
|
||||
<li><a href="#">Echo</a></li>
|
||||
<li><a href="#">NCO</a></li>
|
||||
<li><a href="#">RRC</a></li>
|
||||
<li><a href="#">HHC</a></li>
|
||||
<li><a href="#">Recruit</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<script> function showFilters() {
|
||||
var filterBox = document.getElementById("filter-box");
|
||||
if (filterBox.style.display === "none") {
|
||||
filterBox.style.display = "block";
|
||||
} else {
|
||||
filterBox.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<table id="userTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
<th>Unit</th>
|
||||
<th>Rank</th>
|
||||
<th>Join Date</th>
|
||||
<th>LOA Until</th>
|
||||
<th>Last Active</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
const allUsers = getUsers();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
89
Users Page/scripts.js
Normal file
89
Users Page/scripts.js
Normal file
@@ -0,0 +1,89 @@
|
||||
function searchUsers() { //this needs some heavy updating
|
||||
const searchTerm = document.getElementById("search").value;
|
||||
const data = JSON.parse(sessionStorage.getItem("peopleData"));
|
||||
|
||||
//const results = data.filter(person => person.name === searchTerm)
|
||||
|
||||
const results = data.filter(person => filterByName(searchTerm, person));
|
||||
console.log(results);
|
||||
|
||||
populateUsers(results);
|
||||
}
|
||||
|
||||
function filterByName(searchTerm, item) {
|
||||
if(item.name.toLowerCase().startsWith(searchTerm.toLowerCase())) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getUsers() {
|
||||
const authToken = 'Bearer nevergonnagiveyouupnevergonnaletyoudownnevergonnarunaroundanddesertyounevergonnamakeyoucrynevergonnasaygoodbyenevergonnatellalieandhurtyou';
|
||||
|
||||
// Define the headers for the API call with the authentication token included
|
||||
const headers = new Headers();
|
||||
headers.append('Authorization', authToken);
|
||||
|
||||
|
||||
// Make a REST API call with the headers
|
||||
fetch('https://indigofox.dev:9230/api/members', { headers })
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Store the response in a variable
|
||||
const responseData = data;
|
||||
|
||||
console.log(responseData);
|
||||
|
||||
// Do something with the response data
|
||||
sessionStorage.setItem("peopleData", JSON.stringify(responseData));
|
||||
populateUsers(responseData);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function populateUsers(items) {
|
||||
|
||||
//const URLparams = URLSearchParams(window.location.search);
|
||||
|
||||
|
||||
const table = document.getElementById("tableBody");
|
||||
|
||||
table.innerHTML = "";
|
||||
|
||||
|
||||
|
||||
items.forEach(item => {
|
||||
let row = table.insertRow();
|
||||
|
||||
let name = row.insertCell(0);
|
||||
name.innerHTML = item.name;
|
||||
let rank = row.insertCell(1);
|
||||
rank.innerHTML = item.rank;
|
||||
let unit = row.insertCell(2);
|
||||
unit.innerHTML = unit.rank;
|
||||
let joinDate = row.insertCell(3);
|
||||
joinDate.innerHTML = item.joinDate
|
||||
|
||||
row.addEventListener("click", () => {
|
||||
window.location.href = `../Profile Page/page2.html?id=${item.id}`;
|
||||
});
|
||||
row.addEventListener("mouseover", () => {
|
||||
row.style.cursor = "pointer";
|
||||
row.classList.add("hover");
|
||||
})
|
||||
row.addEventListener("mouseout", () => {
|
||||
row.classList.remove("hover");
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// const items1 = [
|
||||
// { name: "Ajdj100", unit: "Echo", rank: "1SG", joinDate: "3/7/2022" },
|
||||
// { name: "EagleTrooper", unit: "Alpha", rank: "SSG", joinDate: "long long ago" },
|
||||
// ];
|
||||
|
||||
|
||||
// console.log(items);
|
||||
182
Users Page/styles.css
Normal file
182
Users Page/styles.css
Normal file
@@ -0,0 +1,182 @@
|
||||
/* Reset styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Basic page styles */
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Heading styles */
|
||||
.heading {
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
/* Search form styles */
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.search-form label {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-form input[type="text"] {
|
||||
background-color: #d8d8d8;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.search-form input[type="button"] {
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.search-form input[type="button"]:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f5f5;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
/* NAVBAR */
|
||||
|
||||
.navbar {
|
||||
background-color: #333333;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-links li a:hover {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.subnav {
|
||||
background-color: transparent;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.subnav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subnav-links li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.subnav-links li a {
|
||||
color: #363636;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.subnav-links li a.active {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
/* Center the subNavContainer */
|
||||
.subNavContainer {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hover {
|
||||
/* background-color: #b9b9b9; */
|
||||
/* outline: 2px solid rgb(104, 104, 104); */
|
||||
box-shadow: 0 0 10px rgb(77, 77, 77);
|
||||
}
|
||||
/* I'll get around to this DEFINING THE MAX WIDTH OF THE TABLE SO IT DOESNT GET TO WIDE */
|
||||
/* #userTable {
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
} */
|
||||
|
||||
#filter-box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user