add journeysview mode tabs
This commit is contained in:
parent
d5f162a921
commit
11dbf6f8ee
|
@ -216,7 +216,6 @@ export const restoreDataStorage = () => {
|
|||
advancedSelection: false,
|
||||
showRIL100Names: false,
|
||||
writeDebugLog: false,
|
||||
enableCanvas: false,
|
||||
language: language,
|
||||
travelynx: false
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue