diff --git a/web/css/iframe.css b/web/css/iframe.css index c185f75..a947f66 100644 --- a/web/css/iframe.css +++ b/web/css/iframe.css @@ -28,7 +28,6 @@ margin-bottom: 10px; padding-top: 5px; padding-bottom: 5px; - width: 300px; } .div-textarea-input { @@ -36,7 +35,6 @@ margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; - width: 95%; } .iframe-input { @@ -46,10 +44,11 @@ .input-corner { border-radius: 4px; + border: 1px solid grey; } .input-height { - height: 20px; + height: 28px; } .input-text { @@ -57,19 +56,40 @@ .iframe-button { border-radius: 4px; - margin: 0px 4px 0px 4px; - font-weight: 700; + margin: 8px 0px; + margin-top: 8px; + width: 31%; + background-color: transparent; + border: 1px solid #047cc0; + border-radius: 4px; + font-size: 14px; + font-family: Helvetica, Open Sans, Arial, Lucida Grande, sans-serif; + color: #047cc0; + height: 2rem; + +} + +.iframe-button:hover { + background-color: #175d8d; + color: #f6f6f6; + +} +.padded-div { + margin-top: 8px; + +} +.messageBox { + margin-bottom: 8px; } .right-align { - text-align: right; - padding-right: 50px; } .shadowed { - box-shadow: 3px 3px 10px; } + + .hide-it { display: none; } @@ -82,8 +102,8 @@ border-radius: 4px; border: 1px solid grey; background-color: white; - height: 18px; - width: 96%; + height: 27px; + width: 100%; } .disable-effect { @@ -96,33 +116,32 @@ h1 { .server-response { width: 100%; - height: 180px; + height: 416px; + border-radius: 4px; } .test-panel { - padding: 5px 5px 5px 5px; + padding: 8px 8px 8px 8px; } .test-panel-container { flex-direction: row; display: flex; + text-align:center; + padding: 8px; } .plugin-test-panel { - border-right: outset; flex-grow: 1; } .dataservice-test-panel { border-left: outset; } -/* - This program and the accompanying materials are - made available under the terms of the Eclipse Public License v2.0 which accompanies - this distribution, and is available at https://www.eclipse.org/legal/epl-v20.html - - SPDX-License-Identifier: EPL-2.0 - - Copyright Contributors to the Zowe Project. -*/ + +label { + margin-left: 4px; + margin-right: 12px; +} + diff --git a/web/html/index.html b/web/html/index.html index aefeacd..058362f 100644 --- a/web/html/index.html +++ b/web/html/index.html @@ -22,9 +22,9 @@ -
+
+ Plug-in Request Test
- Plug-in Request Test @@ -34,29 +34,47 @@ Application Identifier:
- +
+ +
+ + +
+ name="actionType" value="Launch" onclick="toggleInputDisability()" checked > + name="actionType" value="Message" onclick="toggleInputDisability()" > + + + + +
+ name="targetMode" value="PluginCreate" onclick="toggleInputDisability()" checked> + name="targetMode" value="PluginFindAnyOrCreate" onclick="toggleInputDisability()" > + + +
Target App Window Title (this will become the title for the target window)
@@ -90,12 +108,12 @@
Dataservice Request Test
-
+
-
+
diff --git a/web/js/main.js b/web/js/main.js index 43f648f..88dd179 100644 --- a/web/js/main.js +++ b/web/js/main.js @@ -20,6 +20,8 @@ if (mvdWindow) { ZoweZLUX = mvdWindow.ZoweZLUX; } +let appIdOptions = [] + const MY_PLUGIN_ID = 'org.zowe.zlux.sample.iframe'; @@ -132,6 +134,7 @@ HelloService.prototype.sayHello = function(text, destination, callback) { var helloService = new HelloService(); var settingsService = new SettingsService(); + if (ZoweZLUX) { settingsService.setPlugin(ZoweZLUX.pluginManager.getPlugin(MY_PLUGIN_ID)); } @@ -252,6 +255,13 @@ function sayHello() { // by the button labelled "Send App Request" function sendAppRequest() { + + let dropdown = document.getElementById("appId"); + let targetIdInput = document.getElementById("targetId"); + if (dropdown.disabled && targetIdInput.disabled) { + return; + } + var requestText = document.getElementById('parameters').value; var parameters = null; /*Parameters for Actions could be a number, string, or object. The actual event context of an Action that an App recieves will be an object with attributes filled in via these parameters*/ @@ -296,6 +306,7 @@ function sendAppRequest() { if (type != undefined && mode != undefined) { let actionTitle = 'Launch app from sample app'; + let targetId = parseInt(document.getElementById('targetId').value); let actionID = 'org.zowe.zlux.sample.launch'; let argumentFormatter = {data: {op:'deref',source:'event',path:['data']}}; /*Actions can be made ahead of time, stored and registered at startup, but for example purposes we are making one on-the-fly. @@ -307,7 +318,7 @@ function sendAppRequest() { statusElement.innerHTML = message; /*Just because the Action is invoked does not mean the target App will accept it. We've made an Action on the fly, So the data could be in any shape under the "data" attribute and it is up to the target App to take action or ignore this request*/ - dispatcher.invokeAction(action,argumentData); + dispatcher.invokeAction(action,argumentData, targetId); } else { console.log((message = 'Invalid target mode or action type specified')); } @@ -318,12 +329,97 @@ function sendAppRequest() { statusElement.innerHTML = message; } } +function toggleInputDisability() { + let actionTypes = document.getElementsByName('actionType'); + let type; + for (let i =0; i < actionTypes.length; i++) { + if (actionTypes[i].checked) { + type = actionTypes[i].value; + break; + } + } + let mode; + let targetModes = document.getElementsByName('targetMode'); + for (let i =0; i < targetModes.length; i++) { + if (targetModes[i].checked) { + mode = targetModes[i].value; + break; + } + } + let dropdown = document.getElementById("appId"); + let targetIdInput = document.getElementById("targetId"); + if (mode === 'PluginCreate' || mode === 'PluginFindAnyOrCreate' || type === 'Launch' || type === 'Message') { + targetIdInput.disabled = true; + } else { + targetIdInput.disabled = false; + } + + if (mode === 'PluginSpecifyTargetId' || type === 'Maximize' || type === 'Minimize') { + dropdown.disabled = true; + } else { + dropdown.disabled = false; + } + +} + +function showHideTargetId() { + let actionTypes = document.getElementsByName('actionType'); + let type; + for (let i =0; i < actionTypes.length; i++) { + if (actionTypes[i].checked) { + type = dispatcher.constants.ActionType[actionTypes[i].value]; + break; + } + } + if (type === 'Maximize' || type === 'Minimize') { + document.getElementById('targetId').style.display = 'block'; + } else { + document.getElementById('targetId').style.display = 'none'; + } + +} window.addEventListener("load", function () { console.log('Sample iframe app has loaded'); + toggleInputDisability(); + fetch('/plugins?type=all') + .then((res) => res.json()) + .then((pluginData) => { + console.log("ehllo"); + const pluginDefinitions = pluginData.pluginDefinitions; + console.log(pluginData); + for (const plugin of pluginDefinitions) { + if (plugin.identifier) { + if (plugin.webContent) { + if (plugin.webContent.launchDefinition) { + appIdOptions.push({ + description: `${plugin.webContent.launchDefinition.pluginShortNameDefault} - ${plugin.identifier}`, + value: plugin.identifier, + }); + } else { + appIdOptions.push({ + description: plugin.identifier, + value: plugin.identifier, + }); + } + } + } + } + }).then(() => { + console.log(appIdOptions); + let select = document.getElementById("appId"); + for(let i = 0; i < appIdOptions.length; i++) { + let opt = appIdOptions[i]; + let el = document.createElement("option"); + el.textContent = opt.description; + el.value = opt.value; + select.add(el); + } }); }, false); - +// class ApplicationIdentifierOption { +// constructor(public description: string, public value: string) {} +// } /* This program and the accompanying materials are made available under the terms of the Eclipse Public License v2.0 which accompanies