client/settings: style buttons and modal
This commit is contained in:
parent
ffdb6c272b
commit
aa6e400d2b
|
@ -143,7 +143,6 @@ input:focus{
|
||||||
}
|
}
|
||||||
|
|
||||||
#departuresView,
|
#departuresView,
|
||||||
#settingsView,
|
|
||||||
#searchView,
|
#searchView,
|
||||||
#journeyView,
|
#journeyView,
|
||||||
#journeysView {
|
#journeysView {
|
||||||
|
@ -151,6 +150,10 @@ input:focus{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#settingsView {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#journeyView tbody td:nth-child(3) {
|
#journeyView tbody td:nth-child(3) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
@ -312,11 +315,6 @@ input:focus{
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings {
|
|
||||||
background-color: rgba(67, 160, 71, 0.6);
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestionsbox p {
|
.suggestionsbox p {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
@ -362,9 +360,10 @@ input:focus{
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 30px auto;
|
margin-top: 30px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -372,15 +371,21 @@ input:focus{
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
|
||||||
background-color: #2ecc71;
|
content: 'OK';
|
||||||
color: #ecf0f1;
|
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 {
|
.btn:hover, .btn:focus {
|
||||||
background-color: #27ae60;
|
background-color: rgba(70, 100, 255, .8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn > * {
|
.btn > * {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -391,19 +396,24 @@ input:focus{
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.orange {
|
.btn.orange {
|
||||||
background-color: #e67e22;
|
background-color: #e36420;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.orange:hover, .btn.orange:focus {
|
.btn.orange:hover, .btn.orange:focus {
|
||||||
background-color: #d35400;
|
background-color: #e67e22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
justify-content: flex-end;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.red {
|
.btn.red {
|
||||||
background-color: #e74c3c;
|
background-color: #d0493b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.red:hover, .btn.red:focus {
|
.btn.red:hover, .btn.red:focus {
|
||||||
background-color: #c0392b;
|
background-color: #e74c3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#spinner {
|
#spinner {
|
||||||
|
@ -449,7 +459,6 @@ input:focus{
|
||||||
content: 'OK';
|
content: 'OK';
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: rgba(20, 30, 255, .7);
|
background-color: rgba(20, 30, 255, .7);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
|
|
||||||
color: white;
|
color: white;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
width: -moz-fit-content;
|
width: -moz-fit-content;
|
||||||
|
@ -548,7 +557,8 @@ input:focus{
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
background-color: #eee;
|
background-color: #43a047;
|
||||||
|
color: white;
|
||||||
border-radius: 6px 6px 0px 0px;
|
border-radius: 6px 6px 0px 0px;
|
||||||
min-height: 16.4;
|
min-height: 16.4;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
@ -565,14 +575,14 @@ input:focus{
|
||||||
margin:-15px;
|
margin:-15px;
|
||||||
margin-left:0px;
|
margin-left:0px;
|
||||||
height:53px;
|
height:53px;
|
||||||
border-left: 1px solid #e5e5e5;
|
border-left: 1px solid #00000040;
|
||||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goLFTUY0uFzJAAAAOpJREFUeNrtmjEWgzAMQ3Ev7TPk1HRlJMQSTvv/xoIlvZDYwHEAAAAAAAAATJOZZ2aeu9aNVRHX6zFGuMxX1Y0qEa4Qqut+XAK73jtUgqpXgqpWdBXmqtFeoDrg6LxEHaur7XPq2l/Kj6wK4c7NVXJmrxhwmpcF8NSI27w0gFlDb5iXB3DX2FvmLQGstLCO4coSwJMQXJOlLYCZEFzm7QHcCcFpXjIO7waPAJsgxyCNEK0wwxDjMC9E2ph3h8BL0a7mXSHwYaS7eXWt2MG8smb5OKzs2tr1Ab/wg0SJmJ1/kQEAAAAAAIB/5AvwavdGuXFGpAAAAABJRU5ErkJggg==') center no-repeat;
|
|
||||||
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABO0lEQVR42u3bURKDIAwEUNiLoyfXC3Ss4mYTh81Xv4R90wqEad+2ra1caIuXAQxgAAMYwAAGMIABDGAAA0zVGOMYYxzqibPGxdtJ/PqsCM8aF4xJKBHY40IxwcrPngbY970rJ3r1zKu5hH4DVAhR4Sk/gWiEyPC0d0AUQnR46kuQjaAIT18FWAiq8CHL4FsEZfiws8Asgjp86GHoKUJG+PDT4F2ErPCttdYVd4OzS2F0eFk/YCaIIry0IfIkkCq8FOBuMGV4OUDFkgK83Qh9GoC1Ff4kAPsw9CmAf5scdWdJCnB3h5eJgOzw2QioED4TAVXCZyGgUvgMBFQLr0ZAxfBKBFQNr0JA5fAKBFQPH40gbYtXfDb1dljRzGCPS7sdVnZymON2/2Nk8TKAAQxgAAMYwAAGMIABDLBmnWRS+u5G6HkFAAAAAElFTkSuQmCC') center no-repeat;
|
||||||
background-size:30px;
|
background-size:30px;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header .modal-close:hover {
|
.modal-header .modal-close:hover {
|
||||||
background-color: #e5e5e5;
|
|
||||||
border-radius: 0px 6px 0px 0px;
|
border-radius: 0px 6px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -611,7 +621,6 @@ input:focus{
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
|
|
@ -35,6 +35,8 @@
|
||||||
<link rel="modulepreload" href="js/overlays.js">
|
<link rel="modulepreload" href="js/overlays.js">
|
||||||
<link rel="modulepreload" href="js/router.js">
|
<link rel="modulepreload" href="js/router.js">
|
||||||
<link rel="modulepreload" href="js/searchView.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">
|
<link rel="manifest" href="manifest.json">
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
'use strict';
|
'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 { 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';
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import { showDiv, hideDiv, ElementById, padZeros, isValidDate } from './helpers.js';
|
import { showDiv, ElementById, padZeros, isValidDate } from './helpers.js';
|
||||||
import { getCache, addCache, parseName, saveDataStorage, clearDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
|
import { getCache, addCache, parseName, saveDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
|
||||||
import { dataStorage } from './app.js';
|
import { dataStorage } from './app.js';
|
||||||
import { get } from './api.js';
|
import { get } from './api.js';
|
||||||
import { go } from './router.js';
|
import { go } from './router.js';
|
||||||
import { html, render } from './lit-html.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();
|
let currDate = new Date();
|
||||||
|
@ -344,66 +345,3 @@ const onKeypress = (e) => {
|
||||||
}
|
}
|
||||||
return true;
|
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