improvements to javascript client

src/js/caosdb.js

@@ -72,6 +72,9 @@ function getEntityID(element) {
 /**
   * Return the id of an href attribute.
   * This is needed for retrieving an ID that is contained in a link to another entity.
+  *
+  * Some anker tags have a data-entity-id tag instead which is returned.
+  *
   * @param el The element holding the link.
   * @return A String holding the ID or undefined if no href attribute could be found.
   */
@@ -83,6 +86,8 @@ function getIDfromHREF(el) {
         if (idstr.length == 0)
             return undefined;
         return idstr;
+    } else if (el.hasAttribute("data-entity-id")) {
+        return el.getAttribute("data-entity-id");
     }
     return undefined;
 }
@@ -199,21 +204,27 @@ function getPropertyFromElement(propertyelement, names=undefined) {
         // This is set to true, when there is a reference or a list of references:
         property.reference = (valel.getElementsByClassName("caosdb-id").length > 0);
         if (!(property.datatype === undefined) && property.datatype.substring(0, 4).toLowerCase() == "list") {
+            property.list = true;
+            property.value = [];
             let listel;
             if (property.reference) {
                 // TODO: Fix list preivew here. Fixed, but untested.
-                listel = findElementByConditions(valel, x => x.classList.contains("caosdb-id"),
+                listel = findElementByConditions(valel, x => x.classList.contains("caosdb-resolvable-reference"),
                                                  x => x.classList.contains("caosdb-preview-container"));
+                for (var j=0; j<listel.length; j++) {
+                    property.value.push(getIDfromHREF(listel[j]));
+                }
             } else {
                 // TODO: Fix list preivew here. Fixed, but untested.
                 listel = findElementByConditions(valel, x => x.classList.contains("list-group-item"),
                                                  x => x.classList.contains("caosdb-preview-container"));
-            }
-            property.list = true;
-            property.value = [];
                 for (var j=0; j<listel.length; j++) {
                     property.value.push(listel[j].textContent);
                 }
+            }
+            
+            
+            
         } else if (property.reference) {
             // let el = findElementByConditions(valel, x => x.classList.contains("caosdb-id"),
             //                                  x => x.classList.contains("caosdb-preview-container"));
@@ -302,7 +313,7 @@ function setPropertySafe(valueelement, property, propold) {
             } else {
                  finalstring = '';
                 for (var i=0; i<property.value.length; i++) {
-                    finalstring += '<a class="btn btn-default btn-sm" href="' + serverstring + property.value[i] + '"><span class="caosdb-id">'+property.value[i]+'</span></a>';
+                    finalstring += '<a class="btn btn-default btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value[i] + '"><span class="caosdb-id">'+property.value[i]+'</span></a>';
                 }
             }
              valueelement.getElementsByClassName("caosdb-value-list")[0].getElementsByClassName("caosdb-overflow-content")[0].innerHTML = finalstring;
@@ -316,7 +327,7 @@ function setPropertySafe(valueelement, property, propold) {
             ael.setAttribute("href", serverstring + property.value);
             ael.innerHTML = '<span class="caosdb-id">'+property.value+'</span>';
         } else {
-            finalstring = '<a class="btn btn-default btn-sm" href="' + serverstring + property.value + '"><span class="caosdb-id">'+property.value+'</span></a>';
+            finalstring = '<a class="btn btn-default btn-sm caosdb-resolvable-reference" href="' + serverstring + property.value + '"><span class="caosdb-id">'+property.value+'</span></a>';
             valueelement.innerHTML = finalstring;
             preview.init();
         }
@@ -362,9 +373,14 @@ function setProperty(element, property) {
   * @param element The element holding the entity.
   * @param property_name The name of the property.
   * @return The value of the the property with property_name.
+  * This function returns undefined when this property is not available for this entity.
   */
 function getProperty(element, property_name) {
-    return getProperties(element).filter(el => el.name == property_name)[0].value;
+    var props = getProperties(element).filter(el => el.name == property_name);
+    if (props.length == 0) {
+        return undefined;
+    }
+    return props[0].value;
 }
 
 /**
@@ -403,9 +419,9 @@ function appendParent(doc, element, parent) {
   */
 function appendValueNode(doc, element, name, value) {
     let el = doc.createElement(name);
-    let valel = doc.createTextNode(property.value);
+    let valel = doc.createTextNode(value);
     el.appendChild(valel);
-    property.appendChild(el);
+    element.appendChild(el);
 }
 
 /**
@@ -415,9 +431,12 @@ function appendValueNode(doc, element, name, value) {
   * @param element The element to append to.
   * @param property An object specifying a property.
   */
-function appendProperty(doc, element, property) {
+function appendProperty(doc, element, property, append_datatype=false) {
     var propertyElement = doc.createElement("Property");
     setNameID(propertyElement, property);
+    if (append_datatype == true) {
+        propertyElement.setAttribute("datatype", property.datatype);
+    }
 
     if (!(property.value === undefined)) {
         if (("list" in property && property.list) || property.value instanceof Array) {
@@ -451,7 +470,8 @@ function appendProperty(doc, element, property) {
   * @return A document holding the newly created entity.
   *
   */
-function createEntityXML(role, name, id, properties, parents) {
+function createEntityXML(role, name, id, properties, parents,
+                        append_datatypes=false) {
     var doc = document.implementation.createDocument(null, role, null);
     var nelnode = doc.children[0]
     setNameID(nelnode, {name: name, id: id});
@@ -464,7 +484,7 @@ function createEntityXML(role, name, id, properties, parents) {
 
     if (!(properties === undefined)) {
         for (var i=0; i<properties.length; i++) {
-            appendProperty(doc, nelnode, properties[i]);
+            appendProperty(doc, nelnode, properties[i], append_datatypes);
         }
     }
     return doc;

src/xsl/entity.xsl

@@ -291,13 +291,14 @@
         <xsl:choose>
           <xsl:when test="$reference='true' and $value!=''">
             <!-- this is a reference -->
-            <a class="btn btn-default btn-sm">
+            <a class="btn btn-default btn-sm caosdb-resolvable-reference">
               <xsl:attribute name="href">
                 <xsl:value-of select="concat($entitypath,$value)" />
               </xsl:attribute>
-              <span class="caosdb-id caosdb-id-button caosdb-resolvable-reference">
+              <span class="caosdb-id caosdb-id-button" style="margin:5px;background-color:orange;display:none;">
                 <xsl:value-of select="$value" />
               </span>
+              <span class="caosdb-resolve-reference-target" />
             </a>
           </xsl:when>
           <xsl:when test="$boolean='true'">