added styles to widgets

js/OliveUI.js

@@ -189,6 +189,18 @@
 
       clone: function (obj) {
         return JSON.parse(JSON.stringify(obj));
+      },
+
+      isStyled: function(className) {
+        var re = new RegExp('(^|,)\\s*\\.' + className + '\\s*(\\,|$)');
+        var ret = false;
+        $.each(document.styleSheets, function () {
+          $.each(this.cssRules || this.rules, function () {
+            if (re.test(this.selectorText))
+              ret = true;
+          });
+        });
+        return ret;
       }
     };
     return _utils;

js/modules/newCodeEditor.js

@@ -12,9 +12,19 @@
     var _state = {
       editor: CodeMirror(_dom.rootDiv[0], config)
     };
+
     return {
       render: function () {
-        return _dom.rootDiv;
+        return _dom.rootDiv.prepend(`<style>
+            .CodeMirror {
+              height: auto !important;
+              border: 1px solid #ddd !important;
+            }
+            .CodeMirror-scroll {
+              max-height: 200px !important;
+              min-height: 100px !important;
+            }
+          </style>`);
       },
       refresh: function () {
         _state.editor.refresh();

js/modules/newMicroserviceCallConfigUI.js

@@ -11,6 +11,8 @@
       },
       init: {
         initInputTable: function (_dom, _state, config) {
+          if (typeof $.fn.popover != 'function') throw 'Bootstrap popover Required';
+
           _statics.services.getMicroserviceIOInfo(config.mscEndpoint, config.microserviceId, config.operationId, function (msIOInfo) {
             _state.loadCompleted = false;
             _dom.tableTbody.empty();
@@ -49,6 +51,8 @@
           };
         },
         render: function (_dom) {
+          if (!Utils.isStyled('input-group')) throw 'Bootstrap css Required';
+
           return $('<div>').append(
             $('<table class="table table-condensed table-hover">').append(
               _dom.tableTbody),
@@ -160,6 +164,8 @@
     },
     ui: {
       render: function (_dom, _sub, config) {
+        if (!Utils.isStyled('input-group')) throw 'Bootstrap css Required';
+
         return _dom.rootNode.empty().append(
           _dom.messageDiv,
           $('<div>').toggle(config.showServiceNameTxt).append(

js/modules/newMicroserviceCallViewUI.js

@@ -44,7 +44,15 @@
         return _dom;
       },
       render: function (_dom) {
-        return $('<div>').append(
+        return $('<div>').prepend(
+          `<style>
+            .loading {
+              width: 100%;
+              height: 100%;
+              background: rgba(0,0,0,.05) url(https://damianofalcioni.github.io/CDN/icons/loading.gif) center center no-repeat;
+            }
+            </style>`
+        ).append(
           _dom.messageDiv,
           _dom.outputDiv);
       },

js/modules/newMicroserviceCallWidget.js

+(function (OliveUI, newMicroserviceCallViewUI, newMicroserviceCallConfigUI) {
+  //DO NOT LOAD THIS FILE. OliveUI.createWidget not yet available
+
+  OliveUI.createWidget(function (widget) {
+
+    var config = {
+      mscEndpoint: '',
+      microserviceId: '',
+      operationId: ''
+    };
+
+    return {
+      mappingFn: function (configOutput, renderInput) {
+        if (!configOutput.microserviceInputs) throw 'Widget not configured';
+        Object.assign(renderInput, {
+          microserviceId: config.microserviceId,
+          operationId: config.operationId,
+          microserviceInputJSON: JSON.stringify(configOutput.microserviceInputs),
+          microserviceOutputAdaptAlg: configOutput.microserviceOutputAdaptAlg,
+        });
+        if (configOutput.serviceName)
+          widget.setWidgetTitle(configOutput.serviceName);
+      },
+      renderModule: newMicroserviceCallViewUI({
+        mscEndpoint: config.mscEndpoint
+      }),
+      configModule: newMicroserviceCallConfigUI({
+        mscEndpoint: config.mscEndpoint,
+        microserviceId: config.microserviceId,
+        operationId: config.operationId,
+        forceStartWhenStopped: true,
+        showServiceNameTxt: true
+      })
+    };
+  });
+
+/*
+
+  var _static = {
+    init: function (_dom, _sub, config) {
+      _sub.widget = OliveUI.createWidget({
+        mappingFn: function (configOutput, renderInput) {
+          if (!configOutput.microserviceInputs) throw 'Widget not configured';
+          Object.assign(renderInput, {
+            microserviceId: config.microserviceId,
+            operationId: config.operationId,
+            microserviceInputJSON: JSON.stringify(configOutput.microserviceInputs),
+            microserviceOutputAdaptAlg: configOutput.microserviceOutputAdaptAlg,
+          });
+          if (configOutput.serviceName)
+            widget.setWidgetTitle(configOutput.serviceName);
+        },
+        renderModule: newMicroserviceCallViewUI({
+          mscEndpoint: config.mscEndpoint
+        }),
+        configModule: newMicroserviceCallConfigUI({
+          mscEndpoint: config.mscEndpoint,
+          microserviceId: config.microserviceId,
+          operationId: config.operationId,
+          forceStartWhenStopped: true,
+          showServiceNameTxt: true
+        })
+      });
+    }
+  };
+
+  var _newMicroserviceCallWidget = function (config = {}) {
+    config.mscEndpoint = config.mscEndpoint || '';
+    config.microserviceId = config.microserviceId || '';
+    config.operationId = config.operationId || '';
+
+    var _dom = {
+      root: $('<div>')
+    };
+
+    var _sub = {
+      widget: null
+    };
+
+    _static.init(_dom, _sub, config);
+
+    return {
+      render: function () {
+        return _dom.root.append(
+          _sub.widget.render()
+        );
+      }
+    };
+  };
+
+  OliveUI.modules.newMicroserviceCallWidget = _newMicroserviceCallWidget;
+*/
+}(OliveUI, OliveUI.modules.newMicroserviceCallViewUI, OliveUI.modules.newMicroserviceCallConfigUI));

js/modules/newWidgetView.js

@@ -4,7 +4,21 @@
   var _statics = {
     ui: {
       render: function (_dom) {
+        if (!Utils.isStyled('panel-title')) throw 'Bootstrap css Required';
+
         return _dom.panelRoot.append(
+          `<style>
+            .link{
+              cursor: pointer;
+              color: #428bca;
+              white-space: nowrap;
+            }
+            .link:hover{
+              color: #FFFFFF;
+              background-color: #428bca;
+            }
+          </style>`
+        ).append(
           _dom.panelHeader.append(
             $('<h4 class="panel-title">').append(
               _dom.panelTitle,