SARBase/templates/create_sar.html

163 lines
6.1 KiB
HTML
Raw Permalink Normal View History

2023-11-01 18:46:27 +00:00
{% extends "base.html" %}
{% block title %}
Create SAR Record
{% endblock %}
{% block content %}
<div class="container mt-5">
<h2>Create SAR Call</h2>
2023-11-01 18:46:27 +00:00
<form action="{{ url_for('create_sar') }}" method="post" enctype="multipart/form-data">
2023-11-01 18:46:27 +00:00
<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>
2023-11-01 18:46:27 +00:00
</div>
2023-11-01 18:46:27 +00:00
<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>
2023-11-01 18:46:27 +00:00
</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>
2023-11-01 18:46:27 +00:00
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="coordinates">Initial Planning Point (IPP) Coordinates:</label>
2023-12-11 17:17:27 +00:00
<input type="text" name="latitude" class="form-control" placeholder="Lat - e.g. 60.0060"
required>
2023-12-11 17:17:27 +00:00
<input type="text" name="longitude" class="form-control" placeholder="Lon - e.g. 40.7128"
2023-11-01 18:46:27 +00:00
required>
2023-12-11 17:17:27 +00:00
2023-11-01 18:46:27 +00:00
</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>
2023-11-01 18:46:27 +00:00
<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>
2023-11-01 18:46:27 +00:00
</div>
2023-11-18 19:34:23 +00:00
<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>
2023-11-01 18:46:27 +00:00
<button type="submit" class="btn btn-primary">Create</button>
</form>
2023-10-30 14:48:00 +00:00
</div>
2023-12-10 10:42:32 +00:00
<div id="map"></div>
2023-10-30 14:48:00 +00:00
<script>
2023-11-18 19:34:23 +00:00
2023-12-10 10:42:32 +00:00
var map;
{# = L.map('map').setView([60.19, 20.37], 13); // Default to London, adjust as needed##}
2023-11-18 19:34:23 +00:00
var marker;
2023-10-30 14:48:00 +00:00
2023-11-18 19:34:23 +00:00
// Function to initialize map with user's location
function initializeMap(lat, lon) {
map = L.map('map').setView([lat, lon], 13);
2023-12-10 10:42:32 +00:00
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);
// 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;
});
2023-11-18 19:34:23 +00:00
}
// 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);
}
2023-10-30 14:48:00 +00:00
2023-11-18 19:34:23 +00:00
// If editing, set the marker to the existing coordinates
var latInput = document.querySelector('input[name="latitude"]');
var lngInput = document.querySelector('input[name="longitude"]');
2023-12-10 10:42:32 +00:00
2023-11-18 19:34:23 +00:00
if (latInput.value && lngInput.value) {
marker = L.marker([latInput.value, lngInput.value]).addTo(map);
}
2023-10-30 14:48:00 +00:00
</script>
2023-11-18 19:34:23 +00:00
2023-10-30 14:48:00 +00:00
2023-11-01 18:46:27 +00:00
<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;
});
2023-11-01 18:46:27 +00:00
</script>
2023-10-30 14:48:00 +00:00
2023-11-01 18:46:27 +00:00
{% endblock %}