Paydirt
This commit is contained in:
@@ -15,6 +15,66 @@ body {
|
|||||||
justify-content: flex-start;
|
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 {
|
.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -40,7 +100,6 @@ a {
|
|||||||
color: white;
|
color: white;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-top: 4px;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -53,9 +112,7 @@ a {
|
|||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 2px solid #606060;
|
border: 2px solid #606060;
|
||||||
margin-left: 10px;
|
margin: 10px;
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 75px;
|
width: 75px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
@@ -203,15 +260,12 @@ h2 {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font: 32px "Verdana";
|
font: 32px "Verdana";
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 32px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: #CCCCCC;
|
color: #CCCCCC;
|
||||||
font: 24px "Verdana";
|
font: 24px "Verdana";
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|||||||
@@ -5,20 +5,49 @@
|
|||||||
<link rel="stylesheet" href="../assets/css/style.css">
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="center">
|
<div class="grid-container">
|
||||||
<h2>Home</h2>
|
<div class="header">
|
||||||
<h3 class="user-FirstName">Welcome, %</h3>
|
<div class="header-left">
|
||||||
|
<h2>Paydirt</h2>
|
||||||
<a href="/search">Search Players</a>
|
<a href="/search">Search Players</a>
|
||||||
<br>
|
<br>
|
||||||
<a href="/info">Personal Information</a>
|
</div>
|
||||||
<br>
|
<div class="header-right">
|
||||||
|
<a class="user-FirstName" href="/info">Welcome, %</a>
|
||||||
<button id="logoutButton">Log Out</button>
|
<button id="logoutButton">Log Out</button>
|
||||||
<br>
|
|
||||||
<button id="deleteButton" style="display: none;">Delete Account</button>
|
<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="variables.js"></script>
|
||||||
|
<script type="module" src="home.js"></script>
|
||||||
<script type="module" src="logout.js"></script>
|
<script type="module" src="logout.js"></script>
|
||||||
<script type="module" src="delete.js"></script>
|
<script type="module" src="delete.js"></script>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<h2 class="attribute-player_name">[Player Name]</h2>
|
<h2 class="attribute-PlayerName">[Player Name]</h2>
|
||||||
|
|
||||||
<table id="table">
|
<table id="table">
|
||||||
<thead id="header">
|
<thead id="header">
|
||||||
@@ -21,17 +21,19 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody id="results">
|
<tbody id="results">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="attribute-player_name">[Name]</td>
|
<td class="attribute-PlayerName">[Name]</td>
|
||||||
<td class="attribute-player_id">[ID]</td>
|
<td class="attribute-PlayerID">[ID]</td>
|
||||||
<td class="attribute-salary format-salary">[Salary]</td>
|
<td class="attribute-TotalValue format-salary">[Salary]</td>
|
||||||
<td class="attribute-team_name">[Team]</td>
|
<td class="attribute-Team">[Team]</td>
|
||||||
<td class="attribute-position">[Position]</td>
|
<td class="attribute-Position">[Position]</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<p id="nomatch" style="display: none;">No matches found.</p>
|
<p id="nomatch" style="display: none;">No matches found.</p>
|
||||||
|
|
||||||
|
<button id="watch">Watch Player</button>
|
||||||
|
|
||||||
<br>
|
<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>
|
<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 table = document.getElementById("table");
|
||||||
const nomatch = document.getElementById("nomatch");
|
const nomatch = document.getElementById("nomatch");
|
||||||
|
|
||||||
|
const watchButton = document.querySelector("#watch");
|
||||||
|
|
||||||
|
//const watchlist = await postData("/getWatchlist", {}, token);
|
||||||
|
|
||||||
populatePlayerData();
|
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() {
|
async function populatePlayerData() {
|
||||||
const [, , id] = window.location.pathname.split("/");
|
const [, , id] = window.location.pathname.split("/");
|
||||||
|
|||||||
@@ -29,24 +29,32 @@ if (searchForm)searchForm.onsubmit = async e => {
|
|||||||
table.style.display = "";
|
table.style.display = "";
|
||||||
tableHeader.innerHTML = "";
|
tableHeader.innerHTML = "";
|
||||||
const headerRow = document.createElement("tr")
|
const headerRow = document.createElement("tr")
|
||||||
Object.keys(resultObject.matches[0]).forEach(attribute => {
|
//Object.keys(resultObject.matches[0]).forEach(attribute => {
|
||||||
headerRow.innerHTML += `<td>${attribute}</td>`;
|
// 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);
|
tableHeader.appendChild(headerRow);
|
||||||
|
|
||||||
tableBody.innerHTML = "";
|
tableBody.innerHTML = "";
|
||||||
resultObject.matches.forEach(player => {
|
resultObject.matches.forEach(player => {
|
||||||
const row = document.createElement("tr");
|
const row = document.createElement("tr");
|
||||||
|
console.log(player);
|
||||||
|
|
||||||
//for (attribute in player) {
|
//for (attribute in player) {
|
||||||
// row.innerHTML += `<td>${player}</td>l`;
|
// row.innerHTML += `<td>${player}</td>l`;
|
||||||
//}
|
//}
|
||||||
row.innerHTML = `
|
row.innerHTML = `
|
||||||
<td>${player.player_id}</td>
|
<td>${player.PlayerID}</td>
|
||||||
<td><a href="/player/${player.player_id}">${player.player_name}</a></td>
|
<td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
|
||||||
<td>${formatSalary(player.salary)}</td>
|
<td>${formatSalary(player.TotalValue)}</td>
|
||||||
<td>${player.team_name}</td>
|
<td>${player.Team}</td>
|
||||||
<td>${player.position}</td>
|
<td>${player.Position}</td>
|
||||||
`;
|
`;
|
||||||
tableBody.appendChild(row);
|
tableBody.appendChild(row);
|
||||||
});
|
});
|
||||||
|
|||||||
75
server.js
75
server.js
@@ -32,7 +32,7 @@ dbConfig = {
|
|||||||
user: "server",
|
user: "server",
|
||||||
password: "TorusField1*",
|
password: "TorusField1*",
|
||||||
server: "mssql.rochesterx.dev",
|
server: "mssql.rochesterx.dev",
|
||||||
database: "ProjectTest",
|
database: "Project",
|
||||||
options: { trustServerCertificate: true }
|
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) => {
|
app.post("/getPlayers", authenticate, async (req, res) => {
|
||||||
const { player } = req.body;
|
const { player } = req.body;
|
||||||
|
|
||||||
const result = await pool.request()
|
const result = await pool.request()
|
||||||
.input("query", sql.VarChar, player)
|
.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 });
|
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) => {
|
app.post("/getPlayer", authenticate, async (req, res) => {
|
||||||
const { id } = req.body;
|
const { id } = req.body;
|
||||||
|
|
||||||
const result = await pool.request()
|
const result = await pool.request()
|
||||||
.input("query", sql.VarChar, id)
|
.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) {
|
if (result.recordset.length !== 1) {
|
||||||
res.status(400).json({ success: false })
|
res.status(400).json({ success: false })
|
||||||
|
|||||||
Reference in New Issue
Block a user