]> jfr.im git - irc/unrealircd/unrealircd-webpanel.git/blame - index.php
Make overview cards look fancier/modern
[irc/unrealircd/unrealircd-webpanel.git] / index.php
CommitLineData
709b97f3 1<?php
c06c1713 2require_once "inc/common.php";
41aad10c 3if (!isset($config['unrealircd']))
d8ad4cea 4{
1a6051db 5 $redirect = get_config("base_url")."settings/rpc-servers.php";
d8ad4cea
BM
6 header('Location: ' . $redirect);
7 die;
8}
9
c06c1713 10require_once "inc/header.php";
26971737 11
709b97f3 12?>
3737447f 13<div class="row ml-0">
c0abb0e6
BM
14 <h2>Network Overview</h2>
15 <div id="live_stats" data-toggle="tooltip" data-placement="top" title="The stats on this page are updated in real-time"
16 class="card text-center row font-weight-bold"
17 style="margin-left:5%;height:26px;width:60px;background-color:red;color:white;visibility:hidden">
18 <small style="margin-left:-40px;padding-top:3px;margin-right:-45px">⚪</small>LIVE
19 </div>
3737447f 20</div>
bdf7619a 21<?php
9a4a88b5 22$array_of_stats = [];
bdf7619a
VP
23
24/* What if someone wants to add their own stats... */
25Hook::run(HOOKTYPE_PRE_OVERVIEW_CARD, $array_of_stats);
26
27/* This makes sure that a plugin which called the parameter
28 * by reference can add/update the stats for display here.
29*/
30$stats = (object) $array_of_stats;
4fc503d8
VP
31$userlist = [];
32Hook::run(HOOKTYPE_GET_USER_LIST, $userlist);
33$num_of_panel_admins = count($userlist);
bdf7619a
VP
34
35?>
e76c47e1
VP
36<style>
37 .card {
b692ffa7
VP
38 min-height: 80%;
39 border-radius: 16px;
e76c47e1 40 }
b692ffa7
VP
41 .card-body i {
42 position: fixed;
43 top: 10px;
44 right: 10px;
45 }
46 .card:hover {
47 text-decoration: none;
48 }
49
50
51 .frosted-glass-success {
52 /* From https://css.glass */
53 background: rgba(63, 162, 36, 0.73);
54 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
55 backdrop-filter: blur(9.8px);
56 -webkit-backdrop-filter: blur(9.8px);
57 }
58 .frosted-glass-info {
59 /* From https://css.glass */
60 background: rgba(57, 127, 207, 0.73);
61 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
62 backdrop-filter: blur(9.8px);
63 -webkit-backdrop-filter: blur(9.8px);
64 }
65 .frosted-glass-danger {
66 /* From https://css.glass */
67 background: rgba(207, 57, 57, 0.73);
68 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
69 backdrop-filter: blur(9.8px);
70 -webkit-backdrop-filter: blur(9.8px);
71 }
72 .frosted-glass-warning {
73 /* From https://css.glass */
74 background: rgba(207, 194, 57, 0.73);
75 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
76 backdrop-filter: blur(9.8px);
77 -webkit-backdrop-filter: blur(9.8px);
78 }
79 .frosted-glass-secondary {
80 /* From https://css.glass */
81 background: rgba(75, 75, 75, 0.73);
82 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
83 backdrop-filter: blur(9.8px);
84 -webkit-backdrop-filter: blur(9.8px);
85 }
86
e76c47e1 87 </style>
b692ffa7 88<div class="container card-container ml-1">
440ff671 89
b692ffa7
VP
90<div class="row mt-3">
91 <div class="col-sm mb-3">
92 <a class="card frosted-glass-success text-center" href="<?php echo get_config("base_url"); ?>users/">
93 <div class="card-body text-white">
94 <div class="row text-center">
95 <span id="userRecord" class="position-absolute badge rounded-pill badge-warning" hidden>
9a4a88b5 96 <?php echo "Record: "; ?>
79ed2176 97 </span>
ce8122f0 98 <div class="col">
b692ffa7
VP
99 <div class="col">
100 <i aria-hidden="true" class="fa fa-users fa-2x"></i>
101 </div>
102 <div class="col">
103 <h5 id="stats_user_total" class="display-4"></h5>
104 <h5 class="display-5">Users Online</h5>
105 </div>
75c101fd 106 </div>
75c101fd
VP
107 </div>
108 </div>
b692ffa7 109 </a>
ce8122f0 110 </div>
33f512fa 111 <div class="col-sm mb-3">
b692ffa7
VP
112 <a class="card frosted-glass-info text-center" href="<?php echo get_config("base_url"); ?>channels/">
113 <div class="card-body text-white">
114 <div class="row text-center">
75c101fd 115 <div class="col">
b692ffa7
VP
116 <div class="col">
117 <i aria-hidden="true" class="fa fa-hashtag fa-2x"></i>
118 </div>
119 <div class="col">
120 <h5 id="stats_channel_total" class="display-4"></h5>
121 <h5 class="display-5">Channels</h5>
122 </div>
ce8122f0
VP
123 </div>
124 </div>
125 </div>
b692ffa7 126 </a>
ce8122f0 127 </div>
33f512fa 128 <div class="col-sm mb-3">
b692ffa7
VP
129 <a class="card frosted-glass-warning text-center" href="<?php echo get_config("base_url"); ?>users/">
130 <div class="card-body text-dark">
131 <div class="row text-center">
ce8122f0 132 <div class="col">
b692ffa7
VP
133 <div class="col">
134 <i aria-hidden="true" class="fa fa-shield-halved fa-2x"></i>
135 </div>
136 <div class="col">
137 <h5 id="stats_oper_total" class="display-4"></h5>
138 <h5 class="display-5" style="margin-top: -3px">Operators</h5>
139 <h5 style="font-size: 10px; margin-top:-12px">View in Users ></h5>
140 </div>
ce8122f0
VP
141 </div>
142 </div>
143 </div>
b692ffa7 144 </a>
ce8122f0 145 </div>
33f512fa 146 <div class="col-sm mb-3">
b692ffa7
VP
147 <a class="card frosted-glass-secondary text-center" href="<?php echo get_config("base_url"); ?>servers/">
148 <div class="card-body text-white">
149 <div class="row text-center">
75c101fd 150 <div class="col">
b692ffa7
VP
151 <div class="col">
152 <i aria-hidden="true" class="fa fa-network-wired fa-2x"></i>
153 </div>
154 <div class="col">
155 <h5 id="stats_server_total" class="display-4"></h5>
156 <h5 class="display-5">Servers</h5>
157 </div>
ce8122f0
VP
158 </div>
159 </div>
160 </div>
b692ffa7 161 </a>
ce8122f0
VP
162 </div>
163 </div>
164</div>
b692ffa7 165<div class="container card-container ml-1">
ce8122f0
VP
166
167 <div class="row">
33f512fa 168 <div class="col-sm mb-3">
b692ffa7
VP
169 <a class="card frosted-glass-danger text-center" href="<?php echo get_config("base_url"); ?>server_bans/">
170 <div class="card-body text-white">
171 <div class="row text-center">
ce8122f0 172 <div class="col">
b692ffa7
VP
173 <div class="col">
174 <i aria-hidden="true" class="fa fa-ban fa-2x"></i>
175 </div>
176 <div class="col">
177 <h5 id="num_server_bans" class="display-4"></h5>
178 <h5 class="display-5">Server Bans</h5>
179 </div>
ce8122f0
VP
180 </div>
181 </div>
182 </div>
b692ffa7 183 </a>
ce8122f0 184 </div>
33f512fa 185 <div class="col-sm mb-3">
b692ffa7
VP
186 <a class="card frosted-glass-secondary text-center" href="<?php echo get_config("base_url"); ?>spamfilter.php/">
187 <div class="card-body text-white">
188 <div class="row text-center">
ce8122f0 189 <div class="col">
b692ffa7
VP
190 <div class="col">
191 <i aria-hidden="true" class="fa fa-filter fa-2x"></i>
192 </div>
193 <div class="col">
194 <h5 id="num_spamfilter_entries" class="display-4"></h5>
195 <h5 class="display-5">Spamfilter</h5>
196 </div>
75c101fd 197 </div>
75c101fd
VP
198 </div>
199 </div>
b692ffa7 200 </a>
ce8122f0 201 </div>
33f512fa 202 <div class="col-sm mb-3">
b692ffa7
VP
203 <a class="card frosted-glass-info text-center" href="<?php echo get_config("base_url"); ?>server-bans/ban-exceptions.php">
204 <div class="card-body text-white">
205 <div class="row text-center">
ce8122f0 206 <div class="col">
b692ffa7
VP
207 <div class="col">
208 <i aria-hidden="true" class="fa fa-door-open fa-2x"></i>
209 </div>
210 <div class="col">
211 <h5 id="num_ban_exceptions" class="display-4"></h5>
212 <h5 class="display-5">Server Ban Exceptions</h5>
213 </div>
75c101fd 214 </div>
75c101fd
VP
215 </div>
216 </div>
b692ffa7 217 </a>
ce8122f0 218 </div>
33f512fa 219 <div class="col-sm mb-3">
b692ffa7
VP
220 <a class="card frosted-glass-success text-center" href="<?php echo get_config("base_url"); ?>servers">
221 <div class="card-body text-white">
222 <div class="row text-center">
ce8122f0 223 <div class="col">
b692ffa7
VP
224 <div class="col">
225 <i aria-hidden="true" class="fa fa-database fa-2x"></i>
226 </div>
227 <div class="col">
228 <h5 id="stats_uline_total" class="display-4"></h5>
229 <h5 class="display-5" style="margin-top: -3px">Services Online</h5>
230 <h5 style="font-size: 10px; margin-top:-12px">View in Servers ></h5>
231 </div>
ce8122f0
VP
232 </div>
233 </div>
234 </div>
b692ffa7 235 </a>
ce8122f0
VP
236 </div>
237 </div>
809f7483 238</div>
56164221
VP
239
240
241<script>
c0abb0e6
BM
242 /* Last time stats were updated */
243 let stats_tick = 0;
244
fd4848e4
BM
245 function updateStats(e)
246 {
247 var data;
248 try {
249 data = JSON.parse(e.data);
250 } catch(e) {
251 return;
252 }
c0abb0e6 253 stats_tick = Date.now()
78dbc2af
VP
254 console.log(data);
255 document.getElementById("userRecord").innerHTML = "Record: "+data.user.record;
c0abb0e6 256 document.getElementById("live_stats").style.visibility = '';
fd4848e4
BM
257 document.getElementById("stats_user_total").innerHTML = data.user.total;
258 document.getElementById("stats_channel_total").innerHTML = data.channel.total;
259 document.getElementById("stats_oper_total").innerHTML = data.user.oper;
260 document.getElementById("stats_server_total").innerHTML = data.server.total;
261 document.getElementById("num_server_bans").innerHTML = data.server_ban.server_ban;
262 document.getElementById("num_spamfilter_entries").innerHTML = data.server_ban.spamfilter;
263 document.getElementById("num_ban_exceptions").innerHTML = data.server_ban.server_ban_exception;
264 document.getElementById("stats_uline_total").innerHTML = data.user.ulined + "/" + data.server.ulined;
265 }
c0abb0e6
BM
266 function checkStatsOutdated()
267 {
268 setTimeout(checkStatsOutdated, 2000);
269 if (Date.now() - stats_tick > 10000)
270 document.getElementById("live_stats").style.visibility = 'hidden';
271 }
272 setTimeout(checkStatsOutdated, 2000);
273
fd4848e4
BM
274 function initStats()
275 {
276 if (!!window.EventSource) {
277 var source = new EventSource('api/overview.php');
278 source.addEventListener('message', updateStats, false);
279 }
280 }
281 initStats();
282 //setInterval(updateStats, 1000); // Update stats every second
283 // ^ commented out but may want to restart initStats() when connection is lost.
711c63bc
VP
284
285
286 window.addEventListener('resize', function() {
287 var containers = document.querySelectorAll('.card-container');
288 var width = window.innerWidth;
289 if (width < 768)
290 {
291 containers.forEach((container) => {
292 container.removeAttribute('style');
293
294 });
295 } else
296 {
297 containers.forEach((container) => {
298 container.style.marginLeft = "40px";
299 container.style.marginTop = "30px";
300
301 });
302 }
303 });
56164221
VP
304</script>
305
b692ffa7 306<div class="container card-container card-container ml-1">
fdc0088f
VP
307
308 <div class="row">
b692ffa7
VP
309 <div class="col-sm mb-3">
310 <a class="card frosted-glass-success text-center" href="<?php echo get_config("base_url"); ?>settings">
311 <div class="card-body text-white">
312 <div class="row text-center">
fdc0088f 313 <div class="col">
b692ffa7
VP
314 <div class="col">
315 <i aria-hidden="true" class="fa fa-lock-open fa-2x"></i>
316 </div>
317 <div class="col">
318 <h5 class="display-4"><?php echo $num_of_panel_admins; ?></h5>
319 <h5 class="display-5">Panel Accounts</h5>
320 </div>
fdc0088f
VP
321 </div>
322 </div>
323 </div>
b692ffa7 324 </a>
fdc0088f 325 </div>
b692ffa7
VP
326 <div class="col-sm mb-3">
327 <a class="card frosted-glass-info text-center" href="<?php echo get_config("base_url"); ?>settings/plugins.php">
328 <div class="card-body text-light">
329 <div class="row text-center">
c9e895e3 330 <div class="col">
b692ffa7
VP
331 <div class="col">
332 <i aria-hidden="true" class="fa fa-plug fa-2x"></i>
333 </div>
334 <div class="col">
335 <h5 class="display-4"><?php echo count(Plugins::$list); ?></h5>
336 <h5 class="display-5">Plugins</h5>
337 </div>
c9e895e3 338 </div>
c9e895e3
VP
339 </div>
340 </div>
b692ffa7 341 </a>
c9e895e3 342 </div>
fdc0088f
VP
343 </div>
344 </div>
809f7483
VP
345<?php
346
440ff671
VP
347Hook::run(HOOKTYPE_OVERVIEW_CARD, $stats);
348
c06c1713 349require_once "inc/footer.php";