Fix juliuste#17: Add a button to calender and day view to switch departure and arrival location

Author: soerface

assets/styles/base.css

@@ -50,6 +50,24 @@ body{
     text-decoration: underline;
 }
 
+#reverse-direction {
+	color: #000;
+	text-decoration: none;
+	border: 1px solid #044;
+	padding: .2rem;
+	margin: 0 .5rem;
+	border-radius: 4px;
+}
+
+#reverse-direction span {
+	transition: transform .2s ease-in-out;
+	display: inline-block;
+}
+
+#reverse-direction:hover span, #reverse-direction:focus span, #reverse-direction:active span {
+	transform: rotate(180deg);
+}
+
 #footer {
     position: absolute;
     font-size: 100%;

pnpm-lock.yaml

@@ -5,7 +5,7 @@ import mdf from 'moment-duration-format'
 import * as helpers from '../helpers.js'
 
 const head = (api, data) => {
-	const title = generateSubTitleRoute(data).join('') + ' | Kalender'
+	const title = generateSubTitleRoute(api, data).join('') + ' | Kalender'
 	const elements = [
 		...helpers.staticHeader(api),
 		h('title', `${title} | ${api.settings.title}`),
@@ -15,10 +15,11 @@ const head = (api, data) => {
 	return h('head', elements)
 }
 
-const generateSubTitleRoute = (data) => {
+const generateSubTitleRoute = (api, data) => {
+	const reverseTravelLink = h('a', { href: '?origin=' + data.input.destination.name + '&destination=' + data.input.origin.name + '&' + (api.options.url(data.input).join('&')), id: 'reverse-direction' }, h('span', ' → '))
 	return [
 		data.input.origin.name,
-		' → ',
+		reverseTravelLink,
 		data.input.destination.name,
 	]
 }
@@ -121,7 +122,7 @@ const createTemplate = api => (data, error) => {
 		h('body', [
 			h('div#page', [
 				h('div#header', [h('a', { href: './start', title: 'Preiskalender' }, [h('h1', 'Preiskalender')])]),
-				h('div', { id: 'route', class: 'subtitle' }, [h('span', generateSubTitleRoute(data))]),
+				h('div', { id: 'route', class: 'subtitle' }, [h('span', generateSubTitleRoute(api, data))]),
 				h('div', { id: 'options', class: 'subtitle' }, generateSubTitleOptions(api, data)),
 				calendar(api, data),
 				h('div#more', moreLink(api, data)),

src/lib/routes/calendar/template.js

@@ -10,7 +10,7 @@ import * as helpers from '../helpers.js'
 const productIndex = ['Bus', 'BUS', 'RB', 'RE', 'IRE', 'IC', 'IEC', 'EC', 'ICE']
 
 const head = (api, data) => {
-	const title = generateSubTitleRoute(data).join('') + ' | Tagesansicht'
+	const title = generateSubTitleRoute(api, data).join('') + ' | Tagesansicht'
 	const elements = [
 		...helpers.staticHeader(api),
 		h('title', `${title} | ${api.settings.title}`),
@@ -138,10 +138,11 @@ const generateSubTitleDate = (data) => {
 	]
 }
 
-const generateSubTitleRoute = (data) => {
+const generateSubTitleRoute = (api, data) => {
+	const reverseTravelLink = h('a', { href: '?origin=' + data.input.destination.name + '&destination=' + data.input.origin.name + '&' + (api.options.url(data.input).join('&')), id: 'reverse-direction' }, h('span', ' → '))
 	return [
 		data.input.origin.name,
-		' → ',
+		reverseTravelLink,
 		data.input.destination.name,
 	]
 }
@@ -161,7 +162,7 @@ const createTemplate = api => data => {
 		h('body', [
 			h('div#page', [
 				h('div#header', [h('a', { href: './start', title: 'Preiskalender' }, [h('h1', 'Preiskalender')])]),
-				h('div', { class: 'subtitle' }, [h('span', generateSubTitleRoute(data))]),
+				h('div', { class: 'subtitle' }, [h('span', generateSubTitleRoute(api, data))]),
 				h('div', { id: 'date', class: 'subtitle' }, generateSubTitleDate(data)),
 				h('div', { id: 'options', class: 'subtitle' }, generateSubTitleOptions(api, data)),
 				journeyTable(api, data),