Added icons for GPX display

This commit is contained in:
Vadim Likholetov 2023-11-26 21:06:43 +02:00
parent 8296df372f
commit b521402aa0
5 changed files with 41 additions and 32 deletions

BIN
static/pin-icon-end.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 B

BIN
static/pin-icon-start.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 971 B

BIN
static/pin-icon-wpt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 660 B

BIN
static/pin-shadow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -11,7 +11,7 @@
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Include leaflet-gpx plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.1/gpx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<style>
#map {
@ -40,11 +40,12 @@
<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>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>
<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>
@ -61,7 +62,7 @@
<p>Latitude found: {{ sar.SARCall.latitude_found }}</p>
<p>Description: {{ sar.SARCall.description }}</p>
{% if is_logged_in %}
<p>Description private: {{ sar.SARCall.description_hidden }}</p>
<p>Description private: {{ sar.SARCall.description_hidden }}</p>
{% endif %}
</div>
</div>
@ -74,8 +75,8 @@
<div>
{% if is_logged_in %}
<a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}" class="btn btn-primary">Edit</a>
<a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}" class="btn btn-danger">Delete</a>
<a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}" class="btn btn-primary">Edit</a>
<a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}" class="btn btn-danger">Delete</a>
{% endif %}
</div>
@ -105,23 +106,23 @@
{% endfor %}
{% if is_logged_in %}
{% 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 }}">Edit
</button>
<!-- 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>
{% 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 }}">Edit
</button>
<!-- 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>
<button type="button" class="delete-comment-btn">
<a href="{{ url_for('delete_comment', id=comment.id) }}">Delete</a>
</button>
<button type="button" class="delete-comment-btn">
<a href="{{ url_for('delete_comment', id=comment.id) }}">Delete</a>
</button>
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
</div>
@ -156,19 +157,20 @@
<!-- 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">Comment:</label>
<textarea name="text" class="form-control"></textarea>
</div>
<div class="form-group">
{% 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">Comment:</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>
<button type="submit" class="btn btn-primary">Add Comment</button>
</form>
{% endif %}
</div>
<!-- GPX File Upload Modal -->
@ -210,7 +212,14 @@
fetch('/get_gpx/' + gpxId)
.then(response => response.text())
.then(gpxData => {
new L.GPX(gpxData, {async: true}).on('loaded', function (e) {
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'
}
}).on('loaded', function (e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
})