fastflix-api/test_sse.html at main · rmusayevr/fastflix-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>

<head>
    <title>FastFlix Admin Console</title>
    <style>
        body {
            background: #0d1117;
            color: #c9d1d9;
            font-family: monospace;
            padding: 20px;
        }

        #terminal {
            background: #000;
            border: 1px solid #30363d;
            padding: 15px;
            height: 400px;
            overflow-y: auto;
            border-radius: 6px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }

        .line {
            padding: 4px 0;
            border-bottom: 1px solid #161b22;
        }

        .timestamp {
            color: #8b949e;
            margin-right: 10px;
        }

        .success {
            color: #2ea043;
            font-weight: bold;
        }

        button {
            padding: 10px 20px;
            cursor: pointer;
            background: #238636;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h1>🖥️ Live System Logs (SSE)</h1>
    <p>Simulating a live backup stream from the server.</p>

    <input type="text" id="token" placeholder="Paste Admin Token Here" style="width: 300px; padding: 8px;">
    <button onclick="startStream()">Start Stream</button>

    <div id="terminal" style="margin-top: 20px;">
        <div class="line">Waiting for connection...</div>
    </div>

    <script>
        function startStream() {
            const token = document.getElementById("token").value;
            if (!token) { alert("Need Admin Token!"); return; }

            const terminal = document.getElementById("terminal");
            terminal.innerHTML = "";


            fetch("http://localhost:8000/api/v1/admin/stream-logs", {
                headers: { "Authorization": "Bearer " + token }
            }).then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                function read() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            log("Stream closed.");
                            return;
                        }
                        const chunk = decoder.decode(value);
                        const lines = chunk.split("\n\n");
                        lines.forEach(line => {
                            if (line.startsWith("data: ")) {
                                log(line.replace("data: ", ""));
                            }
                        });
                        read();
                    });
                }
                read();
            }).catch(err => log("Error: " + err));
        }

        function log(msg) {
            const terminal = document.getElementById("terminal");
            const div = document.createElement("div");
            div.className = "line";

            if (msg.includes("completed")) div.classList.add("success");

            const time = new Date().toLocaleTimeString();
            div.innerHTML = `<span class="timestamp">[${time}]</span> ${msg}`;

            terminal.appendChild(div);
            terminal.scrollTop = terminal.scrollHeight;
        }
    </script>
</body>

</html>