npm - @things-factory/auth-ui - Versions diffs - 9.2.5 → 10.0.0-beta.10 - Mend

@things-factory/auth-ui 9.2.5 → 10.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist-client/pages/appliance/appliance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n [button-primary] {\n background-color: var(--button-primary-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n margin: var(--button-margin);\n padding: var(--button-primary-padding);\n color: var(--button-primary-color);\n font: var(--button-primary-font);\n text-transform: var(--button-text-transform);\n\n text-decoration: none;\n }\n\n [button-primary]:hover {\n background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] {\n background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n input,\n select {\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n\n form {\n max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n [grid-span] {\n grid-column: span 2;\n }\n\n button {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n button,\n input[type='submit'],\n [button-in-field] {\n background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\n\n button:hover,\n input[type='submit']:hover {\n border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [button-in-field] {\n border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) appliance: any\n @property({ type: String }) accessToken?: string\n @property({ type: Object }) _accessTokenInfo: any\n\n @queryAll('[clipboard-copy]') copybuttons\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'devices',\n text: this.appliance.name\n }\n }\n }\n\n render() {\n var appliance = this.appliance \|\| {}\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>devices</md-icon> ${appliance.name}</h2>\n <p page-description>${appliance.description}</p>\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">${i18next.t('field.name')}</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">${i18next.t('field.description')}</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n </div>\n\n <div field>\n <label for=\"brand\">${i18next.t('field.brand')}</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n </div>\n\n <div field>\n <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n </div>\n\n <div field>\n <label for=\"model\">${i18next.t('field.model')}</label>\n <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n </div>\n\n <div field>\n <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance credential')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">${i18next.t('label.access token')}</label>\n <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>\n ${i18next.t('button.copy')}\n </button>\n ${accessTokenExp\n ? html`<div input-hint>\n ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>\n <button @click=${this.generateApplianceSecret.bind(this)}>\n ${i18next.t('button.generate new access token')}\n </button>\n <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) {\n /\n If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n /\n if (changes.has('appliance')) {\n const { accessToken } = this.appliance \|\| {}\n this.accessToken = accessToken\n }\n\n if (changes.has('accessToken')) {\n this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchAppliance()\n }\n }\n\n async fetchAppliance() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appliance(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appliance = response.data.appliance\n }\n\n async updateAppliance(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: AppliancePatch!) {\n updateAppliance(id: $id, patch: $patch) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.appliance = response.data.updateAppliance\n console.log('update sucess')\n }\n }\n\n async deleteAppliance(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteAppliance(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('delete fail')\n } else {\n navigate('appliance-home')\n }\n }\n\n async generateApplianceSecret(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n generateApplianceSecret(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('generate-appliance-secret fail')\n } else {\n this.appliance = response.data.generateApplianceSecret\n console.log('generate-appliance-secret sucess')\n }\n }\n\n async expTimer(exp) {\n const DAY = 24 * 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) {\n var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n await sleep(1000)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends PageView { static styles = [\n css`\n :host { display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [icon] { position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n\n [icon] img { max-width: 100%;\n max-height: 100%;\n }\n\n [button-primary] { background-color: var(--button-primary-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n margin: var(--button-margin);\n padding: var(--button-primary-padding);\n color: var(--button-primary-color);\n font: var(--button-primary-font);\n text-transform: var(--button-text-transform);\n\n text-decoration: none;\n }\n\n [button-primary]:hover { background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] { background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n label { font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n input,\n select { border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n\n select:focus,\n input:focus,\n button { outline: none;\n }\n\n form { max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset { margin: 0;\n margin-top: -15px;\n }\n\n fieldset { border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend { padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] { display: flex;\n flex-direction: column;\n position: relative;\n }\n\n [grid-span] { grid-column: span 2;\n }\n\n button { display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n button,\n input[type='submit'],\n [button-in-field] { background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\n\n button:hover,\n input[type='submit']:hover { border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [button-in-field] { border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] { font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) { [field] { grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) appliance: any\n @property({ type: String }) accessToken?: string\n @property({ type: Object }) _accessTokenInfo: any\n\n @queryAll('[clipboard-copy]') copybuttons\n\n private clipboard?: Clipboard\n\n get context() { return { title: { icon: 'devices',\n text: this.appliance.name\n }\n }\n }\n\n render() { var appliance = this.appliance \|\| {}\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>devices</md-icon> ${appliance.name}</h2>\n <p page-description>${appliance.description}</p>\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">${i18next.t('field.name')}</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">${i18next.t('field.description')}</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n </div>\n\n <div field>\n <label for=\"brand\">${i18next.t('field.brand')}</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n </div>\n\n <div field>\n <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n </div>\n\n <div field>\n <label for=\"model\">${i18next.t('field.model')}</label>\n <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n </div>\n\n <div field>\n <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance credential')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">${i18next.t('label.access token')}</label>\n <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>\n ${i18next.t('button.copy')}\n </button>\n ${accessTokenExp\n ? html`<div input-hint>\n ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>\n <button @click=${this.generateApplianceSecret.bind(this)}>\n ${i18next.t('button.generate new access token')}\n </button>\n <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>\n </form>\n `\n }\n\n firstUpdated() { this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) { /\n If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n /\n if (changes.has('appliance')) { const { accessToken } = this.appliance \|\| {}\n this.accessToken = accessToken\n }\n\n if (changes.has('accessToken')) { this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { await this.fetchAppliance()\n }\n }\n\n async fetchAppliance() { const response = await client.query({ query: gql`\n query ($id: String!) { appliance(id: $id) { id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n this.appliance = response.data.appliance\n }\n\n async updateAppliance(e) { e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => { patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!, $patch: AppliancePatch!) { updateAppliance(id: $id, patch: $patch) { id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: { id,\n patch\n }\n })\n\n if (response.errors) { console.error('update fail')\n } else { this.appliance = response.data.updateAppliance\n console.log('update sucess')\n }\n }\n\n async deleteAppliance(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { deleteAppliance(id: $id)\n }\n `,\n variables: { id\n }\n })\n\n if (response.errors) { console.error('delete fail')\n } else { navigate('appliance-home')\n }\n }\n\n async generateApplianceSecret(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { generateApplianceSecret(id: $id) { id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: { id\n }\n })\n\n if (response.errors) { console.error('generate-appliance-secret fail')\n } else { this.appliance = response.data.generateApplianceSecret\n console.log('generate-appliance-secret sucess')\n }\n }\n\n async expTimer(exp) { const DAY = 24 * 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) { var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n await sleep(1000)\n }\n }\n}\n"]}

package/dist-client/pages/appliance/home.js CHANGED Viewed

@@ -4,65 +4,54 @@ import '@material/web/button/outlined-button.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { connect } from 'pwa-helpers/connect-mixin.js';
 import { client } from '@operato/graphql';
-import { navigate, PageView, store } from '@operato/shell';
-let Appliances = class Appliances extends connect(store)(PageView) {
+import { navigate, PageView } from '@operato/shell';
+let Appliances = class Appliances extends PageView {
     constructor() {
         super(...arguments);
         this.appliances = [];
     }
     static { this.styles = [
         css `
-      :host {
-        background-color: var(--md-sys-color-background);
+      :host {         background-color: var(--md-sys-color-background);
         padding: var(--spacing-large);
         overflow: auto;
-      }
+ }
-      md-elevated-button {
-        text-transform: capitalize;
-      }
+      md-elevated-button {         text-transform: capitalize;
+ }
-      md-outlined-button {
-        float: right;
+      md-outlined-button {         float: right;
         margin-top: var(--spacing-medium);
         text-transform: capitalize;
-      }
+ }
-      h2 {
-        margin: var(--title-margin);
+      h2 {         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
-      }
+ }
-      [page-description] {
-        margin: var(--page-description-margin);
+      [page-description] {         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
-      }
+ }
-      table {
-        width: 100%;
+      table {         width: 100%;
         margin: var(--spacing-large) 0;
         border-collapse: collapse;
-      }
+ }
-      tr {
-        background-color: var(--tr-background-color);
-      }
+      tr {         background-color: var(--tr-background-color);
+ }
-      tr:nth-child(odd) {
-        background-color: var(--tr-background-odd-color);
-      }
+      tr:nth-child(odd) {         background-color: var(--tr-background-odd-color);
+ }
-      tr:hover {
-        background-color: var(--tr-background-hover-color);
-      }
+      tr:hover {         background-color: var(--tr-background-hover-color);
+ }
-      th {
-        border-top: var(--th-border-top);
+      th {         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
         padding: var(--th-padding);
@@ -70,41 +59,34 @@ let Appliances = class Appliances extends connect(store)(PageView) {
         color: var(--th-color);
         text-transform: var(--th-text-transform);
         text-align: left;
-      }
+ }
-      td {
-        padding: var(--td-padding);
+      td {         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
-      }
+ }
-      td a {
-        color: var(--md-sys-color-primary);
+      td a {         color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
         display: block;
         text-decoration: none;
-      }
+ }
-      .text-align-center {
-        text-align: center;
-      }
+      .text-align-center {         text-align: center;
+ }
-      .text-align-right {
-        text-align: right;
-      }
+      .text-align-right {         text-align: right;
+ }
-      @media screen and (max-width: 480px) {
-        :host {
-          padding: var(--spacing-medium);
-        }
-      }
+      @media screen and (max-width: 480px) {         :host {           padding: var(--spacing-medium);
+ }
+ }
     `
     ]; }
     get context() {
-        return {
-            title: `appliance home`,
+        return { title: `appliance home`,
             help: 'auth/appliance'
         };
     }
@@ -147,18 +129,14 @@ let Appliances = class Appliances extends connect(store)(PageView) {
         }
     }
     async fetchAppliances() {
-        const response = await client.query({
-            query: gql `
-        query {
-          appliances {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query {           appliances {             items {               id
               name
               description
-            }
+ }
             total
-          }
-        }
+ }
+ }
       `
         });
         if (!response.errors) {

package/dist-client/pages/appliance/home.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,~~OAAO,EAAE,~~MAAM,~~8BAA8B,CAAA;AAEtD,OAAO,~~EAAE,MAAM,~~EAAE,MAAM,~~kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~KAAK,EAAE,~~MAAM,gBAAgB,CAAA;~~AAG1D~~,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,~~OAAO,CAAC,KAAK,CAAC,CAAC,~~QAAQ~~,CAAC~~;~~IAAjD~~;;~~QA4F6B~~,eAAU,GAAU,EAAE,CAAA;~~IAwEnD~~,CAAC;~~aAnKQ~~,WAAM,GAAG;~~QACd~~,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF~~;KACF,~~AAzFY~~,~~CAyFZ~~;IAID,IAAI,OAAO;~~QACT~~,OAAO~~;YACL~~,KAAK,EAAE,gBAAgB;~~YACvB~~,IAAI,EAAE,gBAAgB;~~SACvB~~,CAAA;~~IACH~~,CAAC;~~IAED~~,MAAM;~~QACJ~~,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;~~QAEtC~~,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;;;;;;;;;;UAU9D,UAAU,CAAC,GAAG,CACd,SAAS,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGD,aAAa,SAAS,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,IAAI;kBACrD,SAAS,CAAC,WAAW;;;;;;WAM5B,CACF;;KAEJ,CAAA;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,WAAW;~~QACf~~,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;~~YAChB~~,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,CAAA;~~QACxD~~,CAAC;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,eAAe;~~QACnB~~,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC~~;YAClC~~,KAAK,EAAE,GAAG,CAAA~~;;;;;;;;;;;OAWT~~;~~SACF~~,CAAC,CAAA;~~QAEF~~,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;~~YACrB~~,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;~~QACjC~~,CAAC;~~IACH~~,CAAC;;~~AAvE0B~~;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAuB;~~AA5F7C~~,UAAU;IADf,aAAa,CAAC,gBAAgB,CAAC;GAC1B,UAAU,~~CAoKf~~","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ~~connect } from 'pwa-helpers/connect-mixin.js'\n\nimport {~~ client } from '@operato/graphql'\nimport { navigate, PageView, ~~store~~ } from '@operato/shell'\n\n@customElement('appliance-home')\nclass Appliances extends ~~connect(store)(~~PageView) {\n static styles = [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button {\n text-transform: capitalize;\n }\n\n md-outlined-button {\n float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table {\n width: 100%;\n margin: var(--spacing-large) 0;\n border-collapse: collapse;\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n th {\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td {\n padding: var(--td-padding);\n border-bottom: var(--td-border-bottom);\n font: var(--td-font);\n color: var(--td-color);\n }\n\n td a {\n color: var(--md-sys-color-primary);\n font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center {\n text-align: center;\n }\n\n .text-align-right {\n text-align: right;\n }\n\n @media screen and (max-width: 480px) {\n :host {\n padding: var(--spacing-medium);\n }\n }\n `\n ]\n\n @property({ type: Array }) appliances: any[] = []\n\n get context() {\n return {\n title: `appliance home`,\n help: 'auth/appliance'\n }\n }\n\n render() {\n var appliances = this.appliances \|\| []\n\n return html`\n <div>\n <h2>Registered Appliances</h2>\n <p page-description>\n What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building\n for. The appliance type can’t be changed after it’s created.\n </p>\n <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>\n </div>\n\n <table>\n <tr>\n <th>appliance name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${appliances.map(\n appliance => html`\n <tr>\n <td>\n <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>\n ${appliance.description}\n </td>\n <td>OK</td>\n <td class=\"text-align-center\">1</td>\n <td>draft</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n async pageUpdated() {\n if (this.active) {\n this.appliances = (await this.fetchAppliances()).items\n }\n }\n\n async fetchAppliances() {\n const response = await client.query({\n query: gql`\n query {\n appliances {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) {\n return response.data.appliances\n }\n }\n}\n"]}
1	+ {"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;IAAjC;;QA2E6B,eAAU,GAAU,EAAE,CAAA;IA6DnD,CAAC;aAxI4C,WAAM,GAAG;QAClD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AAzEgD,CAyEhD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,gBAAgB;YACtD,IAAI,EAAE,gBAAgB;SAC1B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAEnD,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;;;;;;;;;;UAU9D,UAAU,CAAC,GAAG,CACd,SAAS,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGD,aAAa,SAAS,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,IAAI;kBACrD,SAAS,CAAC,WAAW;;;;;;WAM5B,CACF;;KAEJ,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,WAAW;QAAS,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,CAAA;QAC1G,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,eAAe;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQ/E;SACL,CAAC,CAAA;QAEC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;QAChE,CAAC;IACD,CAAC;;AA5D2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAuB;AA3E7C,UAAU;IADf,aAAa,CAAC,gBAAgB,CAAC;GAC1B,UAAU,CAwIf","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('appliance-home')\nclass Appliances extends PageView { static styles = [\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button { text-transform: capitalize;\n }\n\n md-outlined-button { float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table { width: 100%;\n margin: var(--spacing-large) 0;\n border-collapse: collapse;\n }\n\n tr { background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) { background-color: var(--tr-background-odd-color);\n }\n\n tr:hover { background-color: var(--tr-background-hover-color);\n }\n\n th { border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td { padding: var(--td-padding);\n border-bottom: var(--td-border-bottom);\n font: var(--td-font);\n color: var(--td-color);\n }\n\n td a { color: var(--md-sys-color-primary);\n font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center { text-align: center;\n }\n\n .text-align-right { text-align: right;\n }\n\n @media screen and (max-width: 480px) { :host { padding: var(--spacing-medium);\n }\n }\n `\n ]\n\n @property({ type: Array }) appliances: any[] = []\n\n get context() { return { title: `appliance home`,\n help: 'auth/appliance'\n }\n }\n\n render() { var appliances = this.appliances \|\| []\n\n return html`\n <div>\n <h2>Registered Appliances</h2>\n <p page-description>\n What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building\n for. The appliance type can’t be changed after it’s created.\n </p>\n <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>\n </div>\n\n <table>\n <tr>\n <th>appliance name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${appliances.map(\n appliance => html`\n <tr>\n <td>\n <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>\n ${appliance.description}\n </td>\n <td>OK</td>\n <td class=\"text-align-center\">1</td>\n <td>draft</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n async pageUpdated() { if (this.active) { this.appliances = (await this.fetchAppliances()).items\n }\n }\n\n async fetchAppliances() { const response = await client.query({ query: gql`\n query { appliances { items { id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) { return response.data.appliances\n }\n }\n}\n"]}

package/dist-client/pages/appliance/register.js CHANGED Viewed

@@ -2,15 +2,13 @@ import { __decorate, __metadata } from "tslib";
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { connect } from 'pwa-helpers/connect-mixin.js';
 import { client } from '@operato/graphql';
-import { navigate, PageView, store } from '@operato/shell';
-let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView) {
+import { navigate, PageView } from '@operato/shell';
+let ApplianceRegister = class ApplianceRegister extends PageView {
     static get styles() {
         return [
             css `
-        :host {
-          background-color: var(--md-sys-color-background);
+        :host {           background-color: var(--md-sys-color-background);
           padding: var(--spacing-large);
           display: flex;
@@ -19,20 +17,17 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
           align-items: center;
           overflow: auto;
-        }
-        h2 {
-          margin: var(--title-margin);
+ }
+        h2 {           margin: var(--title-margin);
           font: var(--title-font);
           color: var(--title-text-color);
-        }
-        [page-description] {
-          margin: var(--page-description-margin);
+ }
+        [page-description] {           margin: var(--page-description-margin);
           font: var(--page-description-font);
           color: var(--page-description-color);
-        }
+ }
-        [form-container] {
-          background-color: var(--md-sys-color-surface);
+        [form-container] {           background-color: var(--md-sys-color-surface);
           padding: var(--spacing-large);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
@@ -40,53 +35,43 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
           max-width: var(--input-container-max-width);
           position: relative;
           clear: both;
-        }
-        label {
-          font: var(--label-font);
+ }
+        label {           font: var(--label-font);
           color: var(--label-color, var(--md-sys-color-on-surface));
           text-transform: var(--label-text-transform);
-        }
-        input {
-          border: var(--border-dim-color);
+ }
+        input {           border: var(--border-dim-color);
           border-radius: var(--border-radius);
           margin: var(--input-margin);
           padding: var(--input-padding);
           font: var(--input-font);
           flex: 1;
-        }
+ }
         select:focus,
-        input:focus {
-          outline: none;
-        }
-        [field-2column] {
-          display: grid;
+        input:focus {           outline: none;
+ }
+        [field-2column] {           display: grid;
           grid-template-columns: 1fr 1fr;
           grid-gap: 15px;
           max-width: var(--content-container-max-width);
-        }
-        [field] {
-          display: flex;
+ }
+        [field] {           display: flex;
           flex-direction: column;
-        }
-        [grid-span] {
-          grid-column: span 2;
-        }
-        @media screen and (max-width: 480px) {
-          [form-container] {
-            position: initial;
+ }
+        [grid-span] {           grid-column: span 2;
+ }
+        @media screen and (max-width: 480px) {           [form-container] {             position: initial;
             width: 100%;
-          }
-          [field] {
-            grid-column: span 2;
-          }
-        }
+ }
+          [field] {             grid-column: span 2;
+ }
+ }
       `
         ];
     }
     get context() {
-        return {
-            title: `appliance registration`,
+        return { title: `appliance registration`,
             help: 'auth/appliance'
         };
     }
@@ -142,16 +127,12 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
             appliance[key] = value;
             return appliance;
         }, {});
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($appliance: NewAppliance!) {
-          createAppliance(appliance: $appliance) {
-            id
-          }
-        }
+        const response = await client.mutate({ mutation: gql `
+        mutation ($appliance: NewAppliance!) {           createAppliance(appliance: $appliance) {             id
+ }
+ }
       `,
-            variables: {
-                appliance
+            variables: { appliance
             }
         });
         if (response.errors) {

package/dist-client/pages/appliance/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,~~OAAO,EAAE,~~MAAM,~~8BAA8B,CAAA;AAEtD,OAAO,~~EAAE,MAAM,~~EAAE,MAAM,~~kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~KAAK,EAAE,~~MAAM,gBAAgB,CAAA;~~AAG1D~~,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,~~OAAO,CAAC,KAAK,CAAC,CAAC,~~QAAQ~~,CAAC~~;~~IACtD~~,MAAM,KAAK,MAAM;~~QACf~~,OAAO;~~YACL~~,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyEF~~;SACF,CAAA;~~IACH~~,CAAC;~~IAMD~~,IAAI,OAAO;~~QACT~~,OAAO~~;YACL~~,KAAK,EAAE,wBAAwB;~~YAC/B~~,IAAI,EAAE,gBAAgB;~~SACvB~~,CAAA;~~IACH~~,CAAC;~~IAED~~,MAAM;~~QACJ~~,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~mDAqCoC~~,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,eAAe,CAAC,CAAC;~~QACrB~~,CAAC,CAAC,cAAc,EAAE,CAAA;~~QAElB~~,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;~~YAClF~~,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;~~YACtB~~,OAAO,SAAS,CAAA;~~QAClB~~,CAAC,EAAE,EAAE,CAAC,CAAA;~~QAEN~~,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC~~;YACnC~~,QAAQ,EAAE,GAAG,CAAA~~;;;;;;OAMZ~~;YACD,SAAS,EAAE~~;gBACT~~,SAAS;~~aACV~~;~~SACF~~,CAAC,CAAA;~~QAEF~~,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;~~YACpB~~,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;~~QAC/B~~,CAAC;aAAM,CAAC;~~YACN~~,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;~~YAC3C~~,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;~~QAC7B~~,CAAC;~~IACH~~,CAAC;~~IAED~~,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;~~QACpC~~,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;~~YAChB~~,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;~~QACnB~~,CAAC;~~IACH~~,CAAC;~~CACF~~,CAAA;~~AA7F6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE3B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;~~AAlFjC~~,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,~~CA6KtB~~","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ~~connect } from 'pwa-helpers/connect-mixin.js'\n\nimport {~~ client } from '@operato/graphql'\nimport { navigate, PageView, ~~store~~ } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends ~~connect(store)(~~PageView) {\n static get styles() {\n return [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n display: flex;\n flex-direction: column;\n\n align-items: center;\n\n overflow: auto;\n }\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [form-container] {\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n min-width: 60%;\n max-width: var(--input-container-max-width);\n position: relative;\n clear: both;\n }\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n input {\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus {\n outline: none;\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n max-width: var(--content-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n }\n [grid-span] {\n grid-column: span 2;\n }\n @media screen and (max-width: 480px) {\n [form-container] {\n position: initial;\n width: 100%;\n }\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) appliance: any\n\n @query('form') form!: HTMLFormElement\n\n get context() {\n return {\n title: `appliance registration`,\n help: 'auth/appliance'\n }\n }\n\n render() {\n return html`\n <h2>Register new appliance</h2>\n <p page-description>You can register new appliance here</p>\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field>\n <label for=\"brand\">brand</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" />\n </div>\n\n <div field>\n <label for=\"serial-no\">serial #</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" />\n </div>\n\n <div field>\n <label for=\"model\">model</label>\n <input id=\"model\" type=\"text\" name=\"model\" />\n </div>\n\n <div field>\n <label for=\"netmask\">netmask</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createAppliance(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {\n appliance[key] = value\n return appliance\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($appliance: NewAppliance!) {\n createAppliance(appliance: $appliance) {\n id\n }\n }\n `,\n variables: {\n appliance\n }\n })\n\n if (response.errors) {\n console.log('creation fail.')\n } else {\n const id = response.data.createAppliance.id\n navigate(`appliance/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}
1	+ {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ;IAAK,MAAM,KAAK,MAAM;QAAS,OAAO;YACxE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4DF;SACF,CAAA;IACJ,CAAC;IAMA,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,wBAAwB;YAC9D,IAAI,EAAE,gBAAgB;SAC1B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAqCuB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,eAAe,CAAC,CAAC;QAAQ,CAAC,CAAC,cAAc,EAAE,CAAA;QAE/C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAAS,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACjH,OAAO,SAAS,CAAA;QACrB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,EAAQ,QAAQ,EAAE,GAAG,CAAA;;;;OAIvD;YACD,SAAS,EAAE,EAAU,SAAS;aAClC;SACA,CAAC,CAAA;QAEC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC7D,CAAC;aAAM,CAAC;YAAO,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YACrD,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;QAChC,CAAC;IACD,CAAC;IAEA,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACzF,CAAC;IACD,CAAC;CACD,CAAA;AAhF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE3B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAnEjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CAiJtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends PageView { static get styles() { return [\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n display: flex;\n flex-direction: column;\n\n align-items: center;\n\n overflow: auto;\n }\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [form-container] { background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n min-width: 60%;\n max-width: var(--input-container-max-width);\n position: relative;\n clear: both;\n }\n label { font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n input { border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus { outline: none;\n }\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n max-width: var(--content-container-max-width);\n }\n [field] { display: flex;\n flex-direction: column;\n }\n [grid-span] { grid-column: span 2;\n }\n @media screen and (max-width: 480px) { [form-container] { position: initial;\n width: 100%;\n }\n [field] { grid-column: span 2;\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) appliance: any\n\n @query('form') form!: HTMLFormElement\n\n get context() { return { title: `appliance registration`,\n help: 'auth/appliance'\n }\n }\n\n render() { return html`\n <h2>Register new appliance</h2>\n <p page-description>You can register new appliance here</p>\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field>\n <label for=\"brand\">brand</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" />\n </div>\n\n <div field>\n <label for=\"serial-no\">serial #</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" />\n </div>\n\n <div field>\n <label for=\"model\">model</label>\n <input id=\"model\" type=\"text\" name=\"model\" />\n </div>\n\n <div field>\n <label for=\"netmask\">netmask</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createAppliance(e) { e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => { appliance[key] = value\n return appliance\n }, {})\n\n const response = await client.mutate({ mutation: gql`\n mutation ($appliance: NewAppliance!) { createAppliance(appliance: $appliance) { id\n }\n }\n `,\n variables: { appliance\n }\n })\n\n if (response.errors) { console.log('creation fail.')\n } else { const id = response.data.createAppliance.id\n navigate(`appliance/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) { if (this.active) { this.form.reset()\n }\n }\n}\n"]}