ctucx.git: trainsearch

refactor element helpers and overlay logic

diff --git a/src/departuresView.js b/src/departuresView.js
@@ -1,6 +1,6 @@
 import { settings } from './settings.js';
 import { platformTemplate, timeTemplate } from './templates.js';
-import { showDiv, hideDiv, ElementById } from './helpers.js';
+import { ElementById } 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';

diff --git a/src/helpers.js b/src/helpers.js
@@ -1,16 +1,12 @@
-export const ElementById = (id) => {
-	return document.getElementById(id);
-};
+export const ElementById = (id) => document.getElementById(id);
 
-export const showDiv = (id) => {
-	const element = document.getElementById(id);
-	if (element) element.classList.remove('hidden');
-};
+export const showElement   = (element) => element.classList.remove('hidden');
+export const hideElement   = (element) => element.classList.add('hidden');
+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 hideDiv = (id) => {
-	const element = document.getElementById(id);
-	if (element) element.classList.add('hidden');
-};
 
 export const padZeros = (str) => {
 	return ('00' + str).slice(-2);

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -1,7 +1,7 @@
 import { cachedCoachSequence } from './reihung';
 import { settings } from './settings.js';
 import { remarksTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
-import { showDiv, hideDiv, ElementById } from './helpers.js';
+import { ElementById } 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';

@@ -159,6 +159,7 @@ export const journeyView = async (match, isUpdate) => {
 			}
 		}
 	}
+
 	hideOverlay();
 
 	render(journeyTemplate(data, profile), ElementById('content'));

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -1,4 +1,4 @@
-import { showDiv, hideDiv, ElementById, getFrom, getTo, padZeros } from './helpers.js';
+import { ElementById, 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';

diff --git a/src/main.js b/src/main.js
@@ -1,14 +1,14 @@
 import { route, go, start } from './router.js';
+import { ElementById } from './helpers.js';
+import { showAlertModal, hideOverlay } from './overlays.js';
+import { initSettings, settings } from './settings.js';
+import { initDataStorage } from './dataStorage.js';
+import { initHafasClient } from './hafas_client';
 import { searchView } from './searchView.js';
 import { journeysView } from './journeysView.js';
 import { journeyView } from './journeyView.js';
 import { tripView } from './tripView.js';
 import { departuresView } from './departuresView.js';
-import { initSettings, settings } from './settings.js';
-import { initDataStorage } from './dataStorage.js';
-import { initHafasClient } from './hafas_client';
-import { hideDiv, ElementById } from './helpers.js';
-import { showAlertModal } from './overlays.js';
 
 (async () => {
 	// read settings from indexeddb

@@ -16,6 +16,9 @@ import { showAlertModal } from './overlays.js';
 	await initSettings();
 	await initHafasClient(settings.profile || "db");
 
+	hideOverlay();
+	ElementById('overlay').innerHTML = '';
+
 	route(/^\/$/, searchView);
 	route(/^\/([a-zA-Z0-9]+)\/([a-z]+)$/, journeysView);
 	route(/^\/j\/([a-z]+)\/(.+)$/, journeyView);

@@ -26,8 +29,6 @@ import { showAlertModal } from './overlays.js';
 		go('/');
 	});
 
-	ElementById('overlay').innerHTML = '';
-	hideDiv('overlay');
 	if (!window.location.hash.length) go('/');
 	start();
 }) ();

diff --git a/src/overlays.js b/src/overlays.js
@@ -1,20 +1,22 @@
-import { showDiv, hideDiv, ElementById } from './helpers.js';
+import { ElementById, showElement, hideElement } from './helpers.js';
 import { html, render } from 'lit-html';
 
+const overlayElement = ElementById('overlay');
+
 export const showAlertModal = (text) => {
-	showDiv('overlay');
+	showElement(overlayElement);
 	return new Promise(resolve => {
 		render(html`
 			<div class="modal alert">
 				${text}
 				<br><button class="color" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
 			</div>
-		`, ElementById('overlay'));
+		`, overlayElement);
 	});
 };
 
 export const showSelectModal = (items) => {
-	showDiv('overlay');
+	showElement(overlayElement);
 	return new Promise(resolve => {
 		render(html`
 			<div class="modal select column">

@@ -23,12 +25,12 @@ export const showSelectModal = (items) => {
 				)}
 				<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
 			</div>
-		`, ElementById('overlay'));
+		`, overlayElement);
 	});
 };
 
 export const showModal = (title, content) => {
-	showDiv('overlay');
+	showElement(overlayElement);
 	return new Promise(resolve => {
 		render(html`
 			<div class="modal dialog">

@@ -38,17 +40,17 @@ export const showModal = (title, content) => {
 				</div>
 				<div class="body">${content}</div>
 			</div>
-		`, ElementById('overlay'));
+		`, overlayElement);
 	});
 };
 
 export const showLoader = () => {
-	showDiv('overlay');
+	showElement(overlayElement);
 	render(html`
 		<div class="loading">
 			<div class="spinner"></div>
 		</div>
-	`, document.getElementById('overlay'));
+	`, overlayElement);
 };
 
-export const hideOverlay = () => hideDiv('overlay');
+export const hideOverlay = () => hideElement(overlayElement);

diff --git a/src/searchView.js b/src/searchView.js
@@ -1,4 +1,4 @@
-import { showDiv, ElementById, padZeros, isValidDate } from './helpers.js';
+import { ElementById, padZeros, isValidDate } from './helpers.js';
 import { db } from './dataStorage.js';
 import { t, loadDS100, getJourneys, newJourneys, ds100Reverse } from './app_functions.js';
 import { formatName, formatFromTo } from './formatters.js';

diff --git a/src/settingsView.js b/src/settingsView.js
@@ -1,7 +1,7 @@
 import { db, clearDataStorage } from './dataStorage.js';
 import { modifySettings, settings } from './settings.js';
-import { showModal } from './overlays.js';
-import { hideDiv, ElementById } from './helpers.js';
+import { showModal, hideOverlay } from './overlays.js';
+import { ElementById } from './helpers.js';
 import { t } from './app_functions.js';
 import { html, render } from 'lit-html';
 import { searchView } from './searchView.js';

@@ -30,7 +30,7 @@ const settingsTemplate = () => html`
 				<option value="rmv"   ?selected=${settings.profile === 'rmv'}>RMV (${t("experimental")})</option>
 				<option value="vrn"   ?selected=${settings.profile === 'vrn'}>VRN (${t("experimental")})</option>
 				<option value="bvg"   ?selected=${settings.profile === 'bvg'}>BVG (${t("experimental")})</option>
-				<option value="oebb"   ?selected=${settings.profile === 'oebb'}>ÖBB (${t("experimental")})</option>
+				<option value="oebb"  ?selected=${settings.profile === 'oebb'}>ÖBB (${t("experimental")})</option>
 			</select>
 		</div>
 

@@ -71,5 +71,5 @@ const saveSettings = async () => {
 
 	await initHafasClient(settings.profile);
 	searchView();
-	hideDiv('overlay');
+	hideOverlay();
 };

diff --git a/src/tripView.js b/src/tripView.js
@@ -1,6 +1,6 @@
 import { settings } from './settings.js';
 import { remarksTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
-import { showDiv, hideDiv, ElementById } from './helpers.js';
+import { ElementById, showElement } 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';

@@ -111,11 +111,12 @@ export const tripView = async (match, isUpdate) => {
 		showAlertModal(e.toString());
 		throw e;
 	}
+
 	hideOverlay();
 
 	render(tripTemplate(data.trip, profile), ElementById('content'));
 
 	if (history.length > 0) {
-		ElementById('back').classList.remove('hidden');
+		showElement(ElementById('back'));
 	}
 };