ctucx.git: oeffisearch

hopefully set theme-color reliably

diff --git a/src/departuresView.js b/src/departuresView.js
@@ -32,6 +32,12 @@ class DeparturesView extends BaseView {
 		this.viewState  = null;
 	}
 
+	async connectedCallback () {
+		super.connectedCallback();
+		await sleep(200);
+		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
+	}
+
 	disconnectedCallback () {
 		super.disconnectedCallback();
 

@@ -48,8 +54,6 @@ class DeparturesView extends BaseView {
 		super.updated(previous, 'DeparturesView');
 
 		if (isDevServer && previous.has('viewState')) console.info('DeparturesView(viewState):', this.viewState);
-
-		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
 	}
 
 	updateViewState = async () => {

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -34,6 +34,12 @@ class JourneyView extends BaseView {
 		this.viewState     = null;
 	}
 
+	async connectedCallback () {
+		super.connectedCallback();
+		await sleep(200);
+		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
+	}
+
 	disconnectedCallback () {
 		super.disconnectedCallback();
 		this.viewState = null;

@@ -49,8 +55,6 @@ class JourneyView extends BaseView {
 		super.updated(previous, 'JourneyView');
 
 		if (isDevServer && previous.has('viewState')) console.info('JourneyView(viewState): ', this.viewState);
-
-		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
 	}
 
 	renderView = () => [

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -4,7 +4,7 @@ import { choose } from 'lit/directives/choose.js';
 import { when } from 'lit/directives/when.js';
 import { join } from 'lit/directives/join.js';
 
-import { queryBackgroundColor, setThemeColor } from './helpers.js';
+import { sleep, 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';

@@ -34,10 +34,13 @@ export class JourneysView extends JourneysCanvas {
 		this.viewState     = null;
 	}
 
-	connectedCallback () {
+	async connectedCallback () {
 		super.connectedCallback();
 
 		if (this.mode === 'canvas') this.connectCanvas();
+
+		await sleep(200);
+		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
 	}
 
 	disconnectedCallback () {

@@ -69,9 +72,8 @@ export class JourneysView extends JourneysCanvas {
 	updated (previous) {
 		super.updated(previous, 'JourneysView');
 
+		if (this.mode === 'canvas') this.renderCanvas();
 		if (isDevServer && previous.has('viewState')) console.info('JourneysView(viewState): ', this.viewState);
-
-		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
 	}
 
 	renderView = () => [

diff --git a/src/searchView.js b/src/searchView.js
@@ -68,7 +68,9 @@ class SearchView extends BaseView {
 
 		this.history = (await db.getHistory(this.settingsState.profile)).slice().reverse();
 
-		await sleep(500);
+		await sleep(200);
+		setThemeColor(queryBackgroundColor(document, 'body'));
+		await sleep(200);
 		this.renderRoot.querySelector('input[name=from]').focus();
 	}
 

@@ -82,8 +84,6 @@ class SearchView extends BaseView {
 
 	updated (previous) {
 		super.updated(previous, 'SearchView');
-
-		setThemeColor(queryBackgroundColor(document, 'body'));
 	}
 
 	renderView = () => {

diff --git a/src/tripView.js b/src/tripView.js
@@ -34,6 +34,12 @@ class TripView extends BaseView {
 		this.viewState = null;
 	}
 
+	async connectedCallback () {
+		super.connectedCallback();
+		await sleep(200);
+		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
+	}
+
 	disconnectedCallback () {
 		super.disconnectedCallback();
 

@@ -50,8 +56,6 @@ class TripView extends BaseView {
 		super.updated(previous, 'TripView');
 
 		if (isDevServer && previous.has('viewState')) console.info('TripView(viewState): ', this.viewState);
-
-		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
 	}
 
 	updateViewState = async () => {