New Strikes Dashboard. HTMX implentation

public/css/dashboard.css

@@ -388,6 +388,10 @@ body {
 {
   cursor:pointer;
 }
+#Strikes
+{
+  cursor:pointer;
+}
 .rules
 {
   border: 2px solid #020608;

public/css/strikesdashboard.css

@@ -0,0 +1,126 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap');
+:root
+{
+    --card-color: rgb(23, 23, 23);
+}
+body 
+{
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    justify-content: center;
+    background-color: #071c24;
+}
+
+#userWrapper
+{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;  
+    justify-content: center;
+    margin-top:3vh;
+    margin-left: 10%;
+    text-align: center;
+    align-items: center;
+    height: 15vh;
+    width: 80%;
+    background-color: var(--card-color);
+    border-radius: 10px;
+    border: 1px solid #fffff042;
+}
+#avatar
+{
+    flex-direction: column;
+    background-color: ivory;
+    height: 10vh;
+    width: 10vh;
+    background-size: 10vh 10vh;
+    border-radius: 10px;
+}
+.userNameWrapper
+{
+	display: flex;
+	flex-direction: column;
+	min-width: 20vh;
+	max-width: 70%;
+	height: 15vh;
+	justify-content: center;
+	text-align: center;
+}
+#userName
+{
+	margin: 0;
+	position: relative;
+
+	font-size: 2.5em;
+	font-family: 'Lato';
+    font-weight: bolder;
+    white-space: pre-wrap;
+    color: rgb(15, 98, 131);
+}
+
+
+#maindisplay
+{
+    width: 90%;
+    margin-top: 2vh;
+    margin-left: 5%;
+    color:white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    flex-wrap: wrap;
+}
+.strike
+{
+    width: 100%;
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--card-color);
+    border-radius: 10px;
+    border: 1px solid #fffff042;
+}
+.strike-info > h3 >  span> img
+{
+    border: none;
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    transform: translateY(0.25em);
+}
+.strike-info > h3 > span
+{
+    background-color: rgb(44, 151, 238);
+    height: 5em;
+    border: none;
+    border-radius: 5px;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    padding-bottom: 0.2em;
+}
+.strike-info > h3 > span.striked
+{
+    background-color: rgb(58, 23, 23);
+}
+.strike-info {
+    flex: 4;
+}
+
+.actions {
+    flex:2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    color:white;
+    cursor: pointer;
+    margin-right: 1em;
+  
+}
+.actions >div:hover
+{
+    background-color: darkslategray;
+    border:none;
+    border-radius: 5px;
+}

public/js/dashboard.js

@@ -45,6 +45,7 @@ function updateGuildData(accessToken, tokenType)
         if(guilds.Error) return console.log(guilds.Error)
         guildsCache = new Map();
         guilds.forEach(guild => {
+            console.log(guild)
             guildsCache.set(guild.id, guild)
         });
         makeCards(guilds);
@@ -86,7 +87,6 @@ function handleClose(element)
 }
 async function requestChange()
 {
-    console.log('here')
     return await fetch(`${window.location.origin}/api/change`, 
     {
         method: "POST",
@@ -563,4 +563,9 @@ async function channelCheck(yt)
             return error;
         });
     return res
+}
+function handleStrikesDashboard(element)
+{
+    const guildID = element.parentNode.getElementsByTagName('h3')[0].id;
+    window.open(`${window.location.origin}/strikes/${guildID}/${userID}`, '_blank');
 }

routes/routes.js

@@ -23,6 +23,11 @@ module.exports = (io, bot)=>
     router.route('/dashboard').get(dash.get(io))
                               .post(dash.post(io));
     router.route('/getMessage').get(api.getMessage(bot));
+    //! Using ? on a param makes it optional
+    router.route('/strikes/:id/:userid/:strikeid?').get(api.strikeDashboard(bot))
+                                        .post(api.getStrikes(bot))  
+                                        .put(api.updateStrikes(bot))
+                                        .delete(api.deleteStrikes(bot));
     router.route('/dc').get(homeController.dc);
     router.route('/addtodiscord').get(homeController.addtodiscord)
     return router;

views/strikelist.ejs

@@ -0,0 +1,36 @@
+<% strikes.forEach(strike=>{%>
+    <div class="strike">
+        <div class="strike-info">
+            <h3> User:
+                <span class="striked">
+                    <% if (strike.strokedAvatar !== 'NOAVATAR') { %>
+                        <img src="https://cdn.discordapp.com/avatars/<%= strike.strokedID %>/<%= strike.strokedAvatar %>.jpeg" alt="Striker Avatar">
+                    <% } %>
+                    <%= strike.strokedName %>
+                </span>
+                was struck
+            </h3>
+            <h3> by:
+                <span>
+                    <% if (strike.strikerAvatar !== 'NOAVATAR') { %>
+                        <img src="https://cdn.discordapp.com/avatars/<%= strike.strikerID %>/<%= strike.strikerAvatar %>.jpeg" alt="Striker Avatar">
+                    <% } %>
+                    <%= strike.strikerName %>
+                </span>
+            </h3>
+            <h3> With the reason: <%= strike.reason %> </h3>
+            <h5> Lasting until: <%=new Date(strike.expireAt).toDateString()%> </h5>
+        </div>
+        <% if(!strike.validated){ %> 
+            <div class="actions">
+                <div>
+                    <h4 hx-put="/strikes/<%= strike.guildID %>/<%= moderator%>/<%= strike._id %>" hx-target="#maindisplay"> Validate ✔</h4>
+                </div>
+                <div>
+                    <h4 hx-delete="/strikes/<%= strike.guildID %>/<%= moderator%>/<%= strike._id %>" hx-target="#maindisplay"> Remove ❌</h4>
+                </div>
+            </div>
+        <% } %> 
+    </div>      
+	
+<% });%>

views/strikesDashboard.ejs

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <link rel="shortcut icon" href="/images/favicon.ico"/>
+  <title>Rem-chan at your service</title>
+  <link rel="stylesheet" type="text/css" href="/css/strikesdashboard.css" id="pagesheet"/>
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+</head>
+
+<body>
+</body>
+    <div id="userWrapper">
+        <div id="avatar" style="background-image: url(https://cdn.discordapp.com/icons/<%= guild.id %>/<%= guild.icon%>.webp)"></div> <!--it works somehow --> 
+        <div class="userNameWrapper">
+            <p id="userName"><%= guild.name%></p>
+        </div>
+    </div>
+    <div id="maindisplay">
+        <%- include('strikelist.ejs') %>
+    </div>
+</body>
+
+</html>
+