init

de541340 · Werner, Eric · de541340 · de541340 · de541340
Commit de541340 authored 4 years ago by Werner, Eric
--- a/.gitignore
+++ b/.gitignore
+*.code-workspace
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head><title>TypeScript Dom Manipulation</title></head>
+  <body>
+    <div id="app"></div>
+    <!-- Assume index.js is the compiled output of index.ts -->
+    <script src="index.js"></script>
+    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
+  </body>
+</html>
\ No newline at end of file
--- a/index.js
+++ b/index.js
+// 1. Select the div element using the id property
+const app = document.getElementById("app");
+
+// 2. Create a new <p></p> element programmatically
+const description = document.createElement("p");
+const bucketpath = document.createElement("p");
+
+
+const userAction = async () => {
+   
+    // fetch record json
+    const response = await fetch('https://www.fdr.uni-hamburg.de/api/records/863');
+    const recordjson = await response.json();
+
+    // read metadata from json response
+    const metadata = recordjson.metadata;
+    description.textContent = metadata.description;
+
+    // get bucket path from record json
+ 
+    const bucketresponse = await fetch(recordjson.links.bucket);
+    const bucketjson = await bucketresponse.json(); 
+
+    const bucket3dfiles = bucketjson.contents;
+
+    bucket3dfiles.forEach(element =>
+    {  
+      if(element.key.includes('.glb'))
+      {
+        console.log(element.key);
+        const filelink = element.links.self;
+        console.log(filelink);
+
+        const modelviewer = document.createElement("model-viewer");
+        modelviewer.setAttribute("src", filelink);
+        modelviewer.setAttribute("auto-rotate", true);
+        modelviewer.setAttribute("camera-controls", true);
+        app?.appendChild(modelviewer);
+        
+      }
+    });
+}
+
+  userAction();
+
+// 4. Append the p element to the div element
+app?.appendChild(description);