ensure 1.1 has the same changes as 1.2

toolbox/fdc3-explained/1.1/index.html

@@ -54,7 +54,7 @@
 			<tr>
 				<td class="header">App Directory:</td>
 				<td><span id="directoryDetails">Not supported yet!</span></td>
-				<td><input type="button" value="Connect" disabled></td>
+				<td><input type="button" value="Connect" class="not-supported" disabled></td>
 			</tr>
 
 			<tr>
@@ -82,15 +82,15 @@
 			<tr>
 				<td class="header">Add App Channel:</td>
 				<td><input id="app-channel"></input></td>
-				<td><Button type="button" onclick="addAppChannel()">Add</Button></td>
+				<td><Button type="button" id="add-app-channel__btn" disabled>Add</Button></td>
 			</tr>
 
 			<tr>
 				<td class="header">Join Channel:</td>
 				<td>Channel: <select class="fdc3-channels" id="join-channel"></select>
-					<Button type="button" onclick="joinChannel()">Join</Button>
+					<Button type="button" id="join-channel__btn" disabled>Join</Button>
 				</td>
-				<td><Button type="button" onclick="fdc3.leaveCurrentChannel()">Leave</Button></td>
+				<td><Button type="button" id="leave-channel__btn" disabled>Leave</Button></td>
 			</tr>
 
 			<tr>
@@ -105,7 +105,7 @@
 			<tr>
 				<td><textarea id="txtBroadcastData">{"id":{"ISIN":"US0378331005","SEDOL":"2046251","ticker":"AAPL"},"name":"Apple Inc.","type":"fdc3.instrument"}
 </textarea></td>
-<td rowspan="2"><input type="button" value="Send" id="btnBroadcast" onclick="broadcastFDC3Context();">
+<td rowspan="2"><Button type="button" id="broadcast__btn" disabled>Send</Button>
 </td>
 			</tr>
 
@@ -137,13 +137,11 @@
 
 			<tr>
 				<td><textarea id="intent-context">{"id":{"ISIN":"US0378331005","SEDOL":"2046251","ticker":"AAPL"},"name":"Apple Inc.","type":"fdc3.instrument"}</textarea></td>
-				<td><Button onclick="raiseIntent()">Raise Intent </Button></td>
+				<td><Button id="raise-intent__btn" disabled>Raise Intent </Button></td>
 			</tr>
 
 		</table>
 	</div>
-
-
 </body>
 
 </html>

toolbox/fdc3-explained/1.1/main.js

@@ -28,6 +28,8 @@ function documentLoaded(cb) {
 let contextListener = null;
 let appChannels = [];
 
+
+
 //  document and FDC3 have loaded start the main function
 documentLoaded(() => fdc3OnReady(main));
 
@@ -36,6 +38,7 @@ function main() {
   try {
     console.log("FDC3 is ready and DOM has rendered")
     populateHTML()
+    setUpEventListeners()
     getPlatform()
     displayFDC3Support()
     getContext()
@@ -47,43 +50,65 @@ function main() {
 
 async function populateHTML() {
   try {
-    // populate all the dropdowns for system channels
-    let channelDropdownList = document.querySelectorAll(".fdc3-channels")
-    channelDropdownList.forEach(channelDropdown => populateChannels(channelDropdown))
 
     //populate available channels list with system channels
     let channelList = document.getElementById("system-channel-list");
 
-    const systemChannels = await fdc3.getSystemChannels();
-
-    systemChannels.forEach(({ displayMetadata, id, type }, key) => {
+    const populateChannelsList = (name) => {
       let node = document.createElement("li");
-      let textNode = document.createTextNode(displayMetadata.name);
+      let textNode = document.createTextNode(name);
       node.appendChild(textNode);
       channelList.appendChild(node);
-    });
+    }
 
-    // add an event listener for the contextType input box
-    let contextTypeInput = document.getElementById("context-type");
+    const systemChannels = await fdc3.getSystemChannels();
 
-    // Only get context type when the user hits enter
-    contextTypeInput.addEventListener("keyup", function (event) {
-      if (event.key === "Enter") {
-        event.preventDefault();
+    // for all of the system channels populate dropdowns & lists
+    systemChannels.forEach(({ displayMetadata, id, type }) => {
+      let { name } = displayMetadata;
+      populateChannelsList(name)
+      populateChannelsDropDown(name)
 
-        let contextType = event.target.value;
-        getContext(contextType)
-      }
     });
 
     // set the versions of FDC3 Explained in the dropdown
     setVersionList()
+
+    // as FDC3 is supported we can enable the buttons again except those that are not yet supported features
+    document.querySelectorAll("button").forEach(button => {
+      if (!button.className.includes("not-supported")) {
+        button.disabled = false
+      }
+    })
   } catch (error) {
     console.error("unable to populate the html for the page ", error);
   }
 
 }
 
+function setUpEventListeners() {
+  document.getElementById("add-app-channel__btn").addEventListener("click", addAppChannel);
+
+  document.getElementById("join-channel__btn").addEventListener("click", joinChannel);
+
+  document.getElementById("leave-channel__btn").addEventListener("click", fdc3.leaveCurrentChannel);
+
+  document.getElementById("broadcast__btn").addEventListener("click", broadcastFDC3Context);
+
+  document.getElementById("raise-intent__btn").addEventListener("click", raiseIntent);
+
+  document.getElementById("context-type").addEventListener("keyup", (event) => {
+      //  we only want to get the context wen the user hits enter
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        let contextType = event.target.value;
+        getContext(contextType)
+      }
+    });
+
+  }
+
 function displayFDC3Support() {
   try {
     let supportedElement = document.getElementById("fdc3-support")
@@ -119,18 +144,21 @@ function getPlatform() {
 
 /**
  *Populate the channel dropdown elements
- * @param {HTMLElement} dropdownElement is a dom selector
  */
-async function populateChannels(dropdownElement) {
+function populateChannelsDropDown(newOptionText) {
   try {
 
-    if (!dropdownElement) return new Error("No dropdown element provided")
+    let dropdownElement = document.querySelector(".fdc3-channels")
 
-    const systemChannels = await fdc3.getSystemChannels();
-    systemChannels.forEach(({ displayMetadata, id, type }, key) => { dropdownElement[key] = new Option(displayMetadata.name, key) });
+    if (newOptionText) {
+      dropdownElement.add(new Option(newOptionText))
+    }
+    else {
+      throw new Error("No option provided")
+    }
 
   } catch (error) {
-    console.error("could not find system channels when populating the dropdown", error);
+    console.error("could not add a new channel to the channel dropdown list", error);
   }
 
 }
@@ -178,7 +206,12 @@ async function addAppChannel() {
   try {
     let appChannelName = document.getElementById("app-channel").value;
 
-    if (appChannelName) {
+    if (!appChannelName) throw new Error("no channel name set")
+
+    let appChannelExists = appChannels.find(appChannel => appChannel.id === appChannelName)
+
+
+    if (!appChannelExists) {
       let newAppChannel = await fdc3.getOrCreateChannel(appChannelName)
       appChannels.push(newAppChannel);
 
@@ -188,8 +221,13 @@ async function addAppChannel() {
       node.appendChild(textNode);
       document.getElementById("app-channel-list").appendChild(node);
 
+      //populate the channel list dropdown with new appChannel
+      populateChannelsDropDown(newAppChannel.id)
+
+
+
     } else {
-      throw new Error("no channel name set")
+      throw new Error("app channel already exists")
     }
   } catch (error) {
     console.error("could not add an app channel", error);

toolbox/fdc3-explained/1.2/styles.css

@@ -14,6 +14,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   place-content: center;
+  flex-direction: column;
 }
 #logo{
 height:200px;
@@ -66,6 +67,9 @@ textarea:focus {
 }
 table {
   border:0;
+  margin: 0 auto;
+  max-width: 1000px;
+  display: flex;
 }
 tr{
   border:0;