Skip to content

Commit

Permalink
update dcat-ap-nl shacl form demo
Browse files Browse the repository at this point in the history
  • Loading branch information
Niels Hoffmann committed Dec 16, 2024
1 parent 00f9191 commit 5111758
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 62 deletions.
23 changes: 3 additions & 20 deletions dcat-ap-nl-3/dcat-ap-nl-shacl-form/dcat-ap-nl.ttl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,6 @@ ex:Dataset a sh:NodeShape, rdfs:Class ;
.
## Einde Dataset ##



#### groepering van velden ####
ex:verplichtGroep
a sh:PropertyGroup ;
Expand All @@ -165,18 +163,16 @@ ex:HVDGroep
a sh:PropertyGroup ;
rdfs:label "HVD" .

# ex:aanbevolenGroep
# a sh:PropertyGroup ;
# rdfs:label "Aanbevolen eigenschappen Dataset" .

ex:GroepCR
a sh:PropertyGroup ;
rdfs:label "Verplichte eigenschappen Catalog Record" .

ex:GroepDS
a sh:PropertyGroup ;
rdfs:label "Verplichte eigenschappen Dataservice" .

#### Templates ####

## template voor contact point ##
ex:contactPoint
a sh:NodeShape ;
Expand Down Expand Up @@ -214,11 +210,7 @@ ex:agent
sh:uniqueLang true ;
sh:defaultValue "Mijn Organisatie"@nl;
] ;
# sh:property [
# sh:maxCount 1 ;
# sh:name "type" ;
# sh:path dct:type ;
# ] ;

sh:targetClass foaf:Agent .


Expand Down Expand Up @@ -253,14 +245,6 @@ ex:agent

ex:CatalogRecord a sh:NodeShape, rdfs:Class ;
sh:targetClass dcat:CatalogRecord ;
# sh:property [
# sh:group ex:GroepCR ;
# sh:datatype rdf:langString ;
# sh:languageIn ( "nl" "en" ) ;
# sh:uniqueLang true ;
# sh:name "title" ;
# sh:path dct:title
# ] ;

sh:property [
sh:group ex:GroepCR ;
Expand Down Expand Up @@ -431,7 +415,6 @@ sh:property [
sh:maxCount 1 ;
sh:path dct:publisher ;
] ;

.

## Einde Dataservice fields ##
99 changes: 58 additions & 41 deletions dcat-ap-nl-3/dcat-ap-nl-shacl-form/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,75 @@
<html>
<head>
<script type="importmap">

<head>
<script type="importmap">
{
"imports": {
"@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/[email protected]/dist/"
}
}
</script>
<script type="module">
import '@ulb-darmstadt/shacl-form/form-default.js'
import { registerPlugin } from '@ulb-darmstadt/shacl-form/form-default.js'
import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/vs.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="header">
<h1>demo - DCAT-AP-NL RDF genereren op basis van een formulier</h1>
</div>
<div class="main">
</div>
<script type="module">
import '@ulb-darmstadt/shacl-form/form-default.js'
import { registerPlugin } from '@ulb-darmstadt/shacl-form/form-default.js'
import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/vs.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="header">
<h1>demo - DCAT-AP-NL RDF genereren op basis van een formulier</h1>
</div>
<div class="main">
</div>


<div class="wrapper">
<fieldset><legend>Input Formulier</legend><shacl-form id="shacl-form" data-submit-button data-collapse="open" data-values-subject="http://example.org/dataset/42" data-shape-subject="http://example.org/Dataset"></shacl-form></fieldset>

<!-- <fieldset id="output"> -->
<fieldset id="shacl-output"><legend>Output in Turtle formaat </legend><pre></pre></fieldset>
<!-- </fieldset> -->
<div class="wrapper">
<fieldset>
<legend>Input Formulier</legend><shacl-form id="shacl-form" data-submit-button data-collapse="open"
data-values-subject="http://example.org/dataset/42"
data-shape-subject="http://example.org/Dataset"></shacl-form>
</fieldset>

<fieldset id="shacl-output">
<legend>Output in Turtle formaat </legend>
<pre></pre>
</fieldset>

<div>
<figure id="fig-overzicht-klassen"><img
src="https://docs.geostandaarden.nl/dcat/dcat-ap-nl30/media/overzicht%20klassen.png"
alt="Afbeelding met tekst" style="width: 100%;">
</figure>
Met het formulier wordt metadata voor een Dataset, een Catalog Record en optioneel een Dataservice aangemaakt. De
overige klassen worden in deze demo buiten beschouwing gelaten.
</div>
</div>
<script>
setTimeout(async () => {
const form = document.getElementById("shacl-form")
const output = document.getElementById("shacl-output")
const shapesTTL = await fetch("dcat-ap-nl.ttl").then(resp => resp.text())
form.setClassInstanceProvider((clazz) => {
if (clazz === 'http://purl.org/dc/terms/RightsStatement') {
return `
setTimeout(async () => {
const form = document.getElementById("shacl-form")
const output = document.getElementById("shacl-output")
const shapesTTL = await fetch("dcat-ap-nl.ttl").then(resp => resp.text())
form.setClassInstanceProvider((clazz) => {
if (clazz === 'http://purl.org/dc/terms/RightsStatement') {
return `
<http://publications.europa.eu/resource/authority/access-right/PUBLIC> a <http://purl.org/dc/terms/RightsStatement>; <http://www.w3.org/2000/01/rdf-schema#label> "Public".
<http://publications.europa.eu/resource/authority/access-right/RESTRICTED> a <http://purl.org/dc/terms/RightsStatement>; <http://www.w3.org/2000/01/rdf-schema#label> "Restricted".
<http://publications.europa.eu/resource/authority/access-right/NON-PUBLIC> a <http://purl.org/dc/terms/RightsStatement>; <http://www.w3.org/2000/01/rdf-schema#label> "Non-Public".
`
}
})
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.dataset['shapes'] = shapesTTL
}
})
</script>
</body>
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.dataset['shapes'] = shapesTTL
})
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion dcat-ap-nl-3/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Deze demo maakt gebruik van [shacl-form](https://github.com/ULB-Darmstadt/shacl-

shacl-form is een HTML5 web component om een formulier te genereren op basis van een shacl shape. De output van het formulier wordt vervolgens ook als RDF gegenereerd.

![screenshot](./dcat-ap-nl-genereren.png)
[![screenshot](./dcat-ap-nl-genereren.png)](./dcat-ap-nl-shacl-form/index.html)

Verplichte eigenschappen worden getoond met een rode asterix. Zolang nog niet alle verplichte eigenschappen ingevuld zijn wordt de RDF dataset in het rood getoond.
Als alle verplichte eigenschappen zijn ingevuld veranderd de kleur naar groen.

0 comments on commit 5111758

Please sign in to comment.