diff --git a/CHANGELOG.md b/CHANGELOG.md index c84ce2a..d8605df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +- [PR-59](https://github.com/itk-dev/aapodwalk/pull/59) + - Rename `ErrorComponent.jsx` to `MessageComponent.jsx` + - Rename `ErrorContext.jsx` to `MessageContext.jsx` + - Add `NavigationHelp.jsx`and write location services guide for safari/chrome 🥱 + - Check user permission to evaluate whether to display the info box - [PR-58](https://github.com/itk-dev/aapodwalk/pull/58) - This pr handles accessibility - Add [focus trap](https://www.npmjs.com/package/focus-trap-react) for "modals" diff --git a/src/App.jsx b/src/App.jsx index eb756c3..42af6ac 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,9 @@ import Navbar from "./components/Navbar"; import SkipLinks from "./components/SkipLinks"; import FAQ from "./components/FAQ"; import SeeOnMap from "./components/SeeOnMap"; -import ErrorContext from "./context/ErrorContext"; +import MessageContext from "./context/MessageContext"; +import { Link } from "react-router-dom"; +import NavigationHelp from "./components/NavigationHelp"; function App() { const [selectedRoute, setSelectedRoute] = useState(null); @@ -21,6 +23,8 @@ function App() { const [openStreetMapConsent, setOpenStreetMapConsent] = useState(null); const [error, setError] = useState(false); const [errorText, setErrorText] = useState(""); + const [info, setInfo] = useState(false); + const [infoText, setInfoText] = useState(""); const [lat, setLat] = useState(null); const [long, setLong] = useState(null); const locationUpdateInterval = 30000; @@ -33,6 +37,27 @@ function App() { [lat, long], ); + function handlePermissionInfoBanner() { + navigator.permissions.query({ name: "geolocation" }).then((result) => { + if (result.state !== "granted") { + setInfo(true); + setInfoText( + + Du har ikke accepteret, at vi må få adgang til din lokation. For at denne applikation skal fungere, skal den + bruge din lokation. Hvis du vil vide mere om hvordan du giver denne angang, kan du besøge{" "} + + Hjælp til navigation + + , + ); + } + }); + } + + useEffect(() => { + handlePermissionInfoBanner(); + }, []); + function startLocationPrompter() { setInterval(() => { navigator.geolocation.getCurrentPosition((position) => { @@ -83,15 +108,19 @@ function App() { Hovedindhold - ({ error, setError, errorText, setErrorText, + info, + setInfo, + infoText, + setInfoText, }), - [error, errorText], + [error, errorText, info, infoText], )} > @@ -108,7 +137,7 @@ function App() { -
Todo
+ @@ -120,7 +149,7 @@ function App() { - + diff --git a/src/components/FrontPage.jsx b/src/components/FrontPage.jsx index ddf554f..4afa0ad 100644 --- a/src/components/FrontPage.jsx +++ b/src/components/FrontPage.jsx @@ -1,7 +1,7 @@ import { React, useState, useContext, useEffect, useMemo } from "react"; import MapConsentBanner from "./MapConsentBanner"; import LandingPage from "./LandingPage"; -import ErrorComponent from "./ErrorComponent"; +import MessageComponent from "./MessageComponent"; import TagFilterList from "./tags/TagFilterList"; import SelectedTagContext from "../context/SelectedTagContext"; import RouteList from "./routes/RouteList"; @@ -18,7 +18,7 @@ function FrontPage() { return (
- + ({ diff --git a/src/components/ErrorComponent.jsx b/src/components/InfoComponent.jsx similarity index 57% rename from src/components/ErrorComponent.jsx rename to src/components/InfoComponent.jsx index 0b1de2f..d79779e 100644 --- a/src/components/ErrorComponent.jsx +++ b/src/components/InfoComponent.jsx @@ -1,20 +1,20 @@ import { React, useContext } from "react"; -import ErrorContext from "../context/ErrorContext"; +import ErrorContext from "../context/MessageContext"; import CloseButton from "./CloseButton"; -function ErrorComponent() { - const { errorText, error, setError, setErrorText } = useContext(ErrorContext); +function InfoComponent() { + const { infoText, info, setInfo, setInfoText } = useContext(ErrorContext); - function resetError() { - setError(false); - setError(setErrorText); + function resetInfo() { + setInfo(false); + setInfoText(setErrorText); } if (!error) return null; return (
resetError()} + closeOverlay={() => resetInfo()} label="Luk denne fejlbesked" additionalClasses="dark:bg-transparent dark:text-zinc-400" /> @@ -23,4 +23,4 @@ function ErrorComponent() { ); } -export default ErrorComponent; +export default InfoComponent; diff --git a/src/components/MessageComponent.jsx b/src/components/MessageComponent.jsx new file mode 100644 index 0000000..dfd9650 --- /dev/null +++ b/src/components/MessageComponent.jsx @@ -0,0 +1,49 @@ +import { React, useContext } from "react"; +import MessageContext from "../context/MessageContext"; +import CloseButton from "./CloseButton"; + +function MessageComponent() { + const { error, setError, errorText, setErrorText, info, setInfo, infoText, setInfoText } = useContext(MessageContext); + + function resetError() { + setError(false); + setErrorText(""); + } + function resetInfo() { + setInfo(false); + setInfoText(""); + } + + return ( + <> + {error && ( +
+ resetError()} + label="Luk denne fejlbesked" + additionalClasses="dark:bg-transparent dark:text-zinc-400" + /> + {errorText} +
+ )} + {info && ( +
+ resetInfo()} + label="Luk denne infomation" + additionalClasses="dark:bg-transparent dark:text-zinc-400" + /> + {infoText} +
+ )} + + ); +} + +export default MessageComponent; diff --git a/src/components/NavigationHelp.jsx b/src/components/NavigationHelp.jsx new file mode 100644 index 0000000..f518b49 --- /dev/null +++ b/src/components/NavigationHelp.jsx @@ -0,0 +1,101 @@ +import { React } from "react"; +import { Link } from "react-router-dom"; + +const NavigationHelp = () => { + return ( + <> +

Navigation

+ +

+ For alle browsere gælder det, at du kan ændre dine enhedens{" "} + lokationstjenesteindstillinger på systemniveau, hvilket vil påvirke + browserens adfærd. Du kan finde disse indstillinger i din enheds{" "} + Privatlivsindstillinger på både macOS, iOS og Windows. +

+

+ Herunder er der skrevet korte vejledninger om lokationstilladelse i{" "} + Google Chrome og Safari +

+

Google Chrome

+
    +
  1. + Åbn Google Chrome: Start browseren på din enhed +
    2. +
  2. + GÃ¥ til Indstillinger +
      +
    • Klik pÃ¥ de tre prikker øverst til højre i browseren (menuen)
      • +
    • + Vælg Indstillinger/settings fra menuen. +
      • +
    +
    3. +
  3. + Find Lokationsindstillinger +
      +
    • + I venstre side af indstillingerne, klik pÃ¥{" "} + Privatliv og sikkerhed/privacy and security +
      • +
    • + Vælg webstedstilladelser/site settings +
      • +
    • + Klik pÃ¥ Lokation +
      • +
    • + SlÃ¥ Lokationsdeling til/fra +
        +
      • + Hvis du har sagt nej til at et websted har adgang til din lokation kan det ændres herinde. Hvis du + fjerner det fra listen over websteder der ikke har adgang til din lokation, vil du blive spurgt til + tilladelse af deling af din lokation igen nÃ¥r du genbesøger siden. +
        • +
      +
      • +
    +
    4. +
+

+ + Du kan læse mere om tilladelser og lokation i Google Chrome her + +

+ +

Safari (iOS/iPadOS)

+
    +
  1. + Åbn indstillinger: Gå til{" "} + indstillinger-appen på din iPhone eller iPad +
    2. +
  2. + Find Safari Indstillinger +
      +
    • + Scroll ned og vælg Lokationstjenester +
      • +
    • + Tryk pÃ¥ Webstedstilladelser +
      • +
    +
    3. +
  3. + Slå Lokationsdeling til/fra +
      +
    • + Her kan du ændre indstillingerne for hvert websted, der har anmodet om adgang til din lokation + Privatliv og sikkerhed/privacy and security +
      • +
    +
    4. +
+

+ + Du kan læse mere om tilladelser og lokation i Safari til IPhone her + +

+ + ); +}; + +export default NavigationHelp; diff --git a/src/components/routes/RouteList.jsx b/src/components/routes/RouteList.jsx index d675c54..8dbe5c9 100644 --- a/src/components/routes/RouteList.jsx +++ b/src/components/routes/RouteList.jsx @@ -5,7 +5,7 @@ import SelectedTagContext from "../../context/SelectedTagContext"; import RoutesLoading from "./RoutesLoading"; import { sortByProximity, routesFilteredByTag } from "../../util/helper"; import LatLongContext from "../../context/latitude-longitude-context"; -import ErrorContext from "../../context/ErrorContext"; +import ErrorContext from "../../context/MessageContext"; function RouteList() { const { selectedTag } = useContext(SelectedTagContext); diff --git a/src/components/tags/TagFilterList.jsx b/src/components/tags/TagFilterList.jsx index b00b30a..da99710 100644 --- a/src/components/tags/TagFilterList.jsx +++ b/src/components/tags/TagFilterList.jsx @@ -2,7 +2,7 @@ import { React, useEffect, useState, useContext } from "react"; import useFetch from "../../util/useFetch"; import Tag from "./Tag"; import TagsLoading from "./TagsLoading"; -import ErrorContext from "../../context/ErrorContext"; +import ErrorContext from "../../context/MessageContext"; function TagFilterList() { const { setErrorText, setError } = useContext(ErrorContext); diff --git a/src/context/ErrorContext.jsx b/src/context/ErrorContext.jsx deleted file mode 100644 index 488b922..0000000 --- a/src/context/ErrorContext.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import { createContext } from "react"; - -const ErrorContext = createContext({}); - -export default ErrorContext; diff --git a/src/context/MessageContext.jsx b/src/context/MessageContext.jsx new file mode 100644 index 0000000..9521de0 --- /dev/null +++ b/src/context/MessageContext.jsx @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const MessageContext = createContext({}); + +export default MessageContext;