Skip to content

Commit d0e4882

Browse files
rimi-itkrimi-itk
authored
Merge pull request #59 from itk-dev/feature/permission-location-and-guide
Feature/permission location and guide
2 parents c6110f5 + 12b0de3 commit d0e4882

File tree

10 files changed

+206
-22
lines changed

10 files changed

+206
-22
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## Unreleased
99

10+
- [PR-59](https://github.com/itk-dev/aapodwalk/pull/59)
11+
- Rename `ErrorComponent.jsx` to `MessageComponent.jsx`
12+
- Rename `ErrorContext.jsx` to `MessageContext.jsx`
13+
- Add `NavigationHelp.jsx`and write location services guide for safari/chrome 🥱
14+
- Check user permission to evaluate whether to display the info box
1015
- [PR-58](https://github.com/itk-dev/aapodwalk/pull/58)
1116
- This pr handles accessibility
1217
- Add [focus trap](https://www.npmjs.com/package/focus-trap-react) for "modals"

‎src/App.jsx‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import Navbar from "./components/Navbar";
1212
import SkipLinks from "./components/SkipLinks";
1313
import FAQ from "./components/FAQ";
1414
import SeeOnMap from "./components/SeeOnMap";
15-
import ErrorContext from "./context/ErrorContext";
15+
import MessageContext from "./context/MessageContext";
16+
import { Link } from "react-router-dom";
17+
import NavigationHelp from "./components/NavigationHelp";
1618

1719
function App() {
1820
const [selectedRoute, setSelectedRoute] = useState(null);
@@ -21,6 +23,8 @@ function App() {
2123
const [openStreetMapConsent, setOpenStreetMapConsent] = useState(null);
2224
const [error, setError] = useState(false);
2325
const [errorText, setErrorText] = useState("");
26+
const [info, setInfo] = useState(false);
27+
const [infoText, setInfoText] = useState("");
2428
const [lat, setLat] = useState(null);
2529
const [long, setLong] = useState(null);
2630
const locationUpdateInterval = 30000;
@@ -33,6 +37,27 @@ function App() {
3337
[lat, long],
3438
);
3539

40+
function handlePermissionInfoBanner() {
41+
navigator.permissions.query({ name: "geolocation" }).then((result) => {
42+
if (result.state !== "granted") {
43+
setInfo(true);
44+
setInfoText(
45+
<span>
46+
Du har ikke accepteret, at vi må få adgang til din lokation. For at denne applikation skal fungere, skal den
47+
bruge din lokation. Hvis du vil vide mere om hvordan du giver denne angang, kan du besøge{" "}
48+
<Link className="underline" to="/navigation-help">
49+
Hjælp til navigation
50+
</Link>
51+
</span>,
52+
);
53+
}
54+
});
55+
}
56+
57+
useEffect(() => {
58+
handlePermissionInfoBanner();
59+
}, []);
60+
3661
function startLocationPrompter() {
3762
setInterval(() => {
3863
navigator.geolocation.getCurrentPosition((position) => {
@@ -83,15 +108,19 @@ function App() {
83108
<a id="main-content" href="/" tabIndex="-1" className="sr-only">
84109
Hovedindhold
85110
</a>
86-
<ErrorContext.Provider
111+
<MessageContext.Provider
87112
value={useMemo(
88113
() => ({
89114
error,
90115
setError,
91116
errorText,
92117
setErrorText,
118+
info,
119+
setInfo,
120+
infoText,
121+
setInfoText,
93122
}),
94-
[error, errorText],
123+
[error, errorText, info, infoText],
95124
)}
96125
>
97126
<Switch>
@@ -108,7 +137,7 @@ function App() {
108137
<PersonalInformationPolicyPage />
109138
</Route>
110139
<Route path="/navigation-help">
111-
<div>Todo</div>
140+
<NavigationHelp />
112141
</Route>
113142
<Route path="/info">
114143
<Info />
@@ -120,7 +149,7 @@ function App() {
120149
<FrontPage />
121150
</Route>
122151
</Switch>
123-
</ErrorContext.Provider>
152+
</MessageContext.Provider>
124153
</main>
125154
</RouteContext.Provider>
126155
</PermissionContext.Provider>

‎src/components/FrontPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { React, useState, useContext, useEffect, useMemo } from "react";
22
import MapConsentBanner from "./MapConsentBanner";
33
import LandingPage from "./LandingPage";
4-
import ErrorComponent from "./ErrorComponent";
4+
import MessageComponent from "./MessageComponent";
55
import TagFilterList from "./tags/TagFilterList";
66
import SelectedTagContext from "../context/SelectedTagContext";
77
import RouteList from "./routes/RouteList";
@@ -18,7 +18,7 @@ function FrontPage() {
1818
return (
1919
<div>
2020
<LandingPage />
21-
<ErrorComponent />
21+
<MessageComponent />
2222
<SelectedTagContext.Provider
2323
value={useMemo(
2424
() => ({

‎src/components/ErrorComponent.jsx‎ renamed to ‎src/components/InfoComponent.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { React, useContext } from "react";
2-
import ErrorContext from "../context/ErrorContext";
2+
import ErrorContext from "../context/MessageContext";
33
import CloseButton from "./CloseButton";
44

5-
function ErrorComponent() {
6-
const { errorText, error, setError, setErrorText } = useContext(ErrorContext);
5+
function InfoComponent() {
6+
const { infoText, info, setInfo, setInfoText } = useContext(ErrorContext);
77

8-
function resetError() {
9-
setError(false);
10-
setError(setErrorText);
8+
function resetInfo() {
9+
setInfo(false);
10+
setInfoText(setErrorText);
1111
}
1212

1313
if (!error) return null;
1414
return (
1515
<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">
1616
<CloseButton
17-
closeOverlay={() => resetError()}
17+
closeOverlay={() => resetInfo()}
1818
label="Luk denne fejlbesked"
1919
additionalClasses="dark:bg-transparent dark:text-zinc-400"
2020
/>
@@ -23,4 +23,4 @@ function ErrorComponent() {
2323
);
2424
}
2525

26-
export default ErrorComponent;
26+
export default InfoComponent;

‎src/components/MessageComponent.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { React, useContext } from "react";
2+
import MessageContext from "../context/MessageContext";
3+
import CloseButton from "./CloseButton";
4+
5+
function MessageComponent() {
6+
const { error, setError, errorText, setErrorText, info, setInfo, infoText, setInfoText } = useContext(MessageContext);
7+
8+
function resetError() {
9+
setError(false);
10+
setErrorText("");
11+
}
12+
function resetInfo() {
13+
setInfo(false);
14+
setInfoText("");
15+
}
16+
17+
return (
18+
<>
19+
{error && (
20+
<div
21+
role="banner"
22+
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"
23+
>
24+
<CloseButton
25+
closeOverlay={() => resetError()}
26+
label="Luk denne fejlbesked"
27+
additionalClasses="dark:bg-transparent dark:text-zinc-400"
28+
/>
29+
{errorText}
30+
</div>
31+
)}
32+
{info && (
33+
<div
34+
role="banner"
35+
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"
36+
>
37+
<CloseButton
38+
closeOverlay={() => resetInfo()}
39+
label="Luk denne infomation"
40+
additionalClasses="dark:bg-transparent dark:text-zinc-400"
41+
/>
42+
{infoText}
43+
</div>
44+
)}
45+
</>
46+
);
47+
}
48+
49+
export default MessageComponent;

‎src/components/NavigationHelp.jsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { React } from "react";
2+
import { Link } from "react-router-dom";
3+
4+
const NavigationHelp = () => {
5+
return (
6+
<>
7+
<h1 className="text-2xl font-extrabold">Navigation</h1>
8+
9+
<p className="pt-5">
10+
For alle browsere gælder det, at du kan ændre dine enhedens{" "}
11+
<span className="font-extrabold">lokationstjenesteindstillinger</span> på systemniveau, hvilket vil påvirke
12+
browserens adfærd. Du kan finde disse indstillinger i din enheds{" "}
13+
<span className="font-extrabold">Privatlivsindstillinger</span> på både macOS, iOS og Windows.
14+
</p>
15+
<p className="pt-2">
16+
Herunder er der skrevet korte vejledninger om lokationstilladelse i{" "}
17+
<span className="font-extrabold">Google Chrome</span> og <span className="font-extrabold">Safari</span>
18+
</p>
19+
<h2 className="text-l font-extrabold pt-10">Google Chrome</h2>
20+
<ol className="pt-5 list-decimal pl-10">
21+
<li>
22+
<span className="font-extrabold">Åbn Google Chrome</span>: Start browseren på din enhed
23+
</li>
24+
<li>
25+
<span className="font-extrabold">Gå til Indstillinger</span>
26+
<ul className="list-disc pl-10">
27+
<li>Klik på de tre prikker øverst til højre i browseren (menuen)</li>
28+
<li>
29+
Vælg <span className="font-extrabold">Indstillinger/settings</span> fra menuen.
30+
</li>
31+
</ul>
32+
</li>
33+
<li>
34+
<span className="font-extrabold">Find Lokationsindstillinger</span>
35+
<ul className="list-disc pl-10">
36+
<li>
37+
I venstre side af indstillingerne, klik på{" "}
38+
<span className="font-extrabold">Privatliv og sikkerhed/privacy and security</span>
39+
</li>
40+
<li>
41+
Vælg <span className="font-extrabold">webstedstilladelser/site settings</span>
42+
</li>
43+
<li>
44+
Klik på <span className="font-extrabold">Lokation</span>
45+
</li>
46+
<li>
47+
<span className="font-extrabold">Slå Lokationsdeling til/fra</span>
48+
<ul className="list-disc pl-10">
49+
<li>
50+
Hvis du har sagt nej til at et websted har adgang til din lokation kan det ændres herinde. Hvis du
51+
fjerner det fra listen over websteder der ikke har adgang til din lokation, vil du blive spurgt til
52+
tilladelse af deling af din lokation igen når du genbesøger siden.
53+
</li>
54+
</ul>
55+
</li>
56+
</ul>
57+
</li>
58+
</ol>
59+
<p>
60+
<Link className="underline" to="https://support.google.com/chrome/answer/114662">
61+
Du kan læse mere om tilladelser og lokation i Google Chrome her
62+
</Link>
63+
</p>
64+
65+
<h2 className="text-l font-extrabold pt-10">Safari (iOS/iPadOS)</h2>
66+
<ol className="pt-5 list-decimal pl-10">
67+
<li>
68+
<span className="font-extrabold">Åbn indstillinger</span>: Gå til{" "}
69+
<span className="font-extrabold">indstillinger-appen</span> på din iPhone eller iPad
70+
</li>
71+
<li>
72+
<span className="font-extrabold">Find Safari Indstillinger</span>
73+
<ul className="list-disc pl-10">
74+
<li>
75+
Scroll ned og vælg <span className="font-extrabold">Lokationstjenester</span>
76+
</li>
77+
<li>
78+
Tryk på <span className="font-extrabold">Webstedstilladelser</span>
79+
</li>
80+
</ul>
81+
</li>
82+
<li>
83+
<span className="font-extrabold">Slå Lokationsdeling til/fra</span>
84+
<ul className="list-disc pl-10">
85+
<li>
86+
Her kan du ændre indstillingerne for hvert websted, der har anmodet om adgang til din lokation
87+
<span className="font-extrabold">Privatliv og sikkerhed/privacy and security</span>
88+
</li>
89+
</ul>
90+
</li>
91+
</ol>
92+
<p>
93+
<Link className="underline" to="https://support.apple.com/da-dk/102647">
94+
Du kan læse mere om tilladelser og lokation i Safari til IPhone her
95+
</Link>
96+
</p>
97+
</>
98+
);
99+
};
100+
101+
export default NavigationHelp;

‎src/components/routes/RouteList.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import SelectedTagContext from "../../context/SelectedTagContext";
55
import RoutesLoading from "./RoutesLoading";
66
import { sortByProximity, routesFilteredByTag } from "../../util/helper";
77
import LatLongContext from "../../context/latitude-longitude-context";
8-
import ErrorContext from "../../context/ErrorContext";
8+
import ErrorContext from "../../context/MessageContext";
99

1010
function RouteList() {
1111
const { selectedTag } = useContext(SelectedTagContext);

‎src/components/tags/TagFilterList.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { React, useEffect, useState, useContext } from "react";
22
import useFetch from "../../util/useFetch";
33
import Tag from "./Tag";
44
import TagsLoading from "./TagsLoading";
5-
import ErrorContext from "../../context/ErrorContext";
5+
import ErrorContext from "../../context/MessageContext";
66

77
function TagFilterList() {
88
const { setErrorText, setError } = useContext(ErrorContext);

‎src/context/ErrorContext.jsx‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/context/MessageContext.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createContext } from "react";
2+
3+
const MessageContext = createContext({});
4+
5+
export default MessageContext;

0 commit comments

Comments
 (0)