From d3aa764ed92240783178d68f2fc8802a0aeeedf5 Mon Sep 17 00:00:00 2001 From: tomasz t Date: Sun, 10 Sep 2023 20:33:53 +0000 Subject: [PATCH 1/4] test image gallery --- package-lock.json | 32 +++++++++++++++++++ package.json | 2 ++ .../sidebar/defibrillatorDetails.tsx | 19 +++++++++++ 3 files changed, 53 insertions(+) diff --git a/package-lock.json b/package-lock.json index f1d2c42..4ce372f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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", @@ -34,6 +35,7 @@ "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", "typescript": "^4.8.3", @@ -4301,6 +4303,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-image-gallery": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.0.tgz", + "integrity": "sha512-y5OEficUWcnGEc6KvflRXgvhtaMSsDH6JGT3/SJs0FV/RgtKuIgrUpGbDw5MdzyUwe/D8sJTo+aw8NOkaX0nIA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -14703,6 +14713,14 @@ } } }, + "node_modules/react-image-gallery": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz", + "integrity": "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -20805,6 +20823,14 @@ "@types/react": "*" } }, + "@types/react-image-gallery": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.0.tgz", + "integrity": "sha512-y5OEficUWcnGEc6KvflRXgvhtaMSsDH6JGT3/SJs0FV/RgtKuIgrUpGbDw5MdzyUwe/D8sJTo+aw8NOkaX0nIA==", + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -28367,6 +28393,12 @@ "html-parse-stringify": "^3.0.1" } }, + "react-image-gallery": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz", + "integrity": "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 1ed8919..fa5c9f8 100644 --- a/package.json +++ b/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,6 +31,7 @@ "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", "typescript": "^4.8.3", diff --git a/src/components/sidebar/defibrillatorDetails.tsx b/src/components/sidebar/defibrillatorDetails.tsx index 1de8e7e..9e7afe5 100644 --- a/src/components/sidebar/defibrillatorDetails.tsx +++ b/src/components/sidebar/defibrillatorDetails.tsx @@ -8,6 +8,8 @@ import { mdiInformationOutline, mdiMapMarkerOutline, mdiPhoneOutline, } from "@mdi/js"; import Icon from "@mdi/react"; +import ImageGallery from "react-image-gallery"; +import "react-image-gallery/styles/css/image-gallery.css"; import { CloseSidebarButton, CopyUrlButton, EditButton, @@ -21,6 +23,21 @@ import { CheckDateField } from "./verificationDate"; import { DefibrillatorData } from "../../model/defibrillatorData"; import DetailTextRow from "./detailTextRow"; +const images = [ + { + original: "https://picsum.photos/id/1018/1000/600/", + thumbnail: "https://picsum.photos/id/1018/250/150/", + }, + { + original: "https://picsum.photos/id/1015/1000/600/", + thumbnail: "https://picsum.photos/id/1015/250/150/", + }, + { + original: "https://picsum.photos/id/1019/1000/600/", + thumbnail: "https://picsum.photos/id/1019/250/150/", + }, +]; + const accessToColourMapping = { yes: "has-background-green has-text-white-ter", no: "has-background-red has-text-white-ter", @@ -67,6 +84,8 @@ const DefibrillatorDetails: FC = (props) => { + +
From beb48f6dc7075e4d7e0039da63a24a3f65a40673 Mon Sep 17 00:00:00 2001 From: tomasz t Date: Sun, 10 Sep 2023 20:47:13 +0000 Subject: [PATCH 2/4] updated example --- .../sidebar/defibrillatorDetails.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/sidebar/defibrillatorDetails.tsx b/src/components/sidebar/defibrillatorDetails.tsx index 9e7afe5..dc35ddf 100644 --- a/src/components/sidebar/defibrillatorDetails.tsx +++ b/src/components/sidebar/defibrillatorDetails.tsx @@ -8,7 +8,7 @@ import { mdiInformationOutline, mdiMapMarkerOutline, mdiPhoneOutline, } from "@mdi/js"; import Icon from "@mdi/react"; -import ImageGallery from "react-image-gallery"; +import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery"; import "react-image-gallery/styles/css/image-gallery.css"; import { CloseSidebarButton, @@ -23,7 +23,7 @@ import { CheckDateField } from "./verificationDate"; import { DefibrillatorData } from "../../model/defibrillatorData"; import DetailTextRow from "./detailTextRow"; -const images = [ +const testImages: Array = [ { original: "https://picsum.photos/id/1018/1000/600/", thumbnail: "https://picsum.photos/id/1018/250/150/", @@ -54,6 +54,18 @@ function accessColourClass(access: string): string { return accessToColourMapping.default; } +function photoGallery(images: Array) { + if (images.length > 0) { + return ( +
+ 1} /> +
+
+ ); + } + return null; +} + const DefibrillatorDetails: FC = (props) => { const { t, i18n: { resolvedLanguage } } = useTranslation(); const { @@ -65,6 +77,7 @@ const DefibrillatorDetails: FC = (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 ( diff --git a/src/model/modal.ts b/src/model/modal.ts index 41c90b3..df517c9 100644 --- a/src/model/modal.ts +++ b/src/model/modal.ts @@ -6,6 +6,8 @@ export enum ModalType { About, Error, Partners, + ThanksForPhoto, + ThanksForReport, } export interface ModalState {