@igea/oac_frontend 1.0.52 → 1.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "bin": {

package/src/controllers/investigation.js

@@ -18,7 +18,7 @@ module.exports = function(serviceName) {
     }
 
     router.get('/form', (req, res) => {
-        renderForm(req, res, null);
+        renderForm(req, res, '');
     });
 
     router.get('/form/:uuid', (req, res) => {

package/src/locales/en.json

@@ -85,7 +85,7 @@
             "max_files": "You can upload up to 5 files at a time",
             "max_size": "Each file must be less than 10MB",
             "select_vocabolary": "Select a vocabolary to view its items",
-            "terms": "Terms"
+            "terms": "Vocabulary entries"
         }
     },
     "investigation":{
@@ -95,9 +95,12 @@
             "form_invalid": "The form contains errors. Please correct them before submitting.",
             "submit": "Save",
             "reset": "Reset",
+            "validate": "Validate",
             "show_more": "Show more",
             "confirm": "Confirm",
-            "download": "Download"
+            "download": "Download",
+            "select_instance": "Select an instance",
+            "generated_output": "Generated output"
         }
     },
     "search": {

package/src/locales/it.json

@@ -88,7 +88,7 @@
             "upload_error": "Errore durante il caricamento dei file",
             "invalid_file": "Tipo di file non valido",
             "select_vocabolary": "Seleziona un vocabolario per visualizzarne gli elementi",
-            "terms": "Termini"
+            "terms": "Voci del vocabolario"
         }
     },
     "investigation": {
@@ -98,9 +98,12 @@
             "form_invalid": "La scheda contiene errori. Correggerli per poterla salvare correttamente.",
             "submit": "Invia",
             "reset": "Reimposta",
+            "validate": "Valida",
             "show_more": "Mostra di più",
             "confirm": "Conferma",
-            "download": "Scarica"
+            "download": "Scarica",
+            "select_instance": "Seleziona un'istanza",
+            "generated_output": "Output generato"
         }
     },
     "search": {

package/src/public/js/app/vue-investigation.js

@@ -2,8 +2,10 @@ const {createApp} = Vue;
 
 const appId = 'investigation-app';
 const shaclId = 'shacl-form';
+
+const templateIRIOfIndagine = "http://diagnostica/indagine/$UUID$";
 const templateIRIToExcludeFromSearch = [
-    "http://diagnostica/indagine/$UUID$"
+    templateIRIOfIndagine
 ];
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -14,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
         data() {
             return {
                 cur_role: parseInt(el.dataset.cur_role),
-                uuid: parseInt(el.dataset.uuid) || null,
+                uuid: el.dataset.uuid || null,
                 form: null,
                 enabled: el.dataset.editing == "true",
                 serializedForm: "",
@@ -35,7 +37,6 @@ document.addEventListener('DOMContentLoaded', () => {
         },
         mounted() {
             this.initShaclForm();
-            this.load();
         },
         computed:{
             outputStyle(){
@@ -77,23 +78,30 @@ document.addEventListener('DOMContentLoaded', () => {
             },
             initShaclForm() {
                 var _this = this;
-                this.form = document.querySelector("shacl-form");
-                const output = document.getElementById("shacl-output")
-                this.form.addEventListener('change', event => {
-                    // check if form data validates according to the SHACL shapes
-                    _this.validForm = event.detail?.valid;
-                    _this.serializedForm = _this.form.serialize();
-                });
-                this.form.addEventListener("ready", () => {
-                    var intervalId = setInterval(() => {
-                        if(_this.form.shadowRoot){
-                            clearInterval(intervalId);
-                            _this.inputIdentifizier();
-                            if(!_this.enabled)
-                                _this.disableInteractions(_this.form);
-                        }
-                    }, 100);
-                });
+                setTimeout(async ()=>{
+                    _this.form = document.querySelector("shacl-form");
+                    const output = document.getElementById("shacl-output")
+                    
+                    //await _this.load(this.uuid);
+
+                    _this.form.addEventListener('change', event => {
+                        // check if form data validates according to the SHACL shapes
+                        _this.validForm = event.detail?.valid;
+                        _this.serializedForm = _this.form.serialize();
+                    });
+                    
+                    _this.form.addEventListener("ready", () => {
+                        var intervalId = setInterval(() => {
+                            if(_this.form.shadowRoot){
+                                clearInterval(intervalId);
+                                _this.inputIdentifizier();
+                                if(!_this.enabled)
+                                    _this.disableInteractions(_this.form);
+                            }
+                        }, 100);
+                    });
+                    
+                })
             },
             searchByPrefixStart(rokitInput, prefix){
                 this.search.offset = 0;
@@ -167,15 +175,17 @@ document.addEventListener('DOMContentLoaded', () => {
                         // Disabilita rokit-input
                         const rokitInput = container.querySelector("rokit-input");
                         if (rokitInput) {
+                            var isIndagineIdField = templateIRIOfIndagine === rokitInput.placeholder;
                             if(rokitInput.value == ""){
-                                rokitInput.value = _this.generateIRI(rokitInput.placeholder);
+                                rokitInput.value = _this.generateIRI(rokitInput, isIndagineIdField);
                             }
+                            
                             rokitInput.setAttribute("disabled", "true");
                             rokitInput.style.opacity   = "0.6";
                             rokitInput.style.pointerEvents = "none";
                            
                             var escludeSearchButton = templateIRIToExcludeFromSearch.includes(rokitInput.placeholder);
-
+                                   
                             if(_this.enabled && !escludeSearchButton){
                                 // Aggiungo bottone IMG per la ricerca 
                                 let next = label.nextElementSibling;
@@ -254,15 +264,81 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                 }
             },
-            generateIRI(template, uuid){
-                var _uuid = uuid || crypto.randomUUID();
-                return template.replace("$uuid$", _uuid).replace("$UUID$", _uuid);        
+            generateIRI(input, isIndagne){
+                var template = input.placeholder;
+                setTimeout((async function(){
+                    var _uuid = crypto.randomUUID();
+                    template = template.replace("$uuid$", _uuid).replace("$UUID$", _uuid);
+                    for(var i=1; i<=9; i++){
+                        var seq = "seq" + i; 
+                        var searchStr = "$" + seq + "$";
+                        var searchStrUpp = searchStr.toUpperCase();
+                        if(template.toLowerCase().includes(searchStr)){ 
+                            var response = await fetch('/backend/ontology/counter/' + seq ).then(resp => resp.json());
+                            if(response.success && response.data){
+                                var counter = response.data;
+                                template = template.replace(searchStr, counter).replace(searchStrUpp, counter);
+                            }
+                        }  
+                    }
+                    input.value = template;
+                    if(isIndagne){
+                        this.uuid = input.value.split("/").pop();
+                    }
+                }).bind(this));
             },
-            load() {
-                
+            async load(uuid) {
+                if(uuid){
+                    const dataTTL = await fetch("/backend/ontology/form/" + uuid).then(resp => resp.text())
+                    this.form.dataset['values'] = dataTTL;
+                }
             },
+
+            async load_(uuid, callback){
+                this.form.setClassInstanceProvider((clazz) => { 
+                    if (clazz === 'http://example.org/Material') {
+                        return `
+                        <http://example.org/steel> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Steel".
+                        <http://example.org/wood> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Wood".
+                        <http://example.org/alloy> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Alloy".
+                        <http://example.org/plaster> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Plaster".
+                        `
+                    }
+                });
+                const shapesTTL = await fetch("https://ulb-darmstadt.github.io/shacl-form/complex-example.ttl").then(resp => resp.text())
+                const dataTTL = await fetch("https://ulb-darmstadt.github.io/shacl-form/complex-example-data.ttl").then(resp => resp.text())
+                this.form.dataset['shapes'] = shapesTTL
+                this.form.dataset['values'] = dataTTL
+                callback()
+            },
+
             save() {
-                
+                var request = axios.post("/backend/ontology/form/save", {
+                    turtle: this.serializedForm,
+                    uuid: this.uuid
+                });
+                request.then(response => {
+                    var obj = response.data;
+                    if(obj.success)
+                        alert("Saved: OK")
+                    else
+                        alert("Error: " + obj.message)
+                }).catch(error => {
+                    console.log(error);
+                });
+            },
+            validate() {
+                var request = axios.post("/backend/ontology/validate", {
+                    turtle: this.serializedForm
+                });
+                request.then(response => {
+                    var obj = response.data;
+                    var data = obj.data
+                    console.log(data.conforms);
+                    console.log(data.details);
+                }).catch(error => {
+                    console.log(error);
+                });
             },
             reset() {
                 window.location.reload();