-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (159 loc) · 6.68 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web -> Client -> Godot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Download from browser to Godot PoC</h1>
<div>
Softwares
<select id="software">
<option value="" disabled selected>Select Software</option>
</select>
(dynamically detected, make sure at least 1 client is running)
</div>
<div>
Project Name = <span id="project-name"></span>
</div>
<div>
Software AppID = <span id="app-id"></span>
</div>
<div>
Client Port = <span id="port"></span>
</div>
</br>
<div>
APIKey
<input type="text" id="api-key" placeholder="API Key" value="">
(this will fill in the webpage, because user is logged-in)
</div>
<div>
AssetID
<input type="text" id="asset-id" placeholder="Asset ID" value="0992088b-fb84-4c69-bb6e-426272970c8b">
(this will fill the webpage, we know on which asset user clicks the download)
</div>
<div>
Asset Base ID
<input type="text" id="asset-base-id" placeholder="Asset Base ID" value="67f55944-a088-48de-8a60-6132547cbf75">
(this will fill the webpage, we know on which asset user clicks the download)
</div>
<div>
Resolution
<input type="text" id="resolution" placeholder="Resolution" value="resolution_4K">
(user will choose)
</div>
<button id="download">Download</button>
<div>
<h2>Clients</h2>
<ul id="client-list">
<!-- List of connected clients will be populated here -->
</ul>
</div>
<script type="module">
import bkclientjs from './dist/main.js'; // import as ESNext module
let clients = [];
const pollingInterval = 500;
// Function to populate the client list with available clients
async function populateClientList() {
clients = await bkclientjs.getClients();
const clientList = document.getElementById("client-list");
// Clear the existing client list
clientList.innerHTML = '';
if (!clients || clients.length === 0) {
console.log("No Clients running.");
return;
}
// Populate the list with connected clients
clients.forEach(client => {
const listItem = document.createElement("li");
listItem.textContent = `Client on port ${client.port} (version: ${client.clientVersion})`;
clientList.appendChild(listItem);
});
// Update the software dropdown with the latest software
populateSoftwareDropdown();
}
let isDropdownFocused = false; // Flag to track if the dropdown is focused
// Function to populate the software dropdown with available software
async function populateSoftwareDropdown() {
if (isDropdownFocused) {
// Don't update the dropdown if the user is interacting with it
return;
}
const softwareSelect = document.getElementById("software");
// Save the currently selected value
const selectedValue = softwareSelect.value;
// Clear existing options (keep the placeholder)
softwareSelect.innerHTML = '<option value="" disabled selected>Select Software</option>';
const softwares = await bkclientjs.getSoftwares();
if (!softwares || softwares.length === 0) {
console.log("No Software running.");
return;
}
softwares.forEach(software => {
const option = document.createElement("option");
option.value = software.appID; // Use the appID as the value
option.textContent = `${software.name} (v${software.version})`;
softwareSelect.appendChild(option);
});
// Restore the previously selected value if it exists
if (selectedValue) {
softwareSelect.value = selectedValue;
}
}
// Event listener for when a software is selected
document.getElementById("software").addEventListener("change", function() {
const selectedAppID = this.value; // Get the selected appID
// Find the client and port associated with the selected software
let selectedProjectName = "";
let selectedPort = "";
for (let client of clients) {
for (let software of client.softwares) {
if (software.appID == selectedAppID) {
selectedProjectName = software.projectName;
selectedPort = client.port;
break;
}
}
if (selectedPort) break;
}
// Update the AppID and Port spans
document.getElementById("project-name").textContent = selectedProjectName; // Update the Project name
document.getElementById("app-id").textContent = selectedAppID; // Update the AppID span
document.getElementById("port").textContent = selectedPort; // Update the Port span
});
// Add event listeners to pause and resume dropdown updates
document.getElementById("software").addEventListener("focus", () => {
isDropdownFocused = true;
});
document.getElementById("software").addEventListener("blur", () => {
isDropdownFocused = false;
});
// Function to handle the download button click
async function DownloadButtonClicked() {
const apiKey = document.getElementById("api-key").value;
const appID = document.getElementById("app-id").textContent;
const port = document.getElementById("port").textContent;
const assetID = document.getElementById("asset-id").value;
const assetBaseID = document.getElementById("asset-base-id").value;
const resolution = document.getElementById("resolution").value;
if (!apiKey || !appID || !assetID || !assetBaseID || !resolution || !port) {
alert("Please fill all required fields.");
return;
}
let ok = await bkclientjs.downloadAssetToSoftware(port, appID, assetID, assetBaseID, resolution, apiKey, );
console.log("Download ok:", ok)
}
document.getElementById("download").addEventListener("click", DownloadButtonClicked)
// Start polling and updating the clients and software lists periodically
window.onload = function() {
bkclientjs.startClientPolling();
populateClientList(); // Initial population
setInterval(populateClientList, pollingInterval); // Periodic update of the clientList
};
</script>
</body>
</html>