@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

package/src/app/ui/editor-client/src/js/ui/userSettings.js

@@ -1,673 +0,0 @@
-var cloudredobject = {};
-function createEnvironment() {
-  var table = document.getElementById('myTable');
-  var env = document.getElementById('environment').value;
-  var profilename = document.getElementById('selectNumber').value;
-  if (env == 'local') {
-    window.alert('Environment local cannot be created');
-  } else {
-    var row = table.insertRow(-1);
-    var cell1 = row.insertCell(0);
-    var cell2 = row.insertCell(1);
-    var cell3 = row.insertCell(2);
-    var cell4 = row.insertCell(3);
-    cell1.innerHTML =
-      '<td style="margin:auto; display:block;"><input type="radio" id="' +
-      env +
-      '" name="myradio" value="current" onclick="setCurrentEnvironment(this)"></td>';
-    cell2.innerHTML =
-      '<td style="margin:auto; display:block;">' + env + '</td>';
-    cell3.innerHTML =
-      '<td style="margin:auto; display:block;">' + profilename + '</td>';
-    cell4.innerHTML =
-      '<td style="margin:auto; display:block;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>.btn {background-color: DodgerBlue; border: none; color: black; padding: 4px 10px; font-size: 11px; cursor: pointer; } </style><button class="btn" id="' +
-      env +
-      '" onclick="deleteEnvironment(this)"><i class="fa fa-close"></i></button></td>';
-    var environment_list = RED.settings.get('cloudred') || {};
-    if (environment_list.length != 0) {
-      var env_array = environment_list.environment;
-      var objstr = JSON.stringify({
-        envname: env,
-        profile: profilename,
-        status: ''
-      });
-      var obj = JSON.parse(objstr);
-      env_array.push(obj);
-      var envstr = JSON.stringify(env_array);
-      environment_list.environment = JSON.parse(envstr);
-      RED.settings.set('cloudred', environment_list);
-    } else {
-      var env_array = [];
-      var objstr = JSON.stringify({
-        envname: env,
-        profile: profilename,
-        status: ''
-      });
-      var obj = JSON.parse(objstr);
-      env_array.push(obj);
-      var envstr = JSON.stringify(env_array);
-      environment_list.environment = JSON.parse(envstr);
-      RED.settings.set('cloudred', environment_list);
-    }
-  }
-}
-
-/**
- * This function loads the environment list
- */
-function loadEnvironmentList() {
-  var table = document.getElementById('myTable');
-  var environment_list = RED.settings.get('cloudred') || {};
-  env_array = environment_list.environment;
-  for (var envindex = 0; envindex < env_array.length; envindex++) {
-    var row = table.insertRow(-1);
-    var cell1 = row.insertCell(0);
-    var cell2 = row.insertCell(1);
-    var cell3 = row.insertCell(2);
-    var cell4 = row.insertCell(3);
-    if (env_array[envindex].status == 'current') {
-      cell1.innerHTML =
-        '<td style="margin:auto; display:block;"><input type="radio" id="' +
-        env_array[envindex].envname +
-        '" name="myradio" value="current" onclick="setCurrentEnvironment(this)" checked="checked"></td>';
-    } else {
-      cell1.innerHTML =
-        '<td style="margin:auto; display:block;"><input type="radio" id="' +
-        env_array[envindex].envname +
-        '" name="myradio" value="current" onclick="setCurrentEnvironment(this)"></td>';
-    }
-    cell2.innerHTML =
-      '<td style="margin:auto; display:block;">' +
-      env_array[envindex].envname +
-      '</td>';
-    cell3.innerHTML =
-      '<td style="margin:auto; display:block;">' +
-      env_array[envindex].profile +
-      '</td>';
-    if (env_array[envindex].envname == 'localhost') {
-      cell4.innerHTML = '<td style="margin:auto; display:block;"></td>';
-    } else {
-      cell4.innerHTML =
-        '<td style="margin:auto; display:block;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>.btn {background-color: DodgerBlue; border: none; color: black; padding: 4px 10px; font-size: 11px; cursor: pointer; }</style><button class="btn" id="' +
-        env_array[envindex].envname +
-        '" onclick="deleteEnvironment(this)"><i class="fa fa-close"></i></button></td>';
-    }
-  }
-}
-
-/**
- * This function set the current environment
- * which is selected
- * @param {} k
- */
-function setCurrentEnvironment(k) {
-  var environment_list = RED.settings.get('cloudred') || {};
-  var env_array = environment_list.environment;
-  var radios = document.getElementsByName('myradio');
-  for (var envindex = 0; envindex < env_array.length; envindex++) {
-    env_array[envindex].status = '';
-  }
-  var index = env_array.findIndex(function(z) {
-    return z.envname === k.id;
-  });
-  if (index !== undefined) env_array[index].status = 'current';
-  var envstr = JSON.stringify(env_array);
-  environment_list.environment = JSON.parse(envstr);
-  RED.settings.set('cloudred', environment_list);
-}
-
-/**
- * This funtion help in deleting an
- * environment which is selected
- * @param {} x
- */
-function deleteEnvironment(x) {
-  var environment_list = RED.settings.get('cloudred') || {};
-  var rows = document.getElementsByTagName('tr');
-  for (var i = rows.length; i--; ) {
-    if (rows[i].innerHTML.indexOf(x.id) !== -1) {
-      rows[i].parentNode.removeChild(rows[i]);
-    }
-  }
-  var index = environment_list.environment.findIndex(function(z) {
-    return z.envname === x.id;
-  });
-  if (index !== undefined) environment_list.environment.splice(index, 1);
-  var env_array = environment_list.environment;
-  var envstr = JSON.stringify(env_array);
-  environment_list.environment = JSON.parse(envstr);
-  RED.settings.set('cloudred', environment_list);
-}
-
-/**
- * This function is for loading the
- * AWS profiles
- */
-function loadAwsProfiles() {
-  var done = function() {
-    var select = document.getElementById('selectNumber');
-    for (var i = 0; i < awsEnvProfiles.envprofile.length; i++) {
-      var opt = awsEnvProfiles.envprofile[i];
-      var el = document.createElement('option');
-      el.textContent = opt;
-      el.value = opt;
-      select.appendChild(el);
-    }
-  };
-  RED.settings.getAWSEnvprofiles(done);
-}
-
-/**
- * This function loads the list of
- * available memory sizes
- */
-function loadMemoryList() {
-  var select = document.getElementById('memory');
-  var memorylist = ['128', '256', '512', '1024'];
-  for (var i = 0; i < memorylist.length; i++) {
-    var opt = memorylist[i];
-    var el = document.createElement('option');
-    el.textContent = opt;
-    el.value = opt;
-    select.appendChild(el);
-  }
-}
-
-/**
- * This function is for saving the
- * function details
- */
-function savefunctiondetails() {
-  var funcname = document.getElementById('funcname').value;
-  var memory = document.getElementById('memory').value;
-  var timeout = document.getElementById('timeout').value;
-  var cloudred_function = RED.settings.get('cloudred') || {};
-  var credfunctionsetting_str = JSON.stringify({
-    name: funcname,
-    memory: memory,
-    timeout: timeout
-  });
-  var credfunctionsetting = JSON.parse(credfunctionsetting_str);
-  cloudred_function.function = credfunctionsetting;
-  RED.settings.set('cloudred', cloudred_function);
-  document.getElementById('statusdialog').innerHTML =
-    '<font color="green">Function updated</font>';
-}
-
-/**
- * This function is for saving the profile
- * in ~/.aws/credential file .
- * Note : this is currently not going to be used
- */
-// function saveEnvProfiledetails(){
-//     var profilename = document.getElementById('profilename').value
-//     var awskey = document.getElementById('awskey').value
-//     var awssecret = document.getElementById('awssecret').value
-//     var region = document.getElementById('region').value
-//     var credprofilesetting_str = JSON.stringify({"profile":{"profilename": profilename ,"awskey":awskey,"awssecret":awssecret,"region":region}})
-//     var credprofilesetting = JSON.parse(credprofilesetting_str)
-//     RED.settings.set("cloudred",credprofilesetting)
-//     awsEnvProfileInput =  {
-//         "profilename" : profilename,
-//         "region" : region,
-//         "awskey" : awskey,
-//         "awssecret" : awssecret
-//     };
-//     RED.settings.setAWSEnvprofiles(awsEnvProfileInput);
-//     document.getElementById("statusdialog").innerHTML = '<font color="green">Profile created</font>';
-// }
-
-/**
- * For showing the hidden awskey.
- * Note : this is currently not going to be used
- */
-// function showawskey() {
-//   var x = document.getElementById("awskey");
-//     if (x.type === "password") {
-//       x.type = "text";
-//     } else {
-//       x.type = "password";
-//     }
-//   }
-
-/**
- * For showing the hidden awssecret.
- * Note : this is currently not going to be used
- */
-// function showawssecret() {
-//     var x = document.getElementById("awssecret");
-//       if (x.type === "password") {
-//         x.type = "text";
-//       } else {
-//         x.type = "password";
-//       }
-//   }
-
-RED.userSettings = (function() {
-  var trayWidth = 700;
-  var settingsVisible = false;
-
-  var panes = [];
-
-  function addPane(options) {
-    panes.push(options);
-  }
-
-  function show(initialTab) {
-    if (settingsVisible) {
-      return;
-    }
-    if (!RED.user.hasPermission('settings.write')) {
-      RED.notify(RED._('user.errors.settings'), 'error');
-      return;
-    }
-    settingsVisible = true;
-    var tabContainer;
-
-    var trayOptions = {
-      title: RED._('menu.label.userSettings'),
-      buttons: [
-        {
-          id: 'node-dialog-ok',
-          text: RED._('common.label.close'),
-          class: 'primary',
-          click: function() {
-            RED.tray.close();
-          }
-        }
-      ],
-      resize: function(dimensions) {
-        trayWidth = dimensions.width;
-      },
-      open: function(tray) {
-        var trayBody = tray.find('.editor-tray-body');
-        var settingsContent = $('<div></div>').appendTo(trayBody);
-        var tabContainer = $('<div></div>', {
-          id: 'user-settings-tabs-container'
-        }).appendTo(settingsContent);
-
-        $('<ul></ul>', { id: 'user-settings-tabs' }).appendTo(tabContainer);
-        var settingsTabs = RED.tabs.create({
-          id: 'user-settings-tabs',
-          vertical: true,
-          onchange: function(tab) {
-            setTimeout(function() {
-              $('#user-settings-tabs-content')
-                .children()
-                .hide();
-              $('#' + tab.id).show();
-              if (tab.pane.focus) {
-                tab.pane.focus();
-              }
-            }, 50);
-          }
-        });
-        var tabContents = $('<div></div>', {
-          id: 'user-settings-tabs-content'
-        }).appendTo(settingsContent);
-
-        panes.forEach(function(pane) {
-          settingsTabs.addTab({
-            id: 'user-settings-tab-' + pane.id,
-            label: pane.title,
-            pane: pane
-          });
-          pane
-            .get()
-            .hide()
-            .appendTo(tabContents);
-        });
-        settingsContent.i18n();
-        settingsTabs.activateTab('user-settings-tab-' + (initialTab || 'view'));
-        $('#sidebar-shade').show();
-      },
-      close: function() {
-        settingsVisible = false;
-        panes.forEach(function(pane) {
-          if (pane.close) {
-            pane.close();
-          }
-        });
-        $('#sidebar-shade').hide();
-      },
-      show: function() {}
-    };
-    if (trayWidth !== null) {
-      trayOptions.width = trayWidth;
-    }
-    RED.tray.show(trayOptions);
-  }
-
-  var viewSettings = [
-    {
-      title: 'menu.label.view.grid',
-      options: [
-        {
-          setting: 'view-show-grid',
-          oldSetting: 'menu-menu-item-view-show-grid',
-          label: 'menu.label.view.showGrid',
-          toggle: true,
-          onchange: 'core:toggle-show-grid'
-        },
-        {
-          setting: 'view-snap-grid',
-          oldSetting: 'menu-menu-item-view-snap-grid',
-          label: 'menu.label.view.snapGrid',
-          toggle: true,
-          onchange: 'core:toggle-snap-grid'
-        },
-        {
-          setting: 'view-grid-size',
-          label: 'menu.label.view.gridSize',
-          type: 'number',
-          default: 20,
-          onchange: RED.view.gridSize
-        }
-      ]
-    },
-    {
-      title: 'menu.label.nodes',
-      options: [
-        {
-          setting: 'view-node-status',
-          oldSetting: 'menu-menu-item-status',
-          label: 'menu.label.displayStatus',
-          default: true,
-          toggle: true,
-          onchange: 'core:toggle-status'
-        },
-        {
-          setting: 'view-node-show-label',
-          label: 'menu.label.showNodeLabelDefault',
-          default: true,
-          toggle: true
-        }
-      ]
-    },
-    {
-      title: 'menu.label.other',
-      options: [
-        {
-          setting: 'view-show-tips',
-          oldSettings: 'menu-menu-item-show-tips',
-          label: 'menu.label.showTips',
-          toggle: true,
-          default: true,
-          onchange: 'core:toggle-show-tips'
-        }
-      ]
-    }
-  ];
-
-  var allSettings = {};
-
-  /**
-   * This function is for creating the pane for
-   * Lambda settings under User settings
-   */
-  var cloudredfuncSettings = {};
-  function createCloudredFunctionConfigPane() {
-    var pane = $(
-      '<div id="user-settings-tab-functionconfig" class="node-help"></div>'
-    );
-    cloudredfuncSettings = RED.settings.get('cloudred') || {};
-    var row1 = $('<div class="user-settings-row"></div>').appendTo(pane);
-    $(
-      '<script type="text/javascript">window.onload = loadMemoryList()</script><label for="funcname">Name</label><input type="text" name="funcname" id="funcname" value="' +
-        cloudredfuncSettings.function.name +
-        '"><br><label for="memory">Memory</label><select id="memory" placeholder="Choose Memory"><option>' +
-        cloudredfuncSettings.function.memory +
-        '</option></select><br><label for="timeout">Timeout(sec)</label><input type="text" name="timeout" id="timeout" value="' +
-        cloudredfuncSettings.function.timeout +
-        '"><br><br><input type="submit" value="Apply" onclick="savefunctiondetails()">&nbsp;&nbsp<p id="statusdialog"></p>'
-    ).appendTo(row1);
-    return pane;
-  }
-
-  /**
-   * This function is for creating the pane for
-   * creating the environments
-   */
-  function createCloudredAWSConfigPane() {
-    var pane = $(
-      '<div id="user-settings-tab-awsconfig" class="node-help"></div>'
-    );
-    var row1 = $('<div class="user-settings-row"></div>').appendTo(pane);
-    $(
-      '<script type="text/javascript">window.onload = loadAwsProfiles(); window.onload = loadEnvironmentList() </script><br><input type="text" name="environment" id="environment" placeholder="Environment" value="">&nbsp;&nbsp;<select id="selectNumber"><option>Choose a profile</option></select><br><input type="submit" value="Create" onclick="createEnvironment()"><br><br><table id="myTable" style="border: 1px solid black; width:80%"><th bgcolor="#f3f3f3" align="left">Current</th><th bgcolor="#f3f3f3" align="left">Environment</th><th bgcolor="#f3f3f3" align="left">Profile</th><th bgcolor="#f3f3f3" align="left">Remove</th></table>'
-    ).appendTo(row1);
-    return pane;
-  }
-
-  function createConfigurationsPane() {
-    var pane = $(
-      '<div id="user-settings-tab-configurations" class="node-help"></div>'
-    );
-    var title = $('<h3>Active Configurations</h3>').appendTo(pane);
-    var tableContent = `<table class="table table-sm" style="margin-top: 25px;">
-        <thead>
-        <tr> 
-            <th scope="col">Name</th>
-            <th scope="col"></th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-            <td><span style="font-size:14px; font-weight:normal">Deploy on AWS</span></td>
-            <td>
-                <div class="btn-group pull-right">
-                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-edit"></span>
-                    </button>
-                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-trash"></span>
-                    </button>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td><span style="font-size:14px; font-weight:normal">Terraform apply</span></td>
-            <td>
-            <div class="btn-group pull-right">
-                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-edit"></span>
-                    </button>
-                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-trash"></span>
-                    </button>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td><span style="font-size:14px; font-weight:normal">Terraform destroy</span></td>
-            <td>
-            <div class="btn-group pull-right">
-                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-edit"></span>
-                    </button>
-                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
-                        <span class="fa fa-trash"></span>
-                    </button>
-                </div>
-            </td>
-        </tr>
-        </tbody>
-    </table>`;
-    var table = $(tableContent).appendTo(title);
-    return pane;
-  }
-
-  function createViewPane() {
-    var pane = $('<div id="user-settings-tab-view" class="node-help"></div>');
-
-    var currentEditorSettings = RED.settings.get('editor') || {};
-    currentEditorSettings.view = currentEditorSettings.view || {};
-
-    viewSettings.forEach(function(section) {
-      $('<h3></h3>')
-        .text(RED._(section.title))
-        .appendTo(pane);
-      section.options.forEach(function(opt) {
-        var initialState = currentEditorSettings.view[opt.setting];
-        var row = $('<div class="user-settings-row"></div>').appendTo(pane);
-        var input;
-        if (opt.toggle) {
-          input = $(
-            '<label for="user-settings-' +
-              opt.setting +
-              '"><input id="user-settings-' +
-              opt.setting +
-              '" type="checkbox"> ' +
-              RED._(opt.label) +
-              '</label>'
-          )
-            .appendTo(row)
-            .find('input');
-          input.prop('checked', initialState);
-        } else {
-          $(
-            '<label for="user-settings-' +
-              opt.setting +
-              '">' +
-              RED._(opt.label) +
-              '</label>'
-          ).appendTo(row);
-          $(
-            '<input id="user-settings-' +
-              opt.setting +
-              '" type="' +
-              (opt.type || 'text') +
-              '">'
-          )
-            .appendTo(row)
-            .val(initialState);
-        }
-      });
-    });
-    return pane;
-  }
-
-  function setSelected(id, value) {
-    var opt = allSettings[id];
-    var currentEditorSettings = RED.settings.get('editor') || {};
-    currentEditorSettings.view = currentEditorSettings.view || {};
-    currentEditorSettings.view[opt.setting] = value;
-    RED.settings.set('editor', currentEditorSettings);
-    var callback = opt.onchange;
-    if (typeof callback === 'string') {
-      callback = RED.actions.get(callback);
-    }
-    if (callback) {
-      callback.call(opt, value);
-    }
-  }
-  function toggle(id) {
-    var opt = allSettings[id];
-    var currentEditorSettings = RED.settings.get('editor') || {};
-    currentEditorSettings.view = currentEditorSettings.view || {};
-    setSelected(id, !currentEditorSettings.view[opt.setting]);
-  }
-
-  function init() {
-    RED.actions.add('core:show-user-settings', show);
-    RED.actions.add('core:show-help', function() {
-      show('keyboard');
-    });
-
-    // Configurations Panel
-    addPane({
-      id: 'configurations',
-      title: 'Configurations',
-      get: createConfigurationsPane,
-      close: function() {}
-    });
-
-    //adding the environment pane
-    addPane({
-      id: 'awsconfig',
-      title: RED._('menu.label.cloudred.aws.panename'),
-      get: createCloudredAWSConfigPane,
-      close: function() {}
-    });
-
-    addPane({
-      id: 'view',
-      title: RED._('menu.label.view.view'),
-      get: createViewPane,
-      close: function() {
-        viewSettings.forEach(function(section) {
-          section.options.forEach(function(opt) {
-            var input = $('#user-settings-' + opt.setting);
-            if (opt.toggle) {
-              setSelected(opt.setting, input.prop('checked'));
-            } else {
-              setSelected(opt.setting, input.val());
-            }
-          });
-        });
-      }
-    });
-
-    var currentEditorSettings = RED.settings.get('editor') || {};
-    currentEditorSettings.view = currentEditorSettings.view || {};
-    var editorSettingsChanged = false;
-    viewSettings.forEach(function(section) {
-      section.options.forEach(function(opt) {
-        if (opt.oldSetting) {
-          var oldValue = RED.settings.get(opt.oldSetting);
-          if (oldValue !== undefined && oldValue !== null) {
-            currentEditorSettings.view[opt.setting] = oldValue;
-            editorSettingsChanged = true;
-            RED.settings.remove(opt.oldSetting);
-          }
-        }
-        allSettings[opt.setting] = opt;
-        var value = currentEditorSettings.view[opt.setting];
-        if (
-          (value === null || value === undefined) &&
-          opt.hasOwnProperty('default')
-        ) {
-          value = opt.default;
-          currentEditorSettings.view[opt.setting] = value;
-          editorSettingsChanged = true;
-        }
-
-        if (opt.onchange) {
-          var callback = opt.onchange;
-          if (typeof callback === 'string') {
-            callback = RED.actions.get(callback);
-          }
-          if (callback) {
-            callback.call(opt, value);
-          }
-        }
-      });
-    });
-    if (editorSettingsChanged) {
-      RED.settings.set('editor', currentEditorSettings);
-    }
-
-    //Initialize cloudred object in .config.json file
-    cloudredobject = RED.settings.get('cloudred');
-    if (typeof cloudredobject == 'undefined') {
-      RED.settings.set(
-        'cloudred',
-        JSON.parse(
-          JSON.stringify({
-            function: { name: '', memory: '', timeout: '' },
-            profile: { profilename: '', awskey: '', awssecret: '', region: '' },
-            environment: [
-              { envname: 'localhost', profile: '--', status: 'current' }
-            ]
-          })
-        )
-      );
-    }
-  }
-  return {
-    init: init,
-    toggle: toggle,
-    show: show,
-    add: addPane
-  };
-})();