ctucx.git: oeffisearch

client: add via

diff --git a/client/js/app_functions.js b/client/js/app_functions.js
@@ -28,6 +28,7 @@ export const addCache = (mode, data) => {
 						JSON.stringify(lastHistoryEntry[0].toPoint)   !== JSON.stringify(data.params.toPoint)) {
 						dataStorage.journeysHistory.push({
 							fromPoint: data.params.fromPoint,
+							viaPoint:  data.params.viaPoint,
 							toPoint:   data.params.toPoint,
 							reqId:     data.reqId,
 							journeyId: ''

@@ -39,6 +40,7 @@ export const addCache = (mode, data) => {
 				} else {
 					dataStorage.journeysHistory.push({
 						fromPoint: data.params.fromPoint,
+						viaPoint:  data.params.viaPoint,
 						toPoint:   data.params.toPoint,
 						reqId:     data.reqId,
 						journeyId: ''

diff --git a/client/js/languages.js b/client/js/languages.js
@@ -6,6 +6,7 @@ export const languages = {
 		'changes':            'Umstiege',
 		'products':           'Produkte',
 		'from':               'Von',
+		'via':                'Über',
 		'to':                 'Nach',
 		'date':               'Datum',
 		'time':               'Uhrzeit',

@@ -59,6 +60,7 @@ export const languages = {
 		'changes':           'Changes',
 		'products':          'Products',
 		'from':              'From',
+		'via':               'Via',
 		'to':                'To',
 		'date':              'Date',
 		'time':              'Time',

diff --git a/client/js/searchView.js b/client/js/searchView.js
@@ -12,12 +12,14 @@ import { showSettings } from './settingsView.js';
 
 let currDate             = new Date();
 let fromValue            = '';
+let viaValue            = '';
 let toValue              = '';
 let isArrValue           = false;
 let dateValue            = currDate.getFullYear()+'-'+padZeros(currDate.getMonth()+1)+'-'+padZeros(currDate.getDate());;
 let timeValue            = padZeros(currDate.getHours())+':'+padZeros(currDate.getMinutes());
 let suggestionsCache     = {
 	from: {},
+	via: {},
 	to: {},
 };
 

@@ -32,6 +34,10 @@ const searchTemplate = (journeysHistory) => html`
 			<input type="text" name="from" id="from" placeholder="${t('from')}" value="${fromValue}" autocomplete="off" @focus=${startTyping} @blur=${stopTyping} @keyup=${onKeyup} @keydown=${onKeydown} required>
 			<div class="suggestions" id="fromSuggestions"></div>
 
+			<label for="via">${t('via')}:</label>
+			<input type="text" name="via" id="via" placeholder="${t('via')}" value="${viaValue}" autocomplete="off" @focus=${startTyping} @blur=${stopTyping} @keyup=${onKeyup} @keydown=${onKeydown} required>
+			<div class="suggestions" id="viaSuggestions"></div>
+
 			<label for="to">${t('to')}:</label>
 			<input type="text" name="to" id="to" placeholder="${t('to')}" value="${toValue}" autocomplete="off" @focus=${startTyping} @blur=${stopTyping} @keyup=${onKeyup} @keydown=${onKeydown} required>
 			<div class="suggestions" id="toSuggestions"></div>

@@ -135,6 +141,11 @@ const journeysHistoryTemplate = (journeysHistory) => html`
 			<div class="history from">
 				<small>${t('from')}:</small><br>
 				${parseName(element.fromPoint)}
+				${element.viaPoint ? html`
+					<div class="history via">
+						<small>${t('via')} ${parseName(element.viaPoint)}</small>
+					</div>
+				` : ''}
 			</div>
 			<div class="history arrow icon-arrow1"></div>
 			<div class="history to">

@@ -179,10 +190,12 @@ export const search = async (requestId) => {
 	let   time          = ElementById('time').value;
 	let   timestamp     = '';
 	let   from          = '';
+	let   via           = '';
 	let   to            = '';
 
 	currDate   = new Date();
 	fromValue  = ElementById('from').value;
+	viaValue   = ElementById('via').value;
 	toValue    = ElementById('to').value;
 	dateValue  = ElementById('date').value;
 	timeValue  = ElementById('time').value;

@@ -224,6 +237,19 @@ export const search = async (requestId) => {
 		from = suggestions[0]
 	}
 
+	if (Object.entries(suggestionsCache.via).length !== 0) {
+		via = suggestionsCache.via;
+	} else {
+		let suggestions = await get("/suggestions",  {"query": ElementById('via').value, "results": 1}, true);
+
+		if (!suggestions[0]) {
+			showAlertModal("Ankunftsbahnhof ungültig");
+			return;
+		}
+
+		via = suggestions[0]
+	}
+
 	if (Object.entries(suggestionsCache.to).length !== 0) {
 		to = suggestionsCache.to;
 	} else {

@@ -251,6 +277,7 @@ export const search = async (requestId) => {
 
 	let params = {
 			"fromPoint":     from,
+			"viaPoint":      via,
 			"toPoint":       to,
 			"accessibility": accessibility,
 			"products":      products

@@ -294,6 +321,9 @@ export const setSuggestion  = (data, inputId) => {
 
 	if (inputId === 'from') {
 	  ElementById('fromSuggestions').classList.remove('mouseover');
+		ElementById('via').focus();
+	} else if (inputId === 'via') {
+	  ElementById('viaSuggestions').classList.remove('mouseover');
 		ElementById('to').focus();
 	} else if (inputId === 'to') {
 	  ElementById('toSuggestions').classList.remove('mouseover');

@@ -399,14 +429,14 @@ const stopTyping = (e) => {
 const mouseOverSuggestions = (e) => {
   let el = e.target;
   let i = 0;
-  while (i++ < 10 && el.id !== 'fromSuggestions' && el.id !== 'toSuggestions') el = el.parentElement;
+  while (i++ < 10 && el.id !== 'fromSuggestions' && el.id !== 'viaSuggestions' && el.id !== 'toSuggestions') el = el.parentElement;
 	el.classList.add('mouseover');
 };
 
 const stopMouseOverSuggestions = (e) => {
   let el = e.target;
   let i = 0;
-  while (i++ < 10 && el.id !== 'fromSuggestions' && el.id !== 'toSuggestions') el = el.parentElement;
+  while (i++ < 10 && el.id !== 'fromSuggestions' && el.id !== 'viaSuggestions'&& el.id !== 'toSuggestions') el = el.parentElement;
 	el.classList.remove('mouseover');
 };
 

diff --git a/client/style.css b/client/style.css
@@ -543,7 +543,7 @@ tbody tr:hover td {
 	display: none !important;
 }
 
-label[for=from], label[for=to], label[for=isarr], label[for="date"], label[for=time] {
+label[for=from], label[for=via], label[for=to], label[for=isarr], label[for="date"], label[for=time] {
 	display: none;
 }
 

@@ -688,6 +688,9 @@ form>div.history {
 	justify-content: space-between;
 }
 
+.history.via {
+	font-weight: 200;
+}
 .history.from,
 .history.to {
 	width: 40%;