@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/modals/modal-new-project.js

@@ -0,0 +1,86 @@
+RED.modalNewProject = (function () {
+  function replaceSpacesWithDash() {
+    let old = $('#projectNameSelected').val();
+    $('#projectNameSelected').val( old.replace(/\s+/g, '-') );
+  }
+
+  function maybeEnableSaveButton() {
+    if (
+      $('#projectNameSelected').val() !== '' &&
+      $('#projectPathSelected').val() !== ''
+    ) {
+      $('#btn-new-project-create').removeClass('disabled');
+    } else {
+      $('#btn-new-project-create').addClass('disabled');
+    }
+  }
+  function init() {
+    $('#projectNameSelected').focus();
+
+    $('#projectNameSelected').on('input', () => {
+      maybeEnableSaveButton();
+      replaceSpacesWithDash()
+    });
+
+    $('#projectPathSelected').on('input', () => {
+      maybeEnableSaveButton();
+    });
+
+    $('#btn-new-project-cancel').click((event) => {
+      window.__kumologica.main.dispatch('modal-projects:close', null);
+    });
+
+    $('#btn-new-project-create').click((event) => {
+      event.preventDefault();
+      let $this = $(event.currentTarget);
+      if ($this.hasClass('secondary')) {
+        return;
+      } else {
+        window.__kumologica.main.dispatch('modal-projects:create-project', {
+          projectBaseDir: $('#projectPathSelected').val(),
+          projectName: $('#projectNameSelected').val(),
+          flow: $('#flowtoimport').val(),
+        });
+      }
+    });
+
+    $('input[name=projectSources]', '#newProjectSources').change(function () {
+      let currentWindow = window.__kumologica.electron.remote.getCurrentWindow();
+      let size = currentWindow.getSize();
+
+      const extensionHeight = 280;
+      let optionSelected = $(this).val();
+
+      if (optionSelected === 'fromExistingFlow') {
+        currentWindow.setSize(size[0], size[1] + extensionHeight);
+        $('#flowtoimportSection').show();
+      } else if (optionSelected === 'emptyProject') {
+        currentWindow.setSize(size[0], size[1] - extensionHeight);
+        $('#flowtoimportSection').hide();
+      } else {
+        console.log(`option unknown: ${optionSelected}`);
+      }
+    });
+
+    $('#yourComputer').click((event) => {
+      let currentWindow = window.__kumologica.electron.remote.getCurrentWindow();
+      let dialog = window.__kumologica.electron.remote.dialog;
+      let options = {
+        title: 'Select directory',
+        properties: ['openDirectory'],
+      };
+      dialog.showOpenDialog(currentWindow, options).then((result) => {
+        if (!result.canceled) {
+          // $('#yourComputer').hide();
+          $('#projectPathSelectedDiv').show();
+          $('#projectPathSelected').val(`${result.filePaths[0]}`);
+        }
+        maybeEnableSaveButton();
+      });
+    });
+  }
+
+  return {
+    init: init,
+  };
+})();

package/src/app/ui/editor-client/src/js/modals/modal-node-library.js

@@ -0,0 +1,255 @@
+RED.modalNodeLibrary = (function () {
+  let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+
+  // Controlling the events received from the main-process
+  function initEventController() {
+    ipcRenderer.on(
+      'modal-node-library:fetch-installed-nodes-response',
+      async (event, msg) => {
+        await fetchNodesFromLibrary(msg.installedNodes);
+        hideLoading();
+      }
+    );
+
+    ipcRenderer.on(
+      'modal-node-library:install-package-initiated',
+      (event, msg) => {
+        let node = msg.source;
+        updateCard('installing', node);
+      }
+    );
+
+    ipcRenderer.on(
+      'modal-node-library:install-package-finished',
+      (event, msg) => {
+        let node = msg.source;
+        updateCard('restart-required', node);
+      }
+    );
+
+    ipcRenderer.on(
+      'modal-node-library:uninstall-package-finished',
+      (event, msg) => {
+        let node = msg.source;
+        updateCard('restart-required', node);
+      }
+    );
+  }
+
+  function updateCard(uievent, node) {
+    // Restart the node
+    $(`#btn-${node.label}`).removeClass('node-installing');
+    $(`#btn-${node.label}`).removeClass('node-required-restart');
+    $(`#btn-${node.label}`).removeClass('node-installed');
+    $(`#btn-${node.label}`).off('click');
+
+    switch (uievent) {
+      case 'installing':
+        $(`#btn-${node.label}`).html('Installing...');
+        $(`#btn-${node.label}`).addClass('node-installing');
+        break;
+      case 'restart-required':
+        // Style the card
+        $(`#card-${node.label}`).addClass('node-required-restart');
+        // Style the button
+        $(`#btn-${node.label}`).html('Restart required');
+        $(`#btn-${node.label}`).addClass('node-required-restart');
+        // Change the click event
+        $(`#btn-${node.label}`).click((event) => {
+          window.__kumologica.main.dispatch(
+            'modal-node-library:restart-requested',
+            {
+              source: node,
+            }
+          );
+        });
+        break;
+      case 'installed':
+        // Attach the class installed to the card
+        $(`#card-${node.label}`).addClass('node-installed');
+        // Update the label and Attach the uninstall behaviour to the button
+        $(`#btn-${node.label}`).addClass('node-installed');
+        $(`#btn-${node.label}`).html('Uninstall');
+        // change the click event
+        $(`#btn-${node.label}`).click((event) => {
+          $(`#btn-${node.label}`).html('Uninstalling...');
+          window.__kumologica.main.dispatch(
+            'modal-node-library:uninstall-package',
+            {
+              source: node,
+            }
+          );
+        });
+        break;
+      case 'available':
+        $(`#btn-${node.label}`).click((event) => {
+          window.__kumologica.main.dispatch(
+            'modal-node-library:install-package',
+            {
+              source: node,
+            }
+          );
+        });
+        break;
+      default:
+        console.log(`modal-node-library received an unknown event:${uievent}`);
+        break;
+    }
+  }
+
+  function isNodeManifestCompleted(node) {
+    return (
+      node.label &&
+      node.description &&
+      node.icon &&
+      node.author &&
+      (node.premium === true || (node.premium == false && node.package))
+    );
+  }
+  async function fetchNodesFromLibrary(installedNodes) {
+    hideConnectionError();
+    try{
+      const availableNodes = await window.__kumologica.nodeLibrary.available();
+      availableNodes.forEach((node) => {
+        // TODO: Make sure to mark nodes as installed accordingly
+        let installed = isInstalled(node, installedNodes);
+        let uievent = installed ? 'installed' : 'available';
+  
+        if (isNodeManifestCompleted(node)) {
+          addCardToGrid(node, createCardHtml(node), uievent);
+        }
+      });
+    }catch(err){
+      console.log(`[modal-node-library] Error found while fetching available nodes...`, err);
+      showConnectionError();
+    }
+    
+  }
+
+  function showConnectionError() {
+    $('#loading-library').hide();
+    $('#library-not-reachable').addClass('flex');
+    $('#library-not-reachable').show();
+  }
+
+  function hideConnectionError() {
+    $('#library-not-reachable').removeClass('flex');
+    $('#library-not-reachable').hide();
+  }
+
+  function isInstalled(node, installedNodes) {
+    return installedNodes.includes(node.package);
+  }
+
+  function createCardHtml(node) {
+    let imageUrl = `${window.__kumologica.nodeLibrary.baseURL}${node.icon}`;
+    let cardHtml;
+    if (node.premium) {
+      cardHtml = `
+      <div id="card-${node.label}" class="library-node-card library-node-card-premium">
+        <div class="nodecard-cover">
+          <div style="position: relative; top: 21px; left: 14px; width:92px; background: white;">
+            <img src=${imageUrl}>
+          </div>
+          <div style="display: flex; width: 100%; justify-content: flex-end;margin-right: 13px">
+            <span style="padding: 2px 10px; background: #9c27b0; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em;border-radius: 2px;color: white;">
+            Premium
+            </span>
+          </div>
+        </div>
+  
+        <div class="nodecard-info">
+          <span class="node-author">${node.author}</span>
+          <span>${node.label}</span>
+        </div>
+  
+        <div class="nodecard-details">
+          <span>${node.description}</span>
+        </div>
+        <div class="nodecard-actions" style="color: black; font-weight: 500; padding-top: 15px">
+          <span class="contact-sales" style="font-size:13px; text-transform: uppercase; font-weight: 500; letter-spacing: -0.01em; color:#9c27b0;">
+          Contact Sales
+          </span>
+        </div>
+      </div>
+      `;
+    } else {
+      cardHtml = `
+      <div id="card-${node.label}" class="library-node-card">
+        <div class="nodecard-cover">
+          <div style="position: relative; top: 21px; left: 14px; width:92px; background: white;">
+            <img src=${imageUrl} />
+          </div>
+          <div style="display: flex; width: 100%; justify-content: flex-end;margin-right: 13px">
+            <span style="padding: 2px 10px; background: #56B373; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em;border-radius: 2px;color: white;">
+            Free
+            </span>
+          </div>
+        </div>
+  
+        <div class="nodecard-info">
+          <span class="node-author">${node.author}</span>
+          <span>${node.label}</span>
+        </div>
+  
+        <div class="nodecard-details">
+          <span>${node.description}</span>
+        </div>
+        <div class="nodecard-actions">
+          <button id="btn-${node.label}" type="button" class="card-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only secondary">
+            Install
+          </button>
+        </div>
+      </div>
+      `;
+    }
+
+    return cardHtml;
+  }
+
+  function addCardToGrid(node, cardHtml, uievent) {
+    // Attach the html to the grid
+    $(cardHtml).appendTo($('#library-grid'));
+    // Update the style and behaviour of the card
+    updateCard(uievent, node);
+  }
+
+  function renderNodes() {
+    showLoading();
+    window.__kumologica.main.dispatch(
+      'modal-node-library:fetch-installed-nodes',
+      null
+    );
+
+    // The installed nodes will be done in the callback of above call ....
+  }
+
+  function showLoading() {
+    hideConnectionError();
+    $('#loading-library').show();
+    $('#library-grid').hide();
+   
+  }
+
+  function hideLoading() {
+    $('#loading-library').hide();
+    $('#library-grid').show();
+  }
+
+  async function init() {
+    // Setup the event controller to listen to events comming from main-process
+    initEventController();
+
+    // fetch the list of installed nodes and available nodes
+    renderNodes();
+
+    // Attach click event to launch the node library from the sidebar-footer
+    $('#launch-node-library').click((event) => {
+      event.preventDefault();
+      window.__kumologica.main.dispatch('show-node-library-modal', null);
+    });
+  }
+  return {
+    init: init,
+  };
+})();

package/src/app/ui/editor-client/src/js/modals/modal-welcome.js

@@ -0,0 +1,102 @@
+RED.modalWelcome = (function() {
+    let headless = true;
+   // let recentProjects = [];
+  
+   
+    // Listening from the main process the list of the recent projects
+    let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+  
+    ipcRenderer.on('dependencies', (e, msg) => {
+      $('#dependenciesNpm i').removeClass('fa-question');  
+      $('#dependenciesNpm').css('color', msg.npm.status? 'green': 'red');
+      $('#dependenciesNpm i').addClass( msg.npm.status? 'fa-check': 'fa-times');  
+      RED.popover.tooltip($('#dependenciesNpm'), msg.npm.info);
+     
+      $('#dependenciesAws i').removeClass('fa-question');  
+      $('#dependenciesAws').css('color', msg.aws.status? 'green': 'red');
+      $('#dependenciesAws i').addClass( msg.aws.status? 'fa-check': 'fa-times');  
+      RED.popover.tooltip($('#dependenciesAws'), msg.aws.info);
+  
+      $('#dependenciesProfile i').removeClass('fa-question');  
+      $('#dependenciesProfile').css('color', msg.awsProfile.status? 'green': 'red');
+      $('#dependenciesProfile i').addClass( msg.awsProfile.status? 'fa-check': 'fa-times');  
+      RED.popover.tooltip($('#dependenciesProfile'), msg.awsProfile.info);
+    });
+  
+    // app version 
+    ipcRenderer.send('app_version');
+  
+    ipcRenderer.on('app_version', (event, arg) => {
+        ipcRenderer.removeAllListeners('app_version');
+        $('#ideversion').text(`Version: ${arg.version}`);
+    });
+    
+    function generateHeaderIPC(operation) {
+      let prefix = 'modal-welcome';
+      //let prefix = headless ? 'modal-welcome' : 'modal-home';
+      console.log(`${prefix}:${operation}`);
+      return `${prefix}:${operation}`;
+    }
+  
+    function init() {
+      // Click event for "Open another from computer..."
+      $('#openProjectWelcomeBtn').click(e => {
+        e.preventDefault();
+        window.__kumologica.main.dispatch(
+          generateHeaderIPC('show-dialog-openproject'),
+          null
+        );
+        return false;
+      });
+  
+      // Click event for "New Project from scratch"
+      $('#actionNewProjectWelcome').click(function(event) {
+        event.preventDefault();
+        window.__kumologica.main.dispatch(
+          generateHeaderIPC('show-dialog-newproject'),
+          null
+        );
+      });
+  
+      $('#actionNewProjectWelcome').mouseenter(() => {
+        $('#action-new-title').addClass('actionSelected');
+        $('#action-new-logo').addClass('fa-file');
+        $('#action-new-logo').removeClass('fa-file-o');
+        $('#action-new-logo').addClass('actionSelected');
+      });
+  
+      $('#actionNewProjectWelcome').mouseleave(() => {
+        $('#action-new-title').removeClass('actionSelected');
+        $('#action-new-logo').removeClass('actionSelected');
+        $('#action-new-logo').removeClass('fa-file');
+        $('#action-new-logo').addClass('fa-file-o');
+      });
+  
+      // Open project actions
+      $('#actionOpenProjectWelcome').click(function(event) {
+        event.preventDefault();
+        window.__kumologica.main.dispatch(
+          generateHeaderIPC('show-dialog-openproject'),
+          null
+        );
+      });
+  
+      $('#actionOpenProjectWelcome').mouseenter(() => {
+        $('#action-open-title').addClass('actionSelected');
+        $('#action-open-logo').addClass('actionSelected');
+        $('#action-open-logo').addClass('fa-folder-open');
+        $('#action-open-logo').removeClass('fa-folder-open-o');
+      });
+  
+      $('#actionOpenProjectWelcome').mouseleave(() => {
+        $('#action-open-title').removeClass('actionSelected');
+        $('#action-open-logo').removeClass('actionSelected');
+        $('#action-open-logo').removeClass('fa-folder-open');
+        $('#action-open-logo').addClass('fa-folder-open-o');
+      });
+    }
+    return {
+      init: init
+    };
+  })();
+