commit e6af1e9b59d73615b65ea080dbb0349d1d0d1491
parent 0821372dd5452bdb458ffa0398c210f6fa9075e3
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 25 Jan 2025 12:14:19 +0100
parent 0821372dd5452bdb458ffa0398c210f6fa9075e3
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 25 Jan 2025 12:14:19 +0100
searchView.js: add button to set time to now
3 files changed, 28 insertions(+), 7 deletions(-)
diff --git a/src/languages.js b/src/languages.js @@ -63,6 +63,7 @@ export const languages = { 'table-view': 'Tabelle', 'experimental-features': 'Experimentelle Funktionen', 'show-prices': 'Preise anzeigen', + 'titleSetDateTimeNow': 'Setze Uhrzeit & Datum auf jetzt', }, 'nl': { @@ -200,5 +201,6 @@ export const languages = { 'back': 'Back', 'reload': 'Refresh data', 'combineDateTime': 'Use combined DateTime-input', + 'titleSetDateTimeNow': 'Set Date & Time to now', } };
diff --git a/src/searchView.js b/src/searchView.js @@ -4,7 +4,7 @@ import { t, getJourneys, newJourneys, ds100Reverse } from './app_functions.js'; import { formatName, formatFromTo } from './formatters.js'; import { modifySettings, settings } from './settings.js'; import { go } from './router.js'; -import { html, render } from 'lit-html'; +import { html, nothing, render } from 'lit-html'; import { showAlertModal, showSelectModal, showLoader, hideOverlay} from './overlays.js'; import { showSettings } from './settingsView.js'; import { client } from './hafas_client'; @@ -96,9 +96,10 @@ const searchTemplate = (journeysHistory) => html` <label for="arrival">${t('arrival')}</label> </div> - <input type="datetime-local" name="datetime" id="datetime" title="${t('date')} & ${t('time')}" value="${dateTimeValue}" class="${!settings.combineDateTime ? 'hidden' : ''}" required> - <input type="time" name="time" id="time" title="${t('time')}" value="${timeValue}" class="${!settings.combineDateTime ? '' : 'hidden'}" required> - <input type="date" name="date" id="date" title="${t('date')}" value="${dateValue}" class="${!settings.combineDateTime ? '' : 'hidden'}" required> + <input type="datetime-local" name="datetime" id="datetime" title="${t('date')} & ${t('time')}" value="${dateTimeValue}" class="${!settings.combineDateTime ? 'hidden' : nothing}" required> + <input type="time" name="time" id="time" title="${t('time')}" value="${timeValue}" class="${!settings.combineDateTime ? nothing : 'hidden'}" required> + <input type="date" name="date" id="date" title="${t('date')}" value="${dateValue}" class="${!settings.combineDateTime ? nothing : 'hidden'}" required> + <div class="button icon-clock" title="${t('now')}" @click=${setDateTimeNow}></div> </div> <div class="row"> @@ -127,7 +128,7 @@ const searchTemplate = (journeysHistory) => html` ${journeysHistory.length ? html` <div id="historyButton" class="arrowButton icon-arrow2" title="History" @click=${toggleHistory}></div> - ` : ''} + ` : nothing} </form> ${journeysHistoryTemplate(journeysHistory)} @@ -150,7 +151,7 @@ const journeysHistoryTemplate = (journeysHistory) => html` <div class="via"> <small>${t('via')} ${formatName(element.viaPoint)}</small> </div> - ` : ''} + ` : nothing} </div> <div class="icon-arrow1"></div> <div class="to"> @@ -373,6 +374,16 @@ export const setFromHistory = async id => { setSuggestion(entry.toPoint, 'to'); }; +const setDateTimeNow = () => { + currDate = new Date(); + dateValue = `${currDate.getFullYear()}-${padZeros(currDate.getMonth()+1)}-${padZeros(currDate.getDate())}`; + timeValue = `${padZeros(currDate.getHours())}:${padZeros(currDate.getMinutes())}`; + dateTimeValue = `${dateValue}T${timeValue}`; + ElementById('date').value = dateValue; + ElementById('time').value = timeValue; + ElementById('datetime').value = dateTimeValue; +}; + export const readProductSelection = settings => { const productsMap = {};
diff --git a/static/style.css b/static/style.css @@ -267,7 +267,11 @@ header { .button.icon-swap { padding: 0; } - + + .button.icon-clock { + padding: 4px; + } + button.go, .button.icon-settings { height: 32px; @@ -805,6 +809,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"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99zM9 3 5 6.99h3V14h2V6.99h3z"/></svg>'); } +.icon-clock { + 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="M12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8 8 8 0 0 0-8 8 8 8 0 0 0 8 8m0-18a10 10 0 0 1 10 10 10 10 0 0 1-10 10C6.47 22 2 17.5 2 12A10 10 0 0 1 12 2m.5 5v5.25l4.5 2.67-.75 1.23L11 13V7z"/></svg>'); +} + .icon-settings { 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="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"/></svg>'); }