index.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log Viewer // Grafana Style</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="js/lucide.min.js"></script>
    <script src="js/chart.js"></script>
    <script src="js/chartjs-plugin-zoom.min.js"></script>

    <style>
        :root {
            --sidebar-width: 260px;
            --brand-color: #4ade80;
            --bg-dark: #0f172a;
            --card-dark: #1e293b;
            --border-color: #334155;
        }

        body {
            background-color: var(--bg-dark);
            color: #f1f5f9;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            height: 100vh;
            overflow: hidden;
        }

        .wrapper {
            display: flex;
            height: 100vh;
        }

        /* Sidebar */
        aside {
            width: var(--sidebar-width);
            background: var(--card-dark);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        .sidebar-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .file-list {
            overflow-y: auto;
            flex-grow: 1;
            padding: 0.5rem;
        }

        .file-item {
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
            font-size: 0.75rem;
            transition: 0.2s;
        }

        .file-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .file-item.active {
            background: rgba(74, 222, 128, 0.15);
            color: var(--brand-color);
        }

        /* Main Content */
        main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .top-bar {
            padding: 0.6rem 1.5rem;
            background: var(--card-dark);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        /* Chart Area - Styled like Grafana */
        .chart-section {
            height: 200px;
            background: #0b0e14;
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .chart-hint {
            position: absolute;
            top: 5px;
            right: 20px;
            font-size: 0.7rem;
            color: #64748b;
            pointer-events: none;
        }

        /* Toggles */
        .level-toggles .btn {
            border: none;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 12px;
            margin-right: 4px;
            border-radius: 4px;
        }

        .btn-check:not(:checked)+.btn {
            opacity: 0.15;
            filter: grayscale(1);
        }

        .btn-dbg {
            background: #38bdf8;
            color: #000;
        }

        .btn-inf {
            background: #4ade80;
            color: #000;
        }

        .btn-wrn {
            background: #fbbf24;
            color: #000;
        }

        .btn-err {
            background: #f87171;
            color: #000;
        }

        /* Table */
        .content-area {
            flex-grow: 1;
            padding: 1rem;
            overflow-y: auto;
        }

        .table-container {
            background: var(--card-dark);
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        table.dataTable thead th {
            background: #111827;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #94a3b8;
            border-bottom: 1px solid var(--border-color) !important;
        }

        .search-input {
            background: #0f172a;
            border: 1px solid var(--border-color);
            color: white;
            border-radius: 4px;
            padding: 4px 12px;
            font-size: 0.8rem;
            width: 280px;
        }

        .range-info {
            font-size: 0.75rem;
            color: var(--brand-color);
            font-weight: 600;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <aside>
            <div class="sidebar-header text-center">
                <h6 class="mb-3 d-flex align-items-center justify-content-center gap-2">
                    <i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER
                </h6>
                <button class="btn btn-sm btn-outline-primary w-100 mb-2"
                    onclick="document.getElementById('dir-input').click()">
                    <i data-lucide="plus" size="14"></i> Select Project Folder
                </button>
                <input type="file" id="dir-input" webkitdirectory hidden>
            </div>
            <div class="file-list" id="file-list"></div>
        </aside>

        <main>
            <div class="top-bar">
                <div class="level-toggles">
                    <input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
                    <label class="btn btn-dbg" for="toggle-DBG">DBG</label>
                    <input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
                    <label class="btn btn-inf" for="toggle-INF">INF</label>
                    <input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
                    <label class="btn btn-wrn" for="toggle-WRN">WRN</label>
                    <input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
                    <label class="btn btn-err" for="toggle-ERR">ERR</label>
                    <span id="range-display" class="range-info ms-3"></span>
                </div>

                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="global-search" class="search-input" placeholder="Regex Search...">
                    <button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters">
                        <i data-lucide="refresh-cw" size="14"></i>
                    </button>
                </div>
            </div>

            <div class="chart-section">
                <span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
                    range</span>
                <canvas id="intensityChart"></canvas>
            </div>

            <div class="content-area">
                <div class="table-container shadow-lg">
                    <table id="log-table" class="table table-dark table-hover table-sm w-100">
                        <thead>
                            <tr>
                                <th width="30"></th>
                                <th width="80">Level</th>
                                <th width="120">Time</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap5.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

    <script>
        lucide.createIcons();
        let chart;
        let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}

        $(document).ready(function () {
            const table = $('#log-table').DataTable({
                dom: 'rtip',
                pageLength: 50,
                order: [[2, 'desc']],
                columns: [
                    { data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
                    {
                        data: 'level',
                        render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
                    },
                    { data: 'time' },
                    { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
                ],
                drawCallback: () => lucide.createIcons()
            });

            // Chart.js Configuration
            const ctx = document.getElementById('intensityChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'bar',
                data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
                        y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
                    },
                    plugins: {
                        legend: { display: false },
                        zoom: {
                            zoom: {
                                drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },
                                mode: 'x',
                                onZoomComplete: ({ chart }) => {
                                    const { min, max } = chart.scales.x;
                                    const labels = chart.data.labels;
                                    const start = labels[Math.max(0, Math.floor(min))];
                                    const end = labels[Math.min(labels.length - 1, Math.ceil(max))];

                                    selectedTimeRange = { start, end };
                                    $('#range-display').text(`Range: ${start} - ${end}`);
                                    table.draw();
                                }
                            }
                        }
                    }
                }
            });

            // Custom Table Filter for Levels + Time Range
            $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
                const level = data[1];
                const timeStr = data[2]; // HH:mm:ss.SSS
                const timeShort = timeStr.substring(0, 5); // HH:mm

                // 1. Filter by Level
                const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();
                if (!checkedLevels.includes(level)) return false;

                // 2. Filter by Time Range (if zoomed)
                if (selectedTimeRange) {
                    return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;
                }

                return true;
            });

            // Search & Reset
            $('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
            $('#reset-all').on('click', () => {
                chart.resetZoom();
                selectedTimeRange = null;
                $('#range-display').text('');
                $('#global-search').val('');
                table.search('').draw();
            });

            $('.btn-check').on('change', () => table.draw());

            // File/Directory Loading
            $('#dir-input').on('change', function (e) {
                const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
                const list = $('#file-list').empty();
                files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
                window.loadedFiles = files;
            });

            window.loadLog = function (idx) {
                $('.file-item').removeClass('active').eq(idx).addClass('active');
                const reader = new FileReader();
                reader.onload = e => {
                    const logs = parseLogs(e.target.result);
                    table.clear().rows.add(logs).draw();
                    updateChart(logs);
                };
                reader.readAsText(window.loadedFiles[idx]);
            };

            function parseLogs(text) {
                const lines = text.split(/\r?\n/);
                const logs = [];
                const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
                lines.forEach(line => {
                    const match = line.match(regex);
                    if (match) logs.push({ time: match[1], level: match[2], message: match[3] });
                });
                return logs;
            }

            function updateChart(logs) {
                const bins = {};
                logs.forEach(l => {
                    const m = l.time.substring(0, 5);
                    bins[m] = (bins[m] || 0) + 1;
                });
                const labels = Object.keys(bins).sort();
                chart.data.labels = labels;
                chart.data.datasets[0].data = labels.map(l => bins[l]);
                chart.resetZoom();
                chart.update();
            }
        });
    </script>
</body>

</html>
init 2026-04-27 19:45:25 +07:00			`<!DOCTYPE html>`
			`<html lang="en" data-bs-theme="dark">`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
rev2 2026-04-27 21:27:32 +07:00			`<title>Log Viewer // Grafana Style</title>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<link href="css/bootstrap.min.css" rel="stylesheet">`
			`<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">`
			`<script src="js/lucide.min.js"></script>`
rev1 2026-04-27 21:23:50 +07:00			`<script src="js/chart.js"></script>`
rev2 2026-04-27 21:27:32 +07:00			`<script src="js/chartjs-plugin-zoom.min.js"></script>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<style>`
			`:root {`
rev1 2026-04-27 21:23:50 +07:00			`--sidebar-width: 260px;`
init 2026-04-27 19:45:25 +07:00			`--brand-color: #4ade80;`
			`--bg-dark: #0f172a;`
			`--card-dark: #1e293b;`
			`--border-color: #334155;`
			`}`

rev1 2026-04-27 21:23:50 +07:00			`body {`
			`background-color: var(--bg-dark);`
			`color: #f1f5f9;`
			`font-family: 'Inter', sans-serif;`
rev2 2026-04-27 21:27:32 +07:00			`font-size: 0.82rem;`
init 2026-04-27 19:45:25 +07:00			`height: 100vh;`
			`overflow: hidden;`
			`}`

rev1 2026-04-27 21:23:50 +07:00			`.wrapper {`
			`display: flex;`
			`height: 100vh;`
			`}`

init 2026-04-27 19:45:25 +07:00			`/* Sidebar */`
			`aside {`
			`width: var(--sidebar-width);`
rev1 2026-04-27 21:23:50 +07:00			`background: var(--card-dark);`
init 2026-04-27 19:45:25 +07:00			`border-right: 1px solid var(--border-color);`
			`display: flex;`
			`flex-direction: column;`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.sidebar-header {`
			`padding: 1rem;`
			`border-bottom: 1px solid var(--border-color);`
			`}`

			`.file-list {`
			`overflow-y: auto;`
			`flex-grow: 1;`
			`padding: 0.5rem;`
			`}`

init 2026-04-27 19:45:25 +07:00			`.file-item {`
			`padding: 8px 12px;`
			`border-radius: 6px;`
			`cursor: pointer;`
			`display: flex;`
			`justify-content: space-between;`
			`margin-bottom: 2px;`
rev2 2026-04-27 21:27:32 +07:00			`font-size: 0.75rem;`
			`transition: 0.2s;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.file-item:hover {`
			`background: rgba(255, 255, 255, 0.05);`
			`}`

			`.file-item.active {`
			`background: rgba(74, 222, 128, 0.15);`
			`color: var(--brand-color);`
init 2026-04-27 19:45:25 +07:00			`}`

			`/* Main Content */`
rev1 2026-04-27 21:23:50 +07:00			`main {`
			`flex-grow: 1;`
			`display: flex;`
			`flex-direction: column;`
			`overflow: hidden;`
			`}`

			`.top-bar {`
rev2 2026-04-27 21:27:32 +07:00			`padding: 0.6rem 1.5rem;`
rev1 2026-04-27 21:23:50 +07:00			`background: var(--card-dark);`
init 2026-04-27 19:45:25 +07:00			`border-bottom: 1px solid var(--border-color);`
			`display: flex;`
			`justify-content: space-between;`
			`align-items: center;`
rev2 2026-04-27 21:27:32 +07:00			`z-index: 10;`
init 2026-04-27 19:45:25 +07:00			`}`

rev2 2026-04-27 21:27:32 +07:00			`/* Chart Area - Styled like Grafana */`
			`.chart-section {`
			`height: 200px;`
			`background: #0b0e14;`
rev1 2026-04-27 21:23:50 +07:00			`padding: 10px 20px;`
			`border-bottom: 1px solid var(--border-color);`
rev2 2026-04-27 21:27:32 +07:00			`position: relative;`
			`}`

			`.chart-hint {`
			`position: absolute;`
			`top: 5px;`
			`right: 20px;`
			`font-size: 0.7rem;`
			`color: #64748b;`
			`pointer-events: none;`
rev1 2026-04-27 21:23:50 +07:00			`}`

rev2 2026-04-27 21:27:32 +07:00			`/* Toggles */`
init 2026-04-27 19:45:25 +07:00			`.level-toggles .btn {`
			`border: none;`
rev1 2026-04-27 21:23:50 +07:00			`font-size: 0.7rem;`
rev2 2026-04-27 21:27:32 +07:00			`font-weight: 700;`
			`padding: 4px 12px;`
rev1 2026-04-27 21:23:50 +07:00			`margin-right: 4px;`
rev2 2026-04-27 21:27:32 +07:00			`border-radius: 4px;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-check:not(:checked)+.btn {`
rev2 2026-04-27 21:27:32 +07:00			`opacity: 0.15;`
rev1 2026-04-27 21:23:50 +07:00			`filter: grayscale(1);`
			`}`

			`.btn-dbg {`
rev2 2026-04-27 21:27:32 +07:00			`background: #38bdf8;`
			`color: #000;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-inf {`
rev2 2026-04-27 21:27:32 +07:00			`background: #4ade80;`
			`color: #000;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`.btn-wrn {`
rev2 2026-04-27 21:27:32 +07:00			`background: #fbbf24;`
			`color: #000;`
init 2026-04-27 19:45:25 +07:00			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.btn-err {`
rev2 2026-04-27 21:27:32 +07:00			`background: #f87171;`
			`color: #000;`
rev1 2026-04-27 21:23:50 +07:00			`}`

			`/* Table */`
			`.content-area {`
			`flex-grow: 1;`
rev2 2026-04-27 21:27:32 +07:00			`padding: 1rem;`
rev1 2026-04-27 21:23:50 +07:00			`overflow-y: auto;`
			`}`

			`.table-container {`
			`background: var(--card-dark);`
rev2 2026-04-27 21:27:32 +07:00			`border-radius: 6px;`
init 2026-04-27 19:45:25 +07:00			`border: 1px solid var(--border-color);`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`table.dataTable thead th {`
rev2 2026-04-27 21:27:32 +07:00			`background: #111827;`
rev1 2026-04-27 21:23:50 +07:00			`font-size: 0.7rem;`
			`text-transform: uppercase;`
rev2 2026-04-27 21:27:32 +07:00			`letter-spacing: 0.5px;`
			`color: #94a3b8;`
init 2026-04-27 19:45:25 +07:00			`border-bottom: 1px solid var(--border-color) !important;`
			`}`
rev1 2026-04-27 21:23:50 +07:00
			`.search-input {`
rev2 2026-04-27 21:27:32 +07:00			`background: #0f172a;`
rev1 2026-04-27 21:23:50 +07:00			`border: 1px solid var(--border-color);`
			`color: white;`
			`border-radius: 4px;`
rev2 2026-04-27 21:27:32 +07:00			`padding: 4px 12px;`
rev1 2026-04-27 21:23:50 +07:00			`font-size: 0.8rem;`
rev2 2026-04-27 21:27:32 +07:00			`width: 280px;`
			`}`

			`.range-info {`
			`font-size: 0.75rem;`
			`color: var(--brand-color);`
			`font-weight: 600;`
rev1 2026-04-27 21:23:50 +07:00			`}`
init 2026-04-27 19:45:25 +07:00			`</style>`
			`</head>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`<body>`

rev1 2026-04-27 21:23:50 +07:00			`<div class="wrapper">`
			`<aside>`
rev2 2026-04-27 21:27:32 +07:00			`<div class="sidebar-header text-center">`
			`<h6 class="mb-3 d-flex align-items-center justify-content-center gap-2">`
			`<i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER`
			`</h6>`
			`<button class="btn btn-sm btn-outline-primary w-100 mb-2"`
rev1 2026-04-27 21:23:50 +07:00			`onclick="document.getElementById('dir-input').click()">`
rev2 2026-04-27 21:27:32 +07:00			`<i data-lucide="plus" size="14"></i> Select Project Folder`
rev1 2026-04-27 21:23:50 +07:00			`</button>`
			`<input type="file" id="dir-input" webkitdirectory hidden>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00			`<div class="file-list" id="file-list"></div>`
			`</aside>`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`<main>`
			`<div class="top-bar">`
rev2 2026-04-27 21:27:32 +07:00			`<div class="level-toggles">`
rev1 2026-04-27 21:23:50 +07:00			`<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">`
rev2 2026-04-27 21:27:32 +07:00			`<label class="btn btn-dbg" for="toggle-DBG">DBG</label>`
rev1 2026-04-27 21:23:50 +07:00			`<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">`
rev2 2026-04-27 21:27:32 +07:00			`<label class="btn btn-inf" for="toggle-INF">INF</label>`
rev1 2026-04-27 21:23:50 +07:00			`<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">`
rev2 2026-04-27 21:27:32 +07:00			`<label class="btn btn-wrn" for="toggle-WRN">WRN</label>`
rev1 2026-04-27 21:23:50 +07:00			`<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">`
rev2 2026-04-27 21:27:32 +07:00			`<label class="btn btn-err" for="toggle-ERR">ERR</label>`
			`<span id="range-display" class="range-info ms-3"></span>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00
rev2 2026-04-27 21:27:32 +07:00			`<div class="d-flex align-items-center gap-2">`
			`<input type="text" id="global-search" class="search-input" placeholder="Regex Search...">`
			`<button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters">`
			`<i data-lucide="refresh-cw" size="14"></i>`
init 2026-04-27 19:45:25 +07:00			`</button>`
			`</div>`
			`</div>`

rev2 2026-04-27 21:27:32 +07:00			`<div class="chart-section">`
			`<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time`
			`range</span>`
rev1 2026-04-27 21:23:50 +07:00			`<canvas id="intensityChart"></canvas>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00
			`<div class="content-area">`
rev2 2026-04-27 21:27:32 +07:00			`<div class="table-container shadow-lg">`
rev1 2026-04-27 21:23:50 +07:00			`<table id="log-table" class="table table-dark table-hover table-sm w-100">`
			`<thead>`
			`<tr>`
			`<th width="30"></th>`
rev2 2026-04-27 21:27:32 +07:00			`<th width="80">Level</th>`
rev1 2026-04-27 21:23:50 +07:00			`<th width="120">Time</th>`
rev2 2026-04-27 21:27:32 +07:00			`<th>Description</th>`
rev1 2026-04-27 21:23:50 +07:00			`</tr>`
			`</thead>`
			`<tbody></tbody>`
			`</table>`
			`</div>`
init 2026-04-27 19:45:25 +07:00			`</div>`
rev1 2026-04-27 21:23:50 +07:00			`</main>`
			`</div>`

			`<script src="js/jquery-3.7.0.min.js"></script>`
			`<script src="js/jquery.dataTables.min.js"></script>`
			`<script src="js/dataTables.bootstrap5.min.js"></script>`
			`<script src="js/bootstrap.bundle.min.js"></script>`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`<script>`
			`lucide.createIcons();`
			`let chart;`
rev2 2026-04-27 21:27:32 +07:00			`let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}`
init 2026-04-27 19:45:25 +07:00
rev1 2026-04-27 21:23:50 +07:00			`$(document).ready(function () {`
			`const table = $('#log-table').DataTable({`
			`dom: 'rtip',`
rev2 2026-04-27 21:27:32 +07:00			`pageLength: 50,`
rev1 2026-04-27 21:23:50 +07:00			`order: [[2, 'desc']],`
			`columns: [`
rev2 2026-04-27 21:27:32 +07:00			{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
rev1 2026-04-27 21:23:50 +07:00			`{`
			`data: 'level',`
rev2 2026-04-27 21:27:32 +07:00			render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
rev1 2026-04-27 21:23:50 +07:00			`},`
			`{ data: 'time' },`
rev2 2026-04-27 21:27:32 +07:00			{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
rev1 2026-04-27 21:23:50 +07:00			`],`
			`drawCallback: () => lucide.createIcons()`
			`});`
init 2026-04-27 19:45:25 +07:00
rev2 2026-04-27 21:27:32 +07:00			`// Chart.js Configuration`
rev1 2026-04-27 21:23:50 +07:00			`const ctx = document.getElementById('intensityChart').getContext('2d');`
			`chart = new Chart(ctx, {`
			`type: 'bar',`
rev2 2026-04-27 21:27:32 +07:00			`data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },`
rev1 2026-04-27 21:23:50 +07:00			`options: {`
			`responsive: true,`
			`maintainAspectRatio: false,`
			`scales: {`
			`x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },`
rev2 2026-04-27 21:27:32 +07:00			`y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }`
rev1 2026-04-27 21:23:50 +07:00			`},`
rev2 2026-04-27 21:27:32 +07:00			`plugins: {`
			`legend: { display: false },`
			`zoom: {`
			`zoom: {`
			`drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },`
			`mode: 'x',`
			`onZoomComplete: ({ chart }) => {`
			`const { min, max } = chart.scales.x;`
			`const labels = chart.data.labels;`
			`const start = labels[Math.max(0, Math.floor(min))];`
			`const end = labels[Math.min(labels.length - 1, Math.ceil(max))];`

			`selectedTimeRange = { start, end };`
			$('#range-display').text(`Range: ${start} - ${end}`);
			`table.draw();`
			`}`
			`}`
rev1 2026-04-27 21:23:50 +07:00			`}`
init 2026-04-27 19:45:25 +07:00			`}`
			`}`
			`});`

rev2 2026-04-27 21:27:32 +07:00			`// Custom Table Filter for Levels + Time Range`
rev1 2026-04-27 21:23:50 +07:00			`$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {`
			`const level = data[1];`
rev2 2026-04-27 21:27:32 +07:00			`const timeStr = data[2]; // HH:mm:ss.SSS`
			`const timeShort = timeStr.substring(0, 5); // HH:mm`

			`// 1. Filter by Level`
			`const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();`
			`if (!checkedLevels.includes(level)) return false;`

			`// 2. Filter by Time Range (if zoomed)`
			`if (selectedTimeRange) {`
			`return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;`
			`}`

			`return true;`
init 2026-04-27 19:45:25 +07:00			`});`

rev2 2026-04-27 21:27:32 +07:00			`// Search & Reset`
			`$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });`
			`$('#reset-all').on('click', () => {`
			`chart.resetZoom();`
			`selectedTimeRange = null;`
			`$('#range-display').text('');`
			`$('#global-search').val('');`
			`table.search('').draw();`
			`});`

			`$('.btn-check').on('change', () => table.draw());`

			`// File/Directory Loading`
rev1 2026-04-27 21:23:50 +07:00			`$('#dir-input').on('change', function (e) {`
			`const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));`
			`const list = $('#file-list').empty();`
rev2 2026-04-27 21:27:32 +07:00			files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
rev1 2026-04-27 21:23:50 +07:00			`window.loadedFiles = files;`
			`});`

			`window.loadLog = function (idx) {`
			`$('.file-item').removeClass('active').eq(idx).addClass('active');`
			`const reader = new FileReader();`
rev2 2026-04-27 21:27:32 +07:00			`reader.onload = e => {`
rev1 2026-04-27 21:23:50 +07:00			`const logs = parseLogs(e.target.result);`
			`table.clear().rows.add(logs).draw();`
			`updateChart(logs);`
			`};`
			`reader.readAsText(window.loadedFiles[idx]);`
			`};`

			`function parseLogs(text) {`
			`const lines = text.split(/\r?\n/);`
			`const logs = [];`
rev2 2026-04-27 21:27:32 +07:00			`const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;`
rev1 2026-04-27 21:23:50 +07:00			`lines.forEach(line => {`
rev2 2026-04-27 21:27:32 +07:00			`const match = line.match(regex);`
			`if (match) logs.push({ time: match[1], level: match[2], message: match[3] });`
rev1 2026-04-27 21:23:50 +07:00			`});`
			`return logs;`
			`}`

			`function updateChart(logs) {`
			`const bins = {};`
			`logs.forEach(l => {`
rev2 2026-04-27 21:27:32 +07:00			`const m = l.time.substring(0, 5);`
			`bins[m] = (bins[m] \|\| 0) + 1;`
rev1 2026-04-27 21:23:50 +07:00			`});`
			`const labels = Object.keys(bins).sort();`
			`chart.data.labels = labels;`
rev2 2026-04-27 21:27:32 +07:00			`chart.data.datasets[0].data = labels.map(l => bins[l]);`
			`chart.resetZoom();`
rev1 2026-04-27 21:23:50 +07:00			`chart.update();`
			`}`
init 2026-04-27 19:45:25 +07:00			`});`
rev1 2026-04-27 21:23:50 +07:00			`</script>`
init 2026-04-27 19:45:25 +07:00			`</body>`
rev1 2026-04-27 21:23:50 +07:00
init 2026-04-27 19:45:25 +07:00			`</html>`