katja's git: oeffisearch

move `settingsState` to `BaseView`

diff --git a/src/baseView.js b/src/baseView.js
@@ -2,15 +2,17 @@ import { LitElement, html, nothing } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { choose } from 'lit/directives/choose.js';
 
+import { settings } from './settings.js';
 import { t } from './translate.js';
 
 import { baseStyles, flexboxStyles, overlaysStyles, buttonInputStyles, iconStyles } from './styles.js';
 
 export class BaseView extends LitElement {
 	static properties = {
-		isOffline:    { state: true },
-		isUpdating:   { state: true },
-		overlayState: { state: true },
+		isOffline:     { state: true },
+		isUpdating:    { state: true },
+		overlayState:  { state: true },
+		settingsState: { state: true },
 	};
 
 	static styles = [

@@ -27,6 +29,7 @@ export class BaseView extends LitElement {
 		this.isOffline  = !navigator.onLine;
 		this.isUpdating = false;
 
+		this.settingsState = settings.getState();
 		this.overlayState = {
 			type:     'plain',
 			visible:  false,

@@ -39,6 +42,11 @@ export class BaseView extends LitElement {
 
 		this.hideOverlay();
 
+		this._unsubscribeSettingsState = settings.subscribe(state => {
+			this.settingsState = state;
+			this.performUpdate();
+		});
+
 		window.addEventListener('online',  this.connectionHandler);
 		window.addEventListener('offline', this.connectionHandler);
 	}

@@ -46,6 +54,11 @@ export class BaseView extends LitElement {
 	disconnectedCallback () {
 		super.disconnectedCallback();
 
+		if (typeof this._unsubscribeSettingsState === 'function') {
+			this._unsubscribeSettingsState();
+			this._unsubscribeSettingsState = undefined;
+		}
+
 		window.removeEventListener('online',  this.connectionHandler);
 		window.removeEventListener('offline', this.connectionHandler);
 	}

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -6,7 +6,6 @@ import { createEvents } from 'ics';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 import { db } from './dataStorage.js';
-import { settings } from './settings.js';
 import { t } from './translate.js';
 import { getJourney, refreshJourney } from './app_functions.js';
 import { remarksModal, platformTemplate, stopTemplate, timeTemplate } from './templates.js';

@@ -27,33 +26,17 @@ class JourneyView extends BaseView {
 		profile:       { attribute: true },
 		refreshToken:  { attribute: true, converter: (value) =>  decodeURIComponent(value)},
 		viewState:     { state: true },
-		settingsState: { state: true },
 	};
 
 	constructor () {
 		super();
 
 		this.viewState     = null;
-		this.settingsState = settings.getState();
-	}
-
-	connectedCallback () {
-		super.connectedCallback();
-
-		this._unsubscribeSettingsState = settings.subscribe(state => {
-			this.settingsState = state;
-			this.performUpdate();
-		});
 	}
 
 	disconnectedCallback () {
 		super.disconnectedCallback();
 		this.viewState = null;
-
-		if (typeof this._unsubscribeSettingsState === 'function') {
-			this._unsubscribeSettingsState();
-			this._unsubscribeSettingsState = undefined;
-		}
 	}
 
 	async willUpdate (previous) {

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -8,7 +8,6 @@ import { queryBackgroundColor, setThemeColor } from './helpers.js';
 import { getJourneys, getMoreJourneys, refreshJourneys, getFromPoint, getToPoint } from './app_functions.js';
 import { formatPoint, formatDuration, formatPrice } from './formatters.js';
 import { timeTemplate } from './templates.js';
-import { settings } from './settings.js';
 import { t } from './translate.js';
 
 import { headerStyles, tableStyles, journeysViewStyles } from './styles.js';

@@ -27,37 +26,25 @@ export class JourneysView extends JourneysCanvas {
 		slug:          { attribute: true },
 		mode:          { attribute: true },
 		viewState:     { state:     true },
-		settingsState: { state:     true },
 	};
 
 	constructor () {
 		super();
 
 		this.viewState     = null;
-		this.settingsState = settings.getState();
 	}
 
 	connectedCallback () {
 		super.connectedCallback();
 
 		if (this.mode === 'canvas') this.connectCanvas();
-
-		this._unsubscribeSettingsState = settings.subscribe(state => {
-			this.settingsState = state;
-			this.performUpdate();
-		});
 	}
 
 	disconnectedCallback () {
 		super.disconnectedCallback();
 
-		if (this.mode === 'canvas') this.disconnectCanvas();
 		this.viewState = null;
-
-		if (typeof this._unsubscribeSettingsState === 'function') {
-			this._unsubscribeSettingsState();
-			this._unsubscribeSettingsState = undefined;
-		}
+		if (this.mode === 'canvas') this.disconnectCanvas();
 	}
 
 	async willUpdate (previous) {

diff --git a/src/searchView.js b/src/searchView.js
@@ -12,11 +12,9 @@ import { newJourneys } from './app_functions.js';
 import { CustomDate, sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 
 import { searchViewStyles } from './styles.js';
-import { settings } from './settings.js';
 
 class SearchView extends BaseView {
 	static properties = {
-		settingsState: { state: true },
 		date:          { state: true },
 		numEnter:      { state: true },
 		noTransfers:   { state: true },

@@ -34,7 +32,6 @@ class SearchView extends BaseView {
 	constructor () {
 		super();
 
-		this.settingsState = settings.getState();
 		this.date          = new CustomDate();
 		this.numEnter      = 0;
 		this.noTransfers   = false,

@@ -71,24 +68,10 @@ class SearchView extends BaseView {
 
 		this.history = (await db.getHistory(this.settingsState.profile)).slice().reverse();
 
-		this._unsubscribeSettingsState = settings.subscribe(state => {
-			this.settingsState = state;
-			this.performUpdate();
-		});
-
 		await sleep(500);
 		this.renderRoot.querySelector('input[name=from]').focus();
 	}
 
-	disconnectedCallback () {
-		super.disconnectedCallback();
-
-		if (typeof this._unsubscribeSettingsState === 'function') {
-			this._unsubscribeSettingsState();
-			this._unsubscribeSettingsState = undefined;
-		}
-	}
-
 	async willUpdate (previous) {
 		if (
 			previous.has('settingsState') &&

diff --git a/src/settingsView.js b/src/settingsView.js
@@ -5,7 +5,6 @@ import { BaseView } from './baseView.js';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
 import { getLanguages, t } from './translate.js';
-import { settings } from './settings.js';
 import { initHafasClient, profiles } from './hafasClient.js';
 import { clearDataStorage } from './dataStorage.js';
 

@@ -17,32 +16,8 @@ class SettingsView extends BaseView {
 		settingsViewStyles
 	];
 
-	static properties = {
-		viewState: { state: true },
-	};
-
-	constructor () {
-		super();
-
-		this.viewState = settings.getState();
-	}
-
-	connectedCallback () {
-		super.connectedCallback();
-
-		this._unsubscribeViewState = settings.subscribe(state => {
-			this.viewState = state;
-			this.performUpdate();
-		});
-	}
-
-	disconnectedCallback () {
-		super.disconnectedCallback();
-
-		if (typeof this._unsubscribeViewState === 'function') {
-			this._unsubscribeViewState();
-			this._unsubscribeViewState = undefined;
-		}
+	updated (previous) {
+		super.updated(previous, 'SettingsView');
 	}
 
 	render = () => [

@@ -50,7 +25,7 @@ class SettingsView extends BaseView {
 			<div class="flex-row">
 				<label for="language">${t('language')}:</label>
 				<select id="language" @change=${this.changeHandler}>
-					${getLanguages().map(lang => html`<option value="${lang}" ?selected=${this.viewState.language === lang}>${t(lang)}</option>`)}
+					${getLanguages().map(lang => html`<option value="${lang}" ?selected=${this.settingsState.language === lang}>${t(lang)}</option>`)}
 				</select>
 			</div>
 		`,

@@ -58,68 +33,68 @@ class SettingsView extends BaseView {
 			<div class="flex-row">
 				<label for="profile">${t('datasource')}:</label>
 				<select id="profile" @change=${this.changeHandler}>
-					${Object.keys(profiles).map(profile => html`<option value="${profile}" ?selected=${this.viewState.profile === profile}>${profiles[profile].name}</option>`)}
+					${Object.keys(profiles).map(profile => html`<option value="${profile}" ?selected=${this.settingsState.profile === profile}>${profiles[profile].name}</option>`)}
 				</select>
 			</div>
 		`,
-		when(this.viewState.profile !== 'db', () => html`
+		when(this.settingsState.profile !== 'db', () => html`
 			<div class="flex-row">
 				<label for="accessibility">${t('accessibility')}:</label>
 				<select id="accessibility" @change=${this.changeHandler}>
-					<option value="none"     ?selected=${this.viewState.accessibility === 'none'}>${t('accessibilityNone')}</option>
-					<option value="partial"  ?selected=${this.viewState.accessibility === 'partial'}>${t('accessibilityPartial')}</option>
-					<option value="complete" ?selected=${this.viewState.accessibility === 'complete'}>${t('accessibilityComplete')}</option>
+					<option value="none"     ?selected=${this.settingsState.accessibility === 'none'}>${t('accessibilityNone')}</option>
+					<option value="partial"  ?selected=${this.settingsState.accessibility === 'partial'}>${t('accessibilityPartial')}</option>
+					<option value="complete" ?selected=${this.settingsState.accessibility === 'complete'}>${t('accessibilityComplete')}</option>
 				</select>
 			</div>
 		`),
-		when(this.viewState.profile !== 'db', () => html`
+		when(this.settingsState.profile !== 'db', () => html`
 			<div class="flex-row">
 				<label for="walkingSpeed">${t('walkingSpeed')}:</label>
 				<select id="walkingSpeed" @change=${this.changeHandler}>
-					<option value="slow"   ?selected=${this.viewState.walkingSpeed === 'slow'}>${t('walkingSpeedSlow')}</option>
-					<option value="normal" ?selected=${this.viewState.walkingSpeed === 'normal'}>${t('walkingSpeedNormal')}</option>
-					<option value="fast"   ?selected=${this.viewState.walkingSpeed === 'fast'}>${t('walkingSpeedFast')}</option>
+					<option value="slow"   ?selected=${this.settingsState.walkingSpeed === 'slow'}>${t('walkingSpeedSlow')}</option>
+					<option value="normal" ?selected=${this.settingsState.walkingSpeed === 'normal'}>${t('walkingSpeedNormal')}</option>
+					<option value="fast"   ?selected=${this.settingsState.walkingSpeed === 'fast'}>${t('walkingSpeedFast')}</option>
 				</select>
 			</div>
 		`),
-		when(this.viewState.profile === 'db', () => html`
+		when(this.settingsState.profile === 'db', () => html`
 			<div class="flex-row">
 				<label for="ageGroup">${t('ageGroup')}:</label>
 				<select id="ageGroup" @change=${this.changeHandler}>
-					<option value="K" ?selected=${this.viewState.ageGroup === 'K'}>${t('ageGroupChild')} (7-14)</option>
-					<option value="Y" ?selected=${this.viewState.ageGroup === 'Y'}>${t('ageGroupYoung')} (15-26)</option>
-					<option value="E" ?selected=${this.viewState.ageGroup === 'E'}>${t('ageGroupAdult')} (27-64)</option>
-					<option value="S" ?selected=${this.viewState.ageGroup === 'S'}>${t('ageGroupSenior')} (65+)</option>
+					<option value="K" ?selected=${this.settingsState.ageGroup === 'K'}>${t('ageGroupChild')} (7-14)</option>
+					<option value="Y" ?selected=${this.settingsState.ageGroup === 'Y'}>${t('ageGroupYoung')} (15-26)</option>
+					<option value="E" ?selected=${this.settingsState.ageGroup === 'E'}>${t('ageGroupAdult')} (27-64)</option>
+					<option value="S" ?selected=${this.settingsState.ageGroup === 'S'}>${t('ageGroupSenior')} (65+)</option>
 				</select>
 			</div>
 		`),
-		when(this.viewState.profile === 'db', () => html`
+		when(this.settingsState.profile === 'db', () => html`
 			<div class="flex-row">
 				<label for="loyaltyCard">${t('loyaltyCard')}:</label>
 				<select id="loyaltyCard" @change=${this.changeHandler}>
-					<option value="NONE"           ?selected=${this.viewState.loyaltyCard === 'NONE'}>${t('loyaltyCardNone')}</option>
-					<option value="BAHNCARD-25-2"  ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-25-2'}>BahnCard 25, 2. ${t("class")}</option>
-					<option value="BAHNCARD-25-1"  ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-25-1'}>BahnCard 25, 1. ${t("class")}</option>
-					<option value="BAHNCARD-50-2"  ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-50-2'}>BahnCard 50, 2. ${t("class")}</option>
-					<option value="BAHNCARD-50-1"  ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-50-1'}>BahnCard 50, 1. ${t("class")}</option>
-					<option value="BAHNCARD-100-2" ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-100-2'}>BahnCard 100, 2. ${t("class")}</option>
-					<option value="BAHNCARD-100-1" ?selected=${this.viewState.loyaltyCard === 'BAHNCARD-100-1'}>BahnCard 100, 1. ${t("class")}</option>
+					<option value="NONE"           ?selected=${this.settingsState.loyaltyCard === 'NONE'}>${t('loyaltyCardNone')}</option>
+					<option value="BAHNCARD-25-2"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-25-2'}>BahnCard 25, 2. ${t("class")}</option>
+					<option value="BAHNCARD-25-1"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-25-1'}>BahnCard 25, 1. ${t("class")}</option>
+					<option value="BAHNCARD-50-2"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-50-2'}>BahnCard 50, 2. ${t("class")}</option>
+					<option value="BAHNCARD-50-1"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-50-1'}>BahnCard 50, 1. ${t("class")}</option>
+					<option value="BAHNCARD-100-2" ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-100-2'}>BahnCard 100, 2. ${t("class")}</option>
+					<option value="BAHNCARD-100-1" ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-100-1'}>BahnCard 100, 1. ${t("class")}</option>
 				</select>
 			</div>
 		`),
 		html`
 			<div class="flex-row">
 				<label for="transferTime">${t('minTransferTime')}:</label>
-				<input type="number" id="transferTime" min="0" max="99" @change=${this.changeHandler} .value="${this.viewState.transferTime}">
+				<input type="number" id="transferTime" min="0" max="99" @change=${this.changeHandler} .value="${this.settingsState.transferTime}">
 			</div>
 		`,
 		html`
 			<div class="flex-column">
 				<span>${t('options')}:</span><br>
-				<label><input type="checkbox" id="showDS100"       @change=${this.changeHandler} ?checked=${this.viewState.showDS100}> ${t('showDS100')}<br></label>
-				<label><input type="checkbox" id="combineDateTime" @change=${this.changeHandler} ?checked=${this.viewState.combineDateTime}> ${t('combineDateTime')}<br></label>
-				<label class="${classMap({ hidden: this.viewState.profile !== 'db' })}">
-					<input type="checkbox" id="showPrices" @change=${this.changeHandler} ?checked=${this.viewState.showPrices}> ${t('showPrices')}
+				<label><input type="checkbox" id="showDS100"       @change=${this.changeHandler} ?checked=${this.settingsState.showDS100}> ${t('showDS100')}<br></label>
+				<label><input type="checkbox" id="combineDateTime" @change=${this.changeHandler} ?checked=${this.settingsState.combineDateTime}> ${t('combineDateTime')}<br></label>
+				<label class="${classMap({ hidden: this.settingsState.profile !== 'db' })}">
+					<input type="checkbox" id="showPrices" @change=${this.changeHandler} ?checked=${this.settingsState.showPrices}> ${t('showPrices')}
 				</label>
 			</div>
 		`,

@@ -134,18 +109,18 @@ class SettingsView extends BaseView {
 		const id    = event.target.id;
 		const value = event.target.value;
 		
-		if (id === 'language')        this.viewState.setLanguage(value);
-		if (id === 'walkingSpeed')    this.viewState.setWalkingSpeed(value);
-		if (id === 'accessibility')   this.viewState.setAccessibility(value);
-		if (id === 'transferTime')    this.viewState.setTransferTime(parseInt(value));
-		if (id === 'ageGroup')        this.viewState.setAgeGroup(value);
-		if (id === 'loyaltyCard')     this.viewState.setLoyaltyCard(value);
-		if (id === 'showDS100')       this.viewState.toggleShowDS100();
-		if (id === 'showPrices')      this.viewState.toggleShowPrices();
-		if (id === 'combineDateTime') this.viewState.toggleCombineDateTime();
+		if (id === 'language')        this.settingsState.setLanguage(value);
+		if (id === 'walkingSpeed')    this.settingsState.setWalkingSpeed(value);
+		if (id === 'accessibility')   this.settingsState.setAccessibility(value);
+		if (id === 'transferTime')    this.settingsState.setTransferTime(parseInt(value));
+		if (id === 'ageGroup')        this.settingsState.setAgeGroup(value);
+		if (id === 'loyaltyCard')     this.settingsState.setLoyaltyCard(value);
+		if (id === 'showDS100')       this.settingsState.toggleShowDS100();
+		if (id === 'showPrices')      this.settingsState.toggleShowPrices();
+		if (id === 'combineDateTime') this.settingsState.toggleCombineDateTime();
 		if (id === 'profile') {
-			this.viewState.setProfile(value);
-			await initHafasClient(this.viewState.profile);
+			this.settingsState.setProfile(value);
+			await initHafasClient(this.settingsState.profile);
 		}
 	};