request-src
Version:
A lightweight server-side middleware for real-time monitoring and storage of HTTP requests.
97 lines (85 loc) • 4.19 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RequestSRC Dashboard</title>
<link rel="stylesheet" href="./requestSRCStyle.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="containerBox">
<div id="header">
<h2>📊 RequestSRC</h2>
<!-- Toggle Table / Graph -->
<div class="checkbox_item citem_3">
<label class="checkbox_wrap">
<input type="checkbox" id="toggleView" class="checkbox_inp">
<span class="checkbox_mark"></span>
</label>
</div>
<div id="settings">
<!-- Graph Grouping Options -->
<div id="graphOptions">
<div class="graphFilter">
<label>Group By:</label>
<select id="groupBy" onchange="fetchGraphData()">
<option value="req_type">Request Category</option>
<!-- <option value="ip">IP Address</option> -->
<option value="city">City</option>
<option value="region">Region</option>
<option value="country">Country</option>
</select>
</div>
<div class="graphFilter">
<label>Time Range:</label>
<select id="timeRange" onchange="fetchGraphData()">
<option value="hour">Last 24 Hours</option>
<option value="day">Last 7 Days</option>
<option value="week">Last 1 Month</option>
<option value="month">Last 3 Months</option>
<option value="quarter">Last 6 Months</option>
</select>
</div>
</div>
<!-- Anonymize Panel -->
<label id="container">Anonymize IP
<input type="checkbox" id="toggleAnonymize">
<span class="checkmark"></span>
</label>
</div>
</div>
<!-- Table View -->
<table id="logTable">
<thead>
<tr>
<th onclick="fetchLogsWithSorting(0)">Timestamp <span id="sortIcon0"></span></th>
<th onclick="fetchLogsWithSorting(1)">IP Address <span id="sortIcon1"></span></th>
<th onclick="fetchLogsWithSorting(2)">City <span id="sortIcon2"></span></th>
<th onclick="fetchLogsWithSorting(3)">Region <span id="sortIcon3"></span></th>
<th onclick="fetchLogsWithSorting(4)">Country <span id="sortIcon4"></span></th>
<th onclick="fetchLogsWithSorting(5)">User-Agent <span id="sortIcon5"></span></th>
<th onclick="fetchLogsWithSorting(6)">Type <span id="sortIcon6"></span></th>
</tr>
</thead>
<tbody>
<!-- Log data will be inserted here -->
</tbody>
</table>
<!-- Graph View (Hidden by Default) -->
<canvas id="logChart" style="display:none;"></canvas>
<div id="noDataMessage" style="display: none; text-align: center; font-size: 1.2em; color: gray;">
📉 No requests received in the past 24 hours or database not initialized.
</div>
<!-- Pagination controls -->
<div id="pageButtons">
<button onclick="prevPage()">◄ Previous</button>
<span id="refreshIcon" class="refresh-icon">⟳</span>
<button onclick="nextPage()">Next ►</button>
<span id="currentPageDisplay">Page: 1</span>
</div>
</div>
<script src="./script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</body>
</html>