Enhancements

yace/data/product-list.json

@@ -2,23 +2,23 @@
 	"products": [
 		{
 			"id": 1,
-			"label": "Controller v1.0"
+			"label": "Product A 1.0"
 		},
 		{
 			"id": 2,
-			"label": "Controller v2.0"
+			"label": "Product A 1.1"
 		},
 		{
 			"id": 3,
-			"label": "Controller v3.0"
+			"label": "Product B 1.0"
 		},
-    {
-      "id": 4,
-      "label": "Controller v4.0"
-    },
-    {
-      "id": "994_44",
-      "label": "Sensor 994 v4.4"
-    } 
+		{
+			"id": 4,
+			"label": "Product C 4.2"
+		},
+		{
+			"id": 5,
+			"label": "Product C 4.3"
+		}
 	]
 }

yace/data/products/1.json

@@ -1,16 +1,22 @@
 {
 	"branches": [
 		{
-			"category": "product_family",
-			"name": "controller",
+			"category": "vendor",
+			"name": "Example Company",
 			"branches": [
 				{
-					"category": "product_version",
-					"name": "1.0",
-					"product": {
-						"name": "controller 1.0",
-						"product_id": "1"
-					}
+					"category": "product_name",
+					"name": "Product A",
+					"branches": [
+						{
+							"category": "product_version",
+							"name": "1.0",
+							"product": {
+								"name": "Product A 1.0",
+								"product_id": "1"
+							}
+						}
+					]
 				}
 			]
 		}

yace/data/products/2.json

@@ -1,16 +1,22 @@
 {
 	"branches": [
 		{
-			"category": "product_family",
-			"name": "controller",
+			"category": "vendor",
+			"name": "Example Company",
 			"branches": [
 				{
-					"category": "product_version",
-					"name": "2.0",
-					"product": {
-						"name": "controller 2.0",
-						"product_id": "2"
-					}
+					"category": "product_name",
+					"name": "Product A",
+					"branches": [
+						{
+							"category": "product_version",
+							"name": "1.1",
+							"product": {
+								"name": "Product A 1.1",
+								"product_id": "2"
+							}
+						}
+					]
 				}
 			]
 		}

yace/data/products/3.json

@@ -1,16 +1,22 @@
 {
 	"branches": [
 		{
-			"category": "product_family",
-			"name": "controller",
+			"category": "vendor",
+			"name": "Example Company",
 			"branches": [
 				{
-					"category": "product_version",
-					"name": "3.0",
-					"product": {
-						"name": "controller 3.0",
-						"product_id": "3"
-					}
+					"category": "product_name",
+					"name": "Product B",
+					"branches": [
+						{
+							"category": "product_version",
+							"name": "1.0",
+							"product": {
+								"name": "Product B 1.0",
+								"product_id": "3"
+							}
+						}
+					]
 				}
 			]
 		}

yace/data/products/4.json

@@ -1,16 +1,22 @@
 {
 	"branches": [
 		{
-			"category": "product_family",
-			"name": "controller",
+			"category": "vendor",
+			"name": "Example Company",
 			"branches": [
 				{
-					"category": "product_version",
-					"name": "3.0",
-					"product": {
-						"name": "controller 3.0",
-						"product_id": "3"
-					}
+					"category": "product_name",
+					"name": "Product C",
+					"branches": [
+						{
+							"category": "product_version",
+							"name": "4.2",
+							"product": {
+								"name": "Product C 4.2",
+								"product_id": "4"
+							}
+						}
+					]
 				}
 			]
 		}

yace/data/products/5.json

@@ -0,0 +1,24 @@
+{
+	"branches": [
+		{
+			"category": "vendor",
+			"name": "Example Company",
+			"branches": [
+				{
+					"category": "product_name",
+					"name": "Product C",
+					"branches": [
+						{
+							"category": "product_version",
+							"name": "4.3",
+							"product": {
+								"name": "Product C 4.3",
+								"product_id": "5"
+							}
+						}
+					]
+				}
+			]
+		}
+	]
+}

yace/index.html

@@ -10,7 +10,7 @@
 	 <div class="w3-bar w3-black">
 	  <button class="w3-bar-item w3-button" onclick="openTab('tab-overview')">Overview</button>
 	  <button class="w3-bar-item w3-button" onclick="openTab('tab-general')">General</button>
-	  <button class="w3-bar-item w3-button" onclick="openTab('tab-information')">Futher Information</button>
+	  <button class="w3-bar-item w3-button" onclick="openTab('tab-information')">Further Information</button>
 	  <button class="w3-bar-item w3-button" onclick="openTab('tab-products')">Products</button>
 	  <button class="w3-bar-item w3-button" onclick="openTab('tab-vulnerability')">Vulnerability</button>
 	</div> 
@@ -22,7 +22,7 @@ <h2>Overview</h2>
         <div id="loadPanel"></div>
       </div>
 	    <div id="tab-general" class="tab" style="display:none">
-		    <h2>General informations</h2>
+		    <h2>General information</h2>
 		    <div id="title"></div>
 		    <div id="tracking-id"></div>
 		    <div id="tlp"></div>
@@ -37,7 +37,7 @@ <h2>General informations</h2>
 	      <div id="productList" class="w3-container"></div>
 	    </div>
 	    <div id=tab-vulnerability class="tab" style="display:none">
-	      <div id="vulnerablityList" class="w3-container"></div>
+	      <div id="vulnerabilityList" class="w3-container"></div>
 	    </div>
 	  </div>
   </form>

yace/js/components/notesList.js

@@ -1,5 +1,6 @@
 import Component from '../lib/component.js';
 import store from '../store/index.js';
+import TextArea from './textarea.js';
 import TextInput from './textinput.js';
 import ComboInput from './comboinput.js';
 
@@ -24,13 +25,13 @@ export default class NotesList extends Component {
         // If there are no items to show, render a little status instead
         if(store.state.csaf?.document?.notes == undefined) {
           self.element.innerHTML = `
-            <h2>Notes</h2>
+            <h3>Notes</h3>
             <button id="add_notes" class="w3-button w3-block w3-green">Add notes</button>
          `;
         } else {
         // Loop the items and generate a list of elements
           self.element.innerHTML = `
-            <h2>Notes</h2>
+            <h3>Notes</h3>
             ${store.state.csaf?.document?.notes.map((notesItem, index) => {
               return `
                 <div class="w3-panel w3-leftbar">
@@ -52,7 +53,7 @@ export default class NotesList extends Component {
           store.state.csaf?.document?.notes.forEach((notesItem, index) => {
             let noteTitle = new TextInput("#input_document\\.notes\\." + index + "\\.title", "Title", "document.notes." + index + ".title", true, "");
             noteTitle.render();
-            let noteText = new TextInput("#input_document\\.notes\\." + index + "\\.text", "Text", "document.notes." + index + ".text", true, "");
+            let noteText = new TextArea("#input_document\\.notes\\." + index + "\\.text", "Text", "document.notes." + index + ".text", true, "");
             noteText.render();
             let noteCombo = new ComboInput(
               "#input_document\\.notes\\." + index + "\\.category", 

yace/js/components/referencesList.js

@@ -24,13 +24,13 @@ export default class ReferencesList extends Component {
         // If there are no items to show, render a little status instead
         if(store.state.csaf?.document?.references == undefined) {
           self.element.innerHTML = `
-            <h2>References</h2>
+            <h3>References</h3>
             <button id="add_reference" class="w3-button w3-block w3-green">Add reference</button>
          `;
         } else {
         // Loop the items and generate a list of elements
           self.element.innerHTML = `
-            <h2>Revision</h2>
+            <h3>Revision</h3>
             ${store.state.csaf?.document?.references.map((item, index) => {
               return `
                 <div class="w3-panel w3-leftbar">

yace/js/components/revisionList.js

@@ -24,7 +24,7 @@ export default class RevisionList extends Component {
         // If there are no items to show, render a little status instead
         if(store.state.csaf?.document?.tracking?.revision_history == undefined) {
           self.element.innerHTML = `
-            <h2>Revision</h2>
+            <h3>Revision</h3>
             <ul class="w3-ul">
               <li>
                 <button id="add_revision" class="w3-button w3-block w3-green">Add</button>
@@ -34,7 +34,7 @@ export default class RevisionList extends Component {
         } else {
         // Loop the items and generate a list of elements
           self.element.innerHTML = `
-            <h2>Revision</h2>
+            <h3>Revision</h3>
             ${store.state.csaf.document.tracking.revision_history.map((revisionItem, index) => {
               return `
                 <div class="w3-panel w3-leftbar">

yace/js/components/textarea.js

@@ -0,0 +1,76 @@
+import Component from '../lib/component.js';
+import store from '../store/index.js';
+
+export default class TextArea extends Component {
+
+    // Pass our store instance and the HTML element up to the parent Component
+    constructor(selector, lbl, fld, required, pattern) {
+        super({
+            store,
+            element: document.querySelector(selector)
+        });
+      this.label = lbl;
+      this.field = fld;
+      this.id=fld
+      this.required = required;
+      this.pattern = pattern;
+    }
+
+    getValue() {
+      let self = this;
+      let schema = store.state.csaf;  // a moving reference to internal objects within obj
+      let pList = self.field.split('.');
+      let len = pList.length;
+      for(var i = 0; i < len-1; i++) {
+          var elem = pList[i];
+
+          if(isNaN(pList[i+1])){
+            if( !schema[elem] ) {
+              return "";
+            }
+            schema = schema[elem];
+          }else{
+            if( !schema[elem] ) {
+              return "";
+            }
+            if( ! schema[elem].at(pList[i+1]) ){
+              return "";
+            }
+            schema=schema[elem].at(pList[i+1]);
+            i++;
+          }
+      }
+      if (schema[pList[len-1]] != null){
+        return schema[pList[len-1]];
+      } else {
+        return "";
+      }
+    }
+
+    /**
+     * React to state changes and render the component's HTML
+     *
+     * @returns {void}
+     */
+    render() {
+        let self = this;
+        // Loop the items and generate a list of elements
+        self.element.innerHTML = `
+              <label for="${self.id}">${self.label}</label>
+              <textarea  
+                     class="w3-input w3-border" 
+                     id="${self.id}" 
+                     autocomplete="off" 
+                     value="${self.getValue()}" 
+                     data-csafpath="${this.field}" 
+                     ${this.required?'required':''}  
+                     ${this.pattern ? 'pattern=\"' + this.pattern + '\"':''} />
+        `;
+
+        document.querySelectorAll("[id=\""+self.id +"\"]").forEach((button, index) => {
+            button.onchange = function(){
+              store.dispatch('setItem', { path: button.dataset.csafpath, value: button.value});
+            };
+        });
+    }
+};