HomeGrouped Statistics
2 posters
Page 1 of 1
Grouped Statistics
by Wizzard September 22nd 2024, 7:24 pm
Working versions: phpBB3 and ModernBB
Basically, in navigation you will add a new link with name, let's say, "Statistics" and position it wherever you want. Then, we will make a new HTML page, and then make JS that will connect forum with that extra html page.
How stat page looks like:
How it looks like when the access is denied for others:
First, let's go with HTML page.
AP > Modules > HTML & JAVASCRIPT > HTML pages management and there click on>
Put title "Statistics".
Do you wish to use your forum header and footer ? - NO
Use this page as homepage ? - NO
Paste this code:
You will see list of your HTML pages. Copy only this part of the URL:
In my case it looks like that, in yours it can look differently.
Now, let's make link inside navigation:
AP > Display > Homepage > Headers & Navigation and click here:
Then populate it like this (use for Redirection URL whatever you have for stat page):
You can use arrows to move this link up and down in the mene and position it whereever it suits you.
Now, go to AP > Modules > Javascript and click to make a new script. Name it "Statistics", apply in "All the pages" and past this code for:
ModernBB
phpBB3
In both scripts pay attention to the constant:
There you will put URL of your forum. And at the end of the code where you see:
Instead of
you will use the page location for stat you got previously.
I think I've covered all that needs to be covered. I hope I didn't make any mistake while writting it down.
Basically, in navigation you will add a new link with name, let's say, "Statistics" and position it wherever you want. Then, we will make a new HTML page, and then make JS that will connect forum with that extra html page.
How stat page looks like:
How it looks like when the access is denied for others:
First, let's go with HTML page.
AP > Modules > HTML & JAVASCRIPT > HTML pages management and there click on>
Put title "Statistics".
Do you wish to use your forum header and footer ? - NO
Use this page as homepage ? - NO
Paste this code:
- Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #1a1a1a; /* Dark background for the body */
color: #f8f9fa; /* Light text color */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height for centering */
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
}
.typing {
display: inline;
}
.card {
margin: 1rem 0;
background-color: #ffffff; /* White background for cards */
border: none; /* Remove border */
border-radius: 1rem; /* More rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
color: #343a40; /* Dark text for readability */
}
.highlight {
background-color: #e7f5ff; /* Light blue background for highlighted sections */
padding: 15px;
border-radius: 0.5rem;
margin-top: 1rem;
border-left: 5px solid #0d6efd; /* Blue left border */
}
.access-denied {
font-family: 'Courier New', Courier, monospace; /* Matrix-like font for access denied */
font-size: 4rem; /* Larger text size */
color: #dc3545; /* Bright red for visibility */
text-align: center; /* Center text */
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); /* Shadow for effect */
margin-top: -50px; /* Adjust position */
}
</style>
</head>
<body>
<div id="statistics-container" class="container" style="display: none;">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h1 class="mt-5">Statistics</h1>
<div id="statistics-content" class="mt-4">
<!-- Content will be populated here -->
</div>
<!-- Additional statistics -->
<div class="row mt-4">
<div class="col">
<h5><strong>Total Messages:</strong></h5>
<div id="total-messages" class="card p-3 highlight"></div>
</div>
<div class="col">
<h5><strong>Total Users:</strong></h5>
<div id="total-users" class="card p-3 highlight"></div>
</div>
<div class="col">
<h5><strong>Last Registered User:</strong></h5>
<div id="last-user" class="card p-3 highlight"></div>
</div>
</div>
</div>
</div>
</div>
<div id="access-denied" class="access-denied"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const userLevel = localStorage.getItem('userLevel');
const categoriesStatistics = JSON.parse(localStorage.getItem('categoriesStatistics'));
const totalMessages = localStorage.getItem('totalMessages');
const totalUsers = localStorage.getItem('totalUsers');
const lastUser = localStorage.getItem('lastUser');
if (userLevel !== '1') {
const typingEffect = "Access Denied";
let index = 0;
const typingElement = document.getElementById('access-denied');
document.body.style.backgroundColor = '#1a1a1a'; // Ensure background is dark
typingElement.style.color = '#dc3545'; // Typing text color
const typingInterval = setInterval(() => {
if (index < typingEffect.length) {
typingElement.textContent += typingEffect[index++];
} else {
clearInterval(typingInterval);
}
}, 200); // Adjust typing speed here
} else {
document.body.style.backgroundColor = '#f4f4f9'; // Change background to soft color
document.body.style.color = '#343a40'; // Change text color to dark
document.getElementById('statistics-container').style.display = 'block'; // Show stats container
categoriesStatistics.forEach(category => {
const categoryHtml = `
<div class="card">
<div class="card-body">
<h5 class="card-title">${category.name}</h5>
<p class="card-text"><strong>Posts:</strong> ${category.totalPosts}</p>
<p class="card-text"><strong>Topics:</strong> ${category.totalTopics}</p>
</div>
</div>
`;
document.getElementById('statistics-content').insertAdjacentHTML('beforeend', categoryHtml);
});
// Populate additional statistics
document.getElementById('total-messages').textContent = totalMessages;
document.getElementById('total-users').textContent = totalUsers;
document.getElementById('last-user').textContent = lastUser;
}
});
</script>
</body>
</html>
You will see list of your HTML pages. Copy only this part of the URL:
In my case it looks like that, in yours it can look differently.
Now, let's make link inside navigation:
AP > Display > Homepage > Headers & Navigation and click here:
Then populate it like this (use for Redirection URL whatever you have for stat page):
You can use arrows to move this link up and down in the mene and position it whereever it suits you.
Now, go to AP > Modules > Javascript and click to make a new script. Name it "Statistics", apply in "All the pages" and past this code for:
ModernBB
- Code:
$(document).ready(function () {
let categoriesData = [];
const userLevel = _userdata.user_level; // Retrieve user level
const forumURL = 'https://example.forumotion.com/';
// Handle redirection on link click
$('.mainmenu[href="/h1-statistics"]').on('click', function (event) {
event.preventDefault();
$('.forabg').each(function () {
const categoryName = $(this).find('.table-title h2').text().trim();
let totalTopics = 0;
let totalPosts = 0;
$(this).find('.topiclist.forums .row').each(function () {
const topics = parseInt($(this).find('.topics').text().trim()) || 0;
const posts = parseInt($(this).find('.posts').text().trim()) || 0;
totalTopics += topics;
totalPosts += posts;
});
// Store data for logging
categoriesData.push({
name: categoryName,
totalTopics: totalTopics,
totalPosts: totalPosts
});
// Log category data to the console
console.log(`Category: ${categoryName}, Total Topics: ${totalTopics}, Total Posts: ${totalPosts}`);
});
// Store data in localStorage, including user level
localStorage.setItem('categoriesStatistics', JSON.stringify(categoriesData));
localStorage.setItem('userLevel', userLevel); // Store user level
// Collect additional data from the statistics section
const totalMessages = parseInt($('.statistics-item:contains("Our users have posted a total of") strong').text().trim()) || 0;
const totalUsers = parseInt($('.statistics-item:contains("We have") strong').text().trim()) || 0;
const lastUser = $('.statistics-item:contains("The newest registered user is") strong a').text().trim();
// Store additional data in localStorage
localStorage.setItem('totalMessages', totalMessages);
localStorage.setItem('totalUsers', totalUsers);
localStorage.setItem('lastUser', lastUser);
if (userLevel === 1) {
window.location.href = forumURL + "/h1-statistics";
} else {
alert("Access denied.");
}
});
});
phpBB3
- Code:
$(document).ready(function () {
let categoriesData = [];
const userLevel = _userdata.user_level; // Retrieve user level
const forumURL = 'https://example.forumotion.com';
// Handle redirection on link click
$('.mainmenu[href="/h1-statistics"]').on('click', function (event) {
event.preventDefault();
$('.forabg').each(function () {
const categoryName = $(this).find('.table-title h2').text().trim();
let totalTopics = 0;
let totalPosts = 0;
$(this).find('.topiclist.forums .row').each(function () {
const topics = parseInt($(this).find('.topics').text().trim()) || 0;
const posts = parseInt($(this).find('.posts').text().trim()) || 0;
totalTopics += topics;
totalPosts += posts;
});
// Store data for logging
categoriesData.push({
name: categoryName,
totalTopics: totalTopics,
totalPosts: totalPosts
});
// Log category data to the console
console.log(`Category: ${categoryName}, Total Topics: ${totalTopics}, Total Posts: ${totalPosts}`);
});
// Store data in localStorage, including user level
localStorage.setItem('categoriesStatistics', JSON.stringify(categoriesData));
localStorage.setItem('userLevel', userLevel); // Store user level
// Collect additional data from page-bottom
const totalMessages = parseInt($('.page-bottom').eq(0).find('strong').text().trim()) || 0;
const totalUsers = parseInt($('.page-bottom').eq(1).find('strong').text().trim()) || 0;
const lastUser = $('.page-bottom').eq(2).find('strong a').text().trim();
// Store additional data in localStorage
localStorage.setItem('totalMessages', totalMessages);
localStorage.setItem('totalUsers', totalUsers);
localStorage.setItem('lastUser', lastUser);
if (userLevel === 1) {
window.location.href = forumURL + "/h1-statistics";
} else {
alert("Access denied.");
}
});
});
In both scripts pay attention to the constant:
|
There you will put URL of your forum. And at the end of the code where you see:
- Code:
window.location.href = forumURL + "/h1-statistics";
Instead of
|
I think I've covered all that needs to be covered. I hope I didn't make any mistake while writting it down.
Wizzard- Forumember
-
Posts : 125
Reputation : 23
Language : English -
Ape, invisible_fa, SarkZKalie, TonnyKamper, poesia-verses, كونان2000 and zest_n like this post
SarkZKalie- Support Moderator
- Posts : 1446
Reputation : 220
Language : English -
Wizzard likes this post
Similar topics» Statistics
» More Statistics
» Help please statistics
» More statistics
» How to add a statistics bar
» More Statistics
» Help please statistics
» More statistics
» How to add a statistics bar
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
