117 lines
5.5 KiB
HTML
117 lines
5.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block content %}
|
|
<div class="row mt-2" style="height: calc(100vh - 200px);">
|
|
<div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
|
|
<h3 class="h3">
|
|
<i class="bi bi-suit-club"></i><span class="mx-2">{{ section.code}} - {{ section.name_fr}}</span>
|
|
</h3>
|
|
<hr>
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label class="mx-2">{% translate "Zone:" %}</label><i class="bi bi-circle-fill status_{{ surface.status }}"></i> {{ section.zone|default:"" }}<br>
|
|
<label class="mx-2">{% translate "Autoroute:" %}</label>{{ section.is_highway|default:"" }}<br>
|
|
</div>
|
|
<div class="col-md-6">
|
|
{% if section.lon %}
|
|
<a href="https://www.google.com/maps?cbll={{ section.lat|floatformat:'6u'}},{{ section.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" target="_blank" style="text-decoration: none; font-size: 16px; display: flex; align-items: center;">
|
|
<img src="{% static 'common/google-street-view-logo.png' %}" alt="{% translate 'Street View' %}" height="20" style="margin-right: 8px;">
|
|
{% translate "View in Google Street View" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
<label class="mx-2">{% translate "Nombre d'arbres:" %}</label><br>
|
|
<label class="mx-2">{% translate "Superficie massif arboré:" %}</label><br>
|
|
<label class="mx-2">{% translate "Superficie pré fleuri:" %}</label><br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4>{% translate "Documents" %}</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% for document in section.documents.all %}
|
|
<div class="col-md-2 mb-3">
|
|
<a href="{{ document.file.url }}" target="_blank">
|
|
<div class="img-thumbnail" style="width: 100%; height: 100px; overflow: hidden;">
|
|
{% if document.thumbnail %}
|
|
<img src="{{ document.thumbnail.url }}" alt="{{ document.file.name }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
|
|
{% else %}
|
|
<img src="{{ document.file.url }}" alt="{{ document.file.name }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interventions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4>{% translate "Interventions" %}</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<table id="interventions-table" class="table"
|
|
data-height="550"
|
|
data-pagination="true"
|
|
data-page-size="25"
|
|
data-click-to-select="true" >
|
|
<thead>
|
|
<tr>
|
|
<th data-field="actions" data-width="100"></th>
|
|
<th data-field="code">{% translate "Code" %}</th>
|
|
<th data-field="title">{% translate "Titre" %}</th>
|
|
<th data-field="begin_date">{% translate "Début" %}</th>
|
|
<th data-field="statut">{% translate "Statut" %}</th>
|
|
</tr>
|
|
<tbody>
|
|
{% for interv in interventions %}
|
|
<tr>
|
|
<td>
|
|
<a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="{% translate 'Détail' %}">
|
|
<i class="bi bi-info-circle"></i>
|
|
</a>
|
|
</td>
|
|
<td>{{ interv.code }}</td>
|
|
<td>{{ interv.title }}</td>
|
|
<td>{{ interv.begin_time|date:"d-m-Y H:i" }}</td>
|
|
<td>{{ interv.get_status_display }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div id="map">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content%}
|
|
|
|
|
|
{% block script %}
|
|
{{ section.lon|json_script:"lon_value" }}
|
|
{{ section.lat|json_script:"lat_value" }}
|
|
{{ section.geojson|json_script:"geojson_value" }}
|
|
<script>
|
|
const feature_geojson = JSON.parse(document.getElementById("geojson_value").textContent);
|
|
const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
|
|
const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
|
|
</script>
|
|
<script src="{% static 'assets/green_detail.js' %}"></script>
|
|
{% endblock script %}
|