ctucx.git: trainsearch

web based trip-planner, fork of https://cyberchaos.dev/yuka/trainsearch

commit acf1d3b024f2cd783bd8714a0c5095f900ccddb8
parent 24ecc11ee58f0c9ee6d3ca42b01cf724a783372a
Author: Katja (ctucx) <git@ctu.cx>
Date: Wed, 29 Jan 2025 18:20:31 +0100

general: set theme-color per view

9 files changed, 23 insertions(+), 11 deletions(-)
M
src/assets/index.html
|
2
+-
M
src/assets/manifest.json
|
4
++--
M
src/departuresView.js
|
3
++-
M
src/helpers.js
|
2
++
M
src/journeyView.js
|
6
++++--
M
src/journeysView.js
|
5
+++--
M
src/overlays.js
|
6
+++++-
M
src/searchView.js
|
3
++-
M
src/tripView.js
|
3
++-
diff --git a/src/assets/index.html b/src/assets/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<title><%= htmlWebpackPlugin.options.title %></title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta name="theme-color" content="#ffffff">
+		<meta name="theme-color" content="#333">
 		<meta name="description" content="Plan your public transport journeys">
 
 		<link rel="apple-touch-icon" href="favicon.png">

diff --git a/src/assets/manifest.json b/src/assets/manifest.json
@@ -7,8 +7,8 @@
 		"type": "image/svg+xml",
 		"sizes": "any"
 	}],
-	"theme_color": "#ffffff",
-	"background_color": "#ffffff",
+	"theme_color": "#333",
+	"background_color": "#333",
 	"display": "standalone"
 }
 

diff --git a/src/departuresView.js b/src/departuresView.js
@@ -1,7 +1,7 @@
 import { html, nothing, render } from 'lit-html';
 import { settings } from './settings.js';
 import { platformTemplate, timeTemplate } from './templates.js';
-import { ElementById } from './helpers.js';
+import { ElementById, setThemeColor, queryBackgroundColor } from './helpers.js';
 import { t, processLeg } from './app_functions.js';
 import { formatDateTime, formatDuration, formatPrice } from './formatters.js';
 import { showAlertModal, showLoader, hideOverlay, showModal } from './overlays.js';

@@ -73,6 +73,7 @@ export const departuresView = async (match, isUpdate) => {
 	hideOverlay();
 
 	render(departuresTemplate(data, profile), ElementById('content'));
+	setThemeColor(queryBackgroundColor('header'));
 
 	if (history.length > 0) {
 		ElementById('back').classList.remove('hidden');

diff --git a/src/helpers.js b/src/helpers.js
@@ -27,6 +27,8 @@ export const elementHidden = element => element.classList.contains('hidden');
 export const unflipElement = element => element.classList.remove('flipped');
 export const flipElement   = element => element.classList.add('flipped');
 
+export const setThemeColor        = color => document.querySelector('meta[name="theme-color"]').setAttribute('content', color);
+export const queryBackgroundColor = query => window.getComputedStyle(document.querySelector(query)).getPropertyValue('background-color');
 
 export const padZeros = str => {
 	return ('00' + str).slice(-2);

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -1,12 +1,12 @@
 import { cachedCoachSequence } from './reihung/index.js';
+import { html, nothing, render } from 'lit-html';
 import { settings } from './settings.js';
 import { remarksModalTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
-import { ElementById } from './helpers.js';
+import { ElementById, setThemeColor, queryBackgroundColor } from './helpers.js';
 import { t, getJourney, refreshJourney } from './app_functions.js';
 import { formatName, formatDateTime, formatDuration, formatPrice, formatTrainTypes, formatLineAdditionalName, formatLineDisplayName } from './formatters.js';
 import { showAlertModal, showLoader, hideOverlay, showModal } from './overlays.js';
 import { go } from './router.js';
-import { html, nothing, render } from 'lit-html';
 
 const legTemplate = (leg, profile) => {
 	const remarks        = leg.remarks || [];

@@ -152,6 +152,7 @@ export const journeyView = async (match, isUpdate) => {
 		if (leg.line && leg.line.name) {
 			const [category, number] = leg.line.name.split(" ");
 			const info = await cachedCoachSequence(category, leg.line.fahrtNr || number, leg.origin.id, leg.plannedDeparture);
+			console.log(info);
 			if (info) {
 				leg.line.trainType = formatTrainTypes(info);
 			}

@@ -161,6 +162,7 @@ export const journeyView = async (match, isUpdate) => {
 	hideOverlay();
 
 	render(journeyTemplate(data, profile), ElementById('content'));
+	setThemeColor(queryBackgroundColor('header'));
 };
 
 const refreshJourneyView = async (refreshToken, profile) => {

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -1,11 +1,11 @@
-import { ElementById, getFrom, getTo, padZeros } from './helpers.js';
+import { html, nothing, render } from 'lit-html';
+import { ElementById, setThemeColor, queryBackgroundColor, getFrom, getTo, padZeros } from './helpers.js';
 import { t, getJourneys, getMoreJourneys, refreshJourneys } from './app_functions.js';
 import { formatName, formatDuration, formatFromTo, formatPrice } from './formatters.js';
 import { timeTemplate } from './templates.js';
 import { settings, modifySettings } from './settings.js';
 import { setupCanvas } from './canvas.js';
 import { go } from './router.js';
-import { html, nothing, render } from 'lit-html';
 import { showAlertModal, showLoader, hideOverlay } from './overlays.js';
 
 const journeysTemplate = (data) => html`

@@ -140,6 +140,7 @@ export const journeysView = async (match, isUpdate) => {
 	hideOverlay();
 
 	render(journeysTemplate(data), ElementById('content'));
+	setThemeColor(queryBackgroundColor('header'));
 
 	if (settings.journeysViewMode === 'canvas')
 		return setupCanvas(data, isUpdate);

diff --git a/src/overlays.js b/src/overlays.js
@@ -1,4 +1,4 @@
-import { ElementById, showElement, hideElement } from './helpers.js';
+import { ElementById, showElement, hideElement, setThemeColor, queryBackgroundColor } from './helpers.js';
 import { html, render } from 'lit-html';
 
 const overlayElement = ElementById('overlay');

@@ -13,6 +13,7 @@ export const showAlertModal = (text) => {
 			</div>
 		`, overlayElement);
 		ElementById('alertButton').focus();
+		setThemeColor(queryBackgroundColor('#overlay'));
 	});
 };
 

@@ -27,6 +28,7 @@ export const showSelectModal = (items) => {
 				<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
 			</div>
 		`, overlayElement);
+		setThemeColor(queryBackgroundColor('#overlay'));
 	});
 };
 

@@ -42,6 +44,7 @@ export const showModal = (title, content) => {
 				<div class="body">${content}</div>
 			</div>
 		`, overlayElement);
+		setThemeColor(queryBackgroundColor('#overlay'));
 	});
 };
 

@@ -52,6 +55,7 @@ export const showLoader = () => {
 			<div class="spinner"></div>
 		</div>
 	`, overlayElement);
+	setThemeColor(queryBackgroundColor('#overlay'));
 };
 
 export const hideOverlay = () => hideElement(overlayElement);

diff --git a/src/searchView.js b/src/searchView.js
@@ -1,5 +1,5 @@
 import { html, nothing, render } from 'lit-html';
-import { ElementById, hideElement, showElement, elementHidden, flipElement, unflipElement, padZeros, isValidDate, loyaltyCardFromString } from './helpers.js';
+import { ElementById, hideElement, showElement, elementHidden, flipElement, unflipElement, setThemeColor, queryBackgroundColor, padZeros, isValidDate, loyaltyCardFromString } from './helpers.js';
 import { db } from './dataStorage.js';
 import { t, getJourneys, newJourneys, ds100Reverse } from './app_functions.js';
 import { formatName, formatFromTo } from './formatters.js';

@@ -184,6 +184,7 @@ export const searchView = async (clearInputs) => {
 	const journeysHistory = (await db.getHistory(settings.profile)).slice().reverse();
 
 	render(searchTemplate(journeysHistory), ElementById('content'));
+	setThemeColor(queryBackgroundColor('[class="searchView"]'));
 
 	if (clearInputs === true) {
 		viewState.fromValue = '';

diff --git a/src/tripView.js b/src/tripView.js
@@ -1,7 +1,7 @@
 import { html, nothing, render } from 'lit-html';
 import { settings } from './settings.js';
 import { remarksModalTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
-import { ElementById, showElement } from './helpers.js';
+import { ElementById, showElement, setThemeColor, queryBackgroundColor } from './helpers.js';
 import { t, processLeg } from './app_functions.js';
 import { formatDateTime, formatDuration, formatPrice, formatLineAdditionalName, formatLineDisplayName } from './formatters.js';
 import { showAlertModal, showLoader, hideOverlay, showModal } from './overlays.js';

@@ -113,6 +113,7 @@ export const tripView = async (match, isUpdate) => {
 	hideOverlay();
 
 	render(tripTemplate(data.trip, profile), ElementById('content'));
+	setThemeColor(queryBackgroundColor('header'));
 
 	if (history.length > 0) {
 		showElement(ElementById('back'));