community/device-mgt-plugins
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-plugins.git synced 2025-09-16 23:42:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Now operations are auto generated and supports query params, path params and form params.

Browse Source
This commit is contained in:
Rasika Perera 2016-04-20 13:38:37 +05:30
parent a6a0fc2a57
commit 506a48569b
2 changed files with 98 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/iot-plugins/iot-base-plugin/org.wso2.carbon.device.mgt.iot.ui/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/operation-bar.hbs
View File

@ -44,13 +44,20 @@
<br>
</h4>
<form action="{{@app.context}}/api/operations/{{../device.type}}/{{operation}}?deviceId={{../device.deviceIdentifier}}"
method="post" style="padding-bottom: 20px;">
{{#each params}}
<input type="text" name="{{this}}" placeholder="{{this}}" class="form-control">
<form action="{{@unit.params.backendApiUri}}{{params.0.uri}}" method="{{method}}" style="padding-bottom: 20px;" id="form-{{operation}}">
{{#each params.0.pathParams}}
<input type="text" id="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="path" />
<br />
{{/each}}
<button id="btnSend" type="submit" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
{{#each params.0.formParams}}
<input type="text" id="{{this}}" name="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="form" />
<br />
{{/each}}
{{#each params.0.queryParams}}
<input type="text" id="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="query" />
<br />
{{/each}}
<button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
to Device&nbsp;&nbsp;&nbsp;&nbsp;</button>
<label id="lblSending" class="wr-input-label hidden"><i
class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label>
@ -70,6 +77,27 @@
</div>
{{/if}}
<div id="operation-response-template" style="display: none">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i id="status-icon" class="fw fw-error fw-stack-1x"></i>
</span>
<br>
</h3>
<h4>
<span id="title"></span>
<br>
</h4>
<span id="description"></span>
</div>
</div>
</div>
</div>
{{#zone "bottomJs"}}
{{js "js/operation-bar.js"}}
{{/zone}}

64
components/iot-plugins/iot-base-plugin/org.wso2.carbon.device.mgt.iot.ui/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/public/js/operation-bar.js
View File

@ -27,6 +27,70 @@ function operationSelect (selection) {
showPopup();
}
function submitForm(formId) {
var form = $("#" + formId);
var uri = form.attr("action");
var uriencodedQueryStr = "";
var uriencodedFormStr = "";
var payload = {};
form.find("input").each(function () {
var input = $(this);
if (input.data("param-type") == "path") {
uri = uri.replace("{" + input.attr("id") + "}", input.val());
} else if (input.data("param-type") == "query") {
var prefix = (uriencodedQueryStr == "") ? "?" : "&";
uriencodedQueryStr += prefix + input.attr("id") + "=" + input.val();
} else if (input.data("param-type") == "form") {
var prefix = (uriencodedFormStr == "") ? "" : "&";
uriencodedFormStr += prefix + input.attr("id") + "=" + input.val();
//payload[input.attr("id")] = input.val();
}
});
uri += uriencodedQueryStr;
var httpMethod = form.attr("method").toUpperCase();
var contentType = form.attr("enctype");
console.log(payload);
if (contentType == undefined || contentType.isEmpty()) {
contentType = "application/x-www-form-urlencoded";
payload = uriencodedFormStr;
}
//setting responses callbacks
var defaultStatusClasses = "fw fw-stack-1x";
var content = $("#operation-response-template").find(".content");
var title = content.find("#title");
var statusIcon = content.find("#status-icon");
var description = content.find("#description");
var successCallBack = function (response) {
title.html("Response Received!");
statusIcon.attr("class", defaultStatusClasses + " fw-success");
description.html(response);
$(modalPopupContent).html(content.html());
};
var errorCallBack = function (response) {
console.log(response);
title.html("An Error Occurred!");
statusIcon.attr("class", defaultStatusClasses + " fw-error");
var reason = (response.responseText == "null")?response.statusText:response.responseText;
description.html(reason);
$(modalPopupContent).html(content.html());
};
//executing http request
if (httpMethod == "GET") {
invokerUtil.get(uri, successCallBack, errorCallBack, contentType);
} else if (httpMethod == "POST") {
invokerUtil.post(uri, payload, successCallBack, errorCallBack, contentType);
} else if (httpMethod == "PUT") {
invokerUtil.put(uri, payload, successCallBack, errorCallBack, contentType);
} else if (httpMethod == "DELETE") {
invokerUtil.get(uri, successCallBack, errorCallBack, contentType);
} else {
title.html("An Error Occurred!");
statusIcon.attr("class", defaultStatusClasses + " fw-error");
description.html("This operation requires http method: " + httpMethod + " which is not supported yet!");
$(modalPopupContent).html(content.html());
}
}
$(document).on('submit', 'form', function (e) {
e.preventDefault();
var postOperationRequest = $.ajax({