http://git-wip-us.apache.org/repos/asf/airavata-sandbox/blob/4231ac35/datacat/web/portal/scripts/main.js
----------------------------------------------------------------------
diff --git a/datacat/web/portal/scripts/main.js
b/datacat/web/portal/scripts/main.js
new file mode 100755
index 0000000..bb50b47
--- /dev/null
+++ b/datacat/web/portal/scripts/main.js
@@ -0,0 +1,610 @@
+var loggedIn;
// initial user data
+var user = '';
+var allUserGroups;
+
+var selectedDocId;
// initial pagination parameters
+var numberOfFields = 0;
+var resultOffset = 1;
+var numberOfResults = 10;
+var lastData = '';
+var nextDisabled = false;
+var previewDisabled = true;
+
+var fields = ["id", "fileName", "filePath", "ownerName",
"generatedApplicationName", "dataArchiveNode", "createdDate"];
// list of fields common for all data products
+
+var service_url = "http://localhost/datacat/dataStoreService.php";;
+
+$(document).ready(function () {
+
+ var loginPopover = $('#login-popover-btn');
+ var logoutButton = $('#logout-btn');
+
+ addFieldedField();
// add one item to the graphical query construct by default
+
+ loginPopover.popover({
+ 'placement': 'bottom',
+ 'html': true
+ });
+
+ loginPopover.hide();
+ logoutButton.hide();
+ $('#logged-is-as').hide();
+ checkLogin();
+
+ $(document).on("click", "#fielded-add-btn", addField);
// bind events to dom items
+ $(document).on("click", "#fielded-remove-btn", removeField);
+
+ $(document).on("click", "#logout-btn", logout);
+ $(document).on("click", "#login-btn", login);
+
+ $(document).on("change", ".field-select", fieldChanged);
+ $(document).on("change", ".relation-date", dateRelationChanged);
+
+ $(document).on("click", "#search-btn", search);
+ $('#form-outer-wrapper').keypress(function (e) {
// trigger search function on pressing
+ if (e.which == 13) {
+ e.preventDefault();
+ search();
+ return false;
+ }
+ });
+
+ $(document).on("click", "#getNext", getNext);
+ $(document).on("click", "#getPrevious", getPrevious);
+
+ $(document).on("click", ".share-btn", showAclList);
+ $(document).on("click", "#update-acl-btn", updateAclList);
+
+ getAllUserGroups();
+});
+
+var getMetadataFieldListCall = function () {
// get the full list of searchable/indexed fields
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'getMetadataFieldList'
+ }
+ });
+
+ request.done(function (msg) {
+ var newFields = JSON.parse(msg);
+ for (var i = 0; i < newFields.length; i++) {
+ fields.push(newFields[i]);
+ }
+
+ addFieldedField();
//Adding one field by default
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ $('#results').html("<p style='text-align: center'>GET METADATA FIELD
LIST FAILED</p>");
+ });
+};
+
+var getAllUserGroups = function () {
// get the full list of user groups for sharing data products
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'getAllUserGroups'
+ }
+ });
+
+ request.done(function (msg) {
+ allUserGroups = JSON.parse(msg);
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ $('#results').html("<p style='text-align: center'>GET ALL USER GROUPS
FAILED</p>");
+ });
+};
+
+var login = function () {
// authenticate user
+ var username = $("#username").val();
+ var password = $("#password").val();
+
+ if (username == "") {
+ alert("Please enter a valid username");
+ return;
+ } else if (password == "") {
+ alert("Please enter a valid password");
+ return;
+ }
+
+ var data = {
+ "username": username,
+ "password": password
+ };
+
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'login',
+ 'data': data
+ }
+ });
+
+ request.done(function (msg) {
+ if (msg == 'true') {
+ loggedIn = true;
+ user = username;
+ checkLogin();
+ $('#login-popover-btn').popover('hide');
+ } else {
+ alert('The username and password do not match.');
+ }
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ alert('Oops, something went wrong');
+ });
+};
+
+var checkLogin = function () {
//check user logged in and get username
+ var loginPopover = $('#login-popover-btn');
+ var logoutButton = $('#logout-btn');
+ var loggedInAs = $('#logged-is-as');
+
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'checkLogin'
+ }
+ });
+
+ request.done(function (msg) {
+ user = msg;
+ var loginData = '<div id="login-form-wrapper">' +
+ ' <form class="form-horizontal">' +
+ ' <div class="form-group">' +
+ ' <input type="text" placeholder="Username"
id="username"/>' +
+ ' </div>' +
+ ' <div class="form-group">' +
+ ' <input type="password" placeholder="Password"
id="password"/>' +
+ ' </div>' +
+
+ ' <div class="form-group" id="login-btn-wrapper">' +
+ ' <button type="button" class="btn btn-default
col-xs-12" id="login-btn">Login</button>' +
+ ' </div>' +
+ ' </form>' +
+ '</div>';
+
+ if (msg == '%%false%%') {
+ loggedIn = false;
+ loginPopover.text('Log in');
+ loginPopover.attr('data-content', loginData);
+ logoutButton.hide();
+ loginPopover.show();
+ loggedInAs.hide();
+ } else {
+ loggedIn = true;
+ loginPopover.text('Logged in');
+ loginPopover.attr('data-content', '');
+ loginPopover.hide();
+ logoutButton.show();
+ loggedInAs.html('Logged in as <strong>' + user + '</strong>');
+ loggedInAs.show();
+ }
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ alert('Oops, something went wrong');
+ });
+};
+
+var logout = function () {
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'logout'
+ }
+ });
+
+ request.done(function (msg) {
+ if (msg) {
+ loggedIn = false;
+ user = '';
+ checkLogin();
+ $('#login-popover-btn').popover('hide');
+ } else {
+ alert('Logout failed.');
+ }
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ alert('Oops, something went wrong');
+ });
+};
+
+var addField = function () {
// add field to graphical query construct
+ if (numberOfFields < 10) {
+ addFieldedField();
+ } else {
+ alert('Too many fields');
+ }
+};
+
+var addFieldedField = function () {
+ var fieldsHtml = '<option value="id">Document ID</option>' +
+ '<option value="fileName">File Name</option>' +
+ '<option value="filePath">File Path</option>' +
+ '<option value="gatewayId">Gateway ID</option>' +
+ '<option value="applicationName">Application Name</option>' +
+ '<option value="experimentId">Experiment ID</option>' +
+ '<option value="computingResourceName">Computing Resource
Name</option>' +
+ '<option value="createdDate">Created Date</option>';
+
+ numberOfFields += 1;
+
+ $('#fielded-fields').append('<div class="form-group fielded-field"
id="field-group-' + numberOfFields + '">' +
+ ' <label class="col-xs-12">Field ' + numberOfFields +
'</label>' +
+ ' <div class="col-xs-6 col-sm-3">' +
+ ' <select class="field-select form-control" id="field-' +
numberOfFields + '">'
+ + fieldsHtml +
+ ' </select>' +
+ ' </div>' +
+ ' <div class="col-xs-6 col-sm-3">' +
+ ' <select class="form-control" id="relation-' +
numberOfFields + '">' +
+ ' <option value="WILDCARD">Wildcard</option>' +
+ ' <option value="EQUALS">Equals</option>' +
+ ' <option value="PHRASE">Phrase</option>' +
+ ' <option value="SUBSTRING">Substring</option>' +
+ ' </select>' +
+ ' </div>' +
+ ' <div class="fielded-form-input-wrapper col-xs-12
col-sm-6">' +
+ ' <input type="text" class="form-control" id="value-' +
numberOfFields + '">' +
+ ' </div>' +
+ ' </div>');
+};
+
+var removeField = function () {
// remove field from graphical query construct
+ if (numberOfFields > 1) {
+ $('#field-group-' + numberOfFields).remove();
+ numberOfFields -= 1;
+ } else {
+ alert('You cannot remove the last field');
+ }
+};
+
+var fieldChanged = function () {
// take action corresponding to selected query field
+ var id = $(this).parent().parent().find('.fielded-form-input-wrapper
input:first')[0].id.replace('value-', '');
+ if ($(this).val() == 'createdDate') {
+ $('#relation-' + id).parent().html(' <select
class="relation-date form-control" id="relation-' + id + '">' +
+ ' <option value="EQUALS">Equals</option>' +
+ ' <option value="RANGE">Range</option>' +
+ ' </select>');
+
+ var html = '<input type="text" style="display:none;"
class="form-control" id="value-' + id + '">' +
+ ' <div class="input-group date datetimepicker">' +
+ ' <input id="date-equals-' + id + '" type="text"
class="form-control" />' +
+ ' <span class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>' +
+ ' </div>';
+
+
$(this).parent().parent().find('.fielded-form-input-wrapper:first').html(html);
+
+ $('.datetimepicker').datetimepicker({
+ maxDate: moment(),
+ pickTime: false,
+ defaultDate: moment(),
+ format: "MM/DD/YYYY"
+ });
+ } else {
+ $('#relation-' + id).parent().html(' <select
class="form-control" id="relation-' + id + '">' +
+ ' <option value="WILDCARD">Wildcard</option>' +
+ ' <option value="EQUALS">Equals</option>' +
+ ' <option value="PHRASE">Phrase</option>' +
+ ' <option value="SUBSTRING">Substring</option>' +
+ ' </select>');
+
+
$(this).parent().parent().find('.fielded-form-input-wrapper:first').html('<input
type="text" class="form-control" id="value-' + id + '">');
+ }
+};
+
+var dateRelationChanged = function () {
// take action according to the date relation selected (range)
+ var id = $(this).parent().parent().find('.fielded-form-input-wrapper
input:first')[0].id.replace('value-', '');
+
+ if ($(this).val() == 'RANGE') {
+ var htmlRange = '<input type="text" style="display:none;"
class="form-control" id="value-' + id + '">';
+ htmlRange += '<form class="form-horizontal" role="form">' +
+ ' <div style="margin-right: 0;" class="form-group">' +
+ ' <label for="range-from" class="col-sm-3 col-md-2
control-label">From</label>' +
+ ' <div class="col-sm-6 col-md-10 input-group date
datetimepicker datetimepicker-from" id="datetimepicker-from-' + id + '">' +
+ ' <input class="form-control" id="range-from-' + id +
'">' +
+ ' <span class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>' +
+ ' </div>' +
+ ' </div>' +
+ ' <div style="margin-right: 0;" class="form-group">' +
+ ' <label for="range-to" class="col-sm-3 col-md-2
control-label">To</label>' +
+ ' <div class="col-sm-6 col-md-10 input-group date
datetimepicker datetimepicker-to" id="datetimepicker-to-' + id + '">' +
+ ' <input type="text" class="form-control"
id="range-to-' + id + '">' +
+ ' <span class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>' +
+ ' </div>' +
+ ' </div>' +
+ ' </form>';
+
+
$(this).parent().parent().find('.fielded-form-input-wrapper:first').html(htmlRange);
+
+ $('.datetimepicker-from').datetimepicker({
+ pickTime: false,
+ defaultDate: moment().subtract(1, 'days'),
+ format: "MM/DD/YYYY"
+ });
+ $('.datetimepicker-to').datetimepicker({
+ maxDate: moment(),
+ pickTime: false,
+ defaultDate: moment(),
+ format: "MM/DD/YYYY"
+ });
+
+ $('#datetimepicker-to-' +
id).data("DateTimePicker").setMinDate(moment());
+ $('#datetimepicker-from-' +
id).data("DateTimePicker").setMaxDate(moment().subtract(1, 'days'));
+
+ $("#datetimepicker-from-" + id).on("dp.change", function (e) {
+ $('#datetimepicker-to-' +
id).data("DateTimePicker").setMinDate(e.date);
+ });
+ $("#datetimepicker-to-" + id).on("dp.change", function (e) {
+ $('#datetimepicker-from-' +
id).data("DateTimePicker").setMaxDate(e.date);
+ });
+ } else if ($(this).val() == 'EQUALS') {
+ var htmlEquals = '<input type="text" style="display:none;"
class="form-control" id="value-' + id + '">' +
+ ' <div class="input-group date datetimepicker">' +
+ ' <input id="date-equals-' + id + '" type="text"
class="form-control" />' +
+ ' <span class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>' +
+ ' </div>';
+
+
$(this).parent().parent().find('.fielded-form-input-wrapper:first').html(htmlEquals);
+
+ $('.datetimepicker').datetimepicker({
+ maxDate: moment(),
+ pickTime: false,
+ defaultDate: moment(),
+ format: "MM/DD/YYYY"
+ });
+ }
+};
+
+var search = function () {
// search data products
+ var primaryQueryParameterList = [];
+ var allFieldsEmpty = true;
+
+ for (var i = 1; i <= numberOfFields; i++) {
+ if ($('#field-' + i).val() == 'createdDate') {
+ if ($('#relation-' + i).val() == 'EQUALS') {
+ var primaryDateQueryParameter = {
+ "primaryQueryType": 'EQUALS',
+ "firstParameter": moment($("#date-equals-" +
i).val()).format("YYYY-MM-DD") + "T00:00:00Z",
+ "secondParameter": null,
+ "field": $("#field-" + i).val()
+ };
+ primaryQueryParameterList.push(primaryDateQueryParameter);
+ allFieldsEmpty = false;
+ } else {
+ var primaryRangeQueryParameter = {
+ "primaryQueryType": 'RANGE',
+ "firstParameter": moment($("#range-from-" +
i).val()).format("YYYY-MM-DD") + "T00:00:00Z",
+ "secondParameter": moment($("#range-to-" +
i).val()).format("YYYY-MM-DD") + "T00:00:00Z",
+ "field": $("#field-" + i).val()
+ };
+ primaryQueryParameterList.push(primaryRangeQueryParameter);
+ allFieldsEmpty = false;
+ }
+ } else {
+ var value = $("#value-" + i).val();
+ if (value !== "") {
+ var primaryQueryParameter = {
+ "primaryQueryType": $("#relation-" + i).val(),
+ "firstParameter": value,
+ "secondParameter": null,
+ "field": $("#field-" + i).val()
+ };
+ primaryQueryParameterList.push(primaryQueryParameter);
+ allFieldsEmpty = false;
+ }
+ }
+ }
+
+ if (allFieldsEmpty) {
+ alert("Please select some query parameters !!!");
+ return;
+ }
+
+ var data = {
+ "queryStringSet": false,
+
+ "startRow": resultOffset,
+ "numberOfRows": numberOfResults,
+
+ "primaryQueryParameterList": primaryQueryParameterList
+ };
+
+ lastData = data;
+ getResultsCall(data);
+
+};
+
+var getNext = function () {
// get next results set
+ if (!nextDisabled) {
+ resultOffset += numberOfResults;
+ lastData.startRow = resultOffset;
+ previewDisabled = false;
+
+ getResultsCall(lastData);
+ }
+};
+
+var getPrevious = function () {
//get previous results set
+ if (resultOffset != 1) {
+ if ((resultOffset - numberOfResults) == 1) {
+ previewDisabled = true;
+ }
+ resultOffset -= numberOfResults;
+ lastData.startRow = resultOffset;
+ nextDisabled = false;
+
+ getResultsCall(lastData);
+ }
+};
+
+var getResultsCall = function (data) {
// common function to het results for searching and pagination
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'getResults',
+ 'data': data
+ }
+ });
+
+ request.done(function (msg) {
+ var result = JSON.parse(msg);
+
+ if (result.length == 0) {
+ if (resultOffset == 1) {
+ $('#results').html("<p style='text-align: center'>NO RESULTS
TO SHOW</p>");
+ } else {
+ nextDisabled = true;
+ resultOffset -= numberOfResults;
+ lastData.startRow = resultOffset;
+ $('#getNext').addClass('disabled');
+ alert('No more results to show.');
+ }
+ } else {
+ for (var i = 0; i < result.length; i++) {
+ if (result[i].ownerId == user) {
+ result[i].ownerId += '<br>' +
+ '<button type="button" class="btn btn-primary btn-sm
share-btn" id="share-' + i + '" data-toggle="modal"
data-target="#myModal">Share</button>';
+ }
+ }
+
+ // generate table header
+ var htmlTable = '<div class="results-table-wrapper">' +
+ '<table class="table table-striped table-bordered table-hover
table-responsive" id="results-table">' +
+ ' <thead>' +
+ ' <th>Document Id</th>' +
+ ' <th>Owner ID</th>' +
+ ' <th>File Name</th>' +
+ ' <th>File Path</th>' +
+ ' <th>Gateway ID</th>' +
+ ' <th>Application Name</th>' +
+ ' <th>Experiment ID</th>' +
+ ' <th>Resource Name</th>' +
+ ' <th>Created Date</th>' +
+ ' </thead>' +
+ ' <tbody>';
+
+ // generate table rows
+ for (var j = 0; j < result.length; j++) {
+ htmlTable += '<tr>' +
+ ' <td style="max-width: 150px; min-width: 150px;
overflow-x: auto">' + result[j].id + '</td>' +
+ ' <td style="max-width: 100px; min-width: 100px;
overflow-x: auto">' + result[j].ownerId + '</td>' +
+ ' <td style="max-width: 120px; min-width: 120px;
overflow-x: auto">' + result[j].fileName + '</td>' +
+ ' <td style="max-width: 120px; min-width: 120px;
overflow-x: auto">' + result[j].filePath + '</td>' +
+ ' <td style="max-width: 80px; min-width: 80px;
overflow-x: auto">' + result[j].gatewayId + '</td>' +
+ ' <td style="max-width: 80px; min-width: 80px;
overflow-x: auto">' + result[j].applicationName + '</td>' +
+ ' <td style="max-width: 80px; min-width: 80px;
overflow-x: auto">' + result[j].experimentId + '</td>' +
+ ' <td style="max-width: 80px; min-width: 80px;
overflow-x: auto">' + result[j].computingResourceName + '</td>' +
+ ' <td style="max-width: 120px; min-width: 120px;
overflow-x: auto">' + moment(result[j].createdDate).format("MMM DD, YYYY") +
'</td>' +
+ '</tr>';
+
+ }
+ htmlTable += '</tbody></table></div>' +
+ ' <ul class="pager">' +
+ ' <li class="previous" id="getPrevious"><a
href="javascript:;">← Previous</a></li>' +
+ ' <li class="next" id="getNext"><a
href="javascript:;">Next →</a></li>' +
+ ' </ul>';
+
+ $('#results').html(htmlTable);
+
+ if (previewDisabled) {
+ $('#getPrevious').addClass('disabled');
+ }
+ if (nextDisabled) {
+ $('#getNext').addClass('disabled');
+ }
+
+ $("html, body").animate({ scrollTop: $('#results').offset().top },
500);
+ }
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ $('#results').html("<p style='text-align: center'>GET RESULTS
FAILED</p>");
+ });
+};
+
+var showAclList = function () {
// show the list of available communities to share with
+ var thisId = this.id;
+ var id = $('#' + thisId).parent().parent().find('td:first').text();
// TODO: If you change the table order, use another way to get the document id
+ selectedDocId = id;
+
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'getAclList',
+ 'data': {
+ 'id': id
+ }
+ }
+ });
+
+ request.done(function (msg) {
+ var aclList = JSON.parse(msg);
+
+ var modalHtml = '<p>Document ID: <strong>' + selectedDocId +
'</strong></p>';
+
+ for (var i = 0; i < allUserGroups.length; i++) {
+ modalHtml += '<div class="checkbox">' +
+ ' <label>' +
+ ' <input type="checkbox" id="' + allUserGroups[i] +
'" value="' + allUserGroups[i] + '">' + allUserGroups[i] +
+ ' </label>' +
+ ' </div>';
+ }
+
+ $('#modal-body').html(modalHtml);
+
+ for (var j = 0; j < aclList.length; j++) {
+ $("#" + aclList[j]).prop('checked', true);
+ }
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ $('#results').html("<p style='text-align: center'>GET ACL LIST
FAILED</p>");
+ });
+
+};
+
+var updateAclList = function () {
// update ACL list of a data product
+ var id = selectedDocId;
+ var newAclList = [];
+
+ for (var i = 0; i < allUserGroups.length; i++) {
+ if ($('#' + allUserGroups[i]).prop('checked')) {
+ newAclList.push(allUserGroups[i]);
+ }
+ }
+ newAclList.push(user);
+
+ var request = $.ajax({
+ url: service_url,
+ type: "POST",
+ data: {
+ 'call': 'updateAclList',
+ 'data': {
+ 'id': id,
+ 'acl': newAclList
+ }
+ }
+ });
+
+ request.done(function (msg) {
+ alert('Done');
+ });
+
+ request.fail(function (jqXHR, textStatus) {
+ $('#results').html("<p style='text-align: center'>UPDATE ACL LIST
FAILED</p>");
+ });
+
+};
\ No newline at end of file
