ctucx.git: trainsearch

searchView: usability improvements

diff --git a/src/overlays.js b/src/overlays.js
@@ -9,9 +9,10 @@ export const showAlertModal = (text) => {
 		render(html`
 			<div class="modal alert">
 				${text}
-				<br><button class="color" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
+				<br><button class="color" id="alertButton" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
 			</div>
 		`, overlayElement);
+		ElementById('alertButton').focus();
 	});
 };
 

diff --git a/src/searchView.js b/src/searchView.js
@@ -139,7 +139,7 @@ const searchTemplate = (journeysHistory) => html`
 				<div class="filler"></div>
 
 				<div class="button icon-settings" title="${t('settings')}" @click=${showSettings}></div>
-				<button type="submit" tabindex="0" id="go"  class="go" >${t('search')}</button>
+				<button type="submit" tabindex="0" id="submit">${t('search')}</button>
 			</div>
 
 			${journeysHistory.length ? html`

@@ -326,6 +326,11 @@ const submitForm = async (event) => {
 		to = data[0];
 	}
 
+	if (formatName(to) === formatName(from) && via === null) {
+		showAlertModal('From and To are the same place.');
+		return false;
+	};
+
 
 	const params = {
 		from,

@@ -488,7 +493,7 @@ const focusNextElement = (currentElementId) => {
 
 		case 'to':
 			hideSuggestions(currentElementId);
-			ElementById('go').focus();
+			ElementById('submit').focus();
 			break;
 	}
 };

@@ -545,6 +550,7 @@ const keydownHandler = (event) => {
 	}
 
 	switch (event.key) {
+		case 'Escape':
 		case 'Tab':
 			hideSuggestions(eventElement.id);
 			break;

diff --git a/static/style.css b/static/style.css
@@ -286,7 +286,7 @@ header {
 			padding: 4px;
 		}
 
-		button.go,
+		button[type="submit"],
 		.button.icon-settings {
 			height: 32px;
 		}

@@ -300,14 +300,14 @@ header {
 			padding: 3px;
 		}
 		
-		button.go {
+		button[type="submit"]{
 			display: flex;
 			align-items: center;
 			font-size: 20px;
 			padding: 8px;
 		}
 
-		button.go::after {
+		button[type="submit"]::after {
 			width: 24px;
 			height: 24px;
 			margin-left: 5px;

@@ -708,7 +708,7 @@ button.color:hover, .button.color:hover {
 		flex: unset !important;
 	}
 
-	button.go {
+	button[type="submit"]{
 		flex-basis: 100%;
 		justify-content: center;
 	}