299 lines
7.9 KiB
Text
299 lines
7.9 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<%- include('partials/preloader.ejs', {now:'index', req: req}) %>
|
|
<%
|
|
let currentScheme = themeConfig.colorScheme;
|
|
let colone;
|
|
let coltwo;
|
|
let gradone;
|
|
let gradtwo;
|
|
|
|
if (currentScheme == "blue") {
|
|
colone = "#21d4fd";
|
|
coltwo = "#2152ff";
|
|
gradone = "rgba(33,212,253,0.1)";
|
|
gradtwo = "rgba(33,82,255,0.1)";
|
|
}
|
|
if (currentScheme == "pink") {
|
|
colone = "#FF0080";
|
|
coltwo = "#7928CA";
|
|
gradone = "rgba(255,0,128,0.1)";
|
|
gradtwo = "rgba(121,40,202,0.1)";
|
|
}
|
|
if (currentScheme == "red") {
|
|
colone = "#ea0606";
|
|
coltwo = "#ff667c";
|
|
gradone = "rgba(255,102,124,0.1)";
|
|
gradtwo = "rgba(234,6,6,0.1)";
|
|
}
|
|
if (currentScheme == "green") {
|
|
colone = "#17ad37";
|
|
coltwo = "#98ec2d";
|
|
gradone = "rgba(23,173,55,0.1)";
|
|
gradtwo = "rgba(152,236,45,0.1)";
|
|
}
|
|
if (currentScheme == "yellow") {
|
|
colone = "#f53939";
|
|
coltwo = "#fbcf33";
|
|
gradone = "rgba(245,57,57,0.1)";
|
|
gradtwo = "rgba(251,207,51,0.1)";
|
|
}
|
|
if (currentScheme == "dark") {
|
|
colone = "#141727";
|
|
coltwo = "#3A416F";
|
|
gradone = "rgba(20,23,39,0.1)";
|
|
gradtwo = "rgba(58,65,111,0.1)";
|
|
}
|
|
if (currentScheme == "custom") {
|
|
colone = themeConfig.themeColors.primaryColor;
|
|
coltwo = themeConfig.themeColors.secondaryColor;
|
|
gradone = hexToRgbA(themeConfig.themeColors.primaryColor, 0.1);
|
|
gradtwo = hexToRgbA(themeConfig.themeColors.secondaryColor, 0.1);
|
|
}
|
|
|
|
function hexToRgbA(hex){
|
|
var c;
|
|
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
|
c= hex.substring(1).split('');
|
|
if(c.length== 3){
|
|
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
}
|
|
c= '0x'+c.join('');
|
|
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
|
|
}
|
|
throw new Error('Bad Hex');
|
|
}
|
|
%>
|
|
<head>
|
|
<style>
|
|
.unselectable {
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|
|
<%- themeConfig?.customHtml %>
|
|
</head>
|
|
<body class="g-sidenav-show bg-gray-100" id="scroll">
|
|
<%- include('partials/preload.ejs') %>
|
|
<%- include('partials/sidebar.ejs', {config: config, now:'shards'}) %>
|
|
<div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
|
|
<!-- Navbar -->
|
|
<%- include('partials/navbar.ejs', {now:'shards'}) %>
|
|
<!-- End Navbar -->
|
|
<% let image; if (themeConfig.shardspage.backgroundUrl) { image=themeConfig.shardspage.backgroundUrl } else { const images=["curved-1", "curved-2" , "curved-3" , "curved-4" , "curved-5" , "curved-6" , "curved-7"
|
|
, "curved-8" , "curved-9" , "curved-10" , "curved-11" , "curved-12" , "curved-13" , "curved-14"
|
|
, "curved-15" , "curved-16" , "curved-17" , "curved-18" ]; image="/img/curved-images/" + images[Math.floor(Math.random() *
|
|
images.length)]+ ".webp";} %>
|
|
<div class="container-fluid">
|
|
<div class="page-header min-height-300 border-radius-xl mt-4"
|
|
style="background-image: url('<%- image %>'); background-position-y: 50%;">
|
|
<span class="mask bg-gradient-primary opacity-6"></span>
|
|
</div>
|
|
<div class="card card-body blur shadow-blur mx-4 mt-n6 overflow-hidden">
|
|
<div class="row gx-4">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-xl position-relative">
|
|
<img id="img" src="<%- themeConfig.icons.sidebar.darkUrl %>" alt="profile_image"
|
|
class="w-100 border-radius-lg shadow-sm">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto my-auto">
|
|
<div class="h-100">
|
|
<h5 id="title" class="mb-1">
|
|
Bot Shards Status
|
|
</h5>
|
|
<p id="desc" class="mb-0 font-weight-bold text-sm">
|
|
<b>Total Shards: </b>
|
|
<span id="totalshards">Loading</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="container">
|
|
<div class="row" style="row-gap: 1rem;" id="shardlist">
|
|
<span>
|
|
Loading...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer.ejs') %>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- Graph Code !-->
|
|
<%- include('partials/scripts.ejs', {now: "shards"}) %>
|
|
|
|
<script>
|
|
let graphs = {};
|
|
async function updateshards(first){
|
|
let timeout
|
|
await $.get("/shards/get", function(data, status){
|
|
if (first)
|
|
$('#shardlist').empty()
|
|
|
|
data = data.sort((a, b) => a.id - b.id);
|
|
|
|
$('#totalshards').html(data.length)
|
|
|
|
if (!first) {
|
|
for (const shard in data) {
|
|
const shardObj = data[shard];
|
|
$(`userCount-${shardObj.id}`).html(shardObj.users)
|
|
$(`serverCount-${shardObj.id}`).html(shardObj.servers)
|
|
$(`channelCount-${shardObj.id}`).html(shardObj.channels)
|
|
const graph = Chart.getChart(`chart-line-${shardObj.id}`)
|
|
graph.data.datasets[0].data = data[shard].ping;
|
|
graph.update();
|
|
}
|
|
}
|
|
|
|
if (first)
|
|
for (const shard in data) {
|
|
let row = $(`
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex flex-column h-100">
|
|
<p class="mb-1 pt-2 text-bold">Shard - ${data[shard].id}</p>
|
|
<div class="m-0 d-flex" style="gap: 5px;">
|
|
<i class="ni ni-circle-08 align-self-center"></i> Users: <span id="userCount-${data[shard].id}">${data[shard].users.toLocaleString()}</span><br>
|
|
</div>
|
|
<div class="m-0 d-flex" style="gap: 5px;">
|
|
<i class="ni ni-laptop align-self-center"></i> Servers: <span id="serverCount-${data[shard].id}">${data[shard].guilds.toLocaleString()}</span><br>
|
|
</div>
|
|
<div class="m-0 d-flex" style="gap: 5px;">
|
|
<i class="ni ni-collection align-self-center"></i> Channels: <span id="channelCount-${data[shard].id}">${data[shard].channels.toLocaleString()}</span><br>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="chart-line-${data[shard].id}" class="chart-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`)
|
|
$('#shardlist').append(row.clone(true))
|
|
}
|
|
|
|
if (first) {
|
|
for (const shard in data) {
|
|
const graph = createGraph(data[shard]);
|
|
graphs[data[shard].id] = graph;
|
|
}
|
|
}
|
|
timeout = data[0].interval
|
|
});
|
|
return timeout
|
|
}
|
|
window.onload = async function() {
|
|
const interval = await updateshards(true)
|
|
setInterval(function(){
|
|
updateshards(false)
|
|
}, interval || 15000);
|
|
};
|
|
</script>
|
|
<script>
|
|
function createGraph(shard) {
|
|
const { id, ping, interval } = shard;
|
|
|
|
const seconds = interval / 1000;
|
|
|
|
let labels = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
labels.push(`${i * seconds}s`);
|
|
}
|
|
|
|
let ctx = document.getElementById(`chart-line-${id}`).getContext("2d");
|
|
var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
|
|
|
|
gradientStroke1.addColorStop(1, '<%= colone %>');
|
|
gradientStroke1.addColorStop(0.1, '<%= gradone %>');
|
|
gradientStroke1.addColorStop(0, '<%= gradtwo %>'); //purple colors
|
|
const chart = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: "ping",
|
|
tension: 0.4,
|
|
borderWidth: 0,
|
|
pointRadius: 0,
|
|
borderColor: "<%- colone %>",
|
|
borderWidth: 3,
|
|
backgroundColor: gradientStroke1,
|
|
fill: true,
|
|
data: ping,
|
|
maxBarThickness: 6
|
|
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
suggestedMin: 0,
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
padding: 10,
|
|
color: '#b2b9bf',
|
|
font: {
|
|
size: 11,
|
|
family: "Open Sans",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#b2b9bf',
|
|
padding: 20,
|
|
font: {
|
|
size: 11,
|
|
family: "Open Sans",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
return chart
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|