-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
165 lines (147 loc) · 5.9 KB
/
index.html
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
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exchange API Viewer</title>
<script type="module" src="https://unpkg.com/rapidoc"></script>
<style>
body {
font-family: "Open Sans", sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
#spec-selector {
background-color: #333537;
color: #ecf0f1;
padding: 5px 15px;
display: flex;
justify-content: left;
align-items: center;
position: relative;
z-index: 1000;
}
#spec-selector label {
font-size: 1em;
margin-right: 10px;
color: #ecf0f1;
}
#specs, #protocols {
font-size: 1em;
padding: 3px 10px;
border-radius: 4px;
border: none;
background-color: #ecf0f1;
color: #2c3e50;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s ease;
margin-right: 10px;
}
#specs:hover, #protocols:hover {
background-color: #bdc3c7;
}
rapi-doc, iframe {
flex-grow: 1;
width: 100%;
height: 90vh;
border: none;
}
</style>
</head>
<body>
<div id="spec-selector">
<label for="specs">Choose an Exchange:</label>
<select id="specs" onchange="populateProtocols()"></select>
<label for="protocols">Choose a Protocol:</label>
<select id="protocols" onchange="loadSpec()"></select>
</div>
<rapi-doc id="rapidoc" spec-url="" style="display:none;"></rapi-doc>
<iframe id="asyncapi-iframe" style="display:none;"></iframe>
<script>
const githubApiUrl = "https://api.github.com/repos/kanekoshoyu/exchange-collection/contents/asset";
let exchanges = [];
async function fetchExchanges() {
try {
const response = await fetch(githubApiUrl);
const files = await response.json();
const exchangeMap = {};
files.forEach(file => {
const match = file.name.match(/(.*?)_(rest|ws)_(openapi|asyncapi)\.yaml$/);
if (match) {
const [_, exchangeName, protocolType, apiType] = match;
if (!exchangeMap[exchangeName]) {
exchangeMap[exchangeName] = [];
}
exchangeMap[exchangeName].push({
protocolType,
apiType,
url: `https://raw.githubusercontent.com/kanekoshoyu/exchange-collection/main/asset/${file.name}`
});
}
});
return exchangeMap;
} catch (error) {
console.error("Error fetching exchange files:", error);
return {};
}
}
function populateProtocols() {
const exchangeName = document.getElementById('specs').value;
const protocolDropdown = document.getElementById('protocols');
protocolDropdown.innerHTML = ''; // Clear existing options
const protocols = exchanges[exchangeName] || [];
protocols.forEach(protocol => {
const option = document.createElement('option');
option.value = protocol.url;
option.text = `${protocol.protocolType.toUpperCase()} - ${protocol.apiType.toUpperCase()}`;
option.setAttribute('data-type', protocol.apiType);
protocolDropdown.add(option);
});
// Automatically load the first protocol's spec by default
if (protocols.length > 0) {
protocolDropdown.selectedIndex = 0;
loadSpec();
}
}
function loadSpec() {
const specUrl = document.getElementById('protocols').value;
const selectedOption = document.getElementById('protocols').selectedOptions[0];
const type = selectedOption.getAttribute('data-type');
const rapiDoc = document.getElementById('rapidoc');
const asyncApiIframe = document.getElementById('asyncapi-iframe');
if (type === 'openapi') {
rapiDoc.setAttribute('spec-url', specUrl);
rapiDoc.style.display = 'block';
asyncApiIframe.style.display = 'none';
} else if (type === 'asyncapi') {
asyncApiIframe.src = `https://studio.asyncapi.com/?url=${specUrl}`;
asyncApiIframe.style.display = 'block';
rapiDoc.style.display = 'none';
}
}
async function populateDropdown() {
const exchangeDropdown = document.getElementById('specs');
exchanges = await fetchExchanges();
Object.keys(exchanges).forEach(exchangeName => {
const option = document.createElement('option');
option.value = exchangeName;
// option.text = exchangeName.charAt(0).toUpperCase() + exchangeName.slice(1);
option.text = exchangeName;
exchangeDropdown.add(option);
});
// Automatically populate protocols for the first exchange by default
if (Object.keys(exchanges).length > 0) {
exchangeDropdown.selectedIndex = 0;
populateProtocols();
}
}
// Populate the exchange dropdown on page load
window.onload = populateDropdown;
</script>
</body>
</html>