attribute list on the bottom if there are no promoted attributes

src/public/javascripts/services/note_detail.js

@@ -26,6 +26,8 @@ const $unprotectButton = $("#unprotect-button");
 const $noteDetailWrapper = $("#note-detail-wrapper");
 const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
 const $noteIdDisplay = $("#note-id-display");
+const $attributeList = $("#attribute-list");
+const $attributeListInner = $("#attribute-list-inner");
 const $labelList = $("#label-list");
 const $labelListInner = $("#label-list-inner");
 const $relationList = $("#relation-list");
@@ -230,8 +232,6 @@ async function loadAttributes() {
 
     const attributes = await server.get('notes/' + noteId + '/attributes');
 
-    console.log(attributes);
-
     const promoted = attributes.filter(attr => (attr.type === 'label-definition' || attr.type === 'relation-definition') && attr.value.isPromoted);
 
     let idx = 1;
@@ -254,6 +254,33 @@ async function loadAttributes() {
             }
         }
     }
+    else {
+        $attributeListInner.html('');
+
+        if (attributes.length > 0) {console.log(attributes);
+            for (const attribute of attributes) {
+                if (attribute.type === 'label') {
+                    $attributeListInner.append(utils.formatLabel(attribute) + " ");
+                }
+                else if (attribute.type === 'relation') {
+                    $attributeListInner.append(attribute.name + " = ");
+                    $attributeListInner.append(await linkService.createNoteLink(attribute.value));
+                    $attributeListInner.append(" ");
+                }
+                else if (attribute.type === 'label-definition' || attribute.type === 'relation-definition') {
+                    $attributeListInner.append(attribute.name + " definition ");
+                }
+                else {
+                    messagingService.logError("Unknown attr type: " + attribute.type);
+                }
+            }
+
+            $attributeList.show();
+        }
+        else {
+            $attributeList.hide();
+        }
+    }
 }
 
 async function loadLabelList() {

src/public/stylesheets/style.css

@@ -308,13 +308,13 @@ div.ui-tooltip {
 
 .cm-matchhighlight {background-color: #eeeeee}
 
-#label-list, #relation-list {
+#label-list, #relation-list, #attribute-list {
     color: #777777;
     padding: 5px;
     display: none;
 }
 
-#label-list button, #relation-list button {
+#label-list button, #relation-list button, #attribute-list button {
     padding: 2px;
     margin-right: 5px;
 }

src/views/index.ejs

@@ -259,7 +259,13 @@
 
         <div id="children-overview"></div>
 
-        <div id="labels-and-relations">
+        <div id="attribute-list">
+          <button class="btn btn-sm show-attributes-button">Attributes:</button>
+
+          <span id="attribute-list-inner"></span>
+        </div>
+
+        <div id="labels-and-relations" style="display: none;">
           <span id="label-list">
             <button class="btn btn-sm show-labels-button">Labels:</button>