From e937f3f41b33ba94d36f898573df75a9cd10e5c0 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 6 Feb 2023 13:04:17 +0100
Subject: [PATCH] list items shown on map

---
 resources/js/components/common/Icon.js     |  1 +
 resources/js/components/map/Item.js        | 94 ++++++++++++++++++++++
 resources/js/components/map/List.js        | 31 +++++++
 resources/js/components/pages/Map.js       |  2 +
 resources/js/components/techniques/List.js |  6 +-
 resources/js/i18n/de.js                    |  2 +
 resources/js/i18n/en.js                    |  2 +
 resources/sass/map.scss                    | 16 ++++
 8 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/map/Item.js
 create mode 100644 resources/js/components/map/List.js

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index c9d604a..3e094cc 100644
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -63,6 +63,7 @@ Icon.ALLOWED = makePreset('AllowedIcon', 'square-check');
 Icon.APPLY = makePreset('ApplyIcon', 'right-to-bracket');
 Icon.APPLICATIONS = makePreset('ApplicationsIcon', 'person-running');
 Icon.CHART = makePreset('ChartIcon', 'chart-line');
+Icon.CROSSHAIRS = makePreset('CrosshairsIcon', 'crosshairs');
 Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']);
 Icon.EDIT = makePreset('EditIcon', 'edit');
 Icon.FINISHED = makePreset('FinishedIcon', 'square-check');
diff --git a/resources/js/components/map/Item.js b/resources/js/components/map/Item.js
new file mode 100644
index 0000000..4bd209a
--- /dev/null
+++ b/resources/js/components/map/Item.js
@@ -0,0 +1,94 @@
+import OpenSeadragon from 'openseadragon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import { useOpenSeadragon } from './OpenSeadragon';
+import Icon from '../common/Icon';
+import Rulesets from '../techniques/Rulesets';
+import {
+	getLink,
+	getRelations,
+	getTranslation,
+	hasRelations,
+	sorted,
+} from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Item = ({ pin }) => {
+	const { viewer } = useOpenSeadragon();
+	const { t } = useTranslation();
+
+	const goToLocation = React.useCallback(pin => {
+		if (viewer && viewer.viewport) {
+			viewer.viewport.panTo(new OpenSeadragon.Point(pin.x, pin.y));
+			viewer.viewport.zoomTo(4);
+			viewer.element.scrollIntoView();
+		}
+	}, [viewer]);
+
+	return <li className="d-flex align-items-start justify-content-between">
+		<div className="flex-grow-1">
+				{pin.technique.type === 'location' ? <>
+					<h2>{getTranslation(pin.technique, 'title', i18n.language)}</h2>
+					<p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
+					{hasRelations(pin.technique, 'related') ?
+						sorted(getRelations(pin.technique, 'related')).map(r =>
+							<div
+								className="d-flex align-items-start justify-content-between"
+								key={r.id}
+							>
+								<div className="me-auto">
+									<h3>
+										<Link to={getLink(r)}>
+											{getTranslation(r, 'title', i18n.language)}
+										</Link>
+									</h3>
+									<p>{getTranslation(r, 'short', i18n.language)}</p>
+								</div>
+								{r.rulesets ?
+									<Rulesets technique={r} />
+								: null}
+							</div>
+						)
+					: null}
+				</> : <div className="d-flex align-items-start justify-content-between">
+					<div className="flex-grow-1">
+						<h2>
+							<Link to={getLink(pin.technique)}>
+								{getTranslation(pin.technique, 'title', i18n.language)}
+							</Link>
+						</h2>
+						<p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
+					</div>
+					{pin.technique.rulesets ?
+						<Rulesets technique={pin.technique} />
+					: null}
+				</div>}
+			</div>
+		<Button
+			className="m-2"
+			onClick={() => goToLocation(pin)}
+			title={t('map.goToLocation')}
+			variant="outline-secondary"
+		>
+			<Icon.CROSSHAIRS title="" />
+		</Button>
+	</li>;
+};
+
+Item.propTypes = {
+	pin: PropTypes.shape({
+		technique: PropTypes.shape({
+			rulesets: PropTypes.shape({
+			}),
+			type: PropTypes.string,
+		}),
+		x: PropTypes.number,
+		y: PropTypes.number,
+	}),
+};
+
+export default Item;
diff --git a/resources/js/components/map/List.js b/resources/js/components/map/List.js
new file mode 100644
index 0000000..7b66630
--- /dev/null
+++ b/resources/js/components/map/List.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Item from './Item';
+import { useOpenSeadragon } from './OpenSeadragon';
+import { compareTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const List = () => {
+	const { pins } = useOpenSeadragon();
+	const { t } = useTranslation();
+
+	const sortedPins = React.useMemo(() => {
+		const compare = compareTranslation('title', i18n.language);
+		return pins.sort((a, b) => compare(a.technique, b.technique));
+	}, [pins, i18n.language]);
+
+	if (!pins || !pins.length) return null;
+
+	return <Container className="mt-3">
+		<h2>{t('map.onThisMap')}</h2>
+		<ul className="pin-list">
+			{sortedPins.map(pin =>
+				<Item key={pin.id} pin={pin} />
+			)}
+		</ul>
+	</Container>;
+};
+
+export default List;
diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
index 44ac0a0..841227c 100644
--- a/resources/js/components/pages/Map.js
+++ b/resources/js/components/pages/Map.js
@@ -3,6 +3,7 @@ import { Container } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import Buttons from '../map/Buttons';
+import List from '../map/List';
 import OpenSeadragon from '../map/OpenSeadragon';
 import Pins from '../map/Pins';
 
@@ -22,6 +23,7 @@ const Map = () => {
 			</div>
 			<div ref={container} style={{ height: '80vh' }} />
 			<Pins />
+			<List />
 		</OpenSeadragon>
 	</Container>;
 };
diff --git a/resources/js/components/techniques/List.js b/resources/js/components/techniques/List.js
index e18937e..aa80836 100644
--- a/resources/js/components/techniques/List.js
+++ b/resources/js/components/techniques/List.js
@@ -20,9 +20,9 @@ const List = ({ techniques }) => <ul className="tech-list">
 				</h2>
 				<p>{getTranslation(tech, 'short', i18n.language)}</p>
 			</div>
-		{tech.rulesets ?
-			<Rulesets technique={tech} />
-		: null}
+			{tech.rulesets ?
+				<Rulesets technique={tech} />
+			: null}
 		</li>
 	)}
 </ul>;
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 0f7c8ff..02adc9d 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -379,9 +379,11 @@ export default {
 		map: {
 			dwLong: 'Dark World',
 			dwShort: 'DW',
+			goToLocation: 'Zur Stelle springen',
 			heading: 'Karte',
 			lwLong: 'Light World',
 			lwShort: 'LW',
+			onThisMap: 'Auf dieser Karte',
 			spLong: 'Spezielle Gebiete',
 			spShort: 'SP',
 			uwLong: 'Underworld',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 7414796..efb99b3 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -379,9 +379,11 @@ export default {
 		map: {
 			dwLong: 'Dark World',
 			dwShort: 'DW',
+			goToLocation: 'Go to location',
 			heading: 'Map',
 			lwLong: 'Light World',
 			lwShort: 'LW',
+			onThisMap: 'On this map',
 			spLong: 'Special Areas',
 			spShort: 'SP',
 			uwLong: 'Underworld',
diff --git a/resources/sass/map.scss b/resources/sass/map.scss
index 95d645a..599cd15 100644
--- a/resources/sass/map.scss
+++ b/resources/sass/map.scss
@@ -16,3 +16,19 @@
 		display: none;
 	}
 }
+
+.pin-list {
+	margin: 1em 0;
+	padding: 0;
+	list-style: none;
+
+	li {
+		margin: 1ex 0;
+		padding: 1ex;
+		border-top: thin solid silver;
+	}
+
+	h2 > a, h3 > a {
+		text-decoration: none;
+	}
+}
-- 
2.39.2