Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
962ad67
refactor code and add web panel
SegoCode Mar 13, 2025
2efabf4
Update .gitignore
SegoCode Mar 13, 2025
647fbee
Update PanelController.java
SegoCode Mar 13, 2025
9de2f6f
Update PanelController.java
SegoCode Mar 13, 2025
59f6960
move views to resource folder
SegoCode Mar 13, 2025
4302910
Create demo3.png
SegoCode Mar 13, 2025
25cb168
Update CommandExecutor.java
SegoCode Mar 23, 2025
d2c1860
Update admin.html
SegoCode Mar 23, 2025
4c6cc53
Update admin.html
SegoCode Mar 24, 2025
a2a4c3b
Update CommandExecutor.java
SegoCode Mar 25, 2025
512f68c
Update CommandExecutor.java
SegoCode Mar 25, 2025
ef8a109
Update CommandExecutor.java
SegoCode Mar 25, 2025
52fead9
Update CommandExecutor.java
SegoCode Mar 25, 2025
fa09a3f
Update CommandExecutor.java
SegoCode Mar 25, 2025
e108ef3
Update Messages.java
SegoCode Mar 25, 2025
d9e69d1
Update CommandExecutor.java
SegoCode Mar 25, 2025
5096c82
Delete CommandExecutor.java
SegoCode Mar 25, 2025
5a5c7bc
Delete Utils.java
SegoCode Mar 27, 2025
5640c54
Update FileUtil.java
SegoCode Mar 27, 2025
5c9255d
Update Webdlbot.java
SegoCode Mar 27, 2025
13c5476
Update Webdlbot.java
SegoCode Mar 27, 2025
3b88ef3
Update Main.java
SegoCode Mar 27, 2025
53ee2a1
Update Webdlbot.java
SegoCode Mar 27, 2025
619ec1f
Update Webdlbot.java
SegoCode Mar 27, 2025
ff70c20
Update admin.html
SegoCode Mar 28, 2025
386aee8
Update admin.html
SegoCode Mar 28, 2025
a7727be
Update admin.html
SegoCode Mar 28, 2025
f0e6405
Update admin.html
SegoCode Mar 28, 2025
6f47b4d
Update admin.html
SegoCode Mar 28, 2025
8e525ad
Update admin.html
SegoCode Mar 28, 2025
1978b07
Update update-license.yml
SegoCode Apr 1, 2025
d5166ef
Create demoPanel.png
SegoCode Apr 2, 2025
8960170
Update README.md
SegoCode Apr 2, 2025
cd36ca8
Update LICENSE with repository information
invalid-email-address Apr 2, 2025
5ed0706
Merge remote-tracking branch 'origin/main' into develop
invalid-email-address Apr 2, 2025
b771efa
Merge remote-tracking branch 'origin/main' into develop
invalid-email-address Apr 2, 2025
bbed8b2
Update demoPanel.png
SegoCode Apr 2, 2025
cb60585
Merge branch 'develop' of https://github.com/SegoCode/webdl into develop
SegoCode Apr 2, 2025
757bf40
Delete demo3.png
SegoCode Apr 2, 2025
ec03718
Simplify html view
SegoCode May 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 35 additions & 117 deletions code/src/main/resources/views/admin.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Usage dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body class="bg-gray-50 min-h-screen">

Expand All @@ -14,37 +13,31 @@
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="p-2 bg-indigo-100 rounded-lg">
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h1 class="text-2xl font-bold tracking-tight text-gray-900">Usage Dashboard</h1>
</div>
<div class="flex items-center space-x-2 text-sm text-gray-500">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Last updated: <span id="lastUpdate" class="font-medium"></span></span>
</div>
</div>
</header>


<!-- Main Content -->
<main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<!-- Stats Overview -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-6">
<!-- Stat Box Template -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
<!-- Total Users -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-100 mr-4">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div>
Expand All @@ -53,11 +46,13 @@ <h3 class="text-gray-500 text-sm font-medium">Total users</h3>
</div>
</div>
</div>

<!-- Total Messages -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-100 mr-4">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
</svg>
</div>
<div>
Expand All @@ -66,16 +61,13 @@ <h3 class="text-gray-500 text-sm font-medium">Total messages</h3>
</div>
</div>
</div>

<!-- Average Messages -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 mr-4">
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<div>
Expand All @@ -84,33 +76,23 @@ <h3 class="text-gray-500 text-sm font-medium">Avg messages/user</h3>
</div>
</div>
</div>

<!-- Active Countries -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-yellow-100 mr-4">
<svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
<svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
</svg>
</div>
<div>
<h3 class="text-gray-500 text-sm font-medium">Active Countrys</h3>
<p class="text-2xl font-bold text-gray-900" id="activeCountrys">0</p>
<h3 class="text-gray-500 text-sm font-medium">Active Countries</h3>
<p class="text-2xl font-bold text-gray-900" id="activeCountries">0</p>
</div>
</div>
</div>
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-medium mb-4">Messages per user</h3>
<div id="messagesPerUserChart"></div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-medium mb-4">Country distribution</h3>
<div id="CountryChart"></div>
</div>
</div>

<!-- Users Table -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">User activity</h2>
Expand All @@ -134,31 +116,30 @@ <h2 class="text-xl font-semibold mb-4">User activity</h2>
<!-- Scripts -->
<script>
const users = {{!user_data}}

document.addEventListener('DOMContentLoaded', () => {
updateLastUpdatedTime();
updateStats();
initTable();
});

function updateLastUpdatedTime() {
const lastUpdateElement = document.getElementById('lastUpdate');
if (lastUpdateElement) {
lastUpdateElement.textContent = new Date().toLocaleString();
}
updateStats();
initTable();
initCharts();
});
}

function updateStats() {
const totalUsers = users.length;
const totalMessages = users.reduce((sum, user) => sum + user.messageCount, 0);
const avgMessages = totalUsers > 0 ? Math.round(totalMessages / totalUsers) : 0;
const activeCountrys = new Set(users.map(u => u.languageCode)).size;

const totalUsersElement = document.getElementById('totalUsers');
const totalMessagesElement = document.getElementById('totalMessages');
const avgMessagesElement = document.getElementById('avgMessages');
const activeCountrysElement = document.getElementById('activeCountrys');
const activeCountries = new Set(users.map(u => u.languageCode)).size;

if (totalUsersElement) totalUsersElement.textContent = totalUsers;
if (totalMessagesElement) totalMessagesElement.textContent = totalMessages.toLocaleString();
if (avgMessagesElement) avgMessagesElement.textContent = avgMessages;
if (activeCountrysElement) activeCountrysElement.textContent = activeCountrys;
document.getElementById('totalUsers').textContent = totalUsers;
document.getElementById('totalMessages').textContent = totalMessages.toLocaleString();
document.getElementById('avgMessages').textContent = avgMessages;
document.getElementById('activeCountries').textContent = activeCountries;
}

function initTable() {
Expand All @@ -184,69 +165,6 @@ <h2 class="text-xl font-semibold mb-4">User activity</h2>
tableBody.appendChild(row);
});
}

function initCharts() {
// Messages per User Chart
const messagesPerUserOptions = {
series: [{
name: 'Messages',
data: users.map(user => user.messageCount)
}],
chart: {
type: 'bar',
height: 350,
},
plotOptions: {
bar: {
borderRadius: 10,
}
},
colors: ['#4F46E5'],
xaxis: {
categories: users.map(user => user.userName),
position: 'bottom'
},
dataLabels: {
enabled: false
},
};

const messagesPerUserChart = new ApexCharts(document.querySelector("#messagesPerUserChart"), messagesPerUserOptions);
messagesPerUserChart.render();

// Country Distribution Chart
const CountryCounts = users.reduce((counts, user) => {
counts[user.languageCode] = (counts[user.languageCode] || 0) + 1;
return counts;
}, {});

const CountryChartOptions = {
series: [{
name: 'Users',
data: Object.values(CountryCounts)
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 10,
}
},
colors: ['#4F46E5'],
xaxis: {
categories: Object.keys(CountryCounts).map(lang => lang.toUpperCase()),
position: 'bottom'
},
dataLabels: {
enabled: false
}
};

const CountryChart = new ApexCharts(document.querySelector("#CountryChart"), CountryChartOptions);
CountryChart.render();
}
</script>
</body>
</html>
Binary file removed media/demo3.png
Binary file not shown.