@things-factory/integration-ui 6.1.66 → 6.1.69

package/client/viewparts/{scenario-instance-view.js → scenario-instance-view.ts}

@@ -2,133 +2,131 @@ import './scenario-instance-log-view'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { subscribe } from '@operato/graphql'
 import { store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
+@customElement('scenario-instance-view')
 export class ScenarioInstanceView extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          background-color: var(--main-section-background-color);
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--main-section-background-color);
+      }
 
-        [diagram] {
-          flex: 1;
-          height: 100%;
-          border: none;
-        }
+      [diagram] {
+        flex: 1;
+        height: 100%;
+        border: none;
+      }
 
-        [content] {
-          flex: 1;
+      [content] {
+        flex: 1;
 
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
 
-        [tab] {
-          display: flex;
-        }
+      [tab] {
+        display: flex;
+      }
 
-        [tab] span {
-          display: inline;
-          padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
-          border-bottom: 3px solid transparent;
-          color: var(--secondary-color);
-          text-transform: capitalize;
-        }
+      [tab] span {
+        display: inline;
+        padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
+        border-bottom: 3px solid transparent;
+        color: var(--secondary-color);
+        text-transform: capitalize;
+      }
 
-        [tab] span[active] {
-          border-color: var(--primary-color);
-          font-weight: bold;
-        }
+      [tab] span[active] {
+        border-color: var(--primary-color);
+        font-weight: bold;
+      }
 
-        [detail] {
-          flex: 1;
-          background-color: var(--theme-white-color);
-          border-top: var(--border-dark-color);
-          overflow: hidden;
-          padding: var(--padding-wide);
-        }
+      [detail] {
+        flex: 1;
+        background-color: var(--theme-white-color);
+        border-top: var(--border-dark-color);
+        overflow: hidden;
+        padding: var(--padding-wide);
+      }
 
-        [detail] > * {
-          display: none;
-          width: 100%;
-          height: 100%;
-          color: var(--secondary-color);
-        }
+      [detail] > * {
+        display: none;
+        width: 100%;
+        height: 100%;
+        color: var(--secondary-color);
+      }
 
-        [detail] > [active] {
-          display: flex;
-          overflow: auto;
-        }
+      [detail] > [active] {
+        display: flex;
+        overflow: auto;
+      }
 
-        pre {
-          margin: 0;
-        }
+      pre {
+        margin: 0;
+      }
 
-        [detail] ul {
-          margin: 0;
-          padding: 0;
-          flex: 1;
-          list-style: inside '- ';
-        }
-        [detail] li {
-          padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
-          border-bottom: var(--border-dark-color);
-        }
+      [detail] ul {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        list-style: inside '- ';
+      }
+      [detail] li {
+        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
+        border-bottom: var(--border-dark-color);
+      }
 
-        li[active] {
-          font-weight: bold;
-        }
+      li[active] {
+        font-weight: bold;
+      }
 
-        [value] {
-          flex: 1;
+      [value] {
+        flex: 1;
+        overflow: auto;
+        padding: var(--padding-wide);
+      }
+      scenario-instance-log-view [active] {
+        padding: 0;
+      }
+
+      @media only screen and (max-width: 460px) {
+        [info][active] {
+          display: block;
+        }
+        [detail] {
+          padding: var(--padding-default);
           overflow: auto;
-          padding: var(--padding-wide);
         }
-        scenario-instance-log-view [active] {
-          padding: 0;
+        [detail] > * {
+          height: auto;
         }
-
-        @media only screen and (max-width: 460px) {
-          [info][active] {
-            display: block;
-          }
-          [detail] {
-            padding: var(--padding-default);
-            overflow: auto;
-          }
-          [detail] > * {
-            height: auto;
-          }
-          [diagram] {
-            width: 100%;
-            min-height: 500px;
-          }
+        [diagram] {
+          width: 100%;
+          min-height: 500px;
         }
-      `
-    ]
-  }
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      scenarioName: String,
-      instanceName: String,
-      instance: Object,
-      tab: String,
-      step: String,
-      key: String,
-      contextPath: String
-    }
-  }
+  @property({ type: String }) scenarioName?: string
+  @property({ type: String }) instanceName?: string
+  @property({ type: Object }) instance?: any
+  @property({ type: String }) tab?: string
+  @property({ type: String }) step?: string
+  @property({ type: String }) key?: string
+  @property({ type: String }) contextPath?: string
+
+  subscription: any
 
   render() {
     const tab = this.tab || 'info'
@@ -260,5 +258,3 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
     delete this.subscription
   }
 }
-
-customElements.define('scenario-instance-view', ScenarioInstanceView)

package/client/viewparts/{scenario-monitor.js → scenario-monitor.ts}

@@ -4,6 +4,7 @@ import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -14,178 +15,173 @@ function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'
 }
 
+@customElement('scenario-monitor')
 export class ScenarioMonitor extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      scenario: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        margin: var(--margin-default);
+
+        border: var(--border-dark-color);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
+        border-radius: var(--border-radius);
+        position: relative;
+        overflow: hidden;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: row;
-          margin: var(--margin-default);
-
-          border: var(--border-dark-color);
-          background-color: var(--theme-white-color);
-          box-shadow: var(--box-shadow);
-          border-radius: var(--border-radius);
-          position: relative;
-          overflow: hidden;
-        }
+      [desc] {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        width: 200px;
+        color: var(--secondary-color);
+        font-size: var(--fontsize-small);
+      }
 
-        [desc] {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          padding: var(--padding-default);
-          width: 200px;
-          color: var(--secondary-color);
-          font-size: var(--fontsize-small);
-        }
+      [desc] [detail-info] {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: calc(100% - 25px);
+        height: 45px;
+      }
 
-        [desc] [detail-info] {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: calc(100% - 25px);
-          height: 45px;
-        }
+      [desc] strong {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--fontsize-large);
+      }
 
-        [desc] strong {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: var(--fontsize-large);
-        }
+      [desc] span {
+        display: block;
+        position: absolute;
+        top: 0px;
+        right: var(--padding-default);
+        font-size: 40px;
+        font-weight: bold;
+        text-align: right;
+      }
 
-        [desc] span {
-          display: block;
-          position: absolute;
-          top: 0px;
-          right: var(--padding-default);
-          font-size: 40px;
-          font-weight: bold;
-          text-align: right;
-        }
+      [desc] [schedule] * {
+        vertical-align: middle;
+        display: inline;
+      }
 
-        [desc] [schedule] * {
-          vertical-align: middle;
-          display: inline;
-        }
+      [desc] [schedule] {
+        background-color: #f1f1f1;
+        border-radius: 20px;
+        margin: var(--margin-default) 0;
+        padding: var(--padding-narrow);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        line-height: 8px;
+      }
 
-        [desc] [schedule] {
-          background-color: #f1f1f1;
-          border-radius: 20px;
-          margin: var(--margin-default) 0;
-          padding: var(--padding-narrow);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 12px;
-          line-height: 8px;
-        }
+      [buttons] {
+        --mdc-icon-button-size: 24px;
+        --mdc-icon-size: 24px;
+        border-top: var(--border-dark-color);
+        padding: var(--padding-narrow) 0 0 0;
+        text-align: right;
+      }
 
-        [buttons] {
-          --mdc-icon-button-size: 24px;
-          --mdc-icon-size: 24px;
-          border-top: var(--border-dark-color);
-          padding: var(--padding-narrow) 0 0 0;
-          text-align: right;
-        }
+      [buttons] mwc-icon-button {
+        color: var(--primary-color);
+      }
 
-        [buttons] mwc-icon-button {
-          color: var(--primary-color);
-        }
+      [buttons][detail] {
+        display: flex;
+        flex-direction: column-reverse;
+        margin-bottom: auto;
+      }
 
-        [buttons][detail] {
-          display: flex;
-          flex-direction: column-reverse;
-          margin-bottom: auto;
-        }
+      [desc] mwc-icon {
+        border-radius: 50%;
+        color: var(--theme-white-color);
+        font-size: 18px;
+      }
 
-        [desc] mwc-icon {
-          border-radius: 50%;
-          color: var(--theme-white-color);
-          font-size: 18px;
-        }
+      :host([mode='detail']) [schedule] {
+        margin: var(--margin-default) 0 0 0;
+      }
 
-        :host([mode='detail']) [schedule] {
-          margin: var(--margin-default) 0 0 0;
-        }
+      :host([mode='detail']) [desc] [buttons] {
+        display: none;
+      }
+      :host([mode='detail']) [buttons] {
+        border-top: none;
+        padding: var(--padding-default);
+      }
 
-        :host([mode='detail']) [desc] [buttons] {
-          display: none;
-        }
-        :host([mode='detail']) [buttons] {
-          border-top: none;
-          padding: var(--padding-default);
-        }
+      ul {
+        flex: 1;
 
-        ul {
-          flex: 1;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          list-style: none;
-          margin: 0;
-          padding: 0;
-        }
+      ul > li {
+        position: relative;
+        margin: var(--margin-default);
+        min-width: 140px;
+        max-width: 180px;
+        border: 1px solid black;
+        border-radius: var(--border-radius);
+        font-size: 12px;
+      }
 
-        ul > li {
-          position: relative;
-          margin: var(--margin-default);
-          min-width: 140px;
-          max-width: 180px;
-          border: 1px solid black;
-          border-radius: var(--border-radius);
-          font-size: 12px;
-        }
+      li span {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.8);
+      }
 
-        li span {
-          display: block;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(255, 255, 255, 0.8);
+      @media screen and (max-width: 480px) {
+        :host {
+          margin: var(--margin-narrow);
+          max-width: 46%;
         }
 
-        @media screen and (max-width: 480px) {
-          :host {
-            margin: var(--margin-narrow);
-            max-width: 46%;
-          }
-
-          :host([mode='detail']) {
-            max-width: initial;
-          }
+        :host([mode='detail']) {
+          max-width: initial;
+        }
 
-          [desc] {
-            padding: var(--padding-narrow);
-          }
+        [desc] {
+          padding: var(--padding-narrow);
+        }
 
-          :host([mode='detail']) > [desc] {
-            max-width: 125px;
-          }
+        :host([mode='detail']) > [desc] {
+          max-width: 125px;
+        }
 
-          [desc] [detail-info] {
-            height: 38px;
-          }
+        [desc] [detail-info] {
+          height: 38px;
+        }
 
-          [desc] span {
-            font-size: 36px;
-          }
+        [desc] span {
+          font-size: 36px;
         }
-      `
-    ]
-  }
+      }
+    `
+  ]
+
+  @property({ type: Object }) scenario: any
+  @property({ type: String }) mode?: string
 
   render() {
     const scenario = this.scenario || {}
@@ -300,5 +296,3 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
     })
   }
 }
-
-window.customElements.define('scenario-monitor', ScenarioMonitor)