blakeridgway/personal_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Blake Ridgway 2025-07-05 15:29:33 -05:00
commit 315e731234
27 changed files with 3403 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

216
templates/admin/traffic.html Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Analytics - Admin</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.stat-number { font-size: 2em; font-weight: bold; color: #2563eb; }
.stat-label { color: #666; margin-top: 5px; }
.chart-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 30px; }
.table-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #f8f9fa; font-weight: 600; }
h1 { color: #333; margin-bottom: 30px; }
h2 { color: #333; margin-bottom: 15px; }
.controls { margin-bottom: 20px; }
.controls select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
.real-time-btn { background: #10b981; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.real-time-btn:hover { background: #059669; }
.activity-item { padding: 8px; margin: 4px 0; background: #f8f9fa; border-radius: 4px; font-size: 0.9em; }
.activity-time { color: #666; font-size: 0.8em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
<h1>Traffic Analytics Dashboard</h1>
<div class="controls">
<select id="dateRange">
<option value="7" {% if days == 7 %}selected{% endif %}>Last 7 days</option>
<option value="30" {% if days == 30 %}selected{% endif %}>Last 30 days</option>
<option value="90" {% if days == 90 %}selected{% endif %}>Last 90 days</option>
</select>
<button id="realTimeBtn" class="real-time-btn">
Real-time: <span id="activeUsers">0</span> active
</button>
</div>
</div>
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">{{ "{:,}".format(stats.total_views) }}</div>
<div class="stat-label">Total Page Views</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ "{:,}".format(stats.unique_visitors) }}</div>
<div class="stat-label">Unique Visitors</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ stats.avg_response_time }}ms</div>
<div class="stat-label">Avg Response Time</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ stats.bounce_rate }}%</div>
<div class="stat-label">Bounce Rate</div>
</div>
</div>
<!-- Daily Traffic Chart -->
<div class="chart-container">
<h2>Daily Traffic (Last {{ days }} Days)</h2>
<canvas id="dailyTrafficChart" width="400" height="100"></canvas>
</div>
<!-- Tables -->
<div class="grid-2">
<div class="table-container">
<h2>Top Pages</h2>
<table>
<thead>
<tr>
<th>Page</th>
<th>Views</th>
</tr>
</thead>
<tbody>
{% for page, views in top_pages %}
<tr>
<td>{{ page }}</td>
<td>{{ views }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="table-container">
<h2>Top Referrers</h2>
<table>
<thead>
<tr>
<th>Referrer</th>
<th>Views</th>
</tr>
</thead>
<tbody>
{% for referrer, views in top_referrers %}
<tr>
<td>{{ referrer[:50] }}{% if referrer|length > 50 %}...{% endif %}</td>
<td>{{ views }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Recent Activity -->
<div class="table-container">
<h2>Recent Activity (Last 24 Hours)</h2>
<div id="recentActivity" style="max-height: 300px; overflow-y: auto;">
{% for activity in recent_activity %}
<div class="activity-item">
<strong>{{ activity.path }}</strong>
{% if activity.referrer %}
from {{ activity.referrer[:30] }}{% if activity.referrer|length > 30 %}...{% endif %}
{% endif %}
<div class="activity-time">{{ activity.timestamp.strftime('%Y-%m-%d %H:%M:%S') }} - {{ activity.ip_address[:8] }}...</div>
</div>
{% endfor %}
</div>
</div>
</div>
<script>
// Chart.js configurations - Fixed tojsonfilter to tojson
const dailyData = {{ daily_views | tojson | safe }};
// Daily Traffic Chart
const ctx = document.getElementById('dailyTrafficChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dailyData.map(d => d.date),
datasets: [{
label: 'Page Views',
data: dailyData.map(d => d.views),
borderColor: 'rgb(37, 99, 235)',
backgroundColor: 'rgba(37, 99, 235, 0.1)',
tension: 0.1,
fill: true
}, {
label: 'Unique Visitors',
data: dailyData.map(d => d.unique_visitors),
borderColor: 'rgb(16, 185, 129)',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.1,
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
display: true
}
}
}
});
// Real-time updates
function updateRealTime() {
fetch('/admin/traffic/api/realtime')
.then(response => response.json())
.then(data => {
document.getElementById('activeUsers').textContent = data.active_users;
const activityDiv = document.getElementById('recentActivity');
if (data.recent_views && data.recent_views.length > 0) {
activityDiv.innerHTML = data.recent_views.map(view => `
<div class="activity-item">
<strong>${view.path}</strong>
<div class="activity-time">
${new Date(view.timestamp).toLocaleString()} - ${view.ip_address}
${view.country ? ' (' + view.country + ')' : ''}
</div>
</div>
`).join('');
}
})
.catch(error => {
console.log('Real-time update failed:', error);
});
}
// Update every 30 seconds
setInterval(updateRealTime, 30000);
updateRealTime(); // Initial load
// Date range selector
document.getElementById('dateRange').addEventListener('change', function() {
window.location.href = `?days=${this.value}`;
});
// Real-time button click
document.getElementById('realTimeBtn').addEventListener('click', function() {
updateRealTime();
});
</script>
</body>
</html>