hide drawing widget and text of the comments for not logged in

nginx/nginx.conf

@@ -16,6 +16,7 @@ http {
         listen 80;
         listen [::]:80;
         # server_name yourdomain.com www.yourdomain.com;
+        client_max_body_size 200M;
 
         # Redirect all HTTP requests to HTTPS
         return 301 https://$host$request_uri;
@@ -27,6 +28,7 @@ http {
         listen       [::]:443 ssl;
         # server_name yourdomain.com www.yourdomain.com;
 
+        client_max_body_size 200M;
 
         ssl_certificate     /certs/cert.pem;
         ssl_certificate_key /certs/key.pem;

templates/create_sar.html

@@ -44,10 +44,11 @@
 
             <div class="form-group">
                 <label for="coordinates">Initial Planning Point (IPP) Coordinates:</label>
-                <input type="text" name="longitude" class="form-control" placeholder="e.g. 40.7128"
+                <input type="text" name="latitude" class="form-control" placeholder="Lat - e.g. 60.0060"
                        required>
-                <input type="text" name="latitude" class="form-control" placeholder="e.g. -74.0060"
+                <input type="text" name="longitude" class="form-control" placeholder="Lon - e.g. 40.7128"
                        required>
+
             </div>
 
             <div class="form-group">

templates/edit_sar.html

@@ -60,15 +60,14 @@
 
             <div class="form-group">
                 <label for="coordinates">IPP Coordinates:</label>
-                <input type="text" name="longitude" class="form-control" value="{{ sar_call.longitude }}" required>
                 <input type="text" name="latitude" class="form-control" value="{{ sar_call.latitude }}" required>
+                <input type="text" name="longitude" class="form-control" value="{{ sar_call.longitude }}" required>
             </div>
 
             <div class="form-group">
                 <label for="coordinates">Victim found coordinates:</label>
-                <input type="text" name="longitude_found" class="form-control" value="{{ sar_call.longitude_found }}">
                 <input type="text" name="latitude_found" class="form-control" value="{{ sar_call.latitude_found }}">
-
+                <input type="text" name="longitude_found" class="form-control" value="{{ sar_call.longitude_found }}">
                 <div class="form-group">
                     <label for="title">Title:</label>
                     <input type="text" name="title" class="form-control" value="{{ sar_call.title }}" required>

templates/jscripts.html

@@ -3,7 +3,8 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css"/>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'  />
+<link rel='stylesheet'
+      href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'/>
 <!-- Scripts -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
@@ -14,7 +15,9 @@
 <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script src="/static/togpx.js"></script>
+<script>
+    {% include 'togpx.js' %}
+</script>
 
 <style>
     #map {
@@ -32,4 +35,13 @@
     .leaflet-container {
         cursor: crosshair;
     }
+
+    .circle-icon{
+        background: #f03;
+        border-radius: 50%;
+        color: white;
+        padding: 2px 4px;
+        text-align: center;
+        display: inline-block;
+    }
 </style>

templates/sar_details.html

@@ -35,10 +35,10 @@
                         <td>
                             <div class="card-mb5">
                                 <div class="card-body">
-                                    <p>IPP longitude: {{ sar.SARCall.longitude }} </p>
-                                    <p>IPP latitude: {{ sar.SARCall.latitude }}</p>
-                                    <p>Longitude found: {{ sar.SARCall.longitude_found }}</p>
-                                    <p>Latitude found: {{ sar.SARCall.latitude_found }}</p>
+                                    <p>IPP lat: {{ sar.SARCall.latitude }}</p>
+                                    <p>IPP lon: {{ sar.SARCall.longitude }} </p>
+                                    <p>Found lat: {{ sar.SARCall.latitude_found }}</p>
+                                    <p>Found lon: {{ sar.SARCall.longitude_found }}</p>
                                     <p>Description: {{ sar.SARCall.description }}</p>
                                     {% if is_logged_in %}
                                         <p>Description private: {{ sar.SARCall.description_hidden }}</p>
@@ -62,7 +62,7 @@
 
 
         <div id="map" class="mb-4"></div>
-
+        <div id="markers" class="mb-4"></div>  <!-- New element for displaying marker coordinates -->
 
         <!-- Display Comments -->
         {% for comment in sar.SARCall.comments %}
@@ -75,11 +75,12 @@
                         <div class="card mb-5">
                             {#  Comment text #}
                             <div class="card-body">
-
-                                <div class="comment-text"><p id="comment-text-{{ comment.id }}">{{ comment.text }}</p>
-                                </div>
-
                                 {% if is_logged_in %}
+
+                                    <div class="comment-text"><p
+                                            id="comment-text-{{ comment.id }}">{{ comment.text }}</p>
+                                    </div>
+
                                     {% if current_user.id == comment.user_id or current_user.id == 1 or current_user.id == sar.SARCall.user_id %}
                                         <button class="edit-comment-btn" data-comment-id="{{ comment.id }}"
                                                 data-comment-text="{{ comment.text }}"> &#9998; {# EDIT #}
@@ -314,14 +315,47 @@
                 .catch(error => console.error('Error loading GPX file:', error));
         }
 
+        var coords = [];
+
+        function addMarker(e) {
+            // remove last marker if any
+            // markers.clearLayers();
+
+            // update circle count
+            circleCount++;
+            coords.push([e.latlng.lat.toFixed(5), e.latlng.lng.toFixed(5)]);
+
+
+            // create a new divIcon
+            var circleIcon = L.divIcon({
+                className: 'circle-icon',
+                html: circleCount,
+                iconSize: [15, 15]
+            });
+
+            // add new marker with custom icon
+            var marker = L.marker(e.latlng, {icon: circleIcon}).addTo(markers);
+
+            // update coordinates display
+            document.getElementById('markers').innerText = coords.join(' ');
+
+            // Create a temporary input to copy the text.
+            var tempInput = document.createElement('input');
+            document.body.appendChild(tempInput);
+            tempInput.value = coords.join(' ');
+            tempInput.select();
+            document.execCommand('copy');
+            document.body.removeChild(tempInput);
+        }
 
         var gpxData = {{ gpx_ids | tojson }};
 
         var map = L.map('map',
-        {
-            fullscreenControl: true,
-        }
+            {
+                fullscreenControl: true,
+            }
         ).setView([{{ sar.SARCall.latitude }}, {{ sar.SARCall.longitude }}], 13);
+
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '© OpenStreetMap contributors'
@@ -334,21 +368,21 @@
         });
 
         // context menu
+        {% if is_logged_in %}
+
+        var markers = L.layerGroup().addTo(map);
+        var circleCount = 0;
+
 
         var coordControl = L.control({position: 'bottomright'});
 
         map.on('contextmenu', function (e) {
             var coords = e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
 
-            // Create a temporary input to copy the text.
-            var tempInput = document.createElement('input');
-            document.body.appendChild(tempInput);
-            tempInput.value = coords;
-            tempInput.select();
-            document.execCommand('copy');
-            document.body.removeChild(tempInput);
 
             coordControl.getContainer().innerHTML = "<strong>To clipboard: </strong> " + e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
+
+            addMarker(e);
         });
 
 
@@ -369,6 +403,8 @@
             },
         });
         map.addControl(drawControl);
+        {% endif %}
+
 
         // Create a control for displaying the coordinates.
 
@@ -383,7 +419,13 @@
             coordControl.getContainer().innerHTML = " " + e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
         });
 
-
+        // remove all markers on left click and reset circle count
+        map.on('click', function () {
+            markers.clearLayers();
+            circleCount = 0;
+            document.getElementById('markers').innerText = "";
+            coords = [];
+        });
 
 
         map.on('draw:created', function (e) {