287 lines
No EOL
11 KiB
HTML
287 lines
No EOL
11 KiB
HTML
{% extends "assets/base_assets_index.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block tab_actions %}
|
|
<li class="nav-item ms-auto">
|
|
<a href="{% url 'assets:management_zones_index' %}?thematic=nature" class="btn btn-sm btn-outline-success d-inline-flex align-items-center gap-1 my-1 me-2" title="{% translate 'Gérer les zones de gestion écologique et d'entretien' %}">
|
|
<i class="bi bi-diagram-3"></i>
|
|
<span>{% translate "Zones de gestion" %}</span>
|
|
</a>
|
|
</li>
|
|
{% endblock tab_actions %}
|
|
|
|
|
|
{% block locations_filter_form %}
|
|
<form method="get" id="filter-form" class="row g-3 mb-4" style="width: 30vw;">
|
|
<div class="col-12">
|
|
<label class="form-label">{% translate "Type de localisation" %}</label>
|
|
<div class="d-flex gap-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="location_type" id="location_type_all" value=""
|
|
{% if not selected_location_type %}checked{% endif %}>
|
|
<label class="form-check-label" for="location_type_all">{% translate "Tous" %}</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="location_type" id="location_type_naturelocation" value="naturelocation"
|
|
{% if selected_location_type == 'naturelocation' %}checked{% endif %}>
|
|
<label class="form-check-label" for="location_type_naturelocation">{% translate "Voiries" %}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="highway" class="form-label">{% translate "Ring et autoroutes" %}</label>
|
|
<input type="checkbox" id="highway" name="highway" class="form-check-input" {% if highway %}checked{% endif %} value="1">
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button" id="apply-filters" class="btn btn-primary">{% translate "Filtrer" %}</button>
|
|
<button type="button" id="reset-filters" class="btn btn-secondary">{% translate "Réinitialiser" %}</button>
|
|
</div>
|
|
</form>
|
|
{% endblock locations_filter_form %}
|
|
|
|
|
|
|
|
{% block assets_filter_form %}
|
|
<form method="get" id="assets-filter-form" class="row g-3 mb-3 me-3" style="width: 600px;">
|
|
<div class="col-6">
|
|
<label for="category" class="form-label">{% translate "Catégorie" %}</label>
|
|
<select name="category" id="category" class="form-select" multiple>
|
|
{% for key, value in category_choices %}
|
|
<option value="{{ key }}" {% if key in selected_categories %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="model" class="form-label">{% translate "Modèle" %}</label>
|
|
<select name="model" id="model" class="form-select" multiple>
|
|
{% for key, value in model_choices %}
|
|
<option value="{{ key }}" {% if key in selected_models %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="management_type" class="form-label">{% translate "Gestionnaire / Compétence" %}</label>
|
|
<select name="management_type" id="management_type" class="form-select" multiple>
|
|
{% for key, value in management_type_choices %}
|
|
<option value="{{ key }}" {% if key in selected_management_types %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12 d-flex justify-content-between mt-4" style="width: 200px;">
|
|
<button type="button" id="apply-assets-filters" class="btn btn-sm btn-primary">{% translate "Filtrer" %}</button>
|
|
<button type="button" id="reset-assets-filters" class="btn btn-sm btn-secondary">{% translate "Réinitialiser" %}</button>
|
|
</div>
|
|
</form>
|
|
{% endblock assets_filter_form %}
|
|
|
|
|
|
{% block const_script %}
|
|
<script>
|
|
const locationsgeojsonUrl = "{% url 'assets:nature_locations_geojson' %}";
|
|
const assetsgeojsonUrl = "{% url 'assets:nature_assets_geojson' %}";
|
|
|
|
const locationsurl = "{% url 'assets:nature_locations' %}";
|
|
const assetsurl = "{% url 'assets:nature_index' %}";
|
|
|
|
var locations_property_fields = ['name', 'highway'];
|
|
var locations_columns = [
|
|
{ field: 'name', title: '{% translate "Nom" %}' },
|
|
{ field: 'highway', title: '{% translate "Ring/Autoroute" %}', align: 'center' }
|
|
];
|
|
|
|
var assets_property_fields = ['code', 'name', 'managing_authority', 'model', 'scientific_name', 'area'];
|
|
var assets_columns = [
|
|
{ field: 'code', title: '{% translate "Code" %}' },
|
|
{ field: 'name', title: '{% translate "Nom" %}' },
|
|
{ field: 'managing_authority', title: '{% translate "Gestionnaire" %}' },
|
|
{ field: 'model', title: '{% translate "Modèle" %}' },
|
|
{ field: 'scientific_name', title: '{% translate "Botanique" %}' },
|
|
{ field: 'area', title: '{% translate "Superficie" %}' }
|
|
];
|
|
|
|
|
|
const locations_layer_def = {
|
|
id: 'locations',
|
|
type: 'fill',
|
|
source: 'locations',
|
|
paint: {
|
|
'fill-color': '#0094ff',
|
|
'fill-opacity': 0
|
|
}
|
|
};
|
|
var locations_outline_layer = {
|
|
id: 'locations-outline',
|
|
type: 'line',
|
|
source: 'locations',
|
|
paint: {
|
|
'line-color': [
|
|
'case',
|
|
['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
|
|
'#0094ff'
|
|
],
|
|
'line-width': [
|
|
'case',
|
|
['boolean', ['feature-state', 'highlighted'], false], 1,
|
|
1
|
|
],
|
|
'line-opacity': 0.7
|
|
}
|
|
};
|
|
|
|
const assets_surfaces_layer_def = {
|
|
id: 'assets',
|
|
type: 'fill',
|
|
source: 'assets',
|
|
filter: ['all',
|
|
['==', ['get', 'asset_type'], 'naturegreensurface']
|
|
],
|
|
paint: {
|
|
'fill-color': ['get', 'color'],
|
|
'fill-opacity': 0.7,
|
|
'fill-outline-color': [
|
|
'case',
|
|
['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
|
|
'#00000000'
|
|
],
|
|
},
|
|
minzoom: 8
|
|
};
|
|
|
|
const assets_points_layer_def = {
|
|
id: 'assets-points',
|
|
type: 'circle',
|
|
source: 'assets',
|
|
filter: [
|
|
'all',
|
|
['in', ['get', 'asset_type'], ['literal', ['naturetree', 'natureshrub', 'naturebench']]],
|
|
['any',
|
|
['==', ['geometry-type'], 'Point'],
|
|
['==', ['geometry-type'], 'MultiPoint']
|
|
]
|
|
],
|
|
paint: {
|
|
'circle-radius': [
|
|
'interpolate', ['linear'], ['zoom'],
|
|
8, 2,
|
|
12, 3,
|
|
16, 5,
|
|
20, 8
|
|
],
|
|
'circle-color': [
|
|
'case',
|
|
['==', ['get', 'management_type'], 'regional'], '#1E3A8A',
|
|
['boolean', ['get', 'is_remarkable'], false], '#F59E0B',
|
|
['coalesce', ['get', 'color'], '#15803D']
|
|
],
|
|
'circle-stroke-width': [
|
|
'case',
|
|
['boolean', ['feature-state', 'highlighted'], false], 2.5,
|
|
['==', ['get', 'management_type'], 'regional'], 1.5,
|
|
['boolean', ['get', 'is_remarkable'], false], 2,
|
|
1
|
|
],
|
|
'circle-stroke-color': [
|
|
'case',
|
|
['boolean', ['feature-state', 'highlighted'], false], '#EF4444',
|
|
['==', ['get', 'management_type'], 'regional'], '#93C5FD',
|
|
['boolean', ['get', 'is_remarkable'], false], '#FEF08A',
|
|
'#064E3B'
|
|
],
|
|
'circle-opacity': 0.8
|
|
},
|
|
minzoom: 8
|
|
};
|
|
|
|
const assets_layers_defs = [assets_surfaces_layer_def, assets_points_layer_def];
|
|
|
|
|
|
// Filtrer les modèles par catégorie dans le formulaire des assets
|
|
const modelsByCategory = {{ category_model_map|safe }};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const categorySelect = document.getElementById("category");
|
|
const modelSelect = document.getElementById("model");
|
|
|
|
function updateModelOptions() {
|
|
const selectedCategories = Array.from(categorySelect.selectedOptions).map(opt => opt.value);
|
|
const previouslySelectedModels = Array.from(modelSelect.selectedOptions).map(opt => opt.value);
|
|
|
|
if (selectedCategories.length === 0) {
|
|
return;
|
|
}
|
|
|
|
modelSelect.innerHTML = "";
|
|
|
|
const allModels = [];
|
|
const addedKeys = new Set();
|
|
|
|
selectedCategories.forEach(cat => {
|
|
const models = modelsByCategory[cat] || [];
|
|
models.forEach(model => {
|
|
if (!addedKeys.has(model.key)) {
|
|
allModels.push(model);
|
|
addedKeys.add(model.key);
|
|
}
|
|
});
|
|
});
|
|
|
|
allModels.sort((a, b) => a.label.localeCompare(b.label));
|
|
|
|
allModels.forEach(model => {
|
|
const option = document.createElement("option");
|
|
option.value = model.key;
|
|
option.text = model.label;
|
|
if (previouslySelectedModels.includes(model.key)) {
|
|
option.selected = true;
|
|
}
|
|
modelSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
categorySelect.addEventListener("change", updateModelOptions);
|
|
|
|
updateModelOptions();
|
|
});
|
|
</script>
|
|
{% endblock const_script %}
|
|
|
|
{% block extra_script %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
function setupNatureOverlays() {
|
|
if (typeof initContractsMapOverlay === 'function' && window.map) {
|
|
initContractsMapOverlay({
|
|
map: window.map,
|
|
layerSwitcher: window.layerSwitcher,
|
|
thematic: 'nature',
|
|
geojsonUrl: "{% url 'contracts:contracts_geojson' %}",
|
|
});
|
|
}
|
|
if (typeof initManagementZonesMapOverlay === 'function' && window.map) {
|
|
initManagementZonesMapOverlay({
|
|
map: window.map,
|
|
layerSwitcher: window.layerSwitcher,
|
|
thematic: 'nature',
|
|
geojsonUrl: "{% url 'assets:management_zones_geojson' %}",
|
|
});
|
|
}
|
|
}
|
|
|
|
if (window.map && window.map.loaded && window.map.loaded()) {
|
|
setupNatureOverlays();
|
|
} else if (window.maploader) {
|
|
window.maploader.addEventListener('mapLoaded', () => {
|
|
setTimeout(setupNatureOverlays, 100);
|
|
});
|
|
} else if (window.map) {
|
|
window.map.on('load', setupNatureOverlays);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock extra_script %} |