Paydirt
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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
87
public/home.js
Normal 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);
|
||||
});
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
@@ -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("/");
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
75
server.js
75
server.js
@@ -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 })
|
||||
|
||||
Reference in New Issue
Block a user