Skip to content

UI Changes and Min Max Feature #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aarora4 wants to merge 3 commits into
base: v1.x/staging
Choose a base branch
from
Open

UI Changes and Min Max Feature #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69dac3d
UI Changes and Min Max Feature
aarora4 Jun 26, 2019
b12fea2
added dialogue for targetID
aarora4 Jul 8, 2019
c543fe0
added options handling
aarora4 Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 41 additions & 22 deletions web/css/iframe.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,13 @@
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
}

.div-textarea-input {
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
width: 95%;
}

.iframe-input {
Expand All @@ -46,30 +44,52 @@

.input-corner {
border-radius: 4px;
border: 1px solid grey;
}

.input-height {
height: 20px;
height: 28px;
}

.input-text {
}

.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;
}
Expand All @@ -82,8 +102,8 @@
border-radius: 4px;
border: 1px solid grey;
background-color: white;
height: 18px;
width: 96%;
height: 27px;
width: 100%;
}

.disable-effect {
Expand All @@ -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;
}


36 changes: 27 additions & 9 deletions web/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body class="iframe-font test-panel-container">
<div class="test-panel plugin-test-panel">
<div class="test-panel plugin-test-panel">
<span class="bigger-bold-text">Plug-in Request Test</span>
<div class="bottom-10">
<span class="bigger-bold-text">Plug-in Request Test</span>
<!-- Tests the sending of requests to other plugins. Defaults to send a message
to itself (and responding) to show more parts of the API-->
<button class="iframe-button shadowed" type="button" onclick="sendAppRequest()">Send App Request</button>
Expand All @@ -34,29 +34,47 @@
<span class="bold-text">Application Identifier: </span>
<div>
<div class="div-input">
<input class="iframe-input input-height input-corner input-text shadowed" type="text" name="appId" id="appId" placeholder="app identifier" value="org.zowe.terminal.tn3270"/>
<select class="iframe-input input-height input-corner input-text shadowed" name="appId" id="appId">
<option>Select an App ID</option>
</select>
</div>
<label class="bold-text">Target ID:</label>
<div class="div-input">

<input type="number" value="1" name="targetId" id="targetId" class="iframe-input input-height input-corner input-text shadowed"/>
</div>
<div>
<!-- Action types are used to determine what sort of Action is being taken on whatever App instance is the target. Launch simply creates a new instance with the context you provide, but Message can be used to communicate with an already open Instance to drive some action -->
<label class="bold-text">Action Type: </label>
<input type="radio" id="actionLaunch"
name="actionType" value="Launch" checked>
name="actionType" value="Launch" onclick="toggleInputDisability()" checked >
<label for="actionLaunch">Launch</label>

<input type="radio" id="actionMessage"
name="actionType" value="Message">
name="actionType" value="Message" onclick="toggleInputDisability()" >
<label for="actionMessage">Message</label>
<input type="radio" id="actionLaunch"
name="actionType" value="Maximize" onclick="toggleInputDisability()" >
<label for="actionLaunch">Maximize</label>

<input type="radio" id="actionMessage"
name="actionType" value="Minimize" onclick="toggleInputDisability()" >
<label for="actionMessage">Minimize</label>
</div>
<!-- App target modes are used to determine which instance of an App should be communicated with. You can create a new instance to send the Action to, or you could reuse an existing instance that is open. -->
<div>
<label class="bold-text">App Target Mode: </label>
<input type="radio" id="targetCreate"
name="targetMode" value="PluginCreate" checked>
name="targetMode" value="PluginCreate" onclick="toggleInputDisability()" checked>
<label for="targetCreate">Create New</label>

<input type="radio" id="targetReuse"
name="targetMode" value="PluginFindAnyOrCreate">
name="targetMode" value="PluginFindAnyOrCreate" onclick="toggleInputDisability()" >
<label for="targetReuse">Reuse Any Open</label>

<input type="radio" id="targetSpecify"
name="targetMode" value="PluginSpecifyTargetID" onclick="toggleInputDisability()" >
<label for="targetReuse">Specify Target ID</label>
</div>
<span class="bold-text hide-it">Target App Window Title (this will become the title for the target window)</span>
<div class="div-input hide-it">
Expand Down Expand Up @@ -90,12 +108,12 @@
<div class="bottom-10">
<span class="bigger-bold-text">Dataservice Request Test</span>
</div>
<div>
<div class="messageBox">
<input placeholder="Message" name="helloText" id="helloText" oninput="inputChanged()"/>
<button id="runButton" onclick="sayHello()" disabled>Run</button>
</div>
<div>
<label>Response</label>
<div class="padded-div">
<textarea readonly class="server-response" placeholder="Response" name="serverResponseMessage" id="serverResponseMessage"></textarea>
</div>
</div>
Expand Down
100 changes: 98 additions & 2 deletions web/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ if (mvdWindow) {
ZoweZLUX = mvdWindow.ZoweZLUX;
}

let appIdOptions = []

const MY_PLUGIN_ID = 'org.zowe.zlux.sample.iframe';


Expand Down Expand Up @@ -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));
}
Expand Down Expand Up @@ -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*/
Expand Down Expand Up @@ -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.
Expand All @@ -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'));
}
Expand All @@ -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
Expand Down