client/settings: style buttons and modal
This commit is contained in:
Milan Pässler
parent
ffdb6c272b
commit
aa6e400d2b
|
|
@ -143,7 +143,6 @@ input:focus{
|
|||
}
|
||||
|
||||
#departuresView,
|
||||
#settingsView,
|
||||
#searchView,
|
||||
#journeyView,
|
||||
#journeysView {
|
||||
|
|
@ -151,6 +150,10 @@ input:focus{
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#settingsView {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#journeyView tbody td:nth-child(3) {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -312,11 +315,6 @@ input:focus{
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#settings {
|
||||
background-color: rgba(67, 160, 71, 0.6);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.suggestionsbox p {
|
||||
font-size: 1.2em;
|
||||
background-color: white;
|
||||
|
|
@ -362,9 +360,10 @@ input:focus{
|
|||
}
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
||||
margin: 30px auto;
|
||||
margin-top: 30px;
|
||||
padding: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
|
@ -372,15 +371,21 @@ input:focus{
|
|||
border-width: 0;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: #2ecc71;
|
||||
color: #ecf0f1;
|
||||
|
||||
content: 'OK';
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
transition: background-color 100ms;
|
||||
cursor: pointer;
|
||||
background-color: rgba(20, 30, 255, .7);
|
||||
}
|
||||
|
||||
.btn:hover, .btn:focus {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
background-color: rgba(70, 100, 255, .8);
|
||||
}
|
||||
.btn > * {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -391,19 +396,24 @@ input:focus{
|
|||
}
|
||||
|
||||
.btn.orange {
|
||||
background-color: #e67e22;
|
||||
background-color: #e36420;;
|
||||
}
|
||||
|
||||
.btn.orange:hover, .btn.orange:focus {
|
||||
background-color: #d35400;
|
||||
background-color: #e67e22;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn.red {
|
||||
background-color: #e74c3c;
|
||||
background-color: #d0493b;
|
||||
}
|
||||
|
||||
.btn.red:hover, .btn.red:focus {
|
||||
background-color: #c0392b;
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
|
|
@ -449,7 +459,6 @@ input:focus{
|
|||
content: 'OK';
|
||||
border-radius: 4px;
|
||||
background-color: rgba(20, 30, 255, .7);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
|
||||
color: white;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
|
|
@ -548,7 +557,8 @@ input:focus{
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #eee;
|
||||
background-color: #43a047;
|
||||
color: white;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
min-height: 16.4;
|
||||
padding: 15px;
|
||||
|
|
@ -565,14 +575,14 @@ input:focus{
|
|||
margin:-15px;
|
||||
margin-left:0px;
|
||||
height:53px;
|
||||
border-left: 1px solid #e5e5e5;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goLFTUY0uFzJAAAAOpJREFUeNrtmjEWgzAMQ3Ev7TPk1HRlJMQSTvv/xoIlvZDYwHEAAAAAAAAATJOZZ2aeu9aNVRHX6zFGuMxX1Y0qEa4Qqut+XAK73jtUgqpXgqpWdBXmqtFeoDrg6LxEHaur7XPq2l/Kj6wK4c7NVXJmrxhwmpcF8NSI27w0gFlDb5iXB3DX2FvmLQGstLCO4coSwJMQXJOlLYCZEFzm7QHcCcFpXjIO7waPAJsgxyCNEK0wwxDjMC9E2ph3h8BL0a7mXSHwYaS7eXWt2MG8smb5OKzs2tr1Ab/wg0SJmJ1/kQEAAAAAAIB/5AvwavdGuXFGpAAAAABJRU5ErkJggg==') center no-repeat;
|
||||
border-left: 1px solid #00000040;
|
||||
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABO0lEQVR42u3bURKDIAwEUNiLoyfXC3Ss4mYTh81Xv4R90wqEad+2ra1caIuXAQxgAAMYwAAGMIABDGAAA0zVGOMYYxzqibPGxdtJ/PqsCM8aF4xJKBHY40IxwcrPngbY970rJ3r1zKu5hH4DVAhR4Sk/gWiEyPC0d0AUQnR46kuQjaAIT18FWAiq8CHL4FsEZfiws8Asgjp86GHoKUJG+PDT4F2ErPCttdYVd4OzS2F0eFk/YCaIIry0IfIkkCq8FOBuMGV4OUDFkgK83Qh9GoC1Ff4kAPsw9CmAf5scdWdJCnB3h5eJgOzw2QioED4TAVXCZyGgUvgMBFQLr0ZAxfBKBFQNr0JA5fAKBFQPH40gbYtXfDb1dljRzGCPS7sdVnZymON2/2Nk8TKAAQxgAAMYwAAGMIABDLBmnWRS+u5G6HkFAAAAAElFTkSuQmCC') center no-repeat;
|
||||
background-size:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.modal-header .modal-close:hover {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 0px 6px 0px 0px;
|
||||
}
|
||||
|
||||
|
|
@ -611,7 +621,6 @@ input:focus{
|
|||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@
|
|||
<link rel="modulepreload" href="js/overlays.js">
|
||||
<link rel="modulepreload" href="js/router.js">
|
||||
<link rel="modulepreload" href="js/searchView.js">
|
||||
<link rel="modulepreload" href="js/settingsView.js">
|
||||
<link rel="modulepreload" href="js/languages.js">
|
||||
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
import { showDiv, hideDiv, ElementById, parseDateTime, convertMinsToHrsMins } from './helpers.js';
|
||||
import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
|
||||
import { getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
|
||||
import { dataStorage } from './app.js';
|
||||
import { setupCanvas } from './canvas.js';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
'use strict';
|
||||
|
||||
import { showDiv, hideDiv, ElementById, padZeros, isValidDate } from './helpers.js';
|
||||
import { getCache, addCache, parseName, saveDataStorage, clearDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
|
||||
import { showDiv, ElementById, padZeros, isValidDate } from './helpers.js';
|
||||
import { getCache, addCache, parseName, saveDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
|
||||
import { dataStorage } from './app.js';
|
||||
import { get } from './api.js';
|
||||
import { go } from './router.js';
|
||||
import { html, render } from './lit-html.js';
|
||||
import { showAlertModal, showModal, showLoader, hideLoader} from './overlays.js';
|
||||
import { showAlertModal, showLoader, hideLoader} from './overlays.js';
|
||||
import { showSettings } from './settingsView.js';
|
||||
|
||||
|
||||
let currDate = new Date();
|
||||
|
|
@ -344,66 +345,3 @@ const onKeypress = (e) => {
|
|||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const showSettings = () => {
|
||||
showModal(t('settings'), settingsTemplate())
|
||||
};
|
||||
|
||||
const settingsTemplate = () => html`
|
||||
<b>${t('datasource')}:</b><br>
|
||||
<label><input type="radio" name="provider" ?checked=${dataStorage.settings.provider === "DB"} value="DB"> DB</label><br>
|
||||
<label><input type="radio" disabled="disabled" name="provider" ?checked=${dataStorage.settings.provider === "SH"} value="SH"> NAH.SH</label><br>
|
||||
<label><input type="radio" disabled="disabled" name="provider" ?checked=${dataStorage.settings.provider === "BVG"} value="BVG"> BVG</label><br>
|
||||
<br>
|
||||
<b>${t('accessibility')}:</b><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "none"} value="none"> ${t('access_none')}</label><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "partial"} value="partial"> ${t('access_partial')}</label><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "complete"} value="complete"> ${t('access_full')}</label><br>
|
||||
<br>
|
||||
<b>${t('etc')}:</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.fancyCanvas} id="fancy-canvas"> ${t('fancy')}<label><br>
|
||||
<br>
|
||||
<b>${t('language')}:</b><br>
|
||||
<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "de"} value="de"> ${t('de')}</label><br>
|
||||
<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "en"} value="en"> ${t('en')}</label><br>
|
||||
|
||||
<button class="btn" id="save" @click=${saveSettings}><span>${t('save')}</span></button>
|
||||
<button class="btn red" id="clear" @click=${clearDataStorage}><span>${t('clearstorage')}</span></button>
|
||||
<button class="btn orange" id="rebuild-cache" @click=${rebuildCache}><span>${t('update')}</span></button>
|
||||
`;
|
||||
|
||||
const rebuildCache = () => {
|
||||
ConsoleLog('sw update');
|
||||
registration.update();
|
||||
location.reload();
|
||||
};
|
||||
|
||||
const saveSettings = async () => {
|
||||
const provider = document.querySelector('input[name="provider"]:checked').value;
|
||||
const accessibility = document.querySelector('input[name="accessibility"]:checked').value;
|
||||
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 fancy_canvas = ElementById('fancy-canvas').checked;
|
||||
|
||||
if (provider !== dataStorage.settings.provider) {
|
||||
dataStorage.journeysHistory = [];
|
||||
}
|
||||
|
||||
dataStorage.settings.provider = provider;
|
||||
dataStorage.settings.accessibility = accessibility;
|
||||
dataStorage.settings.showRIL100Names = show_ril100;
|
||||
dataStorage.settings.writeDebugLog = write_debug;
|
||||
dataStorage.settings.enableCanvas = enable_canvas;
|
||||
dataStorage.settings.fancyCanvas = fancy_canvas;
|
||||
dataStorage.settings.language = language;
|
||||
|
||||
saveDataStorage();
|
||||
if (show_ril100) await loadDS100();
|
||||
searchView();
|
||||
hideDiv('overlay');
|
||||
};
|
||||
|
|
|
|||
73
client/js/settingsView.js
Normal file
73
client/js/settingsView.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { dataStorage } from './app.js';
|
||||
import { showModal } from './overlays.js';
|
||||
import { hideDiv, ElementById } from './helpers.js';
|
||||
import { saveDataStorage, clearDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
|
||||
import { html, render } from './lit-html.js';
|
||||
import { searchView } from './searchView.js';
|
||||
|
||||
export const showSettings = () => {
|
||||
showModal(t('settings'), settingsTemplate())
|
||||
};
|
||||
|
||||
const settingsTemplate = () => html`
|
||||
<div id="settingsView">
|
||||
<b>${t('datasource')}:</b><br>
|
||||
<label><input type="radio" name="provider" ?checked=${dataStorage.settings.provider === "DB"} value="DB"> DB</label><br>
|
||||
<label><input type="radio" disabled="disabled" name="provider" ?checked=${dataStorage.settings.provider === "SH"} value="SH"> NAH.SH</label><br>
|
||||
<label><input type="radio" disabled="disabled" name="provider" ?checked=${dataStorage.settings.provider === "BVG"} value="BVG"> BVG</label><br>
|
||||
<br>
|
||||
<b>${t('accessibility')}:</b><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "none"} value="none"> ${t('access_none')}</label><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "partial"} value="partial"> ${t('access_partial')}</label><br>
|
||||
<label><input type="radio" name="accessibility" ?checked=${dataStorage.settings.accessibility === "complete"} value="complete"> ${t('access_full')}</label><br>
|
||||
<br>
|
||||
<b>${t('etc')}:</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.fancyCanvas} id="fancy-canvas"> ${t('fancy')}<label><br>
|
||||
<br>
|
||||
<b>${t('language')}:</b><br>
|
||||
<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "de"} value="de"> ${t('de')}</label><br>
|
||||
<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "en"} value="en"> ${t('en')}</label><br>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="btn orange" id="rebuild-cache" @click=${rebuildCache}><span>${t('update')}</span></button>
|
||||
<button class="btn red" id="clear" @click=${clearDataStorage}><span>${t('clearstorage')}</span></button>
|
||||
<button class="btn" id="save" @click=${saveSettings}><span>${t('save')}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const rebuildCache = () => {
|
||||
ConsoleLog('sw update');
|
||||
registration.update();
|
||||
location.reload();
|
||||
};
|
||||
|
||||
const saveSettings = async () => {
|
||||
const provider = document.querySelector('input[name="provider"]:checked').value;
|
||||
const accessibility = document.querySelector('input[name="accessibility"]:checked').value;
|
||||
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 fancy_canvas = ElementById('fancy-canvas').checked;
|
||||
|
||||
if (provider !== dataStorage.settings.provider) {
|
||||
dataStorage.journeysHistory = [];
|
||||
}
|
||||
|
||||
dataStorage.settings.provider = provider;
|
||||
dataStorage.settings.accessibility = accessibility;
|
||||
dataStorage.settings.showRIL100Names = show_ril100;
|
||||
dataStorage.settings.writeDebugLog = write_debug;
|
||||
dataStorage.settings.enableCanvas = enable_canvas;
|
||||
dataStorage.settings.fancyCanvas = fancy_canvas;
|
||||
dataStorage.settings.language = language;
|
||||
|
||||
saveDataStorage();
|
||||
if (show_ril100) await loadDS100();
|
||||
searchView();
|
||||
hideDiv('overlay');
|
||||
};
|
||||
Loading…
Reference in a new issue