loko/streetup/assets/templates/assets/controlcenters_index.html

{% extends "assets/base_assets_index.html" %}
{% load static %}
{% load i18n %}
    
{% block locations_filter_form %}
    <form method="get" id="filter-form" class="row g-3 mb-3 me-3" style="width: 600px;">
        <div class="col-6 ps-4">
            <label for="is_main_location" class="form-label">{% translate "Type de Localisation" %}</label>
            <select name="is_main_location" id="is_main_location" class="form-select">
                <option value="" {% if not selected_is_main_location %}selected{% endif %}>{% translate "Toutes" %}</option>
                <option value="true" {% if selected_is_main_location == 'true' %}selected{% endif %}>{% translate "Principale" %}</option>
                <option value="false" {% if selected_is_main_location == 'false' %}selected{% endif %}>{% translate "Secondaire" %}</option>
            </select>
        </div>
        <div class="col-12 mt-4">
            <button type="button" id="apply-filters" class="btn btn-sm btn-primary">{% translate "Filtrer" %}</button>
            <button type="button" id="reset-filters" class="btn btn-sm 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 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:controlcenters_locations_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:controlcenters_assets_geojson' %}";
    
    const locationsurl = "{% url 'assets:controlcenters_locations' %}";
    const assetsurl = "{% url 'assets:controlcenters_index' %}";
    
    var locations_property_fields = ['control_center', 'name'];
    var locations_columns = [
        { field: 'control_center', title: "{% translate 'Centre de contrôle' %}" },
        { field: 'name',          title: "{% translate 'Nom' %}" },
    ];

    var assets_property_fields = ['name', 'category', 'model'];
    var assets_columns = [
        { field: 'name',     title: "{% translate 'Nom' %}" },
        { field: 'category', title: "{% translate 'Catégorie' %}" },
        { field: 'model',    title: "{% translate 'Modèle' %}" }
    ];

    const locations_layer_def = {
        id: 'locations',
        type: 'fill',
        source: 'locations',
        paint: {
            'fill-color': '#0094ff',
            'fill-opacity': 0.7,
            'fill-outline-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b',
                '#0094aa'
            ]
        }
    };

    var locations_outline_layer = {
        id: 'locations-outline',
        type: 'line',
        source: 'locations',
        paint: {
            'line-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b',
                '#00000000'
            ],
            'line-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 3,
                0
            ]
        }
    };

    const assets_layer_def = {
        id: 'assets',
        type: 'circle',
        source: 'assets',
        paint: {
            'circle-radius': [
                'interpolate', ['linear'], ['zoom'],
                8, 1,
                22, 10
            ],
            'circle-stroke-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b',
                '#00000000'
            ],
            'circle-stroke-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 3,
                0
            ],
            'circle-color': '#0022ff',
            'circle-opacity': 0.7
        },
        minzoom: 8
    };

    const assets_layers_defs = [assets_layer_def];

    // Filter models by category in the assets filter form
    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 %}