|
13 | 13 | **/ |
14 | 14 |
|
15 | 15 | function get_td(addr) { |
16 | | - servient.start().then((thingFactory) => { |
17 | | - helpers |
18 | | - .fetch(addr) |
19 | | - .then((td) => { |
20 | | - thingFactory.consume(td).then((thing) => { |
21 | | - removeInteractions(); |
22 | | - showInteractions(thing); |
| 16 | + clearAllInteractions(); |
| 17 | + |
| 18 | + servient |
| 19 | + .start() |
| 20 | + .then((thingFactory) => { |
| 21 | + helpers |
| 22 | + .fetch(addr) |
| 23 | + .then((td) => { |
| 24 | + thingFactory |
| 25 | + .consume(td) |
| 26 | + .then((thing) => { |
| 27 | + showInteractions(thing); |
| 28 | + updateTabDescription(addr, td); |
| 29 | + }) |
| 30 | + .catch((err) => { |
| 31 | + updateTabDescription(addr, null, "Failed to consume TD: " + err); |
| 32 | + }); |
| 33 | + }) |
| 34 | + .catch((err) => { |
| 35 | + updateTabDescription(addr, null, "Failed to fetch TD: " + err); |
23 | 36 | }); |
24 | | - }) |
25 | | - .catch((error) => { |
26 | | - window.alert("Could not fetch TD.\n" + error); |
27 | | - }); |
28 | | - }); |
| 37 | + }) |
| 38 | + .catch((err) => { |
| 39 | + updateTabDescription(addr, null, "Failed to start servient: " + err); |
| 40 | + }); |
29 | 41 | } |
30 | 42 |
|
31 | 43 | function showInteractions(thing) { |
@@ -110,15 +122,6 @@ function showInteractions(thing) { |
110 | 122 | } |
111 | 123 | } |
112 | 124 |
|
113 | | -function removeInteractions() { |
114 | | - for (id of ["properties", "actions", "events"]) { |
115 | | - let placeholder = document.getElementById(id); |
116 | | - while (placeholder.firstChild) { |
117 | | - placeholder.removeChild(placeholder.firstChild); |
118 | | - } |
119 | | - } |
120 | | -} |
121 | | - |
122 | 125 | function showSchemaEditor(action, thing) { |
123 | 126 | let td = thing.getThingDescription(); |
124 | 127 | // Remove old editor |
@@ -163,9 +166,170 @@ function removeSchemaEditor() { |
163 | 166 | } |
164 | 167 | } |
165 | 168 |
|
| 169 | +// Error handling functions to show/hide error messages on web page instead of using alert window |
| 170 | +function showError(message) { |
| 171 | + const errorContainer = document.getElementById("error-container"); |
| 172 | + const errorText = document.getElementById("error-text"); |
| 173 | + |
| 174 | + if (errorContainer && errorText) { |
| 175 | + errorText.textContent = message; |
| 176 | + errorContainer.style.display = "block"; |
| 177 | + } |
| 178 | +} |
| 179 | + |
| 180 | +function hideError() { |
| 181 | + const errorContainer = document.getElementById("error-container"); |
| 182 | + if (errorContainer) { |
| 183 | + errorContainer.style.display = "none"; |
| 184 | + } |
| 185 | +} |
| 186 | + |
| 187 | +function updateTabDescription(url, td, error) { |
| 188 | + // Find active tab and update its description |
| 189 | + const activeTab = document.querySelector(".tabs-content .content.active"); |
| 190 | + if (!activeTab) return; |
| 191 | + |
| 192 | + // Update URL link |
| 193 | + const urlElement = activeTab.querySelector(".td-url"); |
| 194 | + if (urlElement && url) { |
| 195 | + urlElement.href = url; |
| 196 | + urlElement.textContent = url; |
| 197 | + } |
| 198 | + |
| 199 | + // Update description |
| 200 | + const descriptionElement = activeTab.querySelector(".td-description"); |
| 201 | + const descriptionParent = descriptionElement ? descriptionElement.closest("p") : null; |
| 202 | + |
| 203 | + if (error) { |
| 204 | + // Hide description, show error banner |
| 205 | + if (descriptionParent) descriptionParent.style.display = "none"; |
| 206 | + showError(error); |
| 207 | + } else { |
| 208 | + // Show description, hide error banner |
| 209 | + if (descriptionParent) descriptionParent.style.display = ""; |
| 210 | + if (descriptionElement) { |
| 211 | + descriptionElement.textContent = td?.description || "No description available"; |
| 212 | + descriptionElement.style.color = ""; |
| 213 | + } |
| 214 | + hideError(); |
| 215 | + } |
| 216 | +} |
| 217 | + |
| 218 | +// Clear all interactions and editor |
| 219 | +function clearAllInteractions() { |
| 220 | + hideError(); |
| 221 | + const interactions = document.getElementById("interactions"); |
| 222 | + if (interactions) { |
| 223 | + interactions.style.display = "none"; |
| 224 | + } |
| 225 | + ["properties", "actions", "events"].forEach((id) => { |
| 226 | + const element = document.getElementById(id); |
| 227 | + if (element) element.innerHTML = ""; |
| 228 | + }); |
| 229 | + removeSchemaEditor(); |
| 230 | +} |
| 231 | + |
166 | 232 | var servient = new WoT.Core.Servient(); |
167 | 233 | servient.addClientFactory(new WoT.Http.HttpClientFactory()); |
168 | 234 | var helpers = new WoT.Core.Helpers(servient); |
169 | | -document.getElementById("fetch").onclick = () => { |
170 | | - get_td(document.getElementById("td_addr").value); |
| 235 | + |
| 236 | +// Tab configuration |
| 237 | +const TD_URLS = { |
| 238 | + testthing: "http://plugfest.thingweb.io/http-data-schema-thing", |
| 239 | + smartcoffee: "http://plugfest.thingweb.io/http-advanced-coffee-machine", |
| 240 | + counter: "http://plugfest.thingweb.io/counter", |
171 | 241 | }; |
| 242 | + |
| 243 | +document.addEventListener("DOMContentLoaded", function () { |
| 244 | + // Parse URL parameters to pre-fill the input field |
| 245 | + let $_GET = location.search |
| 246 | + .substr(1) |
| 247 | + .split("&") |
| 248 | + .reduce((o, i) => ((u = decodeURIComponent), ([k, v] = i.split("=")), (o[u(k)] = v && u(v)), o), {}); |
| 249 | + |
| 250 | + // Tab configuration in correct sequence |
| 251 | + const tabLinks = [ |
| 252 | + { id: "tab-link-testthing", tab: "tab-testthing" }, |
| 253 | + { id: "tab-link-smartcoffee", tab: "tab-smartcoffee" }, |
| 254 | + { id: "tab-link-counter", tab: "tab-counter" }, |
| 255 | + { id: "tab-link-custom", tab: "tab-custom" }, |
| 256 | + ]; |
| 257 | + |
| 258 | + const tdInput = document.getElementById("td_addr"); |
| 259 | + const fetchBtn = document.getElementById("fetch"); |
| 260 | + const closeErrorBtn = document.getElementById("close-error"); |
| 261 | + |
| 262 | + // Error close button handler |
| 263 | + if (closeErrorBtn) { |
| 264 | + closeErrorBtn.onclick = (e) => { |
| 265 | + e.preventDefault(); |
| 266 | + hideError(); |
| 267 | + }; |
| 268 | + } |
| 269 | + |
| 270 | + // Pre-fill input from URL parameter if provided |
| 271 | + if ($_GET["url"]) { |
| 272 | + tdInput.value = $_GET["url"]; |
| 273 | + } |
| 274 | + |
| 275 | + // Tab click handlers |
| 276 | + tabLinks.forEach(({ id, tab }) => { |
| 277 | + const link = document.getElementById(id); |
| 278 | + if (link) { |
| 279 | + link.addEventListener("click", function (e) { |
| 280 | + e.preventDefault(); |
| 281 | + clearAllInteractions(); |
| 282 | + |
| 283 | + // Switch active tab |
| 284 | + document.querySelectorAll("#td-tabs .tab-title").forEach((li) => li.classList.remove("active")); |
| 285 | + link.parentElement.classList.add("active"); |
| 286 | + document.querySelectorAll(".tabs-content .content").forEach((c) => c.classList.remove("active")); |
| 287 | + document.getElementById(tab).classList.add("active"); |
| 288 | + |
| 289 | + // Auto-consume TD based on tab |
| 290 | + if (tab === "tab-testthing") { |
| 291 | + get_td(TD_URLS.testthing); |
| 292 | + } else if (tab === "tab-smartcoffee") { |
| 293 | + get_td(TD_URLS.smartcoffee); |
| 294 | + } else if (tab === "tab-counter") { |
| 295 | + get_td(TD_URLS.counter); |
| 296 | + } else if (tab === "tab-custom") { |
| 297 | + // Reset custom TD tab |
| 298 | + const customDesc = document.querySelector("#tab-custom .td-description"); |
| 299 | + if (customDesc) { |
| 300 | + customDesc.textContent = "Enter a TD URL above to consume it."; |
| 301 | + customDesc.style.color = ""; |
| 302 | + } |
| 303 | + const customUrl = document.querySelector("#tab-custom .td-url"); |
| 304 | + if (customUrl) { |
| 305 | + customUrl.href = ""; |
| 306 | + customUrl.textContent = ""; |
| 307 | + } |
| 308 | + } |
| 309 | + }); |
| 310 | + } |
| 311 | + }); |
| 312 | + |
| 313 | + // Custom TD fetch button |
| 314 | + if (fetchBtn) { |
| 315 | + fetchBtn.onclick = () => { |
| 316 | + if (tdInput.value) { |
| 317 | + get_td(tdInput.value); |
| 318 | + } else { |
| 319 | + showError("Please enter a valid URL."); |
| 320 | + } |
| 321 | + }; |
| 322 | + } |
| 323 | + |
| 324 | + // Auto-load TD if URL parameter was provided |
| 325 | + if ($_GET["url"]) { |
| 326 | + document.querySelectorAll("#td-tabs .tab-title").forEach((li) => li.classList.remove("active")); |
| 327 | + document.getElementById("tab-link-custom").parentElement.classList.add("active"); |
| 328 | + document.querySelectorAll(".tabs-content .content").forEach((c) => c.classList.remove("active")); |
| 329 | + document.getElementById("tab-custom").classList.add("active"); |
| 330 | + get_td($_GET["url"]); |
| 331 | + } else { |
| 332 | + // Default to Test Thing tab |
| 333 | + document.getElementById("tab-link-testthing").click(); |
| 334 | + } |
| 335 | +}); |
0 commit comments