cb-mapui/swagger.html at main · hanizang77/cb-mapui · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CB-Tumblebug API Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }

        #swagger-container {
            width: 100%; /* Swagger UI takes the full width */
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #swagger-header {
            height: auto; /* Auto height like dashboard */
            background-color: #f8f9fa; /* Same as dashboard */
            color: #495057; /* Same as dashboard */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            padding: 0.2rem 0; /* Same padding as dashboard */
            border-bottom: 1px solid #dee2e6; /* Same border as dashboard */
        }
        #swagger-ui-container {
            height: calc(100% - 60px); /* Adjust for smaller header */
            overflow-y: scroll;
        }
    </style>

    <!-- Load Swagger UI styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.css">
</head>
<body>

    <div id="swagger-container">
        <div id="swagger-ui-container"></div>
    </div>

    <!-- Load the latest Swagger UI scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@3.14.0/dist/js-yaml.min.js"></script>

    <script>
        // Basic authentication details
        const username = 'default';
        const password = 'default';
        const credentials = btoa(username + ':' + password);
        const authHeader = 'Basic ' + credentials;

        const protocol = window.location.protocol;
        const hostname = window.location.hostname;
        // API base: honor the base URL persisted by the main UI settings;
        // otherwise same-origin behind a gateway (mapui's canonical port is
        // 1324) or the classic <hostname>:1323 model.
        let apiBase = '';
        try {
            apiBase = (JSON.parse(localStorage.getItem('mapui-api-config') || '{}').apiBaseUrl) || '';
        } catch (e) { /* ignore */ }
        if (!apiBase) {
            apiBase = (window.location.port === '1324')
                ? `${protocol}//${hostname}:1323/tumblebug`
                : `${protocol}//${window.location.host}/tumblebug`;
        }
        const apiDocUrl = `${apiBase}/api/doc.yaml`;

        console.log('API Document URL:', apiDocUrl);

        // Fetch the YAML file with authentication
        fetch(apiDocUrl, {
            headers: {
                'Authorization': authHeader
            }
        })
        .then(response => {
            console.log('Fetch response:', response);
            if (!response.ok) {
                throw new Error('Authentication failed: ' + response.statusText);
            }
            return response.text();
        })
        .then(yamlText => {
            console.log('YAML fetched successfully');
            const spec = jsyaml.load(yamlText);

            console.log('YAML parsed successfully');

            // Initialize Swagger UI
            const ui = SwaggerUIBundle({
                url: apiDocUrl,
                dom_id: '#swagger-ui-container',
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                docExpansion: "list",
                layout: "BaseLayout",
                deepLinking: true, // Enable deep linking
                tagsSorter: "alpha",
                operationsSorter: "alpha",
                requestInterceptor: (request) => {
                    request.headers['Authorization'] = authHeader;
                    return request;
                },
                validatorUrl: null,
                onComplete: () => {
                    console.log('Swagger UI loaded');
                }
            });

            console.log('Swagger UI initialized');
        })
        .catch(error => {
            console.error('Failed to load API specification:', error);
            alert('Failed to load API specification: ' + error.message);
        });
    </script>
</body>
</html>