Skip to content

Commit

Permalink
Merge pull request #59 from itk-dev/feature/permission-location-and-g…
Browse files Browse the repository at this point in the history 
…uide

Feature/permission location and guide
  • Loading branch information
@rimi-itk
rimi-itk authored Dec 19, 2024
2 parents c6110f5 + 12b0de3 commit d0e4882
Show file tree
Hide file tree
Showing 10 changed files with 206 additions and 22 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
39 changes: 34 additions & 5 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -33,6 +37,27 @@ function App() {
[lat, long],
);

function handlePermissionInfoBanner() {
navigator.permissions.query({ name: "geolocation" }).then((result) => {
if (result.state !== "granted") {
setInfo(true);
setInfoText(
<span>
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{" "}
<Link className="underline" to="/navigation-help">
Hjælp til navigation
</Link>
</span>,
);
}
});
}

useEffect(() => {
handlePermissionInfoBanner();
}, []);

function startLocationPrompter() {
setInterval(() => {
navigator.geolocation.getCurrentPosition((position) => {
Expand Down Expand Up @@ -83,15 +108,19 @@ function App() {
<a id="main-content" href="/" tabIndex="-1" className="sr-only">
Hovedindhold
</a>
<ErrorContext.Provider
<MessageContext.Provider
value={useMemo(
() => ({
error,
setError,
errorText,
setErrorText,
info,
setInfo,
infoText,
setInfoText,
}),
[error, errorText],
[error, errorText, info, infoText],
)}
>
<Switch>
Expand All @@ -108,7 +137,7 @@ function App() {
<PersonalInformationPolicyPage />
</Route>
<Route path="/navigation-help">
<div>Todo</div>
<NavigationHelp />
</Route>
<Route path="/info">
<Info />
Expand All @@ -120,7 +149,7 @@ function App() {
<FrontPage />
</Route>
</Switch>
</ErrorContext.Provider>
</MessageContext.Provider>
</main>
</RouteContext.Provider>
</PermissionContext.Provider>
Expand Down
4 changes: 2 additions & 2 deletions src/components/FrontPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -18,7 +18,7 @@ function FrontPage() {
return (
<div>
<LandingPage />
<ErrorComponent />
<MessageComponent />
<SelectedTagContext.Provider
value={useMemo(
() => ({
Expand Down
16 changes: 8 additions & 8 deletions src/components/ErrorComponent.jsx → src/components/InfoComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="relative dark:bg-red-50 bg-red-50 text-black border-l-4 border-solid border-red-400 pl-5 pr-10 py-10">
<CloseButton
closeOverlay={() => resetError()}
closeOverlay={() => resetInfo()}
label="Luk denne fejlbesked"
additionalClasses="dark:bg-transparent dark:text-zinc-400"
/>
Expand All @@ -23,4 +23,4 @@ function ErrorComponent() {
);
}

export default ErrorComponent;
export default InfoComponent;
49 changes: 49 additions & 0 deletions src/components/MessageComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 && (
<div
role="banner"
className="relative dark:bg-red-50 bg-red-50 text-black border-l-4 border-solid border-red-400 pl-5 pr-10 py-10 mb-2"
>
<CloseButton
closeOverlay={() => resetError()}
label="Luk denne fejlbesked"
additionalClasses="dark:bg-transparent dark:text-zinc-400"
/>
{errorText}
</div>
)}
{info && (
<div
role="banner"
className="relative dark:bg-red-50 bg-yellow-50 text-black border-l-4 border-solid border-yellow-400 pl-5 pr-10 py-10 mb-2"
>
<CloseButton
closeOverlay={() => resetInfo()}
label="Luk denne infomation"
additionalClasses="dark:bg-transparent dark:text-zinc-400"
/>
{infoText}
</div>
)}
</>
);
}

export default MessageComponent;
101 changes: 101 additions & 0 deletions src/components/NavigationHelp.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { React } from "react";
import { Link } from "react-router-dom";

const NavigationHelp = () => {
return (
<>
<h1 className="text-2xl font-extrabold">Navigation</h1>

<p className="pt-5">
For alle browsere gælder det, at du kan ændre dine enhedens{" "}
<span className="font-extrabold">lokationstjenesteindstillinger</span> på systemniveau, hvilket vil påvirke
browserens adfærd. Du kan finde disse indstillinger i din enheds{" "}
<span className="font-extrabold">Privatlivsindstillinger</span> på både macOS, iOS og Windows.
</p>
<p className="pt-2">
Herunder er der skrevet korte vejledninger om lokationstilladelse i{" "}
<span className="font-extrabold">Google Chrome</span> og <span className="font-extrabold">Safari</span>
</p>
<h2 className="text-l font-extrabold pt-10">Google Chrome</h2>
<ol className="pt-5 list-decimal pl-10">
<li>
<span className="font-extrabold">Åbn Google Chrome</span>: Start browseren på din enhed
</li>
<li>
<span className="font-extrabold">Gå til Indstillinger</span>
<ul className="list-disc pl-10">
<li>Klik på de tre prikker øverst til højre i browseren (menuen)</li>
<li>
Vælg <span className="font-extrabold">Indstillinger/settings</span> fra menuen.
</li>
</ul>
</li>
<li>
<span className="font-extrabold">Find Lokationsindstillinger</span>
<ul className="list-disc pl-10">
<li>
I venstre side af indstillingerne, klik på{" "}
<span className="font-extrabold">Privatliv og sikkerhed/privacy and security</span>
</li>
<li>
Vælg <span className="font-extrabold">webstedstilladelser/site settings</span>
</li>
<li>
Klik på <span className="font-extrabold">Lokation</span>
</li>
<li>
<span className="font-extrabold">Slå Lokationsdeling til/fra</span>
<ul className="list-disc pl-10">
<li>
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.
</li>
</ul>
</li>
</ul>
</li>
</ol>
<p>
<Link className="underline" to="https://support.google.com/chrome/answer/114662">
Du kan læse mere om tilladelser og lokation i Google Chrome her
</Link>
</p>

<h2 className="text-l font-extrabold pt-10">Safari (iOS/iPadOS)</h2>
<ol className="pt-5 list-decimal pl-10">
<li>
<span className="font-extrabold">Åbn indstillinger</span>: Gå til{" "}
<span className="font-extrabold">indstillinger-appen</span> på din iPhone eller iPad
</li>
<li>
<span className="font-extrabold">Find Safari Indstillinger</span>
<ul className="list-disc pl-10">
<li>
Scroll ned og vælg <span className="font-extrabold">Lokationstjenester</span>
</li>
<li>
Tryk på <span className="font-extrabold">Webstedstilladelser</span>
</li>
</ul>
</li>
<li>
<span className="font-extrabold">Slå Lokationsdeling til/fra</span>
<ul className="list-disc pl-10">
<li>
Her kan du ændre indstillingerne for hvert websted, der har anmodet om adgang til din lokation
<span className="font-extrabold">Privatliv og sikkerhed/privacy and security</span>
</li>
</ul>
</li>
</ol>
<p>
<Link className="underline" to="https://support.apple.com/da-dk/102647">
Du kan læse mere om tilladelser og lokation i Safari til IPhone her
</Link>
</p>
</>
);
};

export default NavigationHelp;
2 changes: 1 addition & 1 deletion src/components/routes/RouteList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/components/tags/TagFilterList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
5 changes: 0 additions & 5 deletions src/context/ErrorContext.jsx
View file

This file was deleted.

5 changes: 5 additions & 0 deletions src/context/MessageContext.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createContext } from "react";

const MessageContext = createContext({});

export default MessageContext;

0 comments on commit d0e4882

Please sign in to comment.