From 9c2c7e4006b1eef5dc1d43f3df66537eefc154e2 Mon Sep 17 00:00:00 2001
From: Stephan Tittel <stephan.tittel@tu-darmstadt.de>
Date: Tue, 23 Apr 2024 11:04:41 +0200
Subject: [PATCH] aims shapes in demo

---
 demo/index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index 4ff3171..5cf74c6 100644
--- 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>