aims shapes in demo

ULB-Darmstadt · Apr 23, 2024 · 9c2c7e4 · 9c2c7e4
1 parent ed81de3
commit 9c2c7e4
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -297,5 +297,51 @@ <h1>&lt;shacl-form&gt; demo</h1>
       })
     </script>
   </template>
+
+  <template id="template-mps">
+    <div class="wrapper">
+      <fieldset>
+        <legend>Select shape</legend>
+        <select id="shacl-shape-selector"><option></option></select>
+        <textarea id="shacl-shape-input" class="w-100 h-100"></textarea>
+      </fieldset>
+      <fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button="Export"></shacl-form></fieldset>
+      <fieldset id="shacl-output"><legend>Output generated by the form</legend><pre></pre></fieldset>
+    </div>
+    <script>
+      setTimeout(() => {
+        const form = document.getElementById("shacl-form")
+        const shapes = document.getElementById("shacl-shape-input")
+        const shapeSelector = document.getElementById("shacl-shape-selector")
+        const output = document.getElementById("shacl-output")
+        shapeSelector.addEventListener('change', () => {
+          form.dataset['shapes'] = shapeSelector.value
+          shapes.innerText = shapeSelector.value
+          output.querySelector("pre").innerText = ''
+          output.classList.remove('valid', 'invalid')
+        })
+        form.addEventListener('change', (ev) => {
+          output.classList.toggle('valid', ev.detail?.valid)
+          output.classList.toggle('invalid', !ev.detail?.valid)
+          output.querySelector("pre").innerText = form.serialize()
+        })
+        form.addEventListener('submit', (ev) => {
+          const link = document.createElement('a')
+          link.href = window.URL.createObjectURL(new Blob([form.serialize()], { type: "text/turtle" }))
+          link.download = 'metadata.ttl'
+          link.click()
+        })
+
+        fetch('https://pg4aims.ulb.tu-darmstadt.de/AIMS/application-profiles/?query=&language=EN&includeDefinition=true&state=public').then(resp => resp.json()).then(shapes => {
+          for (const shape of shapes) {
+            const option = document.createElement('option')
+            option.innerText = shape.name
+            option.value = shape.definition
+            shapeSelector.appendChild(option)
+          }
+        }).catch(e => console.error(e))
+      })
+    </script>
+  </template>
 </body>
 </html>