@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/project-info.js

@@ -0,0 +1,232 @@
+RED.projectInfo = (function () {
+  let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+  
+  let projectDir = '';
+  let projectName = '';
+  let fullPathFlowFile = '';
+
+  var disabled = false;
+  var dialog = null;
+  var searchInput;
+  var visible = false;
+
+  let config = null;
+   
+  ipcRenderer.on('setProjectInfo', (event, msg) => {
+    projectDir = msg.payload.projectDir;
+    projectName = msg.payload.projectName;
+    fullPathFlowFile = msg.payload.fullPathFlowFile;
+  });
+
+  function search(val) {}
+
+  function createDialog() {
+    dialog = $('<div>', {
+      id: 'red-ui-project-info',
+      class: 'red-ui-project-info',
+    }).appendTo('#main-container');
+
+    let wrapperDiv = $('<div>', {
+      class: 'red-ui-project-body',
+    }).appendTo(dialog);
+
+    // Project Information Section
+    let projectSecDiv = $('<div>', {
+      class: 'project-info-section',
+    }).appendTo(wrapperDiv);
+
+    $(`
+    <div>
+      <label class="projectInfoSectionLabel">Project</label>
+      <div class="projectInfoSectionBody">
+        <div class="projectInfoSectionRow">
+          <label class="projectInfoLabel">Name:</label>
+          <label class="projectInfoValue">${projectName}</label>
+        </div>
+        <div class="projectInfoSectionRow">
+          <label class="projectInfoLabel">Location:</label>
+          <label class="projectInfoValue">${projectDir}</label>
+        </div>
+        <div class="projectInfoSectionRow jcfe pt-10">
+          <a id="project-info-open-project" class="sidebar-header-button" href="#">
+            <i class="icofont-search-folder" style="font-weight: bold"></i>  
+            Open Location...
+          </a>
+          <a id="project-info-export-flow" class="sidebar-header-button" href="#">
+            <i class="icofont-search-document" style="font-weight: bold"></i>  
+            View Flow
+          </a>
+        </div>
+      </div>
+    </div>
+    `).appendTo(projectSecDiv);
+
+    // Server Information Section
+    let serverSecDiv = $('<div>', {
+      class: 'project-info-section',
+    }).appendTo(wrapperDiv);
+
+    $(`
+    <div>
+      <label class="projectInfoSectionLabel">Server</label>
+      <div class="projectInfoSectionBody">
+        <div class="projectInfoSectionRow">
+          <label class="projectInfoLabel">Address:</label>
+          <label class="projectInfoValue">localhost:1880</label>
+        </div>
+        <div class="projectInfoSectionRow">
+          <label class="projectInfoLabel">Status:</label>
+          <label class="projectInfoValue">Running</label>
+        </div>
+        <div class="projectInfoSectionRow">
+          <label class="projectInfoLabel">Version:</label>
+          <label class="projectInfoValue">${window.__kumologica.runtime.version}</label>
+        </div>
+        <div class="projectInfoSectionRow" style="justify-content: space-between;">
+          <div style="display: flex; padding-top: 3px">
+           <!-- <input id="auto-deployment-cb" type="checkbox" style="margin-right: 5px">Auto Deployment -->
+          </div>
+          <div>
+            <a id="project-info-restart" class="sidebar-header-button" href="#">
+              <i class="fa fa-refresh"></i>  
+              Reload
+            </a>
+            </div>
+        </div>
+      </div>
+    </div>
+    `).appendTo(serverSecDiv);
+
+    // Actions
+
+    $('#auto-deployment-cb').change(function () {
+        if (this.checked) {
+          RED.events.emit('editor:autosave:on');
+        } else {
+          RED.events.emit('editor:autosave:off');
+        }
+        saveSettings();
+    });
+
+    $('#project-info-restart').click((e) => {
+      e.preventDefault();
+      window.__kumologica.main.dispatch('restart-requested');
+      hide();
+    });
+
+    RED.popover.tooltip($('#project-info-export-flow'), fullPathFlowFile );
+    
+    $('#project-info-export-flow').click((e) => {
+      e.preventDefault();
+      console.log(`Opening file: ${fullPathFlowFile} ...`)
+      window.__kumologica.libs.openFileOnEditor(fullPathFlowFile);
+      hide();
+    });
+
+    $('#project-info-open-project').click((e) => {
+      e.preventDefault();
+      console.log(`Opening folder: ${projectDir} ...`)
+      window.__kumologica.libs.openFolder(projectDir);
+      hide();
+    });
+
+    // Hint to how to close the search panel
+    $(`
+    <div style="text-align:center; padding: 11px 0 11px 0">Press <span class="escape-key">Esc</span> to close</div>
+    `).appendTo(dialog);
+
+    if (config) {
+      setValues(config);
+    }
+  }
+
+  function saveSettings() {
+    window.__kumologica.settings.projectInfoConfig.setProjectInfoConfig(getValues());
+  }
+
+  function getValues() {
+    let fnAutoDeploy = $('#auto-deployment-cb').prop('checked');
+    return {
+      autoDeploy: fnAutoDeploy
+    };
+  }
+
+  function setValues(values) {
+    $('#auto-deployment-cb').prop('checked', values.autoDeploy);
+  }
+
+  // event triggered from header.js when project-info-config.json file has been loaded
+  // re-set properties in case they were not loaded during init
+  //
+  // At the time of receiving envent, the dialog is most likely not available yet
+  // so saving config into variable. setValues is also called at the end of creation 
+  // of dialog
+  //
+  RED.events.on('project-info-config', function () {
+    config = window.__kumologica.settings.projectInfoConfig.getProjectInfoConfig();
+    if (config){
+      setValues(config);
+      RED.events.emit(config.autoDeploy ? 'editor:autosave:on' : 'editor:autosave:off');
+    }
+  });
+
+  function reveal(node) {
+    hide();
+    RED.header.changeSelectedFlow(node.z);
+    RED.view.reveal(node.id);
+  }
+
+  function show(v) {
+    // Disable the search dialog if opened
+    RED.actions.invoke('core:search:close');
+    RED.actions.invoke('core:settings:close')
+
+    if (disabled) {
+      return;
+    }
+    if (!visible) {
+      RED.keyboard.add('*', 'escape', function () {
+        hide();
+      });
+
+      $('#main-container').click(() => {
+        hide();
+      });
+
+      $('#sidebar-separator').hide();
+      if (dialog === null) {
+        createDialog();
+      }
+      dialog.slideDown(300);
+      // RED.events.emit('search:open');
+      visible = true;
+    }
+  }
+
+  function hide() {
+    if (visible) {
+      $('#main-container').off('click');
+      RED.keyboard.remove('escape');
+      visible = false;
+      $('#sidebar-separator').hide();
+      if (dialog !== null) {
+        dialog.slideUp(200, function () {
+          // searchInput.searchBox('value', '');
+        });
+      }
+      // RED.events.emit('search:close');
+    }
+  }
+
+  function init() {
+    RED.actions.add('core:project-info', show);
+    RED.actions.add('core:project-info:close', hide);
+
+  }
+
+  return {
+    init: init,
+    show: show,
+    hide: hide,
+  };
+})();