ban/unban buttons added to profile

several css tweaks
changed administratorIPs to PrivilegedClients
added time step references to profile page

WebfrontCore/wwwroot/css/Site.scss

@@ -75,4 +75,20 @@ a.link-inverse:hover {
     border-color: $primary;
     border-left: 0;
     border-right: 0;
+}
+
+.close {
+    text-shadow: none !important;
+}
+
+.modal-footer {
+    border-top-color: $orange;
+}
+
+.modal-header {
+    border-bottom-color: $orange;
+}
+
+form * {
+    border-radius: 0 !important;
 }

WebfrontCore/wwwroot/css/profile.css

@@ -70,10 +70,6 @@
     color: white;
 }
 
-.profile-meta-entry {
-
-}
-
 .penalties-color-kick,
 .penalties-color-unban {
     color: rgba(116, 147, 99, 1);
@@ -101,22 +97,20 @@
 
 #profile_aliases_btn {
     position: relative;
-    top: auto;
-    margin-top: 0.7em;
+    top: -2px;
     font-size: 0.5em;
     color: rgb(0, 122, 204);
     cursor: pointer;
 }
 
     #profile_aliases_btn:hover {
-        color: white;
+        opacity: 0.75;
         cursor: pointer;
     }
 
 #profile_aliases {
     position: relative;
     display: none;
-  
 }
 
 #profile_avatar {
@@ -141,19 +135,26 @@
     border-bottom: 2px rgb(0, 122, 204) solid;
 }
 
+.profile-event-timestep {
+    font-size: 1.25rem;
+}
+
 #profile_level > span.level {
     color: rgba(236, 130, 222, 0.69);
-    font-weight: bold; 
+    font-weight: bold;
 }
 
 #profile_wrapper {
     border-bottom: 2px rgb(0, 122, 204) solid;
 }
 
-#profile_name {
-  
+.profile-action {
+    font-size: 0.5em;
+    padding-left: 0.25em;
+    cursor: pointer;
+    top: -2px !important;
 }
 
-#profile_info > .text-muted {
-  
+.profile-action:hover{
+    opacity: 0.75;
 }

WebfrontCore/wwwroot/js/profile.js

@@ -22,7 +22,7 @@ $(document).ready(function () {
                 count++;
                 return false;
             }
-            count++
+            count++;
         }
     });
 
@@ -68,12 +68,44 @@ $(document).ready(function () {
 
     });
 
+    /*
+     * handle action modal
+     */
+    $('.profile-action').click(function (e) {
+        const actionType = $(this).data('action');
+        $.get('/Action/' + actionType + 'Form')
+            .done(function (response) {
+                $('#actionModal .modal-body').html(response);
+                $('#actionModal').modal();
+            })
+            .fail(function (jqxhr, textStatus, error) {
+                $('#actionModal .modal-body').html('<span class="text-danger">' + error + '</span>');
+                $('#actionModal').modal();
+            });
+    });
+
+    /*
+     * handle action submit
+     */
+    $(document).on('submit', '.action-form', function (e) {
+        e.preventDefault();
+        $(this).append($('#target_id input'));
+        const data = $(this).serialize();
+        $.get($(this).attr('action') + '/?' + data)
+            .done(function (response) {
+                $('#actionModal .modal-body').html(response);
+                $('#actionModal').modal();
+            })
+            .fail(function (jqxhr, textStatus, error) {
+                $('#actionModal .modal-body').html('<span class="text-danger">Error' + error + '</span>');
+            });
+    });
 });
 
 function penaltyToName(penaltyName) {
     switch (penaltyName) {
         case "Flag":
-            return "Flagged"
+            return "Flagged";
         case "Warning":
             return "Warned";
         case "Report":
@@ -89,15 +121,56 @@ function penaltyToName(penaltyName) {
     }
 }
 
+function shouldIncludePlural(num) {
+    return num > 1 ? 's' : '';
+}
+
+let mostRecentDate = 0;
+let currentStepAmount = 0;
+let lastStep = "";
+function timeStep(stepDifference) {
+    let hours = (stepDifference / (1000 * 60 * 60));
+    let days = (stepDifference / (1000 * 60 * 60 * 24));
+    let weeks = (stepDifference / (1000 * 60 * 60 * 24 * 7));
+
+    if (Math.round(weeks) > Math.round(currentStepAmount / 24 * 7)) {
+        currentStepAmount = Math.round(weeks);
+        return `${currentStepAmount} week${shouldIncludePlural(currentStepAmount)} ago`;
+    }
+
+    if (Math.round(days) > Math.round(currentStepAmount / 24)) {
+        currentStepAmount = Math.round(days);
+        return `${currentStepAmount} day${shouldIncludePlural(currentStepAmount)} ago`;
+    }
+
+    if (Math.round(hours) > currentStepAmount) {
+        currentStepAmount = Math.round(hours);
+        return `${currentStepAmount} hour${shouldIncludePlural(currentStepAmount)} ago`;
+    }
+}
+
 function loadMeta(meta) {
     let eventString = '';
+    const metaDate = Date.parse(meta.when);
+
+    if (mostRecentDate === 0) {
+        mostRecentDate = metaDate;
+    }
+
+    const step = timeStep(new Date().getTime() - metaDate);
+
+    if (step !== lastStep) {
+        $('#profile_events').append('<span class="p2 text-white profile-event-timestep"><span class="text-primary">&mdash;</span> ' + step + '</span>');
+        lastStep = step;
+    }
+
     // it's a penalty
     if (meta.class.includes("Penalty")) {
         if (meta.value.punisherId !== clientInfo.clientId) {
-            eventString = `<div><span class="penalties-color-${meta.value.type.toLowerCase()}">${penaltyToName(meta.value.type)}</span> by <span class="text-highlight"> <a class="link-inverse"  href="${meta.value.punisherId}">${meta.value.punisherName}</a></span > for <span style="color: white; ">${meta.value.offense}</span> ${meta.whenString} ago </div>`;
+            eventString = `<div><span class="penalties-color-${meta.value.type.toLowerCase()}">${penaltyToName(meta.value.type)}</span> by <span class="text-highlight"> <a class="link-inverse"  href="${meta.value.punisherId}">${meta.value.punisherName}</a></span > for <span style="color: white; ">${meta.value.offense}</span></div>`;
         }
         else {
-            eventString = `<div><span class="penalties-color-${meta.value.type.toLowerCase()}">${penaltyToName(meta.value.type)} </span> <span class="text-highlight"><a class="link-inverse" href="${meta.value.offenderId}"> ${meta.value.offenderName}</a></span > for <span style="color: white; ">${meta.value.offense}</span> ${meta.whenString} ago </div>`;
+            eventString = `<div><span class="penalties-color-${meta.value.type.toLowerCase()}">${penaltyToName(meta.value.type)} </span> <span class="text-highlight"><a class="link-inverse" href="${meta.value.offenderId}"> ${meta.value.offenderName}</a></span > for <span style="color: white; ">${meta.value.offense}</span></div>`;
         }
     }
     // it's a message

WebfrontCore/wwwroot/js/server.js

@@ -22,7 +22,7 @@
             lineThickness: 0,
             tickThickness: 0,
             margin: 0,
-            valueFormatString: " ",
+            valueFormatString: " "
         },
         axisY: {
             gridThickness: 0,
@@ -31,19 +31,19 @@
             minimum: 0,
             margin: 0,
             valueFormatString: " ",
-            labelMaxWidth: 0,
+            labelMaxWidth: 0
         },
         legend: {
             maxWidth: 0,
             maxHeight: 0,
-            dockInsidePlotArea: true,
+            dockInsidePlotArea: true
         },
         data: [{
             showInLegend: false,
             type: "splineArea",
             color: "rgba(0, 122, 204, 0.432)",
             markerSize: 0,
-            dataPoints: playerHistory,
+            dataPoints: playerHistory
         }]
     });
     //////////////////////////////////////
@@ -63,9 +63,9 @@ $(window).resize(function () {
     $('.server-history-row').each(function (index) {
         let serverId = $(this).data('serverid');
         charts[serverId].options.width = $('.server-header').first().width();
-        charts[serverId].render()
+        charts[serverId].render();
     });
-})
+});
 
 function refreshClientActivity() {
     $('.server-history-row').each(function (index) {

WebfrontCore/wwwroot/lib/bootstrap/dist/css/bootstrap.css

@@ -6085,3 +6085,15 @@ a.link-inverse:hover {
   border-left: 0;
   border-right: 0; }
 
+.close {
+  text-shadow: none !important; }
+
+.modal-footer {
+  border-top-color: #fd7e14; }
+
+.modal-header {
+  border-bottom-color: #fd7e14; }
+
+form * {
+  border-radius: 0 !important; }
+