photo improvements

openstreetmap-polska · Sep 15, 2023 · f3ff8f1 · f3ff8f1
1 parent 4d16d6e
commit f3ff8f1
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "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"
   },
@@ -72,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",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -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."
     }
 }
diff --git a/public/locales/pl/translation.json b/public/locales/pl/translation.json
@@ -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."
     }
 }
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
@@ -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;
     }

diff --git a/src/components/sidebar.css b/src/components/sidebar.css
@@ -133,10 +133,6 @@
     font-size: calc(100% - 1px);
 }
 
-.image-gallery-slide {
-    max-height: 300px;
-}
-
 .image-gallery-custom-icon {
     color:#fff;
     /* transition:all .3s ease-out; */

diff --git a/src/components/sidebar/defibrillatorDetails.tsx b/src/components/sidebar/defibrillatorDetails.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import {
     Button,
@@ -7,6 +7,7 @@ import {
 import {
     mdiAccountSupervisorOutline, mdiClockOutline, mdiHomeRoof,
     mdiInformationOutline, mdiMapMarkerOutline, mdiPhoneOutline,
+    mdiPlus,
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
@@ -38,11 +39,13 @@ function photoGallery(data: DefibrillatorData, closeSidebar: () => void) {
         images = [
             {
                 original: backendBaseUrl + data.photoRelativeUrl,
+                thumbnail: backendBaseUrl + data.photoRelativeUrl,
             },
         ];
     }
     if (images.length > 0) {
-        const refImg = useRef<ImageGallery>(null);
+        // ref would be used if there were more photos to see which one is selected
+        // const refImg = useRef<ImageGallery>(null);
         const renderCustomControls = () => (
             <Button
                 outlined
@@ -53,15 +56,14 @@ function photoGallery(data: DefibrillatorData, closeSidebar: () => void) {
             >
                 {
                     t("photo.report")
-                    // refImg !== null && refImg.current !== null ? refImg.current.getCurrentIndex() : "nulllllll"
                 }
             </Button>
         );
 
         return (
             <div>
                 <ImageGallery
-                    ref={refImg}
+                    // ref={refImg}
                     items={images}
                     lazyLoad
                     showPlayButton={false}
@@ -75,7 +77,9 @@ function photoGallery(data: DefibrillatorData, closeSidebar: () => void) {
     return (
         <div>
             <Button
-                m={1}
+                mb={1}
+                mt={0}
+                className="button is-small is-success mx-1"
                 onClick={() => {
                     if (auth === null || !auth.authenticated()) {
                         closeSidebar();
@@ -84,7 +88,8 @@ function photoGallery(data: DefibrillatorData, closeSidebar: () => void) {
                     setSidebarAction(SidebarAction.uploadPhoto);
                 }}
             >
-                {t("photo.upload")}
+                <Icon path={mdiPlus} size={1.15} className="icon" color="#fff" />
+                <span>{t("photo.upload")}</span>
             </Button>
             <hr style={{ marginTop: "0.5rem", marginBottom: "1rem" }} />
         </div>
@@ -121,7 +126,7 @@ 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}>

diff --git a/src/components/sidebar/photoReporter.tsx b/src/components/sidebar/photoReporter.tsx
@@ -3,6 +3,9 @@ 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";
@@ -18,7 +21,7 @@ const PhotoReport: FC<DefibrillatorDetailsProps> = (props) => {
     const {
         data, closeSidebar,
     } = props;
-    const { setSidebarAction } = useAppContext();
+    const { setSidebarAction, setModalState } = useAppContext();
     if (data === null) return null;
     const accessText = data.tags.access ? ` - ${t(`access.${data.tags.access}`)}` : "";
     const sendReport = (photoId: string | undefined) => {
@@ -34,9 +37,29 @@ const PhotoReport: FC<DefibrillatorDetailsProps> = (props) => {
                 "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
             },
         })
-            .then(() => console.log("uploaded")) // todo: add error handling
-            .catch((error) => console.log(error));
-        closeSidebar();
+            .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 (
@@ -58,8 +81,20 @@ const PhotoReport: FC<DefibrillatorDetailsProps> = (props) => {
                     <CloseSidebarButton closeSidebarFunction={closeSidebar} />
                 </Card.Header>
                 <Card.Content>
-                    <Button m={2} onClick={() => setSidebarAction(SidebarAction.showDetails)}>{t("cancel")}</Button>
-                    <Button m={2} onClick={() => sendReport(data.photoId)}>{t("photo.send_report")}</Button>
+                    <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>