From aa6e400d2b11b64a3bf26fff5d3612b17d61d988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20P=C3=A4ssler?= <me@pbb.lc>
Date: Fri, 7 Feb 2020 16:41:20 +0100
Subject: [PATCH] client/settings: style buttons and modal

---
 client/css/style.css      | 55 +++++++++++++++++------------
 client/index.html         |  2 ++
 client/js/journeysView.js |  2 +-
 client/js/searchView.js   | 70 +++----------------------------------
 client/js/settingsView.js | 73 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 112 insertions(+), 90 deletions(-)
 create mode 100644 client/js/settingsView.js

diff --git a/client/css/style.css b/client/css/style.css
index d0836a5..38653ef 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -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) {
diff --git a/client/index.html b/client/index.html
index b1657a1..4ec07ed 100644
--- a/client/index.html
+++ b/client/index.html
@@ -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>
diff --git a/client/js/journeysView.js b/client/js/journeysView.js
index 83042a2..6aa8c5d 100644
--- a/client/js/journeysView.js
+++ b/client/js/journeysView.js
@@ -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';
diff --git a/client/js/searchView.js b/client/js/searchView.js
index bfdf9e7..56d0fb5 100644
--- a/client/js/searchView.js
+++ b/client/js/searchView.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');
-};
diff --git a/client/js/settingsView.js b/client/js/settingsView.js
new file mode 100644
index 0000000..7a052b6
--- /dev/null
+++ b/client/js/settingsView.js
@@ -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');
+};