katja's git: oeffisearch

rename `LitOverlay` to 'BaseView', add `isUpdating` state variable

diff --git a/src/LitOverlay.js b/src/LitOverlay.js
@@ -1,88 +0,0 @@
-import { LitElement, html, nothing } from 'lit';
-import { t } from './languages.js';
-
-import { flexboxStyles, overlaysStyles, buttonInputStyles, iconStyles } from './styles.js';
-
-export class LitOverlay extends LitElement {
-	static properties = {
-		overlayType:    { state: true },
-		overlayTitle:   { state: true },
-		overlayVisible: { state: true },
-		overlayContent: { state: true },
-	};
-
-	static styles = [
-		flexboxStyles,
-		overlaysStyles,
-		buttonInputStyles,
-		iconStyles
-	];
-
-	constructor () {
-		super();
-		this.overlayType    = 'plain';
-		this.overlayVisible = false;
-		this.overlayContent = null;
-		this.overlayTitle   = null;
-	}
-
-	showLoaderOverlay = ()            => this.showOverlay('loader');
-	showDialogOverlay = (title, body) => this.showOverlay('dialog', body, title);
-	showAlertOverlay  = text          => this.showOverlay('alert', text);
-	showSelectOverlay = items         => this.showOverlay('select', items);
-	hideOverlay       = () => { this.overlayVisible = false; }
-	showOverlay       = (type, content, title) => {
-		this.overlayType    = type;
-		this.overlayContent = content;
-		this.overlayTitle   = title;
-		this.overlayVisible = true;
-	}
-
-	overlayHandler = event => event.target === event.currentTarget && this.overlayType !== 'loader' ? this.hideOverlay() : true;
-
-	render () {
-		let overlayContent;
-
-		if (this.overlayVisible) {
-			switch (this.overlayType) {
-				case 'loader':
-					overlayContent = html`<div class="spinner"></div>`;
-					break;
-				case 'dialog':
-					overlayContent = html`
-						<div class="modal dialog">
-							<div class="header flex-row">
-								<h4>${t(this.overlayTitle)}</h4>
-								<div class="icon-close" title="${t('close')}" @click=${this.hideOverlay}></div>
-							</div>
-							<div class="body">${this.overlayContent}</div>
-						</div>
-					`;
-					break;
-				case 'select':
-					overlayContent = html`
-						<div class="modal select flex-column">
-							${this.overlayContent.map(item => html`<a class="button color" @click=${item.action}>${t(item.label)}</a>`)}
-							<a class="button color" @click=${() => { this.hideOverlay();}}>Close</a>
-						</div>
-					`;
-					break;
-				case 'alert':
-					overlayContent = html`
-						<div class="modal alert" style="overflow:auto">
-							${this.overlayContent}<br><button class="color" style="float:right" @click=${this.hideOverlay}>OK</button>
-						</div>
-					`;
-					break;
-				default:
-					overlayContent = this.overlayContent;
-					break;
-			}
-		}
-
-		return [
-			this.renderContent(),
-			!this.overlayVisible ? nothing : html`<div class="overlay" @click=${this.overlayHandler}>${overlayContent}</div>`
-		];
-	}
-}

diff --git a/src/baseView.js b/src/baseView.js
@@ -0,0 +1,94 @@
+import { LitElement, html, nothing } from 'lit';
+import { t } from './languages.js';
+
+import { baseStyles, helperStyles, flexboxStyles, overlaysStyles, buttonInputStyles, iconStyles } from './styles.js';
+
+export class BaseView extends LitElement {
+	static properties = {
+		isUpdating:     { state: true },
+		overlayType:    { state: true },
+		overlayTitle:   { state: true },
+		overlayVisible: { state: true },
+		overlayContent: { state: true },
+	};
+
+	static styles = [
+		baseStyles,
+		helperStyles,
+		flexboxStyles,
+		overlaysStyles,
+		buttonInputStyles,
+		iconStyles
+	];
+
+	constructor () {
+		super();
+
+		this.isUpdating = false;
+
+		this.overlayType    = 'plain';
+		this.overlayVisible = false;
+		this.overlayContent = null;
+		this.overlayTitle   = null;
+	}
+
+	showLoaderOverlay = ()            => this.showOverlay('loader');
+	showDialogOverlay = (title, body) => this.showOverlay('dialog', body, title);
+	showAlertOverlay  = text          => this.showOverlay('alert', text);
+	showSelectOverlay = items         => this.showOverlay('select', items);
+	hideOverlay       = () => { this.overlayVisible = false; }
+	showOverlay       = (type, content, title) => {
+		this.overlayType    = type;
+		this.overlayContent = content;
+		this.overlayTitle   = title;
+		this.overlayVisible = true;
+	}
+
+	overlayHandler = event => event.target === event.currentTarget && this.overlayType !== 'loader' ? this.hideOverlay() : true;
+
+	render () {
+		let overlayContent;
+
+		if (this.overlayVisible) {
+			switch (this.overlayType) {
+				case 'loader':
+					overlayContent = html`<div class="spinner"></div>`;
+					break;
+				case 'dialog':
+					overlayContent = html`
+						<div class="modal dialog">
+							<div class="header flex-row">
+								<h4>${t(this.overlayTitle)}</h4>
+								<div class="icon-close" title="${t('close')}" @click=${this.hideOverlay}></div>
+							</div>
+							<div class="body">${this.overlayContent}</div>
+						</div>
+					`;
+					break;
+				case 'select':
+					overlayContent = html`
+						<div class="modal select flex-column">
+							${this.overlayContent.map(item => html`<a class="button color" @click=${item.action}>${t(item.label)}</a>`)}
+							<a class="button color" @click=${() => { this.hideOverlay();}}>Close</a>
+						</div>
+					`;
+					break;
+				case 'alert':
+					overlayContent = html`
+						<div class="modal alert" style="overflow:auto">
+							${this.overlayContent}<br><button class="color" style="float:right" @click=${this.hideOverlay}>OK</button>
+						</div>
+					`;
+					break;
+				default:
+					overlayContent = this.overlayContent;
+					break;
+			}
+		}
+
+		return [
+			this.renderContent(),
+			!this.overlayVisible ? nothing : html`<div class="overlay" @click=${this.overlayHandler}>${overlayContent}</div>`
+		];
+	}
+}

diff --git a/src/departuresView.js b/src/departuresView.js
@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit';
-import { LitOverlay } from './LitOverlay.js';
+import { BaseView } from './baseView.js';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 import { platformTemplate, timeTemplate } from './templates.js';

@@ -9,12 +9,9 @@ import { t } from './languages.js';
 
 import { baseStyles, helperStyles, flexboxStyles, iconStyles, headerStyles, cardStyles, departuresViewStyles } from './styles.js';
 
-class DeparturesView extends LitOverlay {
+class DeparturesView extends BaseView {
 	static styles = [
-		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		iconStyles,
+		super.styles,
 		headerStyles,
 		cardStyles,
 		departuresViewStyles

@@ -25,14 +22,12 @@ class DeparturesView extends LitOverlay {
 		stopId:     { attribute: true },
 		when:       { attribute: true, type: Number },
 		viewState:  { state: true },
-		isUpdating: { state: true }
 	};
 
 	constructor(...args) {
 		super(...args);
 
 		this.viewState  = null;
-		this.isUpdating = false;		
 	}
 
 	async connectedCallback() {

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -1,5 +1,5 @@
 import { html, css, nothing } from 'lit';
-import { LitOverlay } from './LitOverlay.js';
+import { BaseView } from './baseView.js';
 import { createEvents } from 'ics';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';

@@ -13,13 +13,9 @@ import { cachedCoachSequence } from './coach-sequence/index.js';
 
 import { baseStyles, helperStyles, flexboxStyles, headerStyles, iconStyles, cardStyles, journeyViewStyles } from './styles.js';
 
-class JourneyView extends LitOverlay {
+class JourneyView extends BaseView {
 	static styles = [
 		super.styles,
-		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		iconStyles,
 		headerStyles,
 		cardStyles,
 		journeyViewStyles

@@ -30,7 +26,6 @@ class JourneyView extends LitOverlay {
 		refreshToken:  { attribute: true, converter: (value) =>  decodeURIComponent(value)},
 		viewState:     { state: true },
 		settingsState: { state: true },
-		isUpdating:    { state: true }
 	};
 
 	constructor (...args) {

@@ -38,7 +33,6 @@ class JourneyView extends LitOverlay {
 
 		this.viewState     = null;
 		this.settingsState = settings.getState();
-		this.isUpdating    = false;
 	}
 
 	async connectedCallback () {

diff --git a/src/journeysCanvas.js b/src/journeysCanvas.js
@@ -1,11 +1,11 @@
 import { html } from 'lit';
-import { LitOverlay } from './LitOverlay.js';
+import { BaseView } from './baseView.js';
 
 import { CustomDate } from './helpers.js';
 import { formatTrainTypes, formatLineDisplayName } from './formatters.js'
 import { cachedCoachSequence, coachSequenceCache, coachSequenceCacheKey } from './coach-sequence/index.js';
 
-export class JourneysCanvas extends LitOverlay {
+export class JourneysCanvas extends BaseView {
 	static properties = {
 		canvasState: { state: true },
 	};

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -15,11 +15,7 @@ export class JourneysView extends JourneysCanvas {
 	static styles = [
 		super.styles,
 		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		iconStyles,
 		headerStyles,
-		buttonInputStyles,
 		cardStyles,
 		journeysViewStyles
 	];

@@ -29,14 +25,12 @@ export class JourneysView extends JourneysCanvas {
 		mode:          { attribute: true },
 		viewState:     { state:     true },
 		settingsState: { state:     true },
-		isUpdating:    { state:     true },
 	};
 
 	constructor (...args) {
 		super(...args);
 
 		this.viewState     = null;
-		this.isUpdating    = false;
 		this.settingsState = settings.getState();
 	}
 

diff --git a/src/searchView.js b/src/searchView.js
@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from 'lit';
-import { LitOverlay } from './LitOverlay.js';
+import { BaseView } from './baseView.js';
 
 import { db } from './dataStorage.js';
 import { t } from './languages.js';

@@ -12,7 +12,7 @@ import { CustomDate, sleep, queryBackgroundColor, setThemeColor } from './helper
 import { baseStyles, helperStyles, flexboxStyles, buttonInputStyles, iconStyles, searchViewStyles } from './styles.js';
 import { settings } from './settings.js';
 
-class SearchView extends LitOverlay {
+class SearchView extends BaseView {
 	static properties = {
 		settingsState: { state: true },
 		date:          { state: true },

@@ -26,11 +26,6 @@ class SearchView extends LitOverlay {
 
 	static styles = [
 		super.styles,
-		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		buttonInputStyles,
-		iconStyles,
 		searchViewStyles
 	];
 

diff --git a/src/settingsView.js b/src/settingsView.js
@@ -1,4 +1,5 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
+import { BaseView } from './baseView.js';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 import { getLanguages, t } from './languages.js';

@@ -8,12 +9,9 @@ import { clearDataStorage } from './dataStorage.js';
 
 import { baseStyles, helperStyles, flexboxStyles, buttonInputStyles, settingsViewStyles } from './styles.js';
 
-class SettingsView extends LitElement {
+class SettingsView extends BaseView {
 	static styles = [
-		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		buttonInputStyles,
+		super.styles,
 		settingsViewStyles
 	];
 

diff --git a/src/tripView.js b/src/tripView.js
@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit';
-import { LitOverlay } from './LitOverlay.js';
+import { BaseView } from './baseView.js';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 import { cachedCoachSequence } from './coach-sequence/index.js';

@@ -11,13 +11,9 @@ import { t } from './languages.js';
 
 import { baseStyles, helperStyles, flexboxStyles, iconStyles, headerStyles, cardStyles, journeyViewStyles } from './styles.js';
 
-class TripView extends LitOverlay {
+class TripView extends BaseView {
 	static styles = [
 		super.styles,
-		baseStyles,
-		helperStyles,
-		flexboxStyles,
-		iconStyles,
 		headerStyles,
 		cardStyles,
 		journeyViewStyles

@@ -27,14 +23,12 @@ class TripView extends LitOverlay {
 		profile:      { attribute: true },
 		refreshToken: { attribute: true, converter: (value) =>  decodeURIComponent(value)},
 		viewState:    { state: true },
-		isUpdating:   { state: true }
 	};
 
 	constructor (...args) {
 		super(...args);
 
 		this.viewState  = null;
-		this.isUpdating = false;		
 	}
 
 	async connectedCallback () {