@things-factory/operato-fleet 10.0.0-beta.4 → 10.0.0-beta.43

package/client/commons/marker-info-content.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-linear-progress'
+import '@material/web/progress/linear-progress.js'
 import '@operato/board/ox-board-viewer.js'
 
 import gql from 'graphql-tag'
@@ -28,7 +28,7 @@ export class MarkerInfoContent extends LitElement {
           height: 100%;
         }
 
-        mwc-linear-progress {
+        md-linear-progress {
           margin: 13px;
           width: 200px;
         }
@@ -67,7 +67,7 @@ export class MarkerInfoContent extends LitElement {
         hide-navigation
       ></ox-board-viewer>
 
-      ${this.board ? html`` : html` <mwc-linear-progress indeterminate></mwc-linear-progress> `}
+      ${this.board ? html`` : html` <md-linear-progress indeterminate></md-linear-progress> `}
     `
   }
 

package/client/entries/public/home.ts

@@ -0,0 +1,246 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/text-button.js'
+import '@material/web/button/elevated-button.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('home-page')
+export class HomePage extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .signin {
+        position: absolute;
+        right: 20px;
+        top: 10px;
+        display: inline-block;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        border: none;
+        border-radius: 4px;
+        text-align: center;
+        text-decoration: none;
+        transition:
+          background-color 0.3s,
+          transform 0.3s;
+      }
+
+      .signin:hover {
+        color: var(--md-sys-color-tertiary-container);
+        background-color: var(--md-sys-color-on-tertiary-container);
+        transform: translateY(-2px);
+      }
+
+      .signin:active {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        transform: translateY(0);
+      }
+
+      [message] {
+        background-color: var(--md-sys-color-secondary-container);
+        padding: 60px 50px 0 50px;
+        color: var(--md-sys-color-on-secondary-container);
+        text-align: center;
+        font-size: 20px;
+      }
+
+      [message] strong {
+        display: block;
+        font-size: 2.5rem;
+      }
+
+      [message] img {
+        width: 800px;
+        max-width: 90%;
+        display: block;
+        margin: auto;
+        margin-top: -15px;
+      }
+
+      [ticket] {
+        display: grid;
+        grid-template-columns: 96px 1fr;
+        width: 450px;
+        margin: auto;
+        margin-top: -20px;
+        margin-bottom: 60px;
+      }
+
+      [brand] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 12px;
+        overflow: hidden;
+        background-color: var(--md-sys-color-primary);
+        box-shadow: var(--box-shadow);
+        border-right: 3px dotted var(--md-sys-color-secondary-container);
+        text-align: center;
+      }
+
+      [ticket] [content] {
+        border-radius: 12px;
+        background-color: var(--md-sys-color-tertiary-container);
+        padding: var(--spacing-medium) var(--spacing-large);
+        box-shadow: var(--box-shadow);
+      }
+
+      fieldset {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      legend {
+        margin: 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
+        font-weight: bold;
+        color: var(--legend-color);
+        text-transform: uppercase;
+      }
+
+      input {
+        border: var(--md-sys-color-outline);
+        border-radius: var(--border-radius);
+        padding: var(--spacing-medium);
+        font: var(--input-font);
+      }
+
+      input[type='text'] {
+        min-width: 190px;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      @media screen and (max-width: 480px) {
+        [message] {
+          padding: 60px 10px 0 10px;
+          text-align: center;
+          font-size: 14px;
+        }
+        [message] strong {
+          margin-bottom: 15px;
+          font-size: 1.6rem;
+          line-height: 1.2em;
+        }
+        [message] img {
+          max-width: 100%;
+        }
+
+        legend {
+          padding: 0;
+        }
+
+        [ticket] {
+          display: grid;
+          grid-template-columns: 0 1fr;
+          width: 90%;
+          margin: auto;
+          margin-top: -15px;
+          margin-bottom: 60px;
+        }
+        [brand] {
+          border: 0;
+        }
+        [content] {
+          border: 1px solid var(--md-sys-color-primary);
+        }
+
+        fieldset {
+          text-align: center;
+        }
+        input[type='text'] {
+          width: calc(100% - 20px);
+          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
+          text-align: center;
+        }
+        fieldset md-text-button {
+          width: 100%;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: true }) tagline?: string
+  @property({ type: String, attribute: true }) explanation1?: string
+  @property({ type: String, attribute: true }) explanation2?: string
+
+  private _applicationMeta?: { icon?: string; title?: string; description?: string }
+
+  render() {
+    var { icon, title } = this.applicationMeta
+
+    const tagline = this.tagline || `Join the ${title} Business Program`
+    const explanation1 = this.explanation1 || 'Create your free account today.'
+    const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'
+
+    return html`
+      <a
+        class="signin"
+        @click=${e => {
+          e.preventDefault()
+          window.location.href = '/auth/signin'
+        }}
+      >
+        ${i18next.t('button.sign_in')}</a
+      >
+
+      <div message>
+        <strong>${tagline}</strong> ${explanation1} <br />
+        ${explanation2}
+        <img src="/assets/images/invitation.png" />
+      </div>
+
+      <div ticket>
+        <div brand><img src=${ifDefined(icon)} /></div>
+        <div content>
+          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
+            <fieldset>
+              <legend>${title} invitation ticket</legend>
+              <input type="email" name="email" placeholder="Enter your email address" />
+              <input type="submit" value="join now" />
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    `
+  }
+
+  @query('input[type=email]') firstInput!: HTMLInputElement
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.firstInput.focus()
+    }, 100)
+  }
+
+  get applicationMeta() {
+    if (!this._applicationMeta) {
+      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
+      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
+      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
+
+      this._applicationMeta = {
+        icon: iconLink?.href,
+        title: titleMeta ? titleMeta.content : 'Things Factory',
+        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+      }
+    }
+
+    return this._applicationMeta
+  }
+}

package/client/pages/admin/admin.ts

@@ -1,5 +1,5 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
+import '@material/web/button/filled-button.js'
 import { store, PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'

package/client/pages/client/client.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import { store, PageView } from '@operato/shell'
 import '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
@@ -42,12 +42,12 @@ class FMSClient extends localize(i18next)(PageView) {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/device/device.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import { store, PageView } from '@operato/shell'
 import '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
@@ -42,12 +42,12 @@ class FMSDevice extends localize(i18next)(PageView) {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/fleet-page-style.ts

@@ -57,7 +57,7 @@ export const FMSPageStyles = css`
     margin: 0 20px 0 0;
   }
 
-  [search] mwc-button {
+  [search] md-filled-button {
     margin: 10px 0;
   }
 `

package/client/pages/geofence/geofence.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import { store, PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 
@@ -46,10 +46,10 @@ class FMSGeoFence extends localize(i18next)(PageView) {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="geofence" icon="tab_unselected"></mwc-textfield>
-        <mwc-textfield label="type" icon="sync_alt"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="geofence"></md-outlined-text-field>
+        <md-outlined-text-field label="type"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <div main>

package/client/pages/monitoring/map-mode.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from 'lit'
-import '@material/mwc-radio'
-import '@material/mwc-formfield'
+import '@material/web/radio/radio.js'
 
 export const MODE_FLEET = 0
 export const MODE_TRACK = 1
@@ -17,7 +16,7 @@ class MapMode extends LitElement {
           background-color: var(--md-sys-color-surface);
           box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
         }
-        mwc-radio {
+        md-radio {
           margin-right: -10px;
         }
       `
@@ -33,13 +32,9 @@ class MapMode extends LitElement {
   render() {
     var mode = this.mode || MODE_FLEET
     return html`
-      <mwc-formfield label="Fleet">
-        <mwc-radio @click=${e => this.setMode(MODE_FLEET)} name="fleet" ?checked=${mode == MODE_FLEET}></mwc-radio>
-      </mwc-formfield>
+      <label>Fleet <md-radio @click=${e => this.setMode(MODE_FLEET)} name="fleet" ?checked=${mode == MODE_FLEET}></md-radio></label>
 
-      <mwc-formfield label="Track">
-        <mwc-radio @click=${e => this.setMode(MODE_TRACK)} name="track" ?checked=${mode == MODE_TRACK}></mwc-radio>
-      </mwc-formfield>
+      <label>Track <md-radio @click=${e => this.setMode(MODE_TRACK)} name="track" ?checked=${mode == MODE_TRACK}></md-radio></label>
     `
   }
 

package/client/pages/monitoring/monitoring.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 
 import { store, PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
@@ -76,12 +76,12 @@ class FMSMonitoring extends localize(i18next)(PageView) {
 
     return html`
       <form @change=${this.onchangeSearch.bind(this)} search>
-        <mwc-textfield label="device" icon="router" .value=${device}></mwc-textfield>
-        <mwc-textfield label="client" icon="domain" .value=${client}></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping" .value=${delivery}></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date" .value=${fromdate}></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date" .value=${todate}></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device" .value=${device}></md-outlined-text-field>
+        <md-outlined-text-field label="client" .value=${client}></md-outlined-text-field>
+        <md-outlined-text-field label="delivery" .value=${delivery}></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date" .value=${fromdate}></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date" .value=${todate}></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <div main>

package/client/pages/report/report-air-pressure.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import '@operato/data-grist'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
@@ -35,12 +35,12 @@ class ReportAirPressure extends ReportBasedOnTrack {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}

package/client/pages/report/report-based-on-track.ts

@@ -1,5 +1,5 @@
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import '../../commons/fleet-search'
 import '../../commons/track-popup'
 import '../../commons/marker-info-content'

package/client/pages/report/report-breakdown.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import '@operato/data-grist'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
@@ -35,12 +35,12 @@ class ReportBreakDown extends ReportBasedOnTrack {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/report/report-delivery.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import { store, PageView } from '@operato/shell'
 import '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
@@ -34,12 +34,12 @@ class ReportDelivery extends localize(i18next)(PageView) {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/report/report-device.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import { store, PageView } from '@operato/shell'
 import '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
@@ -33,12 +33,12 @@ class ReportDevice extends localize(i18next)(PageView) {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/report/report-humidity.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import '@operato/data-grist'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
@@ -35,12 +35,12 @@ class ReportHumidity extends ReportBasedOnTrack {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist

package/client/pages/report/report-illuminance.ts

@@ -1,6 +1,6 @@
 import { html, css } from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-textfield'
+import '@material/web/button/filled-button.js'
+import '@material/web/textfield/outlined-text-field.js'
 import '@operato/data-grist'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
@@ -34,12 +34,12 @@ class ReportIlluminance extends ReportBasedOnTrack {
   render() {
     return html`
       <form search>
-        <mwc-textfield label="device" icon="router"></mwc-textfield>
-        <mwc-textfield label="client" icon="domain"></mwc-textfield>
-        <mwc-textfield label="delivery" icon="local_shipping"></mwc-textfield>
-        <mwc-textfield label="from date" icon="event" type="date"></mwc-textfield>
-        <mwc-textfield label="to date" icon="event" type="date"></mwc-textfield>
-        <mwc-button label="search" icon="search" raised></mwc-button>
+        <md-outlined-text-field label="device"></md-outlined-text-field>
+        <md-outlined-text-field label="client"></md-outlined-text-field>
+        <md-outlined-text-field label="delivery"></md-outlined-text-field>
+        <md-outlined-text-field label="from date" type="date"></md-outlined-text-field>
+        <md-outlined-text-field label="to date" type="date"></md-outlined-text-field>
+        <md-filled-button>search</md-filled-button>
       </form>
 
       <ox-grist