loko/streetup/assets/templates/assets/its_index.html

{% extends "assets/base_assets_index.html" %}
{% load static 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 location_row_actions %}
{% if can_create_location %}
<button type="button" class="btn btn-sm btn-outline-primary" data-location-create
        title="{% translate 'Créer une nouvelle localisation ITS' %}">
    <i class="bi bi-plus-circle"></i>
</button>
{% endif %}
{% endblock location_row_actions %}

{% 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 asset_row_actions %}
{% if can_create_asset and not preventive_draft_id %}
<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addItsAssetModal"
        title="{% translate 'Créer un nouvel asset ITS' %}">
    <i class="bi bi-plus-circle"></i>
</button>
{% endif %}
{% endblock asset_row_actions %}

{% block const_script %}
<script>
    const locationsgeojsonUrl = "{% url 'assets:its_locations_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:its_assets_geojson' %}";
    
    const locationsurl = "{% url 'assets:its_locations' %}";
    const assetsurl = "{% url 'assets:its_index' %}";
    
    var locations_property_fields = ['name'];
    var locations_columns = [
        { 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': '#00000000', 
            'fill-opacity': 0.8,
            'fill-outline-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b', 
                '#0094ff'
            ]
        }
    };

    var locations_outline_layer;

    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];


    // 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 %}
{% if can_create_location %}
{% include "assets/components/location_edit_modals.html" with thematic_code=thematic_code location_type=location_type entry_label="Localisation ITS" %}
{% endif %}
{% if can_create_asset %}
{% include "assets/components/add_asset_modal.html" with modal_id="addItsAssetModal" thematic_code="its" categories=its_categories %}
<script src="{% static 'assets/asset_add_modal.js' %}"></script>
{% endif %}
{% endblock extra_script %}