Update dashboard design, fix 500 and 404 pages

IgorKowalczyk · Apr 16, 2022 · 4c5d665 · 4c5d665
1 parent 48cd868
commit 4c5d665
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 30 deletions.
diff --git a/config/main_config.js b/config/main_config.js
@@ -24,12 +24,11 @@ module.exports = {
  ratelimit: 2500, // Global slash command ratelimit in ms (can be customized for each command)
  max_input: 200, // Maximum text input for slash commands (characters)
 
-  // DEPRECATED SETTINGS:
+ // DEPRECATED SETTINGS:
  use_text_commands: true, // Allow usage of *DEPRECATED* text commands (You have to enable Message intent in Discord Developer Portal)
  prefix: process.env.PREFIX, // Client text commands prefix [DEPRECATED]
  suggestions_channel: "838092194530852884", // Suggestions channel [DEPRECATED]
-
-
+
  member_limit: {
   respect: false, // Respect guild member limit
   min_members: 15, // Minimum guild members to join the bot

diff --git a/dashboard/index.js b/dashboard/index.js
@@ -718,18 +718,18 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
  });
 
  // 404
- app.use(function (req, res) {
+ app.use(function (req, res, next) {
   res.status(404);
   res.set("Cache-control", "no-cache, must-revalidate, max-age=0");
   renderTemplate(res, req, "404.ejs");
  });
 
  // 500
- app.use((error, req, res) => {
+ app.use((error, req, res, next) => {
   console.error(error);
   res.status(500);
   renderTemplate(res, req, "500.ejs", {
-   error: error,
+   error: error.message,
   });
  });
 

diff --git a/dashboard/static/css/server.css b/dashboard/static/css/server.css
@@ -25,6 +25,13 @@
 }
 
 @media (max-width: 992px) {
+ .highcharts-figure {
+  margin: 0;
+  margin-top: 20px;
+ }
+ .highcharts-root {
+  margin: 0 !important;
+ }
  .grid-1,
  .grid-2 {
   float: unset;
@@ -96,13 +103,6 @@ input:focus {
  fill: #fff !important;
  font-family: "Poppins" !important;
 }
-.highcharts-point {
- fill: #5865f2;
- stroke: #5865f2;
-}
-.highcharts-graph {
- stroke: #5865f2;
-}
 .highcharts-credits {
  display: none;
 }
@@ -137,3 +137,6 @@ text {
 .highcharts-axis-line {
  display: none !important;
 }
+.highcharts-point {
+ stroke: none !important;
+}
diff --git a/dashboard/templates/404.ejs b/dashboard/templates/404.ejs
@@ -1,8 +1,8 @@
 <%- include("includes/head", { bot, user, path, title: "404!" }) %>
 <div class="content">
 <h1 class="center error-icon">T^T</h1>
- <h1 class="center" style="margin-bottom: 0">Error 404!</h1>
- <h3 class="center">This page does not exit!</h3>
+ <h1 class="center" style="margin-bottom: 0; font-weight: 500">Error 404!</h1>
+ <h3 class="center">This page does not exist. If you think it is a mistake try again later!</h3>
 <!-- Leave me alone.. Please -->
 <p style="display: none; text-align: center">Cari.. I STILL LOVE YOU ❤️...<br>
 I would do everything for you. I love you more than anything.<br>
@@ -11,7 +11,6 @@ I'm honest with you and I love you for that disgusting but beautiful too charact
 You're the most important person to me even though I'm telling you this for the millionth time.<br>
 If you're reading this, know that I love you and that I would give my life for you..<br><br>
 PS.. that emote at the bottom is your edit.... You pasted this to my code once... You did it when everything was good between us (well almost..).. Bye.. ~Majonez.exe</p>
-<p class="error">This page does not exist. If you think it is a mistake try again later</p>
- <a class="add button center-button blue" href="<%= secure_connection %><%= domain %><%= port %>/">Go back to home page!</a>
+ <a class="add button center-button blue" href="<%= secure_connection %><%= domain %><%= port %>/">Go back to home!</a>
   <span style="font-style: initial;opacity: 0.4;color: #fff;margin-top: 14px;" title="You may want inspecting element?">╭∩╮(♥ᴥ♥)╭∩╮</span>
 <%- include("includes/footer") %>
diff --git a/dashboard/templates/500.ejs b/dashboard/templates/500.ejs
@@ -1,11 +1,13 @@
 <%- include("includes/head", { bot, user, path, title: "Error: 500!" }) %>
 <div class="content">
 <h1 class="center error-icon">T^T</h1>
- <h1 class="center" style="margin-bottom: 0">Error 500!</h1>
- <h3 class="center">An error occurred while viewing this page!</h3>
- <p class="error"><span style="font-weight: bold">Internal server error - the server encountered unexpected problems that prevented the request from completing. Please try again later</span></p>
-   <p class="error"><span style="font-weight: bold"><%= error.toString() %></span></p>
- <a class="add button center-button blue" href="<%= secure_connection %><%= domain %><%= port %>/">Go back to home page!</a>
+ <h1 class="center" style="margin-bottom: 0; font-weight: 500">Error 500!</h1>
+ <h3 class="center">Internal server error - the server encountered unexpected problems that prevented the request from completing. Please try again later</h3>
+<details>
+ <summary style="text-align: center;color: rgba(255,0,0,0.8); margin-bottom: 10px;">Show error stack</summary>
+ <p class="error"><span><%= error -%></span></p>
+</details>
+ <a class="add button center-button blue" href="<%= secure_connection %><%= domain %><%= port %>/">Go back to home!</a>
  <%- include("includes/footer") %>
 </div>
 

diff --git a/dashboard/templates/commands.ejs b/dashboard/templates/commands.ejs
@@ -1,5 +1,5 @@
 <%- include("includes/head", { bot, user, path, title: "Commands" }) %>
 <div class="content">
-<h1 class="center"><%= bot.user.username.capitalize() %> Commands (<%= bot.commands.size %>)</h1>
+<h1 class="center"><%= bot.user.username.capitalize() %> Commands (<%= bot.all_commands %>)</h1>
 
 <%- include("includes/footer") %>
diff --git a/dashboard/templates/server/server.ejs b/dashboard/templates/server/server.ejs
@@ -115,6 +115,23 @@ close_banner.addEventListener("click", function () {
    <p style="opacity: 0.5">All data is cleared on the first day of the month.</p> 
   </div>
 </figure>
+<style>
+  .highcharts-legend-item text {
+  fill: #b9bbbe !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  cursor: pointer !important;
+  stroke-width: 0 !important;
+  }
+  .highcharts-axis-labels {
+  fill: #b9bbbe !important;
+  cursor: default !important;
+  font-size: 12px !important;
+}
+  .highcharts-tooltip .highcharts-tooltip-box {
+    fill: #0e0e17 !important;
+  }
+</style>
 <script>
 let joins_array = <%- JSON.stringify(joins) %>;
 let leaves_array =  <%- JSON.stringify(leaves) %>;
@@ -129,16 +146,25 @@ Highcharts.chart('container', {
  title: {
   text: null
  },
+ tooltip: {
+  crosshairs: [{
+   width: 1.5,
+   color: '#404752'
+  }],
+  shared: true,
+  useHTML: false,
+  valueDecimals: 0,
+  borderRadius: 5,
+  borderWidth: 0,
+  shadow: false,
+ },
  yAxis: {
   minTickInterval: 1,
   title: {
    text: 'Members'
   } 
  },
  xAxis: {
-  //  tickInterval: 1,
-  //   startOnTick: true,
-  //endOnTick: true,
   type: 'datetime',
   dateTimeLabelFormats: {
    millisecond: '%b %e',
@@ -157,14 +183,22 @@ Highcharts.chart('container', {
   verticalAlign: 'middle'
  },
  series: [
-  {
-   name: 'Joins',
-   data: joins_array,
-  },
   {
    name: 'Leaves',
+   color: '#ea595b',
+   marker: {
+   symbol: 'circle',
+   },
    data: leaves_array,
   },
+  {
+   name: 'Joins',
+   color: '#57f288',
+   marker: {
+   symbol: 'circle',
+   },
+   data: joins_array,
+  },
  ],
  responsive: {
   rules: [{