ctucx.git: oeffisearch

add journeysview mode tabs

diff --git a/client/js/app_functions.js b/client/js/app_functions.js
@@ -216,7 +216,6 @@ export const restoreDataStorage  = () => {
 				advancedSelection: false,
 				showRIL100Names: false,
 				writeDebugLog: false,
-				enableCanvas: false,
 				language: language,
 				travelynx: false
 			}

diff --git a/client/js/journeysView.js b/client/js/journeysView.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
-import { getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
+import { saveDataStorage, getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
 import { dataStorage } from './app.js';
 import { setupCanvas } from './canvas.js';
 import { get } from './api.js';

@@ -17,9 +17,19 @@ const journeysTemplate = (data) => html`
 			<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</a>
 			<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
 			<h3>${t('to')}: ${parseName(data.params.toPoint)}</h3>
+			<div class="mode-changers">
+				<a @click=${changeMode('table')} class="${dataStorage.settings.journeysViewMode !== 'canvas' ? 'active' : ''}">
+					<div class="icon-table"></div>
+					<span>Table</span>
+				</a>
+				<a @click=${changeMode('canvas')} class="${dataStorage.settings.journeysViewMode === 'canvas' ? 'active' : ''}">
+					<div class="icon-canvas"></div>
+					<span>Canvas</span>
+				</a>
+			</div>
 		</header>
 
-		${dataStorage.settings.enableCanvas ? html`
+		${dataStorage.settings.journeysViewMode === 'canvas' ? html`
 			<div id="journeysCanvas">
 				<canvas id="canvas"></canvas>
 			</div>

@@ -95,7 +105,7 @@ export const journeysView = async (match) => {
 
 	render(journeysTemplate(data), ElementById('content'))
 
-	if (dataStorage.settings.enableCanvas) {
+	if (dataStorage.settings.journeysViewMode === 'canvas') {
 		setupCanvas(data);
 	}
 };

@@ -113,7 +123,18 @@ const timeTemplate = (data, mode) => {
 	` : html`
 		${parseDateTime(data.plannedTime)}
 	`}`;
-}
+};
+
+const changeMode = (mode) => {
+	return () => {
+		dataStorage.settings.journeysViewMode = mode;
+		saveDataStorage();
+		render(journeysTemplate(data), ElementById('content'))
+		if (dataStorage.settings.journeysViewMode === 'canvas') {
+			setupCanvas(data);
+		}
+	};
+};
 
 export const moreJourneys  = async (reqId, mode) => {
 	let   data    = getCache('journeys', reqId);

diff --git a/client/js/settingsView.js b/client/js/settingsView.js
@@ -14,7 +14,6 @@ const settingsTemplate = () => html`
 		<b>${t('options')}:</b><br>
 		<label><input type="checkbox" ?checked=${dataStorage.settings.showRIL100Names} id="ril100"> ${t('showds100')}</label><br>
 		<label><input type="checkbox" ?checked=${dataStorage.settings.writeDebugLog} id="debug-messages"> ${t('showdebug')}</label><br>
-		<label><input type="checkbox" ?checked=${dataStorage.settings.enableCanvas} id="enable-canvas"> ${t('graphical')} <b>BETA</b></label><br>
 		<label><input type="checkbox" ?checked=${dataStorage.settings.travelynx} id="travelynx"> ${t('travelynx-checkin')}<label><br>
 		<label><input type="checkbox" ?checked=${dataStorage.settings.advancedSelection} id="advancedSelection">ADVANCED® selection of trains<label><br>
 		<br>

@@ -43,13 +42,11 @@ const saveSettings  = async () => {
 	const language          = document.querySelector('input[name="language"]:checked').value;
 	const show_ril100       = ElementById('ril100').checked;
 	const write_debug       = ElementById('debug-messages').checked;
-	const enable_canvas     = ElementById('enable-canvas').checked;
 	const travelynx         = ElementById('travelynx').checked;
 	const advancedSelection = ElementById('advancedSelection').checked;
 
 	dataStorage.settings.showRIL100Names   = show_ril100;
 	dataStorage.settings.writeDebugLog     = write_debug;
-	dataStorage.settings.enableCanvas      = enable_canvas;
 	dataStorage.settings.language          = language;
 	dataStorage.settings.travelynx         = travelynx;
 	dataStorage.settings.advancedSelection = advancedSelection;

diff --git a/client/style.css b/client/style.css
@@ -908,3 +908,34 @@ form>div.history {
 	min-height: 100vh;
 
 }
+
+/* table */
+.icon-table {
+        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/></svg>');
+	filter: invert();
+}
+/* canvas */
+.icon-canvas {
+	transform: rotate(90deg);
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"/></svg>');
+	filter: invert();
+}
+
+.mode-changers {
+	display: flex;
+	width: 100%;
+}
+.mode-changers a.active {
+	border-bottom: 3px solid white;
+}
+.mode-changers a {
+	border-bottom: 3px solid transparent;
+	align-items: center;
+	display: flex;
+	padding: 0 1em;
+	cursor: pointer;
+}
+.mode-changers a span {
+	font-weight: bold;
+	margin: 1em .4em;
+}