@things-factory/operato-fleet 9.2.5 → 10.0.0-beta.10

package/Dockerfile

@@ -1,5 +1,5 @@
 # Use an official ubuntu image
-FROM hatiolab/operato-env:latest
+FROM hatiolab/operato-env:22.22
 
 # Set the working directory to /app
 WORKDIR /app

package/_index.html

@@ -62,8 +62,7 @@
     <noscript> Please enable JavaScript to view this website. </noscript>
     <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="/node_modules/web-animations-js/web-animations-next.min.js"></script>
-    <script src="/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
+
     <!-- Built with love using PWA Starter Kit -->
   </body>
 </html>

package/client/commons/{common-map.js → common-map.ts}

@@ -1,11 +1,10 @@
 import { LitElement, html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
 import GoogleMapLoader from './google-map-loader'
 
-export class CommonMap extends connect(store)(LitElement) {
+export class CommonMap extends LitElement {
   static get styles() {
     return [
       ScrollbarStyles,
@@ -48,8 +47,34 @@ export class CommonMap extends connect(store)(LitElement) {
     }
   }
 
-  stateChanged(state) {
-    this.defaultCenter = state.fleets?.location
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+this.defaultCenter = __state__.fleets?.location
+
   }
 
   get anchor() {

package/client/commons/{fleet-search.js → fleet-search.ts}

@@ -1,7 +1,6 @@
 import '@operato/i18n/ox-i18n.js'
 
 import { LitElement, html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 import { localize, i18next } from '@operato/i18n'
@@ -21,7 +20,7 @@ function scrollIntoViewIfNeeded(container, target) {
   }
 }
 
-export class FleetSearch extends connect(store)(localize(i18next)(LitElement)) {
+export class FleetSearch extends localize(i18next)(LitElement) {
   static get styles() {
     return [
       ScrollbarStyles,
@@ -75,9 +74,35 @@ export class FleetSearch extends connect(store)(localize(i18next)(LitElement)) {
     }
   }
 
-  stateChanged(state) {
-    this.fleets = state.fleets?.fleets || []
-    this.focusedFleetId = state.fleets?.focusedFleetId
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+this.fleets = __state__.fleets?.fleets || []
+    this.focusedFleetId = __state__.fleets?.focusedFleetId
+
   }
 
   async updated(changes) {

package/client/commons/{marker-info-content.js → 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/pages/admin/{admin.js → admin.ts}

@@ -1,12 +1,11 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
 import { FMSPageStyles } from '../fleet-page-style'
 
-class FMSAdmin extends connect(store)(localize(i18next)(PageView)) {
+class FMSAdmin extends localize(i18next)(PageView) {
   static get properties() {
     return {}
   }

package/client/pages/client/{client.js → client.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
@@ -11,7 +10,7 @@ import { FMSPageStyles } from '../fleet-page-style'
 
 import { fetchClients } from '../../commons/fetch-client'
 
-class FMSClient extends connect(store)(localize(i18next)(PageView)) {
+class FMSClient extends localize(i18next)(PageView) {
   static get properties() {
     return {}
   }
@@ -43,12 +42,12 @@ class FMSClient extends connect(store)(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.js → device.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
@@ -11,7 +10,7 @@ import { FMSPageStyles } from '../fleet-page-style'
 
 import { fetchDevices } from '../../commons/fetch-device'
 
-class FMSDevice extends connect(store)(localize(i18next)(PageView)) {
+class FMSDevice extends localize(i18next)(PageView) {
   static get properties() {
     return {}
   }
@@ -43,12 +42,12 @@ class FMSDevice extends connect(store)(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.js → 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.js → geofence.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
 
@@ -11,7 +10,7 @@ import { FMSPageStyles } from '../fleet-page-style'
 import '../../commons/geofence-search'
 import '../../commons/common-map'
 
-class FMSGeoFence extends connect(store)(localize(i18next)(PageView)) {
+class FMSGeoFence extends localize(i18next)(PageView) {
   static get properties() {
     return {
       map: Object,
@@ -47,10 +46,10 @@ class FMSGeoFence extends connect(store)(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.js → 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.js → monitoring.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
@@ -43,7 +42,7 @@ const FOCUSED_ICON = {
   scaledSize: FOCUSED_MARKER_SIZE
 }
 
-class FMSMonitoring extends connect(store)(localize(i18next)(PageView)) {
+class FMSMonitoring extends localize(i18next)(PageView) {
   static get properties() {
     return {
       _polylines: Array,
@@ -77,12 +76,12 @@ class FMSMonitoring extends connect(store)(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>
@@ -243,13 +242,39 @@ class FMSMonitoring extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  stateChanged(state) {
-    this.fleetBoardId = state.boardSetting[MARKER_IW_BOARD_FOR_FLEET]?.board.id
-    this.trackBoardId = state.boardSetting[MARKER_IW_BOARD_FOR_TRACK]?.board.id
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+this.fleetBoardId = __state__.boardSetting[MARKER_IW_BOARD_FOR_FLEET]?.board.id
+    this.trackBoardId = __state__.boardSetting[MARKER_IW_BOARD_FOR_TRACK]?.board.id
+
+    this.fleets = __state__.fleets?.fleets || []
+    this.fleetId = __state__.fleets?.focusedFleetId
+    this.search = __state__.fleets?.search
 
-    this.fleets = state.fleets?.fleets || []
-    this.fleetId = state.fleets?.focusedFleetId
-    this.search = state.fleets?.search
   }
 
   get infoWindow() {

package/client/pages/report/{report-air-pressure.js → 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.js → report-based-on-track.ts}

@@ -1,12 +1,10 @@
-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'
 
 import Chance from 'chance'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
 import { openPopup } from '@operato/layout'
 import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
@@ -18,9 +16,23 @@ import { EVENT_ICONS } from '../../icons/event-marker-icons'
 
 const EVENT_MARKER_SIZE = { width: 32, height: 32 }
 
-export class ReportBasedOnTrack extends connect(store)(localize(i18next)(PageView)) {
-  stateChanged(state) {
-    this.trackBoardId = (state.boardSetting[MARKER_IW_BOARD_FOR_TRACK] || { board: {} }).board.id
+export class ReportBasedOnTrack extends localize(i18next)(PageView) {
+  private _unsubscribe?: () => void
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._applyState()
+    this._unsubscribe = store.subscribe(() => this._applyState())
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this._unsubscribe?.()
+  }
+
+  private _applyState() {
+    const __state__ = store.getState() as any
+this.trackBoardId = (__state__.boardSetting[MARKER_IW_BOARD_FOR_TRACK] || { board: {} }).board.id
   }
 
   showTrack() {

package/client/pages/report/{report-breakdown.js → 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.js → report-delivery.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
@@ -10,7 +9,7 @@ import { ScrollbarStyles } from '@operato/styles'
 
 import { ReportStyles } from './report-style'
 
-class ReportDelivery extends connect(store)(localize(i18next)(PageView)) {
+class ReportDelivery extends localize(i18next)(PageView) {
   static get properties() {
     return {}
   }
@@ -35,12 +34,12 @@ class ReportDelivery extends connect(store)(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.js → report-device.ts}

@@ -1,7 +1,6 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-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'
@@ -10,7 +9,7 @@ import { ScrollbarStyles } from '@operato/styles'
 
 import { ReportStyles } from './report-style'
 
-class ReportDevice extends connect(store)(localize(i18next)(PageView)) {
+class ReportDevice extends localize(i18next)(PageView) {
   static get properties() {
     return {}
   }
@@ -34,12 +33,12 @@ class ReportDevice extends connect(store)(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.js → 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.js → 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

package/client/pages/report/{report-shock.js → report-shock.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 ReportShock 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-style.js → report-style.ts}

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

package/client/pages/report/{report-temperature.js → report-temperature.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 ReportTemperature 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.js → report.ts}

@@ -3,8 +3,6 @@ import '@operato/oops'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
 import { provider } from '@things-factory/board-ui'
 import { i18next, localize } from '@operato/i18n'
 import { client, PageView, store } from '@things-factory/shell'
@@ -15,7 +13,7 @@ import { FMSPageStyles } from '../fleet-page-style'
 const NOOP = () => {}
 const DASHBOARD = 'dashboard'
 
-export class FMSReport extends connect(store)(localize(i18next)(PageView)) {
+export class FMSReport extends localize(i18next)(PageView) {
   static get properties() {
     return {
       _board: Object,
@@ -120,10 +118,36 @@ export class FMSReport extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  stateChanged(state) {
-    this._baseUrl = state.app.baseUrl
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+this._baseUrl = __state__.app.baseUrl
+
+    this._boardId = (__state__.boardSetting[DASHBOARD] || { board: {} }).board.id
 
-    this._boardId = (state.boardSetting[DASHBOARD] || { board: {} }).board.id
   }
 
   async refresh() {

package/client/viewparts/{infowindow-setting-let.js → infowindow-setting-let.ts}

@@ -4,8 +4,6 @@ import '@operato/i18n/ox-i18n.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers'
-
 import { openPopup } from '@operato/layout'
 import { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '@things-factory/dashboard'
 import { i18next, localize } from '@operato/i18n'
@@ -19,7 +17,7 @@ import {
   MARKER_IW_BOARD_FOR_TRACK_DESCRIPTION
 } from '../const'
 
-export class InfowindowSettingLet extends connect(store)(localize(i18next)(LitElement)) {
+export class InfowindowSettingLet extends localize(i18next)(LitElement) {
   static get styles() {
     return [
       css`
@@ -161,12 +159,38 @@ export class InfowindowSettingLet extends connect(store)(localize(i18next)(LitEl
     `
   }
 
-  stateChanged(state) {
-    var fleetBoard = state.boardSetting[MARKER_IW_BOARD_FOR_FLEET]
-    var trackBoard = state.boardSetting[MARKER_IW_BOARD_FOR_TRACK]
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+var fleetBoard = __state__.boardSetting[MARKER_IW_BOARD_FOR_FLEET]
+    var trackBoard = __state__.boardSetting[MARKER_IW_BOARD_FOR_TRACK]
 
     this.fleetBoard = (fleetBoard ? fleetBoard.board : {}) || {}
     this.trackBoard = (trackBoard ? trackBoard.board : {}) || {}
+
   }
 
   onClickBoardSelector(name, description) {

package/client/viewparts/{menu-tools.js → menu-tools.ts}

@@ -1,6 +1,4 @@
 import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers'
-
 import { store } from '@operato/shell'
 
 import {
@@ -14,7 +12,7 @@ import {
   ICONS_ADMINISTRATOR
 } from '../icons/menu-icons'
 
-export class MenuTools extends connect(store)(LitElement) {
+export class MenuTools extends LitElement {
   static get properties() {
     return {
       page: String,
@@ -192,9 +190,35 @@ export class MenuTools extends connect(store)(LitElement) {
     `
   }
 
-  stateChanged(state) {
-    this.page = state.route.page
-    this.width = state.layout.width
+  private _unsubscribe?: () => void
+
+
+  connectedCallback() {
+
+    super.connectedCallback()
+
+    this._applyState()
+
+    this._unsubscribe = store.subscribe(() => this._applyState())
+
+  }
+
+
+  disconnectedCallback() {
+
+    super.disconnectedCallback()
+
+    this._unsubscribe?.()
+
+  }
+
+
+  private _applyState() {
+
+    const __state__ = store.getState() as any
+this.page = __state__.route.page
+    this.width = __state__.layout.width
+
   }
 }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@things-factory/operato-fleet",
-  "version": "9.2.5",
+  "version": "10.0.0-beta.10",
   "main": "dist-server/index.js",
-  "browser": "client/index.js",
+  "browser": "client/index.ts",
   "things-factory": true,
   "author": "heartyoh <heartyoh@hatiolab.com>",
   "description": "Fleet Management Service",
@@ -36,70 +36,68 @@
     "docker:run": "docker run --platform linux/amd64 -it -p 4000:3000 --privileged -v /dev/bus/usb:/dev/bus/usb -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=unix$DISPLAY hatiolab/operato-fleet:latest"
   },
   "dependencies": {
-    "@material/mwc-formfield": "^0.27.0",
-    "@material/mwc-linear-progress": "^0.27.0",
-    "@material/mwc-radio": "^0.27.0",
-    "@operato/board": "^9.0.0",
-    "@operato/data-grist": "^9.0.0",
-    "@operato/help": "^9.0.0",
-    "@operato/oops": "^9.0.0",
-    "@operato/scene-chartjs": "^9.0.0",
-    "@operato/scene-clock": "^9.0.0",
-    "@operato/scene-clone": "^9.0.0",
-    "@operato/scene-compass": "^9.0.0",
-    "@operato/scene-data-transform": "^9.0.0",
-    "@operato/scene-excel": "^9.0.0",
-    "@operato/scene-form": "^9.0.0",
-    "@operato/scene-gantt": "^9.0.0",
-    "@operato/scene-gauge": "^9.0.0",
-    "@operato/scene-google-map": "^9.0.0",
-    "@operato/scene-graphql": "^9.0.0",
-    "@operato/scene-grist": "^9.0.0",
-    "@operato/scene-half-roundrect": "^9.0.0",
-    "@operato/scene-image-slider": "^9.0.0",
-    "@operato/scene-indoor-map": "^9.0.0",
-    "@operato/scene-integration": "^9.0.0",
-    "@operato/scene-label": "^9.0.0",
-    "@operato/scene-legend": "^9.0.0",
-    "@operato/scene-marker": "^9.0.0",
-    "@operato/scene-news-ticker": "^9.0.0",
-    "@operato/scene-progressbar": "^9.0.0",
-    "@operato/scene-random": "^9.0.0",
-    "@operato/scene-restful": "^9.0.0",
-    "@operato/scene-switch": "^9.0.0",
-    "@operato/scene-tab": "^9.0.0",
-    "@operato/scene-table": "^9.0.0",
-    "@operato/scene-timer": "^9.0.0",
-    "@operato/scene-visualizer": "^9.0.0",
-    "@operato/scene-wheel-sorter": "^9.0.0",
-    "@things-factory/apptool-ui": "^9.2.5",
-    "@things-factory/attachment-base": "^9.2.5",
-    "@things-factory/auth-ui": "^9.2.5",
-    "@things-factory/biz-base": "^9.2.5",
-    "@things-factory/board-service": "^9.2.5",
-    "@things-factory/board-ui": "^9.2.5",
-    "@things-factory/code-ui": "^9.2.5",
-    "@things-factory/context-ui": "^9.2.5",
-    "@things-factory/dashboard": "^9.2.5",
-    "@things-factory/evaluation": "^9.2.5",
-    "@things-factory/export-ui": "^9.2.5",
-    "@things-factory/export-ui-csv": "^9.2.5",
-    "@things-factory/export-ui-excel": "^9.2.5",
-    "@things-factory/help": "^9.2.5",
-    "@things-factory/i18n-base": "^9.2.5",
-    "@things-factory/integration-fulfillment": "^9.2.5",
-    "@things-factory/integration-marketplace": "^9.2.5",
-    "@things-factory/more-ui": "^9.2.5",
-    "@things-factory/notification": "^9.2.5",
-    "@things-factory/oauth2-client": "^9.2.5",
-    "@things-factory/pdf": "^9.2.5",
-    "@things-factory/resource-ui": "^9.2.5",
-    "@things-factory/setting-ui": "^9.2.5",
-    "@things-factory/system": "^9.2.5",
+    "@material/web": "^2.0.0",
+    "@operato/board": "^10.0.0-beta.1",
+    "@operato/data-grist": "^10.0.0-beta.1",
+    "@operato/help": "^10.0.0-beta.1",
+    "@operato/oops": "^10.0.0-beta.1",
+    "@operato/scene-chartjs": "^10.0.0-beta.1",
+    "@operato/scene-clock": "^10.0.0-beta.1",
+    "@operato/scene-clone": "^10.0.0-beta.1",
+    "@operato/scene-compass": "^10.0.0-beta.1",
+    "@operato/scene-data-transform": "^10.0.0-beta.1",
+    "@operato/scene-excel": "^10.0.0-beta.1",
+    "@operato/scene-form": "^10.0.0-beta.1",
+    "@operato/scene-gantt": "^10.0.0-beta.1",
+    "@operato/scene-gauge": "^10.0.0-beta.1",
+    "@operato/scene-google-map": "^10.0.0-beta.1",
+    "@operato/scene-graphql": "^10.0.0-beta.1",
+    "@operato/scene-grist": "^10.0.0-beta.1",
+    "@operato/scene-half-roundrect": "^10.0.0-beta.1",
+    "@operato/scene-image-slider": "^10.0.0-beta.1",
+    "@operato/scene-indoor-map": "^10.0.0-beta.1",
+    "@operato/scene-integration": "^10.0.0-beta.1",
+    "@operato/scene-label": "^10.0.0-beta.1",
+    "@operato/scene-legend": "^10.0.0-beta.1",
+    "@operato/scene-marker": "^10.0.0-beta.1",
+    "@operato/scene-news-ticker": "^10.0.0-beta.1",
+    "@operato/scene-progressbar": "^10.0.0-beta.1",
+    "@operato/scene-random": "^10.0.0-beta.1",
+    "@operato/scene-restful": "^10.0.0-beta.1",
+    "@operato/scene-switch": "^10.0.0-beta.1",
+    "@operato/scene-tab": "^10.0.0-beta.1",
+    "@operato/scene-table": "^10.0.0-beta.1",
+    "@operato/scene-timer": "^10.0.0-beta.1",
+    "@operato/scene-visualizer": "^10.0.0-beta.1",
+    "@operato/scene-wheel-sorter": "^10.0.0-beta.1",
+    "@things-factory/apptool-ui": "^10.0.0-beta.10",
+    "@things-factory/attachment-base": "^10.0.0-beta.10",
+    "@things-factory/auth-ui": "^10.0.0-beta.10",
+    "@things-factory/biz-base": "^10.0.0-beta.10",
+    "@things-factory/board-service": "^10.0.0-beta.10",
+    "@things-factory/board-ui": "^10.0.0-beta.10",
+    "@things-factory/code-ui": "^10.0.0-beta.10",
+    "@things-factory/context-ui": "^10.0.0-beta.10",
+    "@things-factory/dashboard": "^10.0.0-beta.10",
+    "@things-factory/evaluation": "^10.0.0-beta.10",
+    "@things-factory/export-ui": "^10.0.0-beta.10",
+    "@things-factory/export-ui-csv": "^10.0.0-beta.10",
+    "@things-factory/export-ui-excel": "^10.0.0-beta.10",
+    "@things-factory/help": "^10.0.0-beta.10",
+    "@things-factory/i18n-base": "^10.0.0-beta.10",
+    "@things-factory/integration-fulfillment": "^10.0.0-beta.10",
+    "@things-factory/integration-marketplace": "^10.0.0-beta.10",
+    "@things-factory/more-ui": "^10.0.0-beta.10",
+    "@things-factory/notification": "^10.0.0-beta.10",
+    "@things-factory/oauth2-client": "^10.0.0-beta.10",
+    "@things-factory/pdf": "^10.0.0-beta.10",
+    "@things-factory/resource-ui": "^10.0.0-beta.10",
+    "@things-factory/setting-ui": "^10.0.0-beta.10",
+    "@things-factory/system": "^10.0.0-beta.10",
     "chance": "^1.1.11"
   },
   "devDependencies": {
-    "@things-factory/builder": "^9.2.5"
+    "@things-factory/builder": "^10.0.0-beta.5"
   },
-  "gitHead": "d3622f475ae3bab84322d31b064cc4cda20f7062"
+  "gitHead": "95acadd39e9a0ff3b2f34d9f7082142395903179"
 }

package/views/auth-page.html

@@ -69,7 +69,7 @@
     </noscript>
     <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="/node_modules/web-animations-js/web-animations-next.min.js"></script>
+
     <!-- Built with love using PWA Starter Kit -->
 
     <script src="<%- elementScript %>"></script>

package/views/public/home.html

@@ -63,7 +63,7 @@
     <noscript> Please enable JavaScript to view this website. </noscript>
     <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="/node_modules/web-animations-js/web-animations-next.min.js"></script>
+
     <!-- Built with love using PWA Starter Kit -->
 
     <script src="/public/home.js"></script>