Provide Location Routes so Room Programme can be linked to

README.md

@@ -88,6 +88,8 @@ The main place customisations go is the `src/config.json` file. Settings current
 - `HELP_TEXT.CLOSE_LABEL`: Label for button to dismiss help text.
 - `HELP_TEXT.CLOSE_ARIA_LABEL`: Label to describe dismiss button.
 - `LOCATIONS.SEARCHABLE`: Whether the location list can be searched by typing. (Searching can be inconvenient on touch screens.)
+- `LOCATIONS.LABEL`: Label to show on map links.
+- `LOCATIONS.MAPPING`: Array of locations, with links to show on map. Each room should be specified as: `{ "KEY": "Room name", "MAP_URL": "link to map" }`.
 - `APPLICATION.LOADING.MESSAGE`: Message to display while loading.
 - `PROGRAM.LIMIT.SHOW`: If true, "limit number of items" drop-down will be displayed.
 - `PROGRAM.LIMIT.LABEL`: Label for limit drop-down.

src/components/AppRoutes.js

@@ -15,6 +15,7 @@ import UnfilterableProgram from "./UnfilterableProgram";
 import MySchedule from "./MySchedule";
 import ItemById from "./ItemById";
 import ItemByIdList from "./ItemByIdList";
+import LocationProgramme from "./LocationProgramme";
 import People from "./People";
 import Person from "./Person";
 import Info from "./Info";
@@ -37,6 +38,7 @@ const AppRoutes = () => {
             <Route path="/index.html" element={<FilterableProgram />} />
             <Route path="id/:id" element={<ItemById />} />
             <Route path="ids/:idList" element={<ItemByIdList />} />
+            <Route path="loc/:locList" element={<LocationProgramme />} />
             <Route path="people">
               <Route index element={<People />} />
               <Route path=":id" element={<Person />} />

src/components/FilterableProgram.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import ReactSelect from "react-select";
 import { useStoreState, useStoreActions } from "easy-peasy";
 import { Temporal } from "@js-temporal/polyfill";
@@ -10,6 +11,8 @@ import ShowPastItems from "./ShowPastItems";
 import { LocalTime } from "../utils/LocalTime";
 
 const FilterableProgram = () => {
+  const navigate = useNavigate();
+
   const program = useStoreState((state) => state.program);
   const locations = useStoreState((state) => state.locations);
   const tags = useStoreState((state) => state.tags);
@@ -294,8 +297,16 @@ const FilterableProgram = () => {
               isSearchable={configData.LOCATIONS.SEARCHABLE}
               value={selLoc}
               onChange={(value) => {
+                console.log(value);
                 resetDisplayLimit();
                 setSelLoc(value);
+                if (value.length) {
+                  const locList = value.map((location) => location.value).join('~');
+                  navigate('/loc/' + locList);
+                }
+                else {
+                  navigate('/');
+                }
               }}
               className="filter-container"
               classNamePrefix="filter-select"

src/components/LocationProgramme.js

@@ -0,0 +1,21 @@
+import { useStoreActions } from "easy-peasy";
+import { useParams } from "react-router-dom";
+import FilterableProgram from "./FilterableProgram";
+
+const LocationProgramme = () => {
+  const setSelLoc = useStoreActions(
+    (actions) => actions.setProgramSelectedLocations
+  );
+
+  const params = useParams();
+  const locations = params.locList.split("~");
+  if (locations.length) {
+    setSelLoc(locations.map((loc) => { return {value: loc, label: loc}; }));
+  }
+
+  return (
+    <FilterableProgram />
+  );
+};
+
+export default LocationProgramme;

src/components/ProgramItem.js

@@ -114,6 +114,22 @@ const ProgramItem = ({ item, forceExpanded, now }) => {
     });
   }
 
+  if ('MAPPING' in configData.LOCATIONS) {
+    for (const location of configData.LOCATIONS.MAPPING) {
+      if (item.loc.toString() === location.KEY) {
+        links.push(
+          <ItemLink
+            key="map"
+            name="item-links-map"
+            link={location.MAP_URL}
+            text={configData.LOCATIONS.LABEL}
+            enabled={true}
+          />
+        )
+      }
+    }
+  }
+
   const duration =
     configData.DURATION.SHOW_DURATION && item.mins ? (
       <div className="item-duration">

src/config_example.json

@@ -40,7 +40,11 @@
     "CLOSE_ARIA_LABEL": "Dismiss help text"
   },
   "LOCATIONS": {
-    "SEARCHABLE": false
+    "SEARCHABLE": false,
+    "LABEL": "Show on map",
+    "MAPPING": [
+      { "KEY": "Davin - Croke Park", "MAP_URL": "https://map.octocon.com" }
+    ]
   },
   "APPLICATION": {
     "LOADING": {