uranus-api-demo/frame.html at main · sndcds/uranus-api-demo · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dashboard with Dynamic Content</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/image-upload-widget.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <script src="js/form-json.js"></script>
    <script src="js/image-upload-widget.js"></script>
    <script src="extern/luxon/luxon.min.js"></script>
</head>
<body>

<div id="sidebar">
    <button onclick="loadPage('admin-user-organizer-stats.php')">Organizer</button>
    <button onclick="loadPage('admin-user-permissions.php')">User</button>
</div>

<div id="content">
    <span class="icon-event"></span>
    <h2>Welcome</h2>
    <p>Click a button on the left to load content.</p>
</div>

<script>
    const { DateTime } = luxon;

    async function loadEditorNav(navUrl) {
        try {
            const response = await fetch(navUrl);
            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
            const html = await response.text();

            const navContainer = document.getElementById("editor-nav");
            if (navContainer) {
                navContainer.innerHTML = html;
            }
        } catch (err) {
            console.error("Failed to load editor nav:", err);
        }
    }

    async function loadEditor(paneUrl, navUrl, jsUrl) {
        localStorage.setItem("editor-pane-name", paneUrl);
        const destination = 'admin-editor.php';
        await loadPage(destination);
        await loadEditorNav(navUrl);
        loadScript(jsUrl);
    }

    function setEditorTitle(html) {
        const title = document.getElementById("editor-title");
        title.innerHTML = html;
    }

    async function swapEditorPane(paneUrl) {
        localStorage.setItem("editor-pane-name", paneUrl);
        console.log(paneUrl);
        loadEditorPage();
    }

    function loadScript(url, callback) {
        const script = document.createElement("script");
        script.src = url;
        script.onload = () => {
            console.log(`Script loaded: ${url}`);
            if (callback) callback();
        };
        script.onerror = () => console.error(`Failed to load script: ${url}`);
        document.head.appendChild(script);
    }

    function editorNavClick(section) {
        console.log("Clicked section:", section);
        // your logic here
    }

    function updateEditorNav() {
        const navContainer = document.getElementById("editor-nav");
        const btnCount = parseInt(localStorage.getItem("editor-btn-count"), 10) || 0;
        console.log("btnCount: " + btnCount);
        for (let i = 1; i <= btnCount; i++) {
            const btnText = localStorage.getItem(`editor-btn${i}-text`) || `Button ${i}`;
            const btnLink = localStorage.getItem(`editor-btn${i}-link`) || "#";
            const functionName = localStorage.getItem(`editor-btn${i}-function`) || "";
            const button = document.createElement("button");
            button.textContent = btnText;
            button.addEventListener("click", () => {
                window.location.href = btnLink;
            });
            navContainer.appendChild(button);

            if (functionName && typeof window[functionName] === "function") {
                button.addEventListener("click", window[functionName]);
            }
            else {
                button.disabled = true; // disable if function not found
            }
        }
    }

    async function loadPage(pageUrl) {
        const content = document.getElementById('content');

        // Convert to URL object so we can easily strip parts
        const url = new URL(pageUrl, window.location.origin);

        // Get only pathname (no domain, no variables)
        const cleanPath = url.pathname;

        // Tell browser this is the current page
        history.pushState({ path: cleanPath }, "", "frame.html");

        // Store in localStorage
        localStorage.setItem("page-name", cleanPath);

        await fetch(pageUrl)
            .then(res => {
                if (!res.ok) throw new Error(`Failed to load ${pageUrl}`);
                return res.text();
            })
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                // Set container content WITHOUT script tags
                // We remove scripts first so they don't get ignored inside innerHTML
                const scripts = doc.querySelectorAll('script');
                scripts.forEach(s => s.remove());

                content.innerHTML = doc.body.innerHTML;

                // Now add and execute scripts manually
                scripts.forEach(oldScript => {
                    const newScript = document.createElement('script');
                    if (oldScript.src) {
                        newScript.src = oldScript.src;
                        newScript.async = false; // to preserve execution order
                    } else {
                        newScript.textContent = oldScript.textContent;
                    }
                    content.appendChild(newScript);  // append inside content container
                });
            })
            .catch(err => {
                content.innerHTML = `<p style="color:red;">${err.message}</p>`;
            });
    }
</script>

</body>
</html>