This commit is contained in:
RochesterX
2025-11-26 21:10:22 -05:00
parent d781a90e87
commit 344d46d89e
8 changed files with 307 additions and 37 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@@ -15,6 +15,66 @@ body {
justify-content: flex-start;
}
.header {
grid-area: header;
display: flex;
flex-direction: row;
height: 100px;
align-items: center;
justify-content: space-between;
}
.header-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.header-right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.nw {
grid-area: nw;
}
.ne {
grid-area: ne;
}
.se {
grid-area: se;
}
.sw {
grid-area: sw;
}
.box {
border: 2px solid white;
margin: 2px;
padding: 4px;
display: flex;
flex-direction: column;
justify-content: flex-start;
text-justify: center;
}
.grid-container {
display: grid;
grid-template-columns: 50px, 50px;
grid-template-rows: auto;
grid-template-areas:
"header header"
"nw ne"
"sw se";
}
.center {
display: flex;
flex-direction: column;
@@ -40,7 +100,6 @@ a {
color: white;
padding-left: 5px;
padding-right: 5px;
margin-top: 4px;
text-decoration: none;
text-align: center;
align-items: center;
@@ -53,9 +112,7 @@ a {
button {
background-color: transparent;
border: 2px solid #606060;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin: 10px;
width: 75px;
border-radius: 5px;
padding: 5px;
@@ -203,15 +260,12 @@ h2 {
color: #ffffff;
font: 32px "Verdana";
margin: 0;
margin-top: 32px;
margin-bottom: 10px;
}
h3 {
color: #CCCCCC;
font: 24px "Verdana";
margin: 0;
margin-bottom: 30px;
}
p {

View File

@@ -5,20 +5,49 @@
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div class="center">
<h2>Home</h2>
<h3 class="user-FirstName">Welcome, %</h3>
<div class="grid-container">
<div class="header">
<div class="header-left">
<h2>Paydirt</h2>
<a href="/search">Search Players</a>
<br>
<a href="/info">Personal Information</a>
<br>
</div>
<div class="header-right">
<a class="user-FirstName" href="/info">Welcome, %</a>
<button id="logoutButton">Log Out</button>
<br>
<button id="deleteButton" style="display: none;">Delete Account</button>
</div>
</div>
<div class="box nw">
<p>Favorites</p>
<table class="body" id="favorites">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="box ne">
<p>Highest contracts</p>
<table class="body" id="highest">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="box sw">
<p>Highest paydirt score</p>
</div>
<div class="box se">
<p>Highest offense score</p>
</div>
</div>
<script type="module" src="variables.js"></script>
<script type="module" src="home.js"></script>
<script type="module" src="logout.js"></script>
<script type="module" src="delete.js"></script>
</div>
</body>
</html>

87
public/home.js Normal file
View File

@@ -0,0 +1,87 @@
import { postData, verifyLogin } from "./client.js";
import { formatSalary } from "./utils.js";
const token = window.localStorage.getItem("token");
const highest = document.querySelector("#highest");
updateHighest();
updateFavorites();
async function updateHighest() {
if (!verifyLogin()) return;
const tableHeader = document.querySelector("#highest thead");
const tableBody = document.querySelector("#highest tbody");
let resultObject = await postData("/getHighest", { amount: 10 }, token);
console.log(resultObject);
if (resultObject.matches.length === 0) {
alert("Error loading highest");
return;
}
tableHeader.innerHTML = "";
const headerRow = document.createElement("tr");
//Object.keys(resultObject.matches[0]).forEach(attribute => {
// headerRow.innerHTML += `<td>${attribute}</td>`;
//});
headerRow.innerHTML = `
<td>Name</td>
<td>Contract</td>
<td>Team</td>
<td>Position</td>
`;
tableHeader.appendChild(headerRow);
tableBody.innerHTML = "";
resultObject.matches.forEach(player => {
const row = document.createElement("tr");
//for (attribute in player) {
// row.innerHTML += `<td>${player}</td>l`;
//}
row.innerHTML = `
<td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
<td>${formatSalary(player.TotalValue)}</td>
<td>${player.Team}</td>
<td>${player.Position}</td>
`;
tableBody.appendChild(row);
});
};
async function updateFavorites() {
if (!verifyLogin()) return;
const tableHeader = document.querySelector("#favorites thead");
const tableBody = document.querySelector("#favorites tbody");
let resultObject = await postData("/getWatchlist", {}, token);
tableHeader.innerHTML = "";
const headerRow = document.createElement("tr");
//Object.keys(resultObject.matches[0]).forEach(attribute => {
// headerRow.innerHTML += `<td>${attribute}</td>`;
//});
headerRow.innerHTML = `
<td>Name</td>
<td>Team</td>
<td>Position</td>
`;
tableHeader.appendChild(headerRow);
tableBody.innerHTML = "";
console.log(resultObject.watchlist);
resultObject.watchlist.forEach(player => {
const row = document.createElement("tr");
row.innerHTML = `
<td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
<td>${player.Team}</td>
<td>${player.Position}</td>
`;
tableBody.appendChild(row);
});
};

View File

@@ -7,7 +7,7 @@
</head>
<body>
<div class="center">
<h2 class="attribute-player_name">[Player Name]</h2>
<h2 class="attribute-PlayerName">[Player Name]</h2>
<table id="table">
<thead id="header">
@@ -21,17 +21,19 @@
</thead>
<tbody id="results">
<tr>
<td class="attribute-player_name">[Name]</td>
<td class="attribute-player_id">[ID]</td>
<td class="attribute-salary format-salary">[Salary]</td>
<td class="attribute-team_name">[Team]</td>
<td class="attribute-position">[Position]</td>
<td class="attribute-PlayerName">[Name]</td>
<td class="attribute-PlayerID">[ID]</td>
<td class="attribute-TotalValue format-salary">[Salary]</td>
<td class="attribute-Team">[Team]</td>
<td class="attribute-Position">[Position]</td>
</tr>
</tbody>
</table>
<p id="nomatch" style="display: none;">No matches found.</p>
<button id="watch">Watch Player</button>
<br>
<a href="#" onclick="if (history.length > 1) history.back(); else if (document.referrer) window.location.href = document.referrer; else window.location.href = '#';">Return to Player Search</a>

View File

@@ -10,7 +10,28 @@ const tableBody = document.getElementById("results");
const table = document.getElementById("table");
const nomatch = document.getElementById("nomatch");
const watchButton = document.querySelector("#watch");
//const watchlist = await postData("/getWatchlist", {}, token);
populatePlayerData();
updateIsWatched();
watchButton.onclick = async e => {
e.preventDefault();
const [, , id] = window.location.pathname.split("/");
const resultObject = await postData("/toggleWatched", { id: id }, token);
alert(resultObject.message);
updateIsWatched();
}
async function updateIsWatched() {
const [, , id] = window.location.pathname.split("/");
const resultObject = await postData("/isWatched", {id: id}, token);
const isWatched = resultObject.isWatched;
watchButton.innerHTML = isWatched ? "Stop Watching Player" : "Watch Player";
}
async function populatePlayerData() {
const [, , id] = window.location.pathname.split("/");

View File

@@ -29,24 +29,32 @@ if (searchForm)searchForm.onsubmit = async e => {
table.style.display = "";
tableHeader.innerHTML = "";
const headerRow = document.createElement("tr")
Object.keys(resultObject.matches[0]).forEach(attribute => {
headerRow.innerHTML += `<td>${attribute}</td>`;
})
//Object.keys(resultObject.matches[0]).forEach(attribute => {
// headerRow.innerHTML += `<td>${attribute}</td>`;
//});
headerRow.innerHTML += `
<td>ID</td>
<td>Name</td>
<td>Contract</td>
<td>Team</td>
<td>Position</td>
`;
tableHeader.appendChild(headerRow);
tableBody.innerHTML = "";
resultObject.matches.forEach(player => {
const row = document.createElement("tr");
console.log(player);
//for (attribute in player) {
// row.innerHTML += `<td>${player}</td>l`;
//}
row.innerHTML = `
<td>${player.player_id}</td>
<td><a href="/player/${player.player_id}">${player.player_name}</a></td>
<td>${formatSalary(player.salary)}</td>
<td>${player.team_name}</td>
<td>${player.position}</td>
<td>${player.PlayerID}</td>
<td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
<td>${formatSalary(player.TotalValue)}</td>
<td>${player.Team}</td>
<td>${player.Position}</td>
`;
tableBody.appendChild(row);
});

View File

@@ -32,7 +32,7 @@ dbConfig = {
user: "server",
password: "TorusField1*",
server: "mssql.rochesterx.dev",
database: "ProjectTest",
database: "Project",
options: { trustServerCertificate: true }
};
@@ -105,22 +105,91 @@ app.post("/login", async (req, res) => {
}
});
app.post("/getWatchlist", authenticate, async (req, res) => {
const { id } = req.body;
const watchlist = await pool.request()
.input("userID", sql.Int, req.user.Id)
.input("id", sql.Int, id)
.query(`SELECT Player.PlayerName, Player.Team, Player.Position, Player.PlayerID FROM Watch JOIN Player ON Watch.PlayerID = Player.PlayerID WHERE UserID = @userID`);
res.status(200).json({ watchlist: watchlist.recordset });
});
app.post("/isWatched", authenticate, async (req, res) => {
const { id } = req.body;
const watchlist = await pool.request()
.input("userID", sql.Int, req.user.Id)
.input("id", sql.Int, id)
.query(`SELECT PlayerID FROM Watch WHERE UserID = @userID`);
const isWatched = watchlist.recordset.some(row => row.PlayerID === parseInt(id));
res.status(200).json({ isWatched: isWatched });
});
app.post("/toggleWatched", authenticate, async (req, res) => {
const { id } = req.body;
const watchlist = await pool.request()
.input("userID", sql.Int, req.user.Id)
.input("id", sql.Int, id)
.query(`SELECT PlayerID FROM Watch WHERE UserID = @userID`);
console.log(watchlist.recordset);
const isWatched = watchlist.recordset.some(row => row.PlayerID === parseInt(id));
console.log(isWatched);
if (isWatched) {
const result = await pool.request()
.input("userID", sql.Int, req.user.Id)
.input("id", sql.Int, id)
.query(`DELETE FROM Watch WHERE UserID = @userID AND PlayerID = @id`);
res.status(200).json({ message: "No longer watching player" });
return;
}
// Otherwise, watch the player
const result = await pool.request()
.input("userID", sql.Int, req.user.Id)
.input("id", sql.Int, id)
.query(`INSERT INTO Watch (UserID, PlayerID) VALUES (@userID, @id)`);
res.status(200).json({ message: "Watching Player" });
});
app.post("/getPlayers", authenticate, async (req, res) => {
const { player } = req.body;
const result = await pool.request()
.input("query", sql.VarChar, player)
.query(`SELECT * FROM Player WHERE player_name LIKE '%' + @query + '%'`);
.query(`SELECT p.PlayerID, p.PlayerName, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerName LIKE '%' + @query + '%'`);
res.status(200).json({ query: player, matches: result.recordset });
});
app.post("/getHighest", authenticate, async (req, res) => {
const { amount } = req.body;
const result = await pool.request()
.input("amount", sql.Int, amount)
.query(`
SELECT TOP (@amount) p.PlayerID, p.PlayerName, p.[Position], p.Team, TotalValue
FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID
ORDER BY TotalValue DESC;
`);
res.status(200).json({ matches: result.recordset });
});
app.post("/getPlayer", authenticate, async (req, res) => {
const { id } = req.body;
const result = await pool.request()
.input("query", sql.VarChar, id)
.query(`SELECT * FROM Player WHERE player_id = @query`);
.query(`SELECT p.PlayerName, p.PlayerID, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerID = @query`);
if (result.recordset.length !== 1) {
res.status(400).json({ success: false })