ctucx.git: trainsearch

searchView: add bike-transport option

diff --git a/src/dataStorage.js b/src/dataStorage.js
@@ -50,7 +50,13 @@ class IDBStorage {
 
 					await transaction.objectStore('settings').put(settings, 'settings');
 				case 3:
-					//... add migrations for 3->4 here
+					settings = await transaction.objectStore('settings').get('settings');
+
+					if (settings !== undefined && settings.bikeFriendly === undefined) {
+						settings.bikeFriendly = false;
+					}
+
+					await transaction.objectStore('settings').put(settings, 'settings');
 				}
 			},
 			blocking: async () => {

diff --git a/src/languages.js b/src/languages.js
@@ -64,6 +64,7 @@ export const languages = {
 		'experimental-features': 'Experimentelle Funktionen',
 		'show-prices':       'Preise anzeigen',
 		'titleSetDateTimeNow': 'Setze Uhrzeit & Datum auf jetzt',
+		'titleBikeFriendly':   'Fahrradmitnahme möglich',
 	},
 
 	'nl': {

@@ -202,5 +203,6 @@ export const languages = {
 		'reload':            'Refresh data',
 		'combineDateTime':   'Use combined DateTime-input',
 		'titleSetDateTimeNow': 'Set Date & Time to now',
+		'titleBikeFriendly':   'Bicycle transport possible',
 	}
 };

diff --git a/src/searchView.js b/src/searchView.js
@@ -124,6 +124,10 @@ const searchTemplate = (journeysHistory) => html`
 					<input type="radio" id="accessibilityComplete" name="accessibility" value="complete" ?checked=${settings.accessibility === 'complete'}>
 					<label class="icon-weelchair" for="accessibilityComplete" title="${t('accessibility')}: ${t('access_full')}"></label>
 				</div>
+				<div class="selector rectangular">
+					<input type="checkbox" id="bikeFriendly" name="bikeFriendly" ?checked=${settings.bikeFriendly}>
+					<label class="icon-bike" for="bikeFriendly" title="${t('titleBikeFriendly')}"></label>
+				</div>
 
 				<div class="filler"></div>
 

@@ -209,6 +213,7 @@ const submitForm = async (event) => {
 	await modifySettings(settings => {
 		settings.products      = readProductSelection(settings);
 		settings.accessibility = document.querySelector('input[name="accessibility"]:checked').value;
+		settings.bikeFriendly  = ElementById('bikeFriendly').checked
 		return settings;
 	});
 

@@ -319,6 +324,7 @@ const submitForm = async (event) => {
 		to,
 		results: 6,
 		accessibility: settings.accessibility,
+		bike: settings.bikeFriendly,
 		products: settings.products,
 	};
 

diff --git a/src/settings.js b/src/settings.js
@@ -22,6 +22,7 @@ const defaultSettings = {
 		'taxi': true
 	},
 	accessibility: 'none',
+	bikeFriendly: false,
 	journeysViewMode: 'canvas',
 	combineDateTime: false,
 	showPrices: true,

diff --git a/static/style.css b/static/style.css
@@ -829,6 +829,10 @@ button.color:hover, .button.color:hover {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95m-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1a5 5 0 1 0 5.9 5.9z"/></svg>');
 }
 
+.icon-bike {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M5 20.5A3.5 3.5 0 0 1 1.5 17 3.5 3.5 0 0 1 5 13.5 3.5 3.5 0 0 1 8.5 17 3.5 3.5 0 0 1 5 20.5M5 12a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m9.8-2H19V8.2h-3.2l-1.94-3.27c-.29-.5-.86-.83-1.46-.83-.47 0-.9.19-1.2.5L7.5 8.29C7.19 8.6 7 9 7 9.5c0 .63.33 1.16.85 1.47L11.2 13v5H13v-6.5l-2.25-1.65 2.32-2.35m5.93 13a3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5 3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m0-8.5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m-3-7.2c1 0 1.8-.8 1.8-1.8S17 1.2 16 1.2 14.2 2 14.2 3 15 4.8 16 4.8"/></svg>');
+}
+
 .icon-table {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M3 9h14V7H3zm0 4h14v-2H3zm0 4h14v-2H3zm16 0h2v-2h-2zm0-10v2h2V7zm0 6h2v-2h-2z" fill="white" /></svg>');
 }