Fixed create_sar JS
This commit is contained in:
parent
a33c77d2d0
commit
4426c4cae5
@ -11,12 +11,19 @@
|
||||
</content>
|
||||
<orderEntry type="jdk" jdkName="Python 3.9 (SARBase)" jdkType="Python SDK" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<orderEntry type="library" name="leaflet-control-geocoder" level="application" />
|
||||
<orderEntry type="library" name="leaflet-gpx" level="application" />
|
||||
<orderEntry type="library" name="@turf/turf" level="application" />
|
||||
<orderEntry type="library" name="jquery-3.5.1.slim" level="application" />
|
||||
<orderEntry type="library" name="leaflet.draw" level="application" />
|
||||
<orderEntry type="library" name="leaflet-control-geocoder" level="application" />
|
||||
<orderEntry type="library" name="leaflet" level="application" />
|
||||
<orderEntry type="library" name="jquery-3.5.1.slim" level="application" />
|
||||
<orderEntry type="library" name="jquery" level="application" />
|
||||
<orderEntry type="library" name="leaflet" level="application" />
|
||||
<orderEntry type="library" name="leaflet.draw" level="application" />
|
||||
<orderEntry type="library" name="bootstrap" level="application" />
|
||||
<orderEntry type="library" name="popper.js" level="application" />
|
||||
<orderEntry type="library" name="@turf/turf" level="application" />
|
||||
<orderEntry type="library" name="leaflet-gpx" level="application" />
|
||||
</component>
|
||||
<component name="PackageRequirementsSettings">
|
||||
<option name="removeUnused" value="true" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<file url="file://$PROJECT_DIR$" libraries="{@turf/turf, jquery-3.5.1.slim, leaflet, leaflet-gpx, leaflet.draw}" />
|
||||
<file url="file://$PROJECT_DIR$" libraries="{@turf/turf, bootstrap, jquery, leaflet, leaflet-control-geocoder, leaflet.draw, popper.js}" />
|
||||
</component>
|
||||
</project>
|
||||
@ -2,11 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- ... meta tags, styles, etc. ... -->
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<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>
|
||||
{% include 'jscripts.html' %}
|
||||
|
||||
<title>{% block title %}Default Title{% endblock %}</title>
|
||||
</head>
|
||||
|
||||
@ -6,11 +6,6 @@
|
||||
|
||||
{% 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>
|
||||
@ -83,21 +78,48 @@
|
||||
<button type="submit" class="btn btn-primary">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="map" style="width: 600px; height: 400px;"></div>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var map = L.map('map').setView([60.19, 20.37], 13); // Default to London, adjust as needed#
|
||||
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: '© <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);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <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;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@ -115,37 +137,10 @@
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
@ -6,8 +6,7 @@
|
||||
|
||||
{% 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>
|
||||
|
||||
|
||||
<h2>Edit SAR Call</h2>
|
||||
<div class="container mt-5">
|
||||
@ -114,7 +113,7 @@
|
||||
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</form>
|
||||
<div id="map" style="width: 600px; height: 400px;"></div>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
var map = L.map('map').setView([60.19, 20.37], 13); // Default to London, adjust as needed
|
||||
|
||||
|
||||
29
templates/jscripts.html
Normal file
29
templates/jscripts.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
|
||||
<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"/>
|
||||
|
||||
<!-- 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>
|
||||
<script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#map {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@ -6,33 +6,6 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
|
||||
<!-- Leaflet.draw CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<!-- Leaflet.draw JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<!-- Include leaflet-gpx plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
|
||||
|
||||
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
|
||||
<script src="/static/togpx.js"></script>
|
||||
|
||||
<style>
|
||||
#map {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container mt-4">
|
||||
<h2 class="mb-4">#{{ sar.SARCall.id }} : {{ sar.SARCall.title }}</h2>
|
||||
<div class="card mb-4">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user