Skip to content

Commit

Permalink
Showing 15 changed files with 477 additions and 15 deletions.
46 changes: 46 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@
"@types/node": "^18.7.18",
"@types/react": "^18.0.20",
"@types/react-dom": "^18.0.6",
"@types/react-image-gallery": "^1.2.0",
"bulma": "^0.9.4",
"bulma-checkradio": "^2.1.3",
"cross-env": "^7.0.3",
@@ -30,8 +31,10 @@
"react-bulma-components": "^4.1.0",
"react-dom": "^18.1.0",
"react-i18next": "^11.16.9",
"react-image-gallery": "^1.3.0",
"react-scripts": "5.0.1",
"react-select": "^5.7.0",
"store": "^2.0.12",
"typescript": "^4.8.3",
"web-vitals": "^2.1.4"
},
@@ -70,6 +73,7 @@
},
"devDependencies": {
"@beyondtracks/spritezero-cli": "^2.3.1",
"@types/store": "^2.0.2",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@typescript-eslint/parser": "^5.40.0",
"eslint": "^8.25.0",
13 changes: 12 additions & 1 deletion public/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -92,7 +92,9 @@
"about_osm": "OpenStreetMap (OSM) is like a Wikipedia for maps. It's available to use for everyone and anybody can add objects to the map. You can use your OSM account to add AED locations directly from this site using a simple form.",
"create_account": "You can contribute too! Just create a free account on ",
"become_openaedmap_partner": "Do you want to become OpenAEDMap partner?",
"contact_us": "Contact us"
"contact_us": "Contact us",
"thanks_for_photo": "Thank you for uploading the photo. It should be visible soon.",
"thanks_for_report": "Thank you for sending a report. It will be reviewed by the site administrators."
},
"partners": {
"honorary_patronage": "Honorary patronage",
@@ -104,5 +106,14 @@
},
"common": {
"loading": "Loading..."
},
"photo": {
"upload": "Upload photo",
"remove": "Remove photo",
"report": "Report photo",
"send_report": "Send report",
"report_long_text": "You can report the photo if it's bad quality, does not show the AEDs location or is inapropriate in any way. Administrators of the site will review the report.",
"license": "All AED photos hosted by us are licensed under Creative Commons Zero (CC0 v1.0). By uploading your photo you agree to this license terms.",
"license_short_description": "In short this means that the photo can be used by anyone for any purpose. No attribution is necessary."
}
}
13 changes: 12 additions & 1 deletion public/locales/pl/translation.json
Original file line number Diff line number Diff line change
@@ -92,7 +92,9 @@
"about_osm": "OpenStreetMap (OSM) jest jak Wikipedia dla map. Jest dostępny dla każdego i każdy może dodawać obiekty do mapy. Możesz użyć swojego konta OSM, aby dodać lokalizacje AED bezpośrednio z tej strony za pomocą prostego formularza.",
"create_account": "Ty również możesz ją współtworzyć! Stwórz darmowe konto ",
"become_openaedmap_partner": "Chcesz objąć patronatem projekt Mapy AED?",
"contact_us": "Skontaktuj się z nami"
"contact_us": "Skontaktuj się z nami",
"thanks_for_photo": "Dziękujemy za wysłanie zdjęcia. Niedługo powinno być widoczne na stronie.",
"thanks_for_report": "Dziękujemy za wysłanie zgłoszenia. Zostanieono przeanalizowane przez administratorów strony."
},
"partners": {
"honorary_patronage": "Patronat honorowy",
@@ -104,5 +106,14 @@
},
"common": {
"loading": "Ładowanie..."
},
"photo": {
"upload": "Wyślij zdjęcie",
"remove": "Usuń zdjęcie",
"report": "Zgłoś zdjęcie",
"send_report": "Wyślij zgłoszenie",
"report_long_text": "Możesz zgłosić zdjęcie jeżeli ma słabą jakość, nie pokazuje położenia AEDa lub jest w jakikolwiek inny sposób niestosowne. Zgłoszenie zostanie przeanalizowane przez administratorów strony.",
"license": "Wszystkie udostępniane przez nas zdjęcia AEDów są na licencji Creative Commons Zero (CC0 v1.0). Wysyłając zdjęcie zgadzasz się na warunki tej licencji.",
"license_short_description": "W skrócie oznacza to, że zdjęcia mogą być potem wykorzystane przez kogokolwiek w dowolnym celu. Nie jest konieczne wskazanie autora."
}
}
16 changes: 16 additions & 0 deletions src/components/modal.tsx
Original file line number Diff line number Diff line change
@@ -80,6 +80,22 @@ const ModalContent: FC<{}> = () => {
return <p className="pb-2">{errorText}</p>;
}
case ModalType.Partners: return <PartnersModal />;
case ModalType.ThanksForPhoto:
return (
<div>
<p className="pb-4">
{t("modal.thanks_for_photo")}
</p>
</div>
);
case ModalType.ThanksForReport:
return (
<div>
<p className="pb-4">
{t("modal.thanks_for_report")}
</p>
</div>
);
default:
return null;
}
10 changes: 10 additions & 0 deletions src/components/sidebar-left.tsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,8 @@ import DefibrillatorDetails from "./sidebar/defibrillatorDetails";
import SidebarAction from "../model/sidebarAction";
import DefibrillatorEditor from "./sidebar/defibrillatorEditor";
import { DefibrillatorData } from "../model/defibrillatorData";
import PhotoReport from "./sidebar/photoReporter";
import PhotoUpload from "./sidebar/photoUploader";

const SidebarLeft: FC<SidebarLeftProps> = (props) => {
const {
@@ -42,6 +44,14 @@ const SidebarLeft: FC<SidebarLeftProps> = (props) => {
data={data}
/>
);
case SidebarAction.reportPhoto:
return (
<PhotoReport data={data} closeSidebar={closeSidebar} />
);
case SidebarAction.uploadPhoto:
return (
<PhotoUpload data={data} closeSidebar={closeSidebar} />
);
default:
return null;
}
16 changes: 16 additions & 0 deletions src/components/sidebar.css
Original file line number Diff line number Diff line change
@@ -132,3 +132,19 @@
.legend-text {
font-size: calc(100% - 1px);
}

.image-gallery-custom-icon {
color:#fff;
/* transition:all .3s ease-out; */
/* appearance:none; */
background-color:transparent;
/* border:0; */
cursor:pointer;
/* outline:none; */
position: absolute;
left: 15px;
bottom: 15px;
/* padding: 4; */
z-index:4;
filter:drop-shadow(0 2px 2px #1a1a1a)
}
16 changes: 16 additions & 0 deletions src/components/sidebar/access.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
import { useTranslation } from "react-i18next";
import React from "react";

const accessToColourMapping = {
yes: "has-background-green has-text-white-ter",
no: "has-background-red has-text-white-ter",
private: "has-background-blue has-text-white-ter",
permissive: "has-background-blue has-text-white-ter",
customers: "has-background-yellow has-text-black-ter",
default: "has-background-gray has-text-white-ter",
};

export function accessColourClass(access: string): string {
if (access in accessToColourMapping) {
return accessToColourMapping[access as keyof typeof accessToColourMapping];
}
return accessToColourMapping.default;
}

export default function AccessFormField({ access, setAccess }: AccessFormFieldProps) {
const { t } = useTranslation();
const groupName = "aedAccess";
87 changes: 74 additions & 13 deletions src/components/sidebar/defibrillatorDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import React, { FC } from "react";
import { useTranslation } from "react-i18next";
import {
Button,
Card, Columns, Image,
} from "react-bulma-components";
import {
mdiAccountSupervisorOutline, mdiClockOutline, mdiHomeRoof,
mdiInformationOutline, mdiMapMarkerOutline, mdiPhoneOutline,
mdiPlus,
} from "@mdi/js";
import Icon from "@mdi/react";
import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
import SidebarAction from "src/model/sidebarAction";
import {
CloseSidebarButton,
CopyUrlButton, EditButton,
@@ -20,21 +25,75 @@ import { OpeningHoursField } from "./openingHours";
import { CheckDateField } from "./verificationDate";
import { DefibrillatorData } from "../../model/defibrillatorData";
import DetailTextRow from "./detailTextRow";
import { useAppContext } from "../../appContext";
import { accessColourClass } from "./access";
import { backendBaseUrl } from "../../backend";
import { initialModalState, ModalType } from "../../model/modal";

const accessToColourMapping = {
yes: "has-background-green has-text-white-ter",
no: "has-background-red has-text-white-ter",
private: "has-background-blue has-text-white-ter",
permissive: "has-background-blue has-text-white-ter",
customers: "has-background-yellow has-text-black-ter",
default: "has-background-gray has-text-white-ter",
};
function photoGallery(data: DefibrillatorData, closeSidebar: () => void) {
const { t } = useTranslation();
const { authState: { auth }, setSidebarAction, setModalState } = useAppContext();
let images: ReactImageGalleryItem[] = [];
// Currently only one photo allowed
if (data.photoRelativeUrl !== undefined && data.photoRelativeUrl !== null) {
images = [
{
original: backendBaseUrl + data.photoRelativeUrl,
thumbnail: backendBaseUrl + data.photoRelativeUrl,
},
];
}
if (images.length > 0) {
// ref would be used if there were more photos to see which one is selected
// const refImg = useRef<ImageGallery>(null);
const renderCustomControls = () => (
<Button
outlined
inverted
p={2}
className="image-gallery-custom-icon"
onClick={() => setSidebarAction(SidebarAction.reportPhoto)}
>
{
t("photo.report")
}
</Button>
);

function accessColourClass(access: string): string {
if (access in accessToColourMapping) {
return accessToColourMapping[access as keyof typeof accessToColourMapping];
return (
<div>
<ImageGallery
// ref={refImg}
items={images}
lazyLoad
showPlayButton={false}
showThumbnails={images.length > 1}
renderCustomControls={renderCustomControls}
/>
<hr style={{ marginTop: "0.5rem", marginBottom: "1rem" }} />
</div>
);
}
return accessToColourMapping.default;
return (
<div>
<Button
mb={1}
mt={0}
className="button is-small is-success mx-1"
onClick={() => {
if (auth === null || !auth.authenticated()) {
closeSidebar();
setModalState({ ...initialModalState, visible: true, type: ModalType.NeedToLogin });
}
setSidebarAction(SidebarAction.uploadPhoto);
}}
>
<Icon path={mdiPlus} size={1.15} className="icon" color="#fff" />
<span>{t("photo.upload")}</span>
</Button>
<hr style={{ marginTop: "0.5rem", marginBottom: "1rem" }} />
</div>
);
}

const DefibrillatorDetails: FC<DefibrillatorDetailsProps> = (props) => {
@@ -48,6 +107,7 @@ const DefibrillatorDetails: FC<DefibrillatorDetailsProps> = (props) => {
|| data.tags["defibrillator:location"];
const levelText = data.tags.level ? ` (${t("sidebar.level")}: ${data.tags.level})` : "";
const indoorText = data.tags.indoor ? t(`indoor.${data.tags.indoor}`) + levelText : "";

return (
<div className="sidebar" id="sidebar-div">
<Card>
@@ -66,7 +126,8 @@ const DefibrillatorDetails: FC<DefibrillatorDetailsProps> = (props) => {
</span>
<CloseSidebarButton closeSidebarFunction={closeSidebar} />
</Card.Header>
<Card.Content pl={3} pr={3} mb={1} pt={4} className="content pb-0">
<Card.Content pl={3} pr={3} mb={1} pt={2} className="content pb-0">
{photoGallery(data, closeSidebar)}
<Columns vCentered className="is-mobile">
<Columns.Column textAlign="center" size={2}>
<Icon path={mdiHomeRoof} size={1.15} className="icon" color="#028955" />
104 changes: 104 additions & 0 deletions src/components/sidebar/photoReporter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import React, { FC } from "react";
import { Button, Card, Image } from "react-bulma-components";
import { useTranslation } from "react-i18next";
import { DefibrillatorData } from "src/model/defibrillatorData";
import SidebarAction from "src/model/sidebarAction";
import { initialModalState, ModalType } from "src/model/modal";
import { mdiArrowLeftBold, mdiSend } from "@mdi/js";
import Icon from "@mdi/react";
import { CloseSidebarButton } from "./buttons";
import { accessColourClass } from "./access";
import { useAppContext } from "../../appContext";
import { backendBaseUrl } from "../../backend";

interface DefibrillatorDetailsProps {
data: DefibrillatorData | null,
closeSidebar: () => void,
}

const PhotoReport: FC<DefibrillatorDetailsProps> = (props) => {
const { t } = useTranslation();
const {
data, closeSidebar,
} = props;
const { setSidebarAction, setModalState } = useAppContext();
if (data === null) return null;
const accessText = data.tags.access ? ` - ${t(`access.${data.tags.access}`)}` : "";
const sendReport = (photoId: string | undefined) => {
if (photoId === undefined) {
console.error("Photo id is undefined. Report issue to the maintainers.");
return;
}
console.log("Reported photo:", photoId);
fetch(`${backendBaseUrl}/api/v1/photos/report`, {
method: "POST",
body: `id=${encodeURIComponent(photoId)}`,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
})
.then((response) => {
if (response.ok) {
closeSidebar();
setModalState({
...initialModalState,
visible: true,
type: ModalType.ThanksForReport,
});
} else {
const errorMessage = `${response} <br> status: ${response.status} `
+ `${response.statusText} <br> ${response.body}`;
throw Error(errorMessage);
}
})
.catch((error) => {
closeSidebar();
setModalState({
...initialModalState,
visible: true,
type: ModalType.Error,
errorMessage: error,
});
});
};

return (
<div className="sidebar" id="sidebar-div">
<Card>
<Card.Header
id="sidebar-header"
shadowless
className={accessColourClass(data.tags.access)}
alignItems="center"
>
<Image m={2} className="icon" src="./img/logo-aed.svg" color="white" alt="" size={48} />
<span
className="is-size-5 py-2 has-text-weight-light"
id="sidebar-caption"
>
{t("sidebar.caption_info") + accessText}
</span>
<CloseSidebarButton closeSidebarFunction={closeSidebar} />
</Card.Header>
<Card.Content>
<p>
{t("photo.report_long_text")}
</p>
<Button
m={2}
onClick={() => setSidebarAction(SidebarAction.showDetails)}
>
<Icon path={mdiArrowLeftBold} size={0.8} className="icon" />
<span>{t("footer.cancel")}</span>
</Button>
<Button m={2} onClick={() => sendReport(data.photoId)}>
<Icon path={mdiSend} size={0.8} className="icon" />
<span>{t("photo.send_report")}</span>
</Button>
</Card.Content>
</Card>
</div>
);
};

export default PhotoReport;
159 changes: 159 additions & 0 deletions src/components/sidebar/photoUploader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import React, { FC, useState } from "react";
import {
Button, Card, Image,
} from "react-bulma-components";
import { useTranslation } from "react-i18next";
import { DefibrillatorData } from "src/model/defibrillatorData";
import SidebarAction from "src/model/sidebarAction";
import store from "store";
import { initialModalState, ModalType } from "src/model/modal";
import { mdiArrowLeftBold, mdiFileDocumentRemove, mdiFileSend } from "@mdi/js";
import Icon from "@mdi/react";
import { CloseSidebarButton } from "./buttons";
import { accessColourClass } from "./access";
import { useAppContext } from "../../appContext";
import { backendBaseUrl } from "../../backend";

interface DefibrillatorDetailsProps {
data: DefibrillatorData | null,
closeSidebar: () => void,
}

const PhotoUpload: FC<DefibrillatorDetailsProps> = (props) => {
const { t } = useTranslation();
const {
data, closeSidebar,
} = props;
const { authState: { auth }, setSidebarAction, setModalState } = useAppContext();
const [selectedImage, setSelectedImage] = useState<File | null>(null);
if (data === null) return null;
const accessText = data.tags.access ? ` - ${t(`access.${data.tags.access}`)}` : "";

return (
<div className="sidebar" id="sidebar-div">
<Card>
<Card.Header
id="sidebar-header"
shadowless
className={accessColourClass(data.tags.access)}
alignItems="center"
>
<Image m={2} className="icon" src="./img/logo-aed.svg" color="white" alt="" size={48} />
<span
className="is-size-5 py-2 has-text-weight-light"
id="sidebar-caption"
>
{t("sidebar.caption_info") + accessText}
</span>
<CloseSidebarButton closeSidebarFunction={closeSidebar} />
</Card.Header>
<Card.Content>
<Button
mb={2}
onClick={() => setSidebarAction(SidebarAction.showDetails)}
>
<Icon path={mdiArrowLeftBold} size={0.8} className="icon" />
<span>{t("footer.cancel")}</span>
</Button>
<p className="block">{t("photo.license")}</p>
<p className="block">{t("photo.license_short_description")}</p>
{(selectedImage !== null && (
<div>
<img
alt="not found"
width="250px"
src={URL.createObjectURL(selectedImage)}
/>
<br />
<div>
<Button
m={2}
color="danger"
onClick={() => setSelectedImage(null)}
>
<Icon path={mdiFileDocumentRemove} size={0.8} className="icon" />
<span>{t("photo.remove")}</span>
</Button>
<Button
m={2}
color="success"
onClick={() => {
const url = auth?.options().url;
const storageKey = `${url}oauth2_access_token`;
const oauth2AccessToken = store.get(storageKey);
if (!oauth2AccessToken || !auth || !auth.authenticated()) {
const errorMessage = `auth.authenticated()=${auth?.authenticated()} `
+ `<br> oauth2AccessToken=${oauth2AccessToken}`;
closeSidebar();
setModalState({
...initialModalState,
visible: true,
type: ModalType.Error,
errorMessage,
});
}
const fd = new FormData();
fd.append("node_id", data.osmId);
fd.append("file_license", "CC0");
fd.append(
"oauth2_credentials",
JSON.stringify({
access_token: oauth2AccessToken,
token_type: "Bearer",
scope: "read_prefs",
}),
);
fd.append("file", selectedImage);
fetch(`${backendBaseUrl}/api/v1/photos/upload`, {
method: "POST",
body: fd,
})
.then((response) => {
if (response.ok) {
closeSidebar();
setModalState({
...initialModalState,
visible: true,
type: ModalType.ThanksForPhoto,
});
} else {
const errorMessage = `${response} <br> status: ${response.status} `
+ `${response.statusText} <br> ${response.body}`;
throw Error(errorMessage);
}
})
.catch((error) => {
closeSidebar();
setModalState({
...initialModalState,
visible: true,
type: ModalType.Error,
errorMessage: error,
});
});
}}
>
<Icon path={mdiFileSend} size={0.8} className="icon" />
<span>{t("photo.upload")}</span>
</Button>
</div>
</div>
)) || (
<input
type="file"
accept=".jpeg,.jpg,.png,.webp"
name="myImage"
onChange={(event) => {
const { files } = event.target;
console.log(files);
setSelectedImage(files !== null && files.length > 0 ? files[0] : null);
}}
/>
)}
</Card.Content>
</Card>
</div>
);
};

export default PhotoUpload;
2 changes: 2 additions & 0 deletions src/model/defibrillatorData.ts
Original file line number Diff line number Diff line change
@@ -7,5 +7,7 @@ export interface NewDefibrillatorData {
export interface DefibrillatorData extends NewDefibrillatorData {
osmId: string,
osmType: string,
photoId: string | undefined,
photoRelativeUrl: string | undefined,
version: string,
}
2 changes: 2 additions & 0 deletions src/model/modal.ts
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@ export enum ModalType {
About,
Error,
Partners,
ThanksForPhoto,
ThanksForReport,
}

export interface ModalState {
2 changes: 2 additions & 0 deletions src/model/sidebarAction.ts
Original file line number Diff line number Diff line change
@@ -3,5 +3,7 @@ enum SidebarAction {
showDetails,
addNode,
editNode,
reportPhoto,
uploadPhoto,
}
export default SidebarAction;
2 changes: 2 additions & 0 deletions src/osm.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,8 @@ export async function fetchNodeData(url: string): Promise<DefibrillatorData | nu
osmType: "node",
lat: node.lat,
lon: node.lon,
photoId: node["@photo_id"],
photoRelativeUrl: node["@photo_url"],
tags: node.tags,
version: node.version,
};

0 comments on commit ca44eae

Please sign in to comment.