Merge pull request #162 from openstreetmap-polska/test-image-gallery

Add image gallery, photo upload, and photo report

package.json

@@ -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",

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."
     }
 }

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."
     }
 }

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;
     }

src/components/sidebar-left.tsx

@@ -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;
     }

src/components/sidebar.css

@@ -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)
+}

src/components/sidebar/access.tsx

@@ -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";