zotan/oeffisearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add journeysview mode tabs

Browse source
This commit is contained in:
Milan Pässler 2020-07-22 22:47:05 +02:00
parent d5f162a921
commit 11dbf6f8ee
4 changed files with 56 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/js/app_functions.js
View file

@ -216,7 +216,6 @@ export const restoreDataStorage = () => {
advancedSelection: false,
showRIL100Names: false,
writeDebugLog: false,
enableCanvas: false,
language: language,
travelynx: false
}

29
client/js/journeysView.js
View file

@ -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);

3
client/js/settingsView.js
View file

@ -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;

31
client/style.css
View file

@ -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;
}