204 lines
8.3 KiB
HTML
204 lines
8.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load has_group %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">{{ event.name }}</h4>
|
|
<h5 class="card-category mb-0">{{ event.event_type.name }}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<div class="col-7">
|
|
{% if event.date_begin.date == event.date_end.date %}
|
|
<p>The <a href="#">{{ event.date_begin | date:"d-m-Y" }}</a> from <a href="#">{{ event.date_begin | date:"G:i" }}</a> to <a href="#">{{ event.date_end | date:"G:i" }}</a>
|
|
{% else %}
|
|
<p>From <a href="#">{{ event.date_begin | date:"d-m-Y, G:i" }}</a><br />
|
|
To <a href="#">{{ event.date_end | date:"d-m-Y, G:i" }}</a>
|
|
{% endif %}
|
|
|
|
{% if event.number_of_week_from_today > 0 %}
|
|
<br />In <span class="text-{% if event.number_of_week_from_today > 12 %}success{% elif event.number_of_week_from_today > 9 %}info{% elif event.number_of_week_from_today > 6 %}warning{% else %}danger{% endif %}"><b>{{event.number_of_week_from_today}} week(s)</b></span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-5 text-right">
|
|
<p>
|
|
{{ event.place.address }}<br \>
|
|
{{ event.place.postal }} {{ event.place.city }}<br \>
|
|
{{ event.place.country }}
|
|
</p>
|
|
{% if event.place.nbkm %}
|
|
<p>{{ event.place.nbkm }}km ({{ event.place.timing }}min)</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h5 class="title mb-1">Participants </h5>
|
|
{% if request.user|has_group:"trainer" %}
|
|
<input type="text" name="gymnast" placeholder="Add gymnast…" class="form-control mb-2" id="gymnast">
|
|
{% endif %}
|
|
<table class="table tablesorte table-condensed table-striped" id="gymmanst_participant">
|
|
{% for gymnast in gymnast_list %}
|
|
<tr>
|
|
{% if request.user|has_group:"trainer" %}
|
|
<td class="text-left">
|
|
<span class="tim-icons icon-simple-remove text-warning minusButton" data-gymnastid="{{ gymnast.0.id }}"></span>
|
|
</td>
|
|
{% endif %}
|
|
<td class="text-left col-9">
|
|
<a href="{% url 'gymnast_details_tab' gymnast.0.id 'event' %}">{{ gymnast.0 }}</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% if not gymnast_list %}
|
|
<p id="no_participant">No partifcipant for now.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id='map' style='width: 705px; height: 350px;'></div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% if event.informations %}
|
|
{{ event.to_markdown | safe }}
|
|
{% else %}
|
|
No informations for this event.
|
|
{% endif %}
|
|
{% if request.user|has_group:"trainer" %}
|
|
<p>
|
|
<a href="{% url 'event_update' event.id %}">
|
|
<button type="submit" value="add" class="btn btn-icon btn-warning ">
|
|
<i class="tim-icons icon-pencil"></i>
|
|
</button>
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
|
|
const csrf_token = "{{ csrf_token|escapejs }}";
|
|
const gymnast_lookup = "{% url 'gymnast_lookup' %}";
|
|
|
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZ3RydWxsZW0iLCJhIjoiY2p2Mm5wa3YzMDE1eTQ0cDJlOGdsZno4ZCJ9.zrOWNO0F4VTd9_h-LSSkzw';
|
|
|
|
var geocoder = L.mapbox.geocoder('mapbox.places');
|
|
geocoder.query('{{ event.place.address }} {{ event.place.postal }} {{ event.place.city }}', showMap);
|
|
var map = L.mapbox.map('map').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
|
|
|
|
function showMap(err, data) {
|
|
if (data.lbounds) {
|
|
map.fitBounds(data.lbounds);
|
|
} else if (data.latlng) {
|
|
map.setView([data.latlng[0], data.latlng[1]], 10);
|
|
L.marker([data.latlng[0], data.latlng[1]]).addTo(map);
|
|
}
|
|
}
|
|
|
|
$(function(){
|
|
$('[data-sort="table"]').tablesorter({
|
|
headers: {
|
|
0: { sorter: false },
|
|
},
|
|
sortList: [[1,0]]
|
|
})
|
|
|
|
function insert_selected_gymnast(gymnast_id, gymnast_name)
|
|
{
|
|
$('#no_participant').hide();
|
|
$('#gymmanst_participant').append('<tr><td class="text-left"><span class="tim-icons icon-simple-remove text-warning minusButton" data-gymnastid="{{ gymnast.0.id }}"></span></td><td class="text-left"><a href="/gymnast/details/' + gymnast_id + '/tab/event">' + gymnast_name + '</a></td></tr>');
|
|
|
|
$('#gymnast').val('');
|
|
$('#gymnast').focus();
|
|
}
|
|
|
|
$('body').on('click', '.minusButton', function(event){
|
|
$.ajax({
|
|
url: "{% url 'unlink_gymnast_from_event' %}",
|
|
method: "POST",
|
|
data: {
|
|
event_id: {{ event.id }},
|
|
gymnast_id: $(this).data('gymnastid'),
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
},
|
|
context: $(this),
|
|
}).done(function(){
|
|
$(this).closest('tr').fadeTo(1000, 0, function(){
|
|
$(this).remove();
|
|
});
|
|
}).fail(function(){
|
|
alert('Gymnast not unlinked !');
|
|
});
|
|
return false;
|
|
});
|
|
|
|
$('#gymnast').autocomplete({
|
|
source: function(request, response){
|
|
$.ajax({
|
|
url: gymnast_lookup,
|
|
method: "POST",
|
|
data: {
|
|
pattern: $('#gymnast').val(),
|
|
csrfmiddlewaretoken: csrf_token
|
|
},
|
|
dataType: "json",
|
|
success: function(data){
|
|
if(data.length != 0){
|
|
response($.map(data, function(item){
|
|
return {
|
|
label: item.Name,
|
|
value: item.Name,
|
|
gymnastid: item.ID,
|
|
}
|
|
}))
|
|
} else {
|
|
response([{ label: 'No result found.', value: '' }]);
|
|
};
|
|
},
|
|
|
|
error: function(exception){
|
|
console.log(exception);
|
|
}
|
|
});
|
|
},
|
|
minLength: 3,
|
|
select: function (event, ui) {
|
|
$.ajax({
|
|
url: "{% url 'link_gymnast_to_event' %}",
|
|
method: "POST",
|
|
data: {
|
|
event_id: {{ event.id }},
|
|
gymnast_id: ui.item.gymnastid,
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
},
|
|
}).done(function() {
|
|
insert_selected_gymnast(ui.item.gymnastid, ui.item.label);
|
|
});
|
|
},
|
|
{% if request.session.template == 0 %}
|
|
classes: {
|
|
"ui-widget-content": "custom_autocomplete_ul",
|
|
"ui-autocomplete": "custom_autocomplete_ul",
|
|
"ui-menu-item-wrapper": "custom_autocomplete_li",
|
|
"ui-menu-item": "custom_autocomplete_li",
|
|
},
|
|
{% endif %}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |