client: add via

This commit is contained in:
Milan Pässler 2020-09-18 20:33:35 +02:00
parent 8b370d277d
commit bc8b91a324
4 changed files with 40 additions and 3 deletions

View file

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

View file

@ -6,6 +6,7 @@ export const languages = {
'changes': 'Umstiege', 'changes': 'Umstiege',
'products': 'Produkte', 'products': 'Produkte',
'from': 'Von', 'from': 'Von',
'via': 'Über',
'to': 'Nach', 'to': 'Nach',
'date': 'Datum', 'date': 'Datum',
'time': 'Uhrzeit', 'time': 'Uhrzeit',
@ -59,6 +60,7 @@ export const languages = {
'changes': 'Changes', 'changes': 'Changes',
'products': 'Products', 'products': 'Products',
'from': 'From', 'from': 'From',
'via': 'Via',
'to': 'To', 'to': 'To',
'date': 'Date', 'date': 'Date',
'time': 'Time', 'time': 'Time',

View file

@ -12,12 +12,14 @@ import { showSettings } from './settingsView.js';
let currDate = new Date(); let currDate = new Date();
let fromValue = ''; let fromValue = '';
let viaValue = '';
let toValue = ''; let toValue = '';
let isArrValue = false; let isArrValue = false;
let dateValue = currDate.getFullYear()+'-'+padZeros(currDate.getMonth()+1)+'-'+padZeros(currDate.getDate());; let dateValue = currDate.getFullYear()+'-'+padZeros(currDate.getMonth()+1)+'-'+padZeros(currDate.getDate());;
let timeValue = padZeros(currDate.getHours())+':'+padZeros(currDate.getMinutes()); let timeValue = padZeros(currDate.getHours())+':'+padZeros(currDate.getMinutes());
let suggestionsCache = { let suggestionsCache = {
from: {}, from: {},
via: {},
to: {}, 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> <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> <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> <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> <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> <div class="suggestions" id="toSuggestions"></div>
@ -135,6 +141,11 @@ const journeysHistoryTemplate = (journeysHistory) => html`
<div class="history from"> <div class="history from">
<small>${t('from')}:</small><br> <small>${t('from')}:</small><br>
${parseName(element.fromPoint)} ${parseName(element.fromPoint)}
${element.viaPoint ? html`
<div class="history via">
<small>${t('via')} ${parseName(element.viaPoint)}</small>
</div>
` : ''}
</div> </div>
<div class="history arrow icon-arrow1"></div> <div class="history arrow icon-arrow1"></div>
<div class="history to"> <div class="history to">
@ -179,10 +190,12 @@ export const search = async (requestId) => {
let time = ElementById('time').value; let time = ElementById('time').value;
let timestamp = ''; let timestamp = '';
let from = ''; let from = '';
let via = '';
let to = ''; let to = '';
currDate = new Date(); currDate = new Date();
fromValue = ElementById('from').value; fromValue = ElementById('from').value;
viaValue = ElementById('via').value;
toValue = ElementById('to').value; toValue = ElementById('to').value;
dateValue = ElementById('date').value; dateValue = ElementById('date').value;
timeValue = ElementById('time').value; timeValue = ElementById('time').value;
@ -224,6 +237,19 @@ export const search = async (requestId) => {
from = suggestions[0] 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) { if (Object.entries(suggestionsCache.to).length !== 0) {
to = suggestionsCache.to; to = suggestionsCache.to;
} else { } else {
@ -251,6 +277,7 @@ export const search = async (requestId) => {
let params = { let params = {
"fromPoint": from, "fromPoint": from,
"viaPoint": via,
"toPoint": to, "toPoint": to,
"accessibility": accessibility, "accessibility": accessibility,
"products": products "products": products
@ -294,6 +321,9 @@ export const setSuggestion = (data, inputId) => {
if (inputId === 'from') { if (inputId === 'from') {
ElementById('fromSuggestions').classList.remove('mouseover'); ElementById('fromSuggestions').classList.remove('mouseover');
ElementById('via').focus();
} else if (inputId === 'via') {
ElementById('viaSuggestions').classList.remove('mouseover');
ElementById('to').focus(); ElementById('to').focus();
} else if (inputId === 'to') { } else if (inputId === 'to') {
ElementById('toSuggestions').classList.remove('mouseover'); ElementById('toSuggestions').classList.remove('mouseover');
@ -399,14 +429,14 @@ const stopTyping = (e) => {
const mouseOverSuggestions = (e) => { const mouseOverSuggestions = (e) => {
let el = e.target; let el = e.target;
let i = 0; 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'); el.classList.add('mouseover');
}; };
const stopMouseOverSuggestions = (e) => { const stopMouseOverSuggestions = (e) => {
let el = e.target; let el = e.target;
let i = 0; 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'); el.classList.remove('mouseover');
}; };

View file

@ -543,7 +543,7 @@ tbody tr:hover td {
display: none !important; 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; display: none;
} }
@ -688,6 +688,9 @@ form>div.history {
justify-content: space-between; justify-content: space-between;
} }
.history.via {
font-weight: 200;
}
.history.from, .history.from,
.history.to { .history.to {
width: 40%; width: 40%;