ctucx.git: trainsearch

only draw arrows when earlier/later-ref is available

diff --git a/src/canvas.js b/src/canvas.js
@@ -56,7 +56,6 @@ let rectWidth, padding, rectWidthWithPadding, canvas, ctx;
 let dpr = window.devicePixelRatio || 1;
 
 const canvasState = {
-	journeys: [],
 	offsetX: 0,
 };
 

@@ -79,14 +78,13 @@ export const setupCanvas = (data, isUpdate) => {
 	canvas = document.getElementById('canvas');
 	ctx = canvas.getContext('2d');
 	if (data) {
-
-		canvasState.indexOffset = data.indexOffset;
-		canvasState.journeys = Object.keys(data.journeys).sort((a, b) => Number(a) - Number(b)).map(k => data.journeys[k]);
-		canvasState.slug = data.slug;
-		canvasState.profile = data.profile || "db";
+		canvasState.data = {
+			...data,
+			journeys: Object.keys(data.journeys).sort((a, b) => Number(a) - Number(b)).map(k => data.journeys[k])
+		};
 
 		(async () => {
-			for (const journey of canvasState.journeys) {
+			for (const journey of canvasState.data.journeys) {
 				for (const leg of journey.legs) {
 					const fahrtNr = leg.line?.fahrtNr;
 					if (!fahrtNr) continue;

@@ -161,11 +159,11 @@ let lastAnimationUpdate = 0, firstDeparture = 0, scaleFactor = 0, lastArrival = 
 let animationInterval;
 const renderJourneys = () => {
 	ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
-	let x = canvasState.offsetX - canvasState.indexOffset * rectWidthWithPadding, y;
+	let x = canvasState.offsetX - canvasState.data.indexOffset * rectWidthWithPadding, y;
 
 	const firstVisibleJourney = Math.max(0, Math.floor((-x + padding) / rectWidthWithPadding));
 	const numVisibleJourneys = Math.ceil(canvas.width / dpr / rectWidthWithPadding);
-	const visibleJourneys = canvasState.journeys.slice(firstVisibleJourney, firstVisibleJourney + numVisibleJourneys);
+	const visibleJourneys = canvasState.data.journeys.slice(firstVisibleJourney, firstVisibleJourney + numVisibleJourneys);
 
 	if (!visibleJourneys.length) return;
 

@@ -201,7 +199,7 @@ const renderJourneys = () => {
 		}
 	}
 
-	let time = canvasState.journeys[0].legs[0].plannedDeparture;
+	let time = canvasState.data.journeys[0].legs[0].plannedDeparture;
 
 	ctx.font = `${(window.innerWidth / dpr) > 600 ? 20 : 15}px sans-serif`;
 	ctx.fillStyle = '#aaa';

@@ -216,22 +214,24 @@ const renderJourneys = () => {
 	ctx.fillRect(0, y-2, canvas.width / dpr, 5);
 
 	const p = new Path2D('M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z');
-	ctx.fillStyle = '#fff';
-	ctx.shadowColor = '#00000080';
-	ctx.save();
-	ctx.scale(3, 3);
-	ctx.translate(x / 3 - 15, canvas.height / dpr / 6 - 24);
-	ctx.rotate(-Math.PI*1.5);
-	ctx.fill(p);
-	ctx.restore();
-	ctx.beginPath();
-	ctx.arc(x - 80,canvas.height / dpr / 2 - 35,50,0,2*Math.PI);
-	ctx.fillStyle = '#ffffff40';
-	ctx.fill();
-	ctx.strokeStyle = '#00000020';
-	ctx.stroke();
-
-	for (const journey of canvasState.journeys) {
+	if (canvasState.data.earlierRef) {
+		ctx.fillStyle = '#fff';
+		ctx.shadowColor = '#00000080';
+		ctx.save();
+		ctx.scale(3, 3);
+		ctx.translate(x / 3 - 15, canvas.height / dpr / 6 - 24);
+		ctx.rotate(-Math.PI*1.5);
+		ctx.fill(p);
+		ctx.restore();
+		ctx.beginPath();
+		ctx.arc(x - 80,canvas.height / dpr / 2 - 35,50,0,2*Math.PI);
+		ctx.fillStyle = '#ffffff40';
+		ctx.fill();
+		ctx.strokeStyle = '#00000020';
+		ctx.stroke();
+	}
+
+	for (const journey of canvasState.data.journeys) {
 		journey.legs.reverse();
 		for (const leg of journey.legs) {
 			if (Math.abs(leg.departureDelay) > 60 || Math.abs(leg.arrivalDelay) > 60) {

@@ -248,9 +248,9 @@ const renderJourneys = () => {
 		x += rectWidthWithPadding;
 	}
 
-	x = canvasState.offsetX - canvasState.indexOffset * rectWidthWithPadding;
+	x = canvasState.offsetX - canvasState.data.indexOffset * rectWidthWithPadding;
 
-	for (const journey of canvasState.journeys) {
+	for (const journey of canvasState.data.journeys) {
 		let xOffset = 0;
 		let nextLeg;
 		for (const leg of journey.legs) {

@@ -339,20 +339,22 @@ const renderJourneys = () => {
 
 		x += rectWidthWithPadding;
 	}
-	ctx.fillStyle = '#fff';
-	ctx.shadowColor = '#00000080';
-	ctx.save();
-	ctx.scale(3, 3);
-	ctx.translate(x / 3 + 5, canvas.height / dpr / 6);
-	ctx.rotate(Math.PI*1.5);
-	ctx.fill(p);
-	ctx.restore();
-	ctx.beginPath();
-	ctx.arc(x + 50,canvas.height / dpr / 2 - 35,50,0,2*Math.PI);
-	ctx.fillStyle = '#ffffff40';
-	ctx.fill();
-	ctx.strokeStyle = '#00000020';
-	ctx.stroke();
+	if (canvasState.data.laterRef) {
+		ctx.fillStyle = '#fff';
+		ctx.shadowColor = '#00000080';
+		ctx.save();
+		ctx.scale(3, 3);
+		ctx.translate(x / 3 + 5, canvas.height / dpr / 6);
+		ctx.rotate(Math.PI*1.5);
+		ctx.fill(p);
+		ctx.restore();
+		ctx.beginPath();
+		ctx.arc(x + 50,canvas.height / dpr / 2 - 35,50,0,2*Math.PI);
+		ctx.fillStyle = '#ffffff40';
+		ctx.fill();
+		ctx.strokeStyle = '#00000020';
+		ctx.stroke();
+	}
 };
 
 const resizeHandler = () => {

@@ -381,16 +383,16 @@ const mouseUpHandler = (evt) => {
 	const x = evt.x || evt.changedTouches[0].pageX;
 	if (canvasState.dragging && canvasState.isClick) {
 		evt.preventDefault();
-		const num = Math.floor((x - canvasState.offsetX + 2 * padding) / rectWidthWithPadding) + canvasState.indexOffset;
+		const num = Math.floor((x - canvasState.offsetX + 2 * padding) / rectWidthWithPadding) + canvasState.data.indexOffset;
 		if (num >= 0) {
-			if (num < canvasState.journeys.length) {
-				const j = canvasState.journeys[num];
-				go(`/j/${canvasState.profile || "db"}/${j.refreshToken}`);
-			} else {
-				moreJourneys(canvasState.slug, 'later');
+			if (num < canvasState.data.journeys.length) {
+				const j = canvasState.data.journeys[num];
+				go(`/j/${canvasState.data.profile || "db"}/${j.refreshToken}`);
+			} else if (canvasState.data.laterRef) {
+				moreJourneys(canvasState.data.slug, 'later');
 			}
-		} else {
-			moreJourneys(canvasState.slug, 'earlier');
+		} else if (canvasState.data.earlierRef) {
+			moreJourneys(canvasState.data.slug, 'earlier');
 		}
 	}
 

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -45,7 +45,9 @@ const journeysTemplate = (data) => html`
 			</div>
 		` : ''}
 		${settings.journeysViewMode === 'table' ? html`
-			<a class="loadMore icon-arrow2 flipped" title="${t('label_earlier')}" @click=${() => moreJourneys(data.slug, 'earlier')}></a>
+			${data.earlierRef ? html`
+				<a class="loadMore icon-arrow2 flipped" title="${t('label_earlier')}" @click=${() => moreJourneys(data.slug, 'earlier')}></a>
+			` : ''}
 
 			<div class="card">
 			<table>

@@ -66,7 +68,9 @@ const journeysTemplate = (data) => html`
 			</table>
 			</div>
 
-			<a class="loadMore icon-arrow2" title="${t('label_later')}" @click=${() => moreJourneys(data.slug, 'later')}></a>
+			${data.laterRef ? html`
+				<a class="loadMore icon-arrow2" title="${t('label_later')}" @click=${() => moreJourneys(data.slug, 'later')}></a>
+			` : ''}
 		` : ''}
 	</div>
 `;