loko/streetup/assets/templates/assets/publiclighting_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: 400px;">
        <div class="col-12">
            <label for="municipality" class="form-label">{% translate "Commune" %}</label>
            <select name="municipality" id="municipality" class="form-select" multiple>
                {% for key, value in municipality_choices %}
                    <option value="{{ key }}" {% if key in selected_municipalities %}selected{% endif %}>
                        {{ value }}
                    </option>
                {% endfor %}
            </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:publiclighting_streets_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:publiclighting_assets_geojson' %}";
    
    const locationsurl = "{% url 'assets:publiclighting_streets' %}";
    const assetsurl = "{% url 'assets:publiclighting_index' %}";
    
    var locations_property_fields = ['name', 'municipality'];
    var locations_columns = [
        { field: 'name', title: '{% translate "Nom" %}' },
        { field: 'municipality', title: '{% translate "Commune" %}', align: 'center' }
    ];

    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', 
                '#00000000' 
            ]
        }
    };
    var locations_outline_layer;

    const assets_layer_def = {
        id: 'assets',
        type: 'circle',
        source: 'assets',
        filter: ['!=', ['get', 'asset_type'], 'publiclightingelectricalcabinet'],
        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
    };

    // Layer for electrical cabinets with specific icon
    const electrical_cabinet_layer_def = {
        id: 'electrical-cabinets',
        type: 'symbol',
        source: 'assets',
        filter: ['==', ['get', 'asset_type'], 'publiclightingelectricalcabinet'],
        layout: {
            'icon-image': 'electrical-panel-icon',
            'icon-size': [
                'interpolate',
                ['linear'],
                ['zoom'],
                8, 0.05,
                14, 0.15,
                22, 0.3
            ],
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
            'text-field': ['get', 'name'],
            'text-font': ['Noto Sans Regular'],
            'text-size': [
                'interpolate',
                ['linear'],
                ['zoom'],
                14, 8,
                18, 11,
                22, 14
            ],
            'text-anchor': 'top',
            'text-offset': [0, 1.5],
            'text-allow-overlap': false,
            'text-optional': true
        },
        paint: {
            'icon-opacity': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 1,
                0.85
            ],
            'text-color': '#333333',
            'text-halo-color': 'rgba(255, 255, 255, 0.85)',
            'text-halo-width': 3,
            'text-halo-blur': 1
        },
        minzoom: 8
    };

    // Load electrical panel icon into the map
    function loadElectricalPanelIcon() {
        if (map.hasImage('electrical-panel-icon')) {
            return;
        }

        const iconUrl = "{% static 'assets/electrical-panel.png' %}";
        const img = new Image();
        
        img.onload = () => {
            if (!map.hasImage('electrical-panel-icon')) {
                map.addImage('electrical-panel-icon', img);
            }
        };

        img.onerror = () => {
            console.warn('Failed to load electrical panel icon');
        };

        img.src = iconUrl;
    }

    const assets_layers_defs = [assets_layer_def, electrical_cabinet_layer_def];
    
</script>
{% endblock const_script %}

{% block extra_script %}
<script>
    // Load electrical panel icon when map is ready
    maploader.addEventListener("mapLoaded", function(event) {
        loadElectricalPanelIcon();
    });
</script>
{% endblock extra_script %}