HackUC-Security/dashboard.js at main · Fyrefyte/HackUC-Security · 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
// dashboard.js
window.addEventListener("load", async () => {
    const Clerk = window.Clerk;
    if (!Clerk) {
        console.error("❌ Clerk not found.");
        return;
    }

    try {
        await Clerk.load();
        console.log("✅ Clerk loaded successfully.");

        const greetingEl = document.querySelector(".user-greeting");
        const videoFeed = document.getElementById("video-feed");

        const updateDashboard = async () => {
            const session = await Clerk.session;
            const user = Clerk.user;

            if (!(session && user)) {
                // Not logged in → redirect to login
                if (greetingEl) greetingEl.style.display = "none";
                if (videoFeed) videoFeed.style.display = "none";
                window.location.href = "login.html";
                return;
            }

            // Show greeting
            if (greetingEl) {
                greetingEl.textContent = `Hello, ${user.firstName}`;
                greetingEl.style.display = "block";
            }

            // MJPEG video feed
            if (videoFeed) {
                videoFeed.src = "http://10.11.116.179:8000/video"; // MJPEG feed
                videoFeed.alt = "Live Feed";

                videoFeed.onerror = () => {
                    videoFeed.style.display = "none";

                    const ph = document.createElement("div");
                    ph.className = "video-placeholder";
                    ph.textContent = "No Live Feed";
                    ph.style.cssText = `
                        color: white;
                        font-size: 1.5rem;
                        font-style: italic;
                        text-align: center;
                        background-color: #111;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    `;
                    videoFeed.parentNode.appendChild(ph);
                };
            }
        };

        await updateDashboard();
        Clerk.addListener(updateDashboard);

    } catch (err) {
        console.error("❌ Dashboard failed to initialize:", err);
    }
});