Filter

public/assets/css/style.css

@@ -294,7 +294,7 @@ p {
 }
 
 .mark {
-    width: 24px;
+    width: 32px;
     height: 24px;
     border: 2px solid #606060;
     border-radius: 4px;

public/player.html

@@ -14,7 +14,7 @@
                 <tr>
                     <td>Name</td>
                     <td>ID</td>
-                    <td>Salary</td>
+                    <td>Contract</td>
                     <td>Team</td>
                     <td>Position</td>
                 </tr>

public/search.html

@@ -21,6 +21,28 @@
             </select>
             <p>Search players by name:</p>
             <input type="text" id="query" placeholder="Contains" required>
+
+
+            <div class="days">
+                <label class="checkbox">
+                    <input type="checkbox" name="days" value="QB" checked></input>
+                    <span class="mark">QB</span>
+                </label>             
+                <label class="checkbox">
+                    <input type="checkbox" name="days" value="RB" checked></input>
+                    <span class="mark">RB</span>
+                </label>             
+                <label class="checkbox">
+                    <input type="checkbox" name="days" value="TE" checked></input>
+                    <span class="mark">TE</span>
+                </label>
+                <label class="checkbox">
+                    <input type="checkbox" name="days" value="WR" checked></input>
+                    <span class="mark">WR</span>
+                </label>             
+            </div>
+
+
             <button type="submit">Search</button>
         </form>
 

public/search.js

@@ -16,8 +16,17 @@ if (searchForm)searchForm.onsubmit = async e => {
     e.preventDefault();
     if (!verifyLogin()) return;
 
+    const formData = new FormData(searchForm);
+    
+    let positions = formData.getAll("days");
+
+    while (positions.length !== 4) {
+        positions.push("NOPE");
+    }
+    
     let resultObject = await postData("/getPlayers", {
-        player: document.getElementById("query").value
+        player: document.getElementById("query").value,
+        positions: positions
     }, token);
 
     if (resultObject.matches.length === 0) {

server.js

@@ -161,11 +161,15 @@ app.post("/toggleWatched", authenticate, async (req, res) => {
 });
 
 app.post("/getPlayers", authenticate, async (req, res) => {
-    const { player } = req.body;
+    const { player, positions } = req.body;
 
     const result = await pool.request()
         .input("query", sql.VarChar, player)
-        .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 + '%'`);
+        .input("one", sql.VarChar, positions[0])
+        .input("two", sql.VarChar, positions[1])
+        .input("three", sql.VarChar, positions[2])
+        .input("four", sql.VarChar, positions[3])
+        .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 + '%' AND p.Position IN (@one, @two, @three, @four);`);
 
     res.status(200).json({ query: player, matches: result.recordset });
 });