add journeysview mode tabs
This commit is contained in:
parent
d5f162a921
commit
11dbf6f8ee
|
@ -216,7 +216,6 @@ export const restoreDataStorage = () => {
|
||||||
advancedSelection: false,
|
advancedSelection: false,
|
||||||
showRIL100Names: false,
|
showRIL100Names: false,
|
||||||
writeDebugLog: false,
|
writeDebugLog: false,
|
||||||
enableCanvas: false,
|
|
||||||
language: language,
|
language: language,
|
||||||
travelynx: false
|
travelynx: false
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
|
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 { dataStorage } from './app.js';
|
||||||
import { setupCanvas } from './canvas.js';
|
import { setupCanvas } from './canvas.js';
|
||||||
import { get } from './api.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>
|
<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</a>
|
||||||
<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
|
<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
|
||||||
<h3>${t('to')}: ${parseName(data.params.toPoint)}</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>
|
</header>
|
||||||
|
|
||||||
${dataStorage.settings.enableCanvas ? html`
|
${dataStorage.settings.journeysViewMode === 'canvas' ? html`
|
||||||
<div id="journeysCanvas">
|
<div id="journeysCanvas">
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,7 +105,7 @@ export const journeysView = async (match) => {
|
||||||
|
|
||||||
render(journeysTemplate(data), ElementById('content'))
|
render(journeysTemplate(data), ElementById('content'))
|
||||||
|
|
||||||
if (dataStorage.settings.enableCanvas) {
|
if (dataStorage.settings.journeysViewMode === 'canvas') {
|
||||||
setupCanvas(data);
|
setupCanvas(data);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -113,7 +123,18 @@ const timeTemplate = (data, mode) => {
|
||||||
` : html`
|
` : html`
|
||||||
${parseDateTime(data.plannedTime)}
|
${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) => {
|
export const moreJourneys = async (reqId, mode) => {
|
||||||
let data = getCache('journeys', reqId);
|
let data = getCache('journeys', reqId);
|
||||||
|
|
|
@ -14,7 +14,6 @@ const settingsTemplate = () => html`
|
||||||
<b>${t('options')}:</b><br>
|
<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.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.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.travelynx} id="travelynx"> ${t('travelynx-checkin')}<label><br>
|
||||||
<label><input type="checkbox" ?checked=${dataStorage.settings.advancedSelection} id="advancedSelection">ADVANCED® selection of trains<label><br>
|
<label><input type="checkbox" ?checked=${dataStorage.settings.advancedSelection} id="advancedSelection">ADVANCED® selection of trains<label><br>
|
||||||
<br>
|
<br>
|
||||||
|
@ -43,13 +42,11 @@ const saveSettings = async () => {
|
||||||
const language = document.querySelector('input[name="language"]:checked').value;
|
const language = document.querySelector('input[name="language"]:checked').value;
|
||||||
const show_ril100 = ElementById('ril100').checked;
|
const show_ril100 = ElementById('ril100').checked;
|
||||||
const write_debug = ElementById('debug-messages').checked;
|
const write_debug = ElementById('debug-messages').checked;
|
||||||
const enable_canvas = ElementById('enable-canvas').checked;
|
|
||||||
const travelynx = ElementById('travelynx').checked;
|
const travelynx = ElementById('travelynx').checked;
|
||||||
const advancedSelection = ElementById('advancedSelection').checked;
|
const advancedSelection = ElementById('advancedSelection').checked;
|
||||||
|
|
||||||
dataStorage.settings.showRIL100Names = show_ril100;
|
dataStorage.settings.showRIL100Names = show_ril100;
|
||||||
dataStorage.settings.writeDebugLog = write_debug;
|
dataStorage.settings.writeDebugLog = write_debug;
|
||||||
dataStorage.settings.enableCanvas = enable_canvas;
|
|
||||||
dataStorage.settings.language = language;
|
dataStorage.settings.language = language;
|
||||||
dataStorage.settings.travelynx = travelynx;
|
dataStorage.settings.travelynx = travelynx;
|
||||||
dataStorage.settings.advancedSelection = advancedSelection;
|
dataStorage.settings.advancedSelection = advancedSelection;
|
||||||
|
|
|
@ -908,3 +908,34 @@ form>div.history {
|
||||||
min-height: 100vh;
|
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