Add photo gallery functionality with file upload, sharing, and fullscreen display features

staticfiles/gis/css/ol3.css

@@ -0,0 +1,39 @@
+.dj_map_wrapper {
+    position: relative;
+    float: left;
+}
+html[dir="rtl"] .dj_map_wrapper {
+    float: right;
+}
+
+.switch-type {
+    background-repeat: no-repeat;
+    cursor: pointer;
+    top: 0.5em;
+    width: 22px;
+    height: 20px;
+}
+
+.type-Point {
+    background-image: url("../img/draw_point_off.svg");
+    right: 5px;
+}
+.type-Point.type-active {
+    background-image: url("../img/draw_point_on.svg");
+}
+
+.type-LineString {
+    background-image: url("../img/draw_line_off.svg");
+    right: 30px;
+}
+.type-LineString.type-active {
+    background-image: url("../img/draw_line_on.svg");
+}
+
+.type-Polygon {
+    background-image: url("../img/draw_polygon_off.svg");
+    right: 55px;
+}
+.type-Polygon.type-active {
+    background-image: url("../img/draw_polygon_on.svg");
+}

staticfiles/gis/img/draw_line_off.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" class="fil1" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#ABABA7" class="fil2" points="159,536 378,194 848,368 761,713 738,707 820,383 387,222 179,548 "/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>

staticfiles/gis/img/draw_line_on.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#B08A15" points="159,536 378,194 848,368 761,713 738,707 820,383 387,222 179,548 "/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>

staticfiles/gis/img/draw_point_off.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><path fill="#000000" d="M573 269l114 114 -289 288 -114 -114 289 -288zm200 -28l-51 -50c-19,-20 -51,-20 -71,0l-49 48 114 114 57 -57c15,-15 15,-39 0,-55zm-548 476c-2,10 6,18 15,16l127 -31 -113 -114 -29 129z"/></g></svg>

staticfiles/gis/img/draw_point_on.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><path fill="#000000" d="M573 269l114 114 -289 288 -114 -114 289 -288zm200 -28l-51 -50c-19,-20 -51,-20 -71,0l-49 48 114 114 57 -57c15,-15 15,-39 0,-55zm-548 476c-2,10 6,18 15,16l127 -31 -113 -114 -29 129z"/></g></svg>

staticfiles/gis/img/draw_polygon_off.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#F1DFAC" points="169,542 749,710 834,375 383,208 "/><path fill="ABABA7" d="M188 535l553 160 79 -312 -433 -161 -199 313zm558 186l-595 -172 227 -355 470 174 -90 356 -12 -3z"/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>

staticfiles/gis/img/draw_polygon_on.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#F7D56E" points="169,542 749,710 834,375 383,208 "/><path fill="#B08A15" d="M188 535l553 160 79 -312 -433 -161 -199 313zm558 186l-595 -172 227 -355 470 174 -90 356 -12 -3z"/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>

staticfiles/gis/js/OLMapWidget.js

@@ -0,0 +1,233 @@
+/* global ol */
+'use strict';
+class GeometryTypeControl extends ol.control.Control {
+    // Map control to switch type when geometry type is unknown
+    constructor(opt_options) {
+        const options = opt_options || {};
+
+        const element = document.createElement('div');
+        element.className = 'switch-type type-' + options.type + ' ol-control ol-unselectable';
+        if (options.active) {
+            element.classList.add("type-active");
+        }
+
+        super({
+            element: element,
+            target: options.target
+        });
+        const self = this;
+        const switchType = function(e) {
+            e.preventDefault();
+            if (options.widget.currentGeometryType !== self) {
+                options.widget.map.removeInteraction(options.widget.interactions.draw);
+                options.widget.interactions.draw = new ol.interaction.Draw({
+                    features: options.widget.featureCollection,
+                    type: options.type
+                });
+                options.widget.map.addInteraction(options.widget.interactions.draw);
+                options.widget.currentGeometryType.element.classList.remove('type-active');
+                options.widget.currentGeometryType = self;
+                element.classList.add("type-active");
+            }
+        };
+
+        element.addEventListener('click', switchType, false);
+        element.addEventListener('touchstart', switchType, false);
+    }
+}
+
+// TODO: allow deleting individual features (#8972)
+class MapWidget {
+    constructor(options) {
+        this.map = null;
+        this.interactions = {draw: null, modify: null};
+        this.typeChoices = false;
+        this.ready = false;
+
+        // Default options
+        this.options = {
+            default_lat: 0,
+            default_lon: 0,
+            default_zoom: 12,
+            is_collection: options.geom_name.includes('Multi') || options.geom_name.includes('Collection')
+        };
+
+        // Altering using user-provided options
+        for (const property in options) {
+            if (Object.hasOwn(options, property)) {
+                this.options[property] = options[property];
+            }
+        }
+        if (!options.base_layer) {
+            this.options.base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
+        }
+
+        this.map = this.createMap();
+        this.featureCollection = new ol.Collection();
+        this.featureOverlay = new ol.layer.Vector({
+            map: this.map,
+            source: new ol.source.Vector({
+                features: this.featureCollection,
+                useSpatialIndex: false // improve performance
+            }),
+            updateWhileAnimating: true, // optional, for instant visual feedback
+            updateWhileInteracting: true // optional, for instant visual feedback
+        });
+
+        // Populate and set handlers for the feature container
+        const self = this;
+        this.featureCollection.on('add', function(event) {
+            const feature = event.element;
+            feature.on('change', function() {
+                self.serializeFeatures();
+            });
+            if (self.ready) {
+                self.serializeFeatures();
+                if (!self.options.is_collection) {
+                    self.disableDrawing(); // Only allow one feature at a time
+                }
+            }
+        });
+
+        const initial_value = document.getElementById(this.options.id).value;
+        if (initial_value) {
+            const jsonFormat = new ol.format.GeoJSON();
+            const features = jsonFormat.readFeatures('{"type": "Feature", "geometry": ' + initial_value + '}');
+            const extent = ol.extent.createEmpty();
+            features.forEach(function(feature) {
+                this.featureOverlay.getSource().addFeature(feature);
+                ol.extent.extend(extent, feature.getGeometry().getExtent());
+            }, this);
+            // Center/zoom the map
+            this.map.getView().fit(extent, {minResolution: 1});
+        } else {
+            this.map.getView().setCenter(this.defaultCenter());
+        }
+        this.createInteractions();
+        if (initial_value && !this.options.is_collection) {
+            this.disableDrawing();
+        }
+        const clearNode = document.getElementById(this.map.getTarget()).nextElementSibling;
+        if (clearNode.classList.contains('clear_features')) {
+            clearNode.querySelector('a').addEventListener('click', (ev) => {
+                ev.preventDefault();
+                self.clearFeatures();
+            });
+        }
+        this.ready = true;
+    }
+
+    createMap() {
+        return new ol.Map({
+            target: this.options.map_id,
+            layers: [this.options.base_layer],
+            view: new ol.View({
+                zoom: this.options.default_zoom
+            })
+        });
+    }
+
+    createInteractions() {
+        // Initialize the modify interaction
+        this.interactions.modify = new ol.interaction.Modify({
+            features: this.featureCollection,
+            deleteCondition: function(event) {
+                return ol.events.condition.shiftKeyOnly(event) &&
+                    ol.events.condition.singleClick(event);
+            }
+        });
+
+        // Initialize the draw interaction
+        let geomType = this.options.geom_name;
+        if (geomType === "Geometry" || geomType === "GeometryCollection") {
+            // Default to Point, but create icons to switch type
+            geomType = "Point";
+            this.currentGeometryType = new GeometryTypeControl({widget: this, type: "Point", active: true});
+            this.map.addControl(this.currentGeometryType);
+            this.map.addControl(new GeometryTypeControl({widget: this, type: "LineString", active: false}));
+            this.map.addControl(new GeometryTypeControl({widget: this, type: "Polygon", active: false}));
+            this.typeChoices = true;
+        }
+        this.interactions.draw = new ol.interaction.Draw({
+            features: this.featureCollection,
+            type: geomType
+        });
+
+        this.map.addInteraction(this.interactions.draw);
+        this.map.addInteraction(this.interactions.modify);
+    }
+
+    defaultCenter() {
+        const center = [this.options.default_lon, this.options.default_lat];
+        if (this.options.map_srid) {
+            return ol.proj.transform(center, 'EPSG:4326', this.map.getView().getProjection());
+        }
+        return center;
+    }
+
+    enableDrawing() {
+        this.interactions.draw.setActive(true);
+        if (this.typeChoices) {
+            // Show geometry type icons
+            const divs = document.getElementsByClassName("switch-type");
+            for (let i = 0; i !== divs.length; i++) {
+                divs[i].style.visibility = "visible";
+            }
+        }
+    }
+
+    disableDrawing() {
+        if (this.interactions.draw) {
+            this.interactions.draw.setActive(false);
+            if (this.typeChoices) {
+                // Hide geometry type icons
+                const divs = document.getElementsByClassName("switch-type");
+                for (let i = 0; i !== divs.length; i++) {
+                    divs[i].style.visibility = "hidden";
+                }
+            }
+        }
+    }
+
+    clearFeatures() {
+        this.featureCollection.clear();
+        // Empty textarea widget
+        document.getElementById(this.options.id).value = '';
+        this.enableDrawing();
+    }
+
+    serializeFeatures() {
+        // Three use cases: GeometryCollection, multigeometries, and single geometry
+        let geometry = null;
+        const features = this.featureOverlay.getSource().getFeatures();
+        if (this.options.is_collection) {
+            if (this.options.geom_name === "GeometryCollection") {
+                const geometries = [];
+                for (let i = 0; i < features.length; i++) {
+                    geometries.push(features[i].getGeometry());
+                }
+                geometry = new ol.geom.GeometryCollection(geometries);
+            } else {
+                geometry = features[0].getGeometry().clone();
+                for (let j = 1; j < features.length; j++) {
+                    switch (geometry.getType()) {
+                    case "MultiPoint":
+                        geometry.appendPoint(features[j].getGeometry().getPoint(0));
+                        break;
+                    case "MultiLineString":
+                        geometry.appendLineString(features[j].getGeometry().getLineString(0));
+                        break;
+                    case "MultiPolygon":
+                        geometry.appendPolygon(features[j].getGeometry().getPolygon(0));
+                    }
+                }
+            }
+        } else {
+            if (features[0]) {
+                geometry = features[0].getGeometry();
+            }
+        }
+        const jsonFormat = new ol.format.GeoJSON();
+        document.getElementById(this.options.id).value = jsonFormat.writeGeometry(geometry);
+    }
+}

staticfiles/js/photo-gallery.js

@@ -0,0 +1,91 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('photoDisplay', ({ photos, contentType, objectId, csrfToken, uploadUrl }) => ({
+        photos,
+        fullscreenPhoto: null,
+        uploading: false,
+        uploadProgress: 0,
+        error: null,
+        showSuccess: false,
+
+        showFullscreen(photo) {
+            this.fullscreenPhoto = photo;
+        },
+
+        async handleFileSelect(event) {
+            const files = Array.from(event.target.files);
+            if (!files.length) {
+                return;
+            }
+
+            this.uploading = true;
+            this.uploadProgress = 0;
+            this.error = null;
+            this.showSuccess = false;
+
+            const totalFiles = files.length;
+            let completedFiles = 0;
+
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('image', file);
+                formData.append('app_label', contentType.split('.')[0]);
+                formData.append('model', contentType.split('.')[1]);
+                formData.append('object_id', objectId);
+
+                try {
+                    const response = await fetch(uploadUrl, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': csrfToken,
+                        },
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        const data = await response.json();
+                        throw new Error(data.error || 'Upload failed');
+                    }
+
+                    const photo = await response.json();
+                    this.photos.push(photo);
+                    completedFiles++;
+                    this.uploadProgress = (completedFiles / totalFiles) * 100;
+                } catch (err) {
+                    this.error = err.message || 'Failed to upload photo. Please try again.';
+                    console.error('Upload error:', err);
+                    break;
+                }
+            }
+
+            this.uploading = false;
+            event.target.value = ''; // Reset file input
+
+            if (!this.error) {
+                this.showSuccess = true;
+                setTimeout(() => {
+                    this.showSuccess = false;
+                }, 3000);
+            }
+        },
+
+        async sharePhoto(photo) {
+            if (navigator.share) {
+                try {
+                    await navigator.share({
+                        title: photo.caption || 'Shared photo',
+                        url: photo.url
+                    });
+                } catch (err) {
+                    if (err.name !== 'AbortError') {
+                        console.error('Error sharing:', err);
+                    }
+                }
+            } else {
+                // Fallback: copy URL to clipboard
+                navigator.clipboard.writeText(photo.url)
+                    .then(() => alert('Photo URL copied to clipboard!'))
+                    .catch(err => console.error('Error copying to clipboard:', err));
+            }
+        }
+    }));
+});