Merge pull request finos#5 from WatsonCIQ/fdc3_explained-1.0.1

Fdc3 explained 1.0.1
WatsonCIQ · Feb 15, 2021 · a4d05d2 · a4d05d2
2 parents 23df140 + 11a4397
commit a4d05d2
Show file tree

Hide file tree

Showing 4 changed files with 371 additions and 217 deletions.
diff --git a/toolbox/fdc3-explained/index.html b/toolbox/fdc3-explained/index.html
@@ -0,0 +1,129 @@
+<html>
+
+<head>
+	<title>
+		FDC3 Explained v.2
+	</title>
+
+
+<meta charset="UTF-8">
+	<link rel="stylesheet" href="./styles.css">
+	<script src="./main.js"></script>
+
+</head>
+
+<body>
+	<div class="main">
+		<table border="1">
+
+			<tr>
+				<td class="header">FDC3 Supported </td>
+				<td><span id="fdc3-support">Checking</span></td>
+			</tr>
+
+			<tr>
+				<td class="header">FDC3 Provider Service:</td>
+				<td><span id="providerDetails">FDC3 Not Available</span></td>
+			</tr>
+
+			<tr>
+				<td colspan="3">
+					<hr>
+				</td>
+			</tr>
+
+			<tr>
+				<td class="header">App Directory:</td>
+				<td><span id="directoryDetails">Not supported yet!</span></td>
+				<td><input type="button" value="Connect" disabled></td>
+			</tr>
+
+			<tr>
+				<td class="header">Available Apps:</td>
+				<td><textarea disabled></textarea></td>
+				<td><input type="button" value="Fetch" disabled></td>
+			</tr>
+			<tr>
+				<td colspan="3">
+					<hr>
+				</td>
+			</tr>
+
+			<tr>
+				<td class="header">Available Channels:</td>
+				<td>
+					System Channels:
+					<ul id="system-channel-list"></ul>
+					App Channels:
+					<ul id="app-channel-list"></ul>
+				</td>
+			</tr>
+
+
+			<tr>
+				<td class="header">Add App Channel:</td>
+				<td><input id="app-channel"></input></td>
+				<td><Button type="button" onclick="addAppChannel()">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>
+				</td>
+				<td><Button type="button" onclick="fdc3.leaveCurrentChannel()">Leave</Button></td>
+			</tr>
+
+			<tr>
+				<td colspan="3">
+					<hr>
+				</td>
+			</tr>
+
+			<tr>
+				<td class="header" rowspan="2">Broadcast Context:</td>
+			</tr>
+			<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>
+			</tr>
+
+			<tr>
+				<td class="header" rowspan="3">Get Context:</td>
+			</tr>
+
+			<tr>
+				<td>Context Type: <input type="text" id="context-type"></td>
+			</tr>
+
+			<tr>
+				<td><textarea id="context-result" disabled></textarea></td>
+			</tr>
+
+			<tr>
+				<td colspan="3">
+					<hr>
+				</td>
+			</tr>
+
+			<tr>
+				<td class="header" rowspan="3">Raise Intent:</td>
+			</tr>
+
+			<tr>
+				<td>Intent: <input type="text" id="intent" value="ViewChart"></td>
+			</tr>
+
+			<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>
+			</tr>
+
+		</table>
+	</div>
+
+</body>
+
+</html>
diff --git a/toolbox/fdc3-explained/main.js b/toolbox/fdc3-explained/main.js
@@ -0,0 +1,193 @@
+// check for FDC3 support
+function fdc3OnReady(cb) {
+  if (window.fdc3) { cb() }
+  else { window.addEventListener('fdc3Ready', cb) }
+}
+// Wait for the document to load
+function documentLoaded(cb) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', cb)
+  } else { cb() }
+}
+
+//  document and FDC3 have loaded start the main function
+documentLoaded(() => fdc3OnReady(main))
+
+// use this to keep track of context listener - one per system channel
+let contextListener = null;
+let appChannels = []
+
+function main() {
+  try {
+    console.log("FDC3 is ready and DOM has rendered")
+    populateHTML()
+    getPlatform()
+    displayFDC3Support()
+    getContext()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+
+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) => {
+      let node = document.createElement("li");
+      let textNode = document.createTextNode(displayMetadata.name);
+      node.appendChild(textNode);
+      channelList.appendChild(node);
+    });
+
+    // add an event listener for the contextType input box
+    let contextTypeInput = document.getElementById("context-type");
+
+    // Only get context type when the user hits enter
+    contextTypeInput.addEventListener("keyup", function (event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        let contextType = event.target.value;
+        getContext(contextType)
+      }
+    });
+  } catch (error) {
+    console.error("unable to populate the html for the page ", error);
+  }
+
+}
+
+function displayFDC3Support() {
+  try {
+    let supportedElement = document.getElementById("fdc3-support")
+    if (window.fdc3) { supportedElement.innerHTML = "Yes ✅" } else { supportedElement.innerHTML = "No ❌" }
+  } catch (error) {
+    console.error("can't find FDC3 support", error)
+  }
+
+}
+
+
+function getPlatform() {
+
+  // TODO: add G42 to vendors
+  if (window.FSBL) {
+    window.FSBL.getFSBLInfo().then((info) => {
+      document.getElementById('providerDetails').innerHTML = "Finsemble Version:" + info.FSBLVersion;
+    });
+  } else if (window.fin) {
+    fin.desktop.Application.getCurrent().getInfo((info) => {
+      document.getElementById('providerDetails').innerHTML = info.manifest.startup_app.name
+    });
+  } else if (window.fdc3) {
+    document.getElementById('providerDetails').innerHTML = "FDC3 Desktop Agent Chrome Extension";
+  }
+  else {
+    // no need to update the DOM there is already a default message just return
+    return
+  }
+
+}
+
+
+/**
+ *Populate the channel dropdown elements
+ * @param {HTMLElement} dropdownElement is a dom selector
+ */
+async function populateChannels(dropdownElement) {
+  try {
+
+    if (!dropdownElement) return new Error("No dropdown element provided")
+
+    const systemChannels = await fdc3.getSystemChannels();
+    systemChannels.forEach(({ displayMetadata, id, type }, key) => { dropdownElement[key] = new Option(displayMetadata.name, key) });
+
+  } catch (error) {
+    console.error("could not find system channels when populating the dropdown", error);
+  }
+
+}
+
+function joinChannel() {
+  try {
+    let dropdownElement = document.getElementById("join-channel")
+    let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase();
+    fdc3.joinChannel(channelName);
+  } catch (error) {
+    console.error("Can't join channel", error)
+  }
+
+}
+
+async function broadcastFDC3Context() {
+  try {
+    let contextData = document.getElementById('txtBroadcastData').value;
+    fdc3.broadcast(JSON.parse(contextData));
+  } catch (error) {
+    console.error("could not broadcast", error)
+  }
+
+}
+
+
+async function getContext(contextType) {
+  try {
+    let contextResultBox = document.getElementById("context-result");
+    if (contextListener) contextListener.unsubscribe();
+
+    // if context type is passed in then only listen on that specific context
+    if (contextType) {
+      contextListener = fdc3.addContextListener(contextType, (context) => contextResultBox.value = JSON.stringify(context))
+    } else {
+      contextListener = fdc3.addContextListener(context => contextResultBox.value = JSON.stringify(context));
+    }
+  } catch (error) {
+    console.error("Unable to add a context listener", error)
+  }
+}
+
+
+async function addAppChannel() {
+  try {
+    let appChannelName = document.getElementById("app-channel").value;
+
+    if (appChannelName) {
+      let newAppChannel = await fdc3.getOrCreateChannel(appChannelName)
+      appChannels.push(newAppChannel);
+
+      // add to the list of available app channels
+      let node = document.createElement("li");
+      let textNode = document.createTextNode(appChannelName);
+      node.appendChild(textNode);
+      document.getElementById("app-channel-list").appendChild(node);
+
+    } else {
+      throw new Error("no channel name set")
+    }
+  } catch (error) {
+    console.error("could not add an app channel", error);
+  }
+}
+
+
+async function raiseIntent() {
+  try {
+    // get the channel
+    let intent = document.getElementById("intent").value;
+    let context = JSON.parse(document.getElementById("intent-context").value);
+
+    // TODO: add the target param
+    await fdc3.raiseIntent(intent, context)
+  } catch (err) {
+    console.error("intent did not resolve", err)
+  }
+}
diff --git a/toolbox/fdc3-explained/styles.css b/toolbox/fdc3-explained/styles.css
@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+
+body {
+  font-family: "Noto Sans JP",sans-serif;
+  margin:0;
+  padding:0;
+  background-color: white;
+}
+
+.main {
+  margin: 10px 0;
+  padding: 0;
+  display: flex;
+  place-content: center;
+}
+table {
+  border:0;
+}
+tr{
+  border:0;
+}
+td{
+  border:0;
+}
+textarea {
+  width: 400px;
+  height: 100px;
+}
+
+select {
+  width: 238px;
+  height: 24px;
+}
+
+.ctxInput {
+  width: 241px;
+  height: 24px;
+}
+
+.urlInput {
+  width: 400px;
+  height: 24px;
+}
+
+.header {
+  width: 200px;
+  height: 40px;
+  font-weight: 700;
+}