vscode-ecl/webview-test.html at main · hpcc-systems/vscode-ecl · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ECL Watch webview test</title>
    <style>
        html,
        body,
        #placeholder {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        body {
            background: #1e1e1e;
            color: #cccccc;
            font-family: "Segoe WPC", "Segoe UI", sans-serif;
            font-size: 13px;
        }
    </style>
    <script>
        window.__ECL_WEBVIEW_TEST__ = true;

        const params = new URLSearchParams(window.location.search);
        const state = {
            baseUrl: params.get("baseUrl") || "http://localhost:8010/",
            userID: params.get("userID") || "",
            password: params.get("password") || "",
            rejectUnauthorized: true,
            timeoutSecs: 60,
            wuid: params.get("wuid") || "W20260910-093648",
            resultName: params.get("result") || undefined
        };

        const encode = value => encodeURIComponent(value);
        const serializeRequest = (value, prefix = "") => {
            if (prefix) prefix += ".";
            if (value === null || typeof value !== "object") {
                return encode(value);
            }

            const fields = [];
            Object.keys(value).forEach(key => {
                const item = value[key];
                if (Array.isArray(item)) {
                    item.forEach((row, index) => {
                        fields.push(serializeRequest(row, `${prefix}${encode(key)}.${index}`));
                    });
                    if (item.some(row => row && typeof row === "object")) {
                        fields.push(`${prefix}${encode(key)}.itemcount=${item.length}`);
                    }
                } else if (item && typeof item === "object") {
                    fields.push(serializeRequest(item, `${prefix}${encode(key)}`));
                } else if (item !== undefined) {
                    fields.push(`${prefix}${encode(key)}=${encode(item)}`);
                } else {
                    fields.push(`${prefix}${encode(key)}`);
                }
            });
            return fields.join("&");
        };

        const dispatch = data => window.dispatchEvent(new MessageEvent("message", { data }));
        const controllers = new Map();

        async function proxyRequest(message) {
            const { opts, action, request, responseType } = message.params;
            const controller = new AbortController();
            controllers.set(message.id, controller);
            const headers = { "Content-Type": "application/x-www-form-urlencoded" };
            if (opts.userID) {
                headers.Authorization = `Basic ${btoa(`${opts.userID}:${opts.password || ""}`)}`;
            }

            try {
                const response = await fetch(new URL(action, opts.baseUrl), {
                    method: "POST",
                    headers,
                    body: serializeRequest(request),
                    signal: controller.signal
                });
                if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
                const result = responseType === "arraybuffer" ? await response.arrayBuffer() :
                    responseType === "text" ? await response.text() : await response.json();
                dispatch({ command: "proxyResponse", id: message.id, response: result });
            } catch (error) {
                if (error.name !== "AbortError") {
                    dispatch({ command: "proxyResponse", id: message.id, error: String(error) });
                }
            } finally {
                controllers.delete(message.id);
            }
        }

        window.addEventListener("message", event => {
            const message = event.data;
            if (!message) return;
            if (message.command === "loaded") {
                dispatch({ command: "navigate", data: state });
            } else if (message.command === "proxySend") {
                void proxyRequest(message);
            } else if (message.command === "proxyCancel") {
                controllers.get(message.id)?.abort();
            }
        });

        window.acquireVsCodeApi = () => Object.freeze({
            postMessage: message => window.dispatchEvent(new MessageEvent("message", { data: message })),
            setState: value => value,
            getState: () => state
        });
    </script>
</head>

<body class="vscode-dark" data-vscode-theme-kind="vscode-dark">
    <div id="placeholder"></div>
    <script src="./dist/eclwatch.js"></script>
</body>

</html>