SARBase/templates/sar_details.html

{% extends "base.html" %}

{% block title %}
    SAR job details
{% endblock %}

{% block content %}

    <div class="container mt-4">
        <h2 class="mb-4">#{{ sar.SARCall.id }} : {{ sar.SARCall.title }}</h2>
        <div class="card mb-4">
            <div class="card-body">
                <table>
                    <tr>
                        <td>
                            <div class="card-mb5">
                                <div class="card-body">
                                    <div>
                                        <p>Created at: {{ sar.SARCall.created }}</p>
                                        <p>Last updated: {{ sar.SARCall.updated }}</p>
                                    </div>
                                    <p><strong>Coordination
                                        manager:</strong> {{ sar.SARCall.coordination_officer.full_name }}</p>
                                    <p><strong>Search manager:</strong> {{ sar.SARCall.search_officer.full_name }}</p>
                                    <p>Status: {{ sar.SARStatus.name }}</p>
                                    {% if is_logged_in %}
                                        <p>Category: {{ sar.SARCategory.name }}</p>
                                    {% endif %}
                                    <p><strong>Start Date:</strong> {{ sar.SARCall.start_date }}</p>
                                    <p><strong>Finish Date:</strong> {{ sar.SARCall.finish_date }}</p>
                                    <p>Result: {{ sar.SARResult.name }}</p>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="card-mb5">
                                <div class="card-body">
                                    <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>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <!-- Other SAR details -->
                    </tr>
                </table>
                <div>
                    {% if is_logged_in %}
                        <a href="{{ url_for('edit_sar', sar_id=sar.SARCall.id) }}" class="btn btn-primary"> &#9998;</a>
                        {# EDIT #}
                        <a href="{{ url_for('delete_sar', sar_id=sar.SARCall.id) }}"
                           class="btn btn-danger">&#128465;</a> {# DELETE #}
                    {% endif %}
                </div>
            </div>
        </div>


        <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 %}
            <div class="comment">
                <div class="card mb-4">
                    <div class="card-body">
                        <small> Comment # {{ comment.id }} by <strong>{{ comment.user.full_name }}</strong>
                            at {{ comment.created }},
                            updated {{ comment.updated }} </small>
                        <div class="card mb-5">
                            {#  Comment text #}
                            <div class="card-body">
                                {% 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 #}
                                        </button>
                                        <button type="button" class="delete-comment-btn">
                                            <a href="{{ url_for('delete_comment', id=comment.id) }}">&#128465;</a>
                                            {# DELETE #}
                                        </button>
                                    {% endif %}
                                    </div>
                                    {# GPX tracks part #}
                                    <div class="card mb-6">
                                        <div class="card-body">
                                            {% set ns = namespace(drawn = false) %}
                                            <small><strong>GPX track:</strong></small>
                                            {% for gpx_track in comments_with_gpx %}
                                                {% if gpx_track.comment_id == comment.id %}
                                                    <li>
                                                        <a href="{{ url_for('get_gpx', gpx_id=gpx_track.id) }}">{{ gpx_track.name }}</a>
                                                    </li>
                                                    {% set ns.drawn = true %}
                                                    <!-- Button to delete GPX Upload Modal -->
                                                    <button type="button" class="gpx-delete-button">
                                                        <a href="{{ url_for('delete_gpx', gpx_id=gpx_track.id, sar_id=sar.SARCall.id ) }}">
                                                            &#128465;</a>
                                                    </button>
                                                {% endif %}
                                            {% endfor %}
                                            {% if ns.drawn == false %}
                                                <!-- Button to Open GPX Upload Modal -->
                                                <button type="button" class="gpx-upload-button" data-toggle="modal"
                                                        data-target="#uploadGPXModal"
                                                        data-comment-id="{{ comment.id }}">
                                                    Upload GPX File
                                                </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="card mb-6">
                                    <div class="card-body">
                                    {# File attachments part #}
                                    <small><strong>File attachment:</strong></small><p>
                                    {% set ns=namespace(has_file = false) %}
                                    {% set fs=namespace(filename = 0) %}
                                    {% for file in comments_with_attachment %}
                                        {% if file.comment_id == comment.id %}
                                            {% set ns.has_file = true %}
                                            <a href="{{ url_for('download_file', filename = file.file_name) }}">
                                                {% if file.is_image %}
                                                    <img src="{{ url_for('download_thumb', filename=file.file_name) }}"
                                                         class="img-thumbnail">
                                                {% else %}
                                                    <i class="fa fa-file" aria-hidden="true"></i> {{ file.file_name }}
                                                {% endif %}
                                                {% set fs.filename = file.id %}
                                            </a>
                                        {% endif %}
                                    {% endfor %}

                                    {% if is_logged_in %}
                                        {% if ns.has_file %}
                                            <!-- Display the attachment -->
                                            <!-- Button to delete the attachment -->
                                            <form method="POST"
                                                  action="{{ url_for('delete_file', attachment_id=fs.filename) }}">
                                                {# Delete attachment #}
                                                <input type="hidden" id="sar_call_id" name="sarId"
                                                       value="{{ sar.SARCall.id }}">
                                                <button type="submit" class="btn btn-danger">&#128465;</button>
                                            </form>
                                        {% else %}

                                            <form method="POST"
                                                  action={{ url_for("upload_file") }} enctype="multipart/form-data">
                                                <input type="file" name="file" accept="image/*">
                                                <input type="submit" value="Upload">
                                                <input type="file" id="attachmentInput" style="display: none;">
                                                <input type="hidden" id="comment_id" name="commentId"
                                                       value="{{ comment.id }}">
                                                <input type="hidden" id="sar_call_id" name="sarId"
                                                       value="{{ sar.SARCall.id }}">
                                            </form>

                                        {% endif %}


                                    {% endif %}

                                {% endif %}
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}

        <!-- Edit Comment Modal -->
        <div class="modal fade" id="editCommentModal" tabindex="-1" aria-labelledby="editCommentModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editCommentModalLabel">Edit Comment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="editCommentForm">
                            <div class="form-group">
                                <label for="commentText" class="col-form-label">Comment:</label>
                                <textarea class="form-control" id="commentText"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveComment">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Add Comment Form -->
        {% if is_logged_in %}
            <form action="{{ url_for('add_comment', sar_call_id=sar.SARCall.id) }}" method="post"
                  enctype="multipart/form-data">
                <div class="form-group">
                    <label for="text"><small>Add comment:</small></label>
                    <textarea name="text" class="form-control"></textarea>
                </div>
                <div class="form-group">


                </div>
                <button type="submit" class="btn btn-primary">Add Comment</button>
            </form>
        {% endif %}
    </div>

    <!-- GPX File Upload Modal -->
    <div class="modal fade" id="uploadGPXModal" tabindex="-1" aria-labelledby="uploadGPXModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadGPXModalLabel">Upload GPX File</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="uploadGPXForm" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="gpxFileName">Description: </label>
                            <input type="text" class="form-control" id="gpxFileName" name="gpxFileName" required>
                        </div>
                        <div class="form-group">
                            <label for="gpxFile">GPX File</label>
                            <input type="file" class="form-control" id="gpxFile" name="gpxFile" required>
                        </div>
                    </div>
                    <input type="hidden" id="commentIdForGPX" name="commentId">
                    <input type="hidden" id="sarIdForGPX" name="sarId" value="{{ sar.SARCall.id }}">
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- The GPX upload modal -->
    <div class="modal fade" id="saveTrackModal" tabindex="-1" role="dialog" aria-labelledby="saveTrackModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveTrackModalLabel">Save Track</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="uploadTRKForm" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <!-- Form inputs for track name and comment -->
                        <div class="form-group">
                            <label for="track-name">Track Name:</label>
                            <input type="text" class="form-control" id="track-name">
                        </div>
                        <div class="form-group">
                            <label for="track-comment">Comment:</label>
                            <textarea class="form-control" id="track-comment"></textarea>
                        </div>
                    </div>
                    <input type="hidden" id="sarIdForTRK" name="sarId" value="{{ sar.SARCall.id }}">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="confirm-save-track">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




    <script>

        // Load GPX file and add to map
        function loadAndDisplayGPX(gpxId) {
            fetch('/get_gpx/' + gpxId)
                .then(response => response.text())
                .then(gpxData => {
                    new L.GPX(gpxData, {
                        async: true,
                        marker_options: {
                            startIconUrl: '/static/pin-icon-start.png',
                            endIconUrl: '/static/pin-icon-end.png',
                            shadowUrl: '/static/pin-shadow.png',
                            wptIconUrls: {
                                '': '/static/pin-icon-wpt.png'
                            }
                        }
                    }).on('loaded', function (e) {
                        map.fitBounds(e.target.getBounds());
                    }).addTo(map);
                })
                .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,
            }
        ).setView([{{ sar.SARCall.latitude }}, {{ sar.SARCall.longitude }}], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        L.marker([{{ sar.SARCall.latitude }}, {{ sar.SARCall.longitude }}]).addTo(map);


        gpxData.forEach(function (id) {
            loadAndDisplayGPX(id);
        });

        // 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);


            coordControl.getContainer().innerHTML = "<strong>To clipboard: </strong> " + e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);

            addMarker(e);
        });


        // Initialize drawing capabilities
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems,
            },
            draw: {
                polygon: true,
                polyline: true,
                rectangle: false,
                circle: true,
                marker: true,
            },
        });
        map.addControl(drawControl);
        {% endif %}


        // Create a control for displaying the coordinates.

        coordControl.onAdd = function (map) {
            this._container = L.DomUtil.create('div', 'leaflet-control-coordinates');
            return this._container;
        }
        coordControl.addTo(map);

        // Update the control when the mouse is moved.
        map.on('mousemove', function (e) {
            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) {
            var layer = e.layer;

            // Add the drawn layer to the map and drawnItems feature group
            map.addLayer(layer);
            drawnItems.addLayer(layer);

            // Get the GeoJSON representation of the drawn shape
            var geoJSON = layer.toGeoJSON();

            // Send the GeoJSON data to your server to save as a comment
            // You can use AJAX or any method you prefer for this part
        });

        // Create a custom control for the "Save Track" button
        var saveTrackControl = L.Control.extend({
            options: {
                position: 'bottomleft', // You can adjust the position as needed
            },

            onAdd: function (map) {
                // Create a container div for the button
                var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');

                // Create the "Save Track" button and add it to the container
                var button = L.DomUtil.create('a', 'leaflet-control-button', container);
                button.innerHTML = '&#128190;'  //floppy disk icon :)

                // Add a click event handler to the button
                L.DomEvent.on(button, 'click', function () {
                    // Open your modal dialog for saving the track here
                    $('#saveTrackModal').modal('show');
                });

                return container;
            },
        });

        // Add the custom control to your map
        new saveTrackControl().addTo(map);

    </script>


    <script>
        var commentId;  // Declare this outside of the .edit-comment-btn click handler
        var commentText;  // Declare this outside of the .edit-comment-btn click handler
        $(document).ready(function () {
            $('.edit-comment-btn').on('click', function () {
                // Get the comment data
                commentId = $(this).data('comment-id');
                commentText = $(this).data('comment-text');

                // Set the comment data in the modal
                $('#commentText').val(commentText);
                $('#editCommentModal').modal('show');

                // Save changes
                $('#saveComment').on('click', function () {
                    $.ajax({
                        url: '/edit_comment/' + commentId,
                        method: 'POST',
                        data: {comment: $('#commentText').val()},
                        success: function (response) {
                            // Update the comment display on the page
                            $('#comment-text-' + commentId).text($('#commentText').val());
                            $('button.edit-comment-btn[data-comment-id="' + commentId + '"]').data('comment-text', $('#commentText').val());
                            $('#editCommentModal').modal('hide');
                            // Update the comment display on the page as needed
                        },
                        error: function () {
                            // Handle error
                            alert("Error updating comment");
                        }
                    });
                });
            });
        });
    </script>


    <script>
        var commentId;

        $('.gpx-upload-button').on('click', function () {
            var commentId = $(this).data('comment-id');
            $('#commentIdForGPX').val(commentId);
        });

        $('#uploadGPXModal').on('hidden.bs.modal', function (e) {
            // Refresh the parent page (assuming you want to refresh the entire page)
            console.log("page refresh!!!");
            location.reload(); // This will refresh the current page
        });


        $(document).ready(function () {
            {#commentId = $(this).data('comment-id');#}
            {#console.log(commentId);#}
            // Handle form submission
            $('#uploadGPXForm').on('submit', function (e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: '/upload_gpx',  // Update with the correct route
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        // Handle success - Close modal, Update the map with new GPX data
                        $('#uploadGPXModal').modal('hide');
                    },
                    error: function () {
                        // Handle error
                        alert("Error uploading GPX file");
                    }
                });
            });
        });


    </script>

    <script>
        function getTrackData() {

            var drItems = {
                "type": "FeatureCollection",
                "features": []
            };

            // Assuming you are using a Leaflet.Draw FeatureGroup for drawn items


            // Later in your code, when you want to iterate over the features
            drawnItems.eachLayer(function (layer) {
                feature = layer.toGeoJSON();

                if (layer instanceof L.Circle) {
                    feature.properties.radius = layer.getRadius();
                    drItems.features.push(feature);
                } else if (layer instanceof L.CircleMarker) {
                    feature.properties.radius = layer.getRadius();
                    drItems.features.push(feature);
                } else {
                    drItems.features.push(feature);
                }
            });


            // Check if there are any features (tracks) drawn
            if (drItems.features.length === 0) {
                return null;  // No tracks drawn
            }

            // Convert GeoJSON to GPX format (you can use a library like togeojson or turf.js)
            var gpxData = geoJSONToGPX(drItems);

            return gpxData;
        }

        // Function to convert GeoJSON to GPX
        function geoJSONToGPX(geoJSONData) {

            // Convert each point to a circle polygon
            let convertedFeatures = geoJSONData.features.map(feature => {
                console.log(feature);
                if (feature.geometry.type === 'Point' && feature.properties.radius) {
                    // Convert radius from meters to kilometers for turf.circle
                    let radiusInKm = feature.properties.radius / 1000;

                    // Create a circular polygon
                    let circle = turf.circle(feature.geometry.coordinates, radiusInKm);

                    // Optional: transfer other properties to the new feature
                    circle.properties = {...feature.properties};

                    return circle;
                }
                return feature;
            });

            // Create a new GeoJSON FeatureCollection
            let convertedGeoJSON = {
                "type": "FeatureCollection",
                "features": convertedFeatures
            };
            console.log(convertedGeoJSON);
            // Convert GeoJSON to GPX
            return togpx(convertedGeoJSON);
        }


        // JavaScript to handle the confirmation and capture data
        document.getElementById('confirm-save-track').addEventListener('click', function () {
            var trackName = document.getElementById('track-name').value;
            var trackComment = document.getElementById('track-comment').value;
            var sarID = document.getElementById('sarIdForGPX').value;

            // Get the track data
            var trackData = getTrackData();

            // Send trackName, trackComment, and trackData to the server
            $.ajax({
                url: '/save_track',
                method: 'POST',
                data: {
                    track_data: trackData,
                    track_name: trackName,
                    track_comment: trackComment,
                    sar_call_id: sarID,
                },
                success: function (response) {
                    // Handle success response
                    alert(response.message);
                },
                error: function (error) {
                    // Handle error response
                    alert('An error occurred while saving the track.');
                }
            });

            // Close the modal
            $('#saveTrackModal').modal('hide');
        });

        $('#saveTrackModal').on('hidden.bs.modal', function (e) {
            // Refresh the parent page (assuming you want to refresh the entire page)
            location.reload(); // This will refresh the current page
        });

    </script>


{% endblock %}