@things-factory/operato-fleet 9.1.19 → 10.0.0-beta.2

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/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 { 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,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 import { store, PageView } from '@operato/shell'
@@ -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 {}
   }

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

@@ -1,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 import { store, PageView } from '@operato/shell'
@@ -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 {}
   }

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

@@ -1,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 import { store, PageView } from '@operato/shell'
@@ -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,

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

@@ -1,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 
@@ -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,
@@ -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-based-on-track.js → report-based-on-track.ts}

@@ -5,8 +5,6 @@ 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-delivery.js → report-delivery.ts}

@@ -1,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 import { store, PageView } from '@operato/shell'
@@ -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 {}
   }

package/client/pages/report/{report-device.js → report-device.ts}

@@ -1,5 +1,4 @@
 import { html, css } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import '@material/mwc-button'
 import '@material/mwc-textfield'
 import { store, PageView } from '@operato/shell'
@@ -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 {}
   }

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
+
   }
 }