Paydirt

2025-11-26 21:10:22 -05:00
parent d781a90e87
commit 344d46d89e
8 changed files with 307 additions and 37 deletions
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -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 {
--- a/public/home.html
+++ b/public/home.html
@@ -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>
-        <a href="/search">Search Players</a>
-        <br>
-        <a href="/info">Personal Information</a>
-        <br>
-        <button id="logoutButton">Log Out</button>
-        <br>
-        <button id="deleteButton" style="display: none;">Delete Account</button>
+    <div class="grid-container">
+        <div class="header">
+            <div class="header-left">
+                <h2>Paydirt</h2>
+                <a href="/search">Search Players</a>
+                <br>
+            </div>
+            <div class="header-right">
+                <a class="user-FirstName" href="/info">Welcome, %</a>
+                <button id="logoutButton">Log Out</button>
+                <button id="deleteButton" style="display: none;">Delete Account</button>
+            </div>

-        <script type="module" src="variables.js"></script>
-        <script type="module" src="logout.js"></script>
-        <script type="module" src="delete.js"></script>
+        </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>
 </body>
 </html>
--- a/public/home.js
+++ b/public/home.js
@@ -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);
+    });
+};
--- a/public/player.html
+++ b/public/player.html
@@ -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>
--- a/public/player.js
+++ b/public/player.js
@@ -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("/");
--- a/public/search.js
+++ b/public/search.js
@@ -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);
    });