SARBase/templates/create_sar.html

{% extends "base.html" %}

{% block title %}
    Create SAR Record
{% endblock %}

{% block content %}

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>


    <div class="container mt-5">
        <h2>Create SAR Call</h2>


        <form action="{{ url_for('create_sar') }}" method="post" enctype="multipart/form-data">

            <div class="form-group">
                <label for="status">Status:</label>
                <select name="status" id="status" class="form-control">
                    {% for status in statuses %}
                        <option value="{{ status.id }}">
                            {{ status.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>


            <div class="form-group">
                <label for="start_date">Start Date:</label>
                <div>
                    <button type="button" id="today_button" class="btn btn-secondary">Today</button>
                </div>
                <input type="date" name="start_date" id="start_date" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="category">Category:</label>
                <select name="category" id="category" class="form-control">
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <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"
                       required>
                <input type="text" name="latitude" class="form-control" placeholder="e.g. -74.0060"
                       required>
            </div>

            <div class="form-group">
                <label for="title">Title:</label>
                <input type="text" name="title" class="form-control"
                       placeholder="e.g. M65, London center, missing since 12.12.2022" required>
            </div>
            <div class="form-group">
                <label for="description">Description:</label>
                <textarea name="description" class="form-control"></textarea>
            </div>

            <div class="form-group">
                <label for="description_hidden">Hidden Description:</label>
                <textarea name="description_hidden" class="form-control"></textarea>
            </div>

            <div class="form-group">
                <label for="manager">Assigned search manager:</label>
                <select name="category" id="search_officer" class="form-control">
                    {% for user in managers %}
                        <option value="{{ user.id }}">{{ user.full_name }}</option>
                    {% endfor %}
                </select>
            </div>


            <button type="submit" class="btn btn-primary">Create</button>
        </form>
    </div>
    <div id="map" style="width: 600px; height: 400px;"></div>
    <script>

        var map = L.map('map').setView([60.19, 20.37], 13); // Default to London, adjust as needed#
        var marker;

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        // Function to initialize map with user's location
        function initializeMap(lat, lon) {
            map = L.map('map').setView([lat, lon], 13);


        }

        // Fetch user's current location
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                initializeMap(position.coords.latitude, position.coords.longitude);
            }, function () {
                // If there's an error or permission denied, default to a location (e.g., London in this case)
                initializeMap(60.19, 20.37);
            });
        } else {
            // Geolocation is not supported by this browser, default to a location (e.g., London)
            initializeMap(60.19, 20.37);
        }


        // Add the geocoder
        L.Control.geocoder({
            defaultMarkGeocode: true
        })
            .on('markgeocode', function (e) {
                if (marker) {
                    map.removeLayer(marker);
                }
                var latlng = e.geocode.center;
                L.marker(latlng).addTo(map);
                map.setView(latlng, map.getZoom());
                // Update your form fields with the selected location
                document.querySelector('input[name="latitude"]').value = latlng.lat;
                document.querySelector('input[name="longitude"]').value = latlng.lng;
            })
            .addTo(map);


        map.on('click', function (e) {
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker(e.latlng).addTo(map);
            document.querySelector('input[name="latitude"]').value = e.latlng.lat;
            document.querySelector('input[name="longitude"]').value = e.latlng.lng;
        });


        // If editing, set the marker to the existing coordinates
        var latInput = document.querySelector('input[name="latitude"]');
        var lngInput = document.querySelector('input[name="longitude"]');
        if (latInput.value && lngInput.value) {
            marker = L.marker([latInput.value, lngInput.value]).addTo(map);
        }
    </script>


    <script>
        document.getElementById('today_button').addEventListener('click', function () {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
            var yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;
            document.getElementById('start_date').value = today;
        });
    </script>


{% endblock %}