loko/streetup/assets/templates/assets/artworks_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="status" class="form-label">{% translate "Statut" %}</label>
            <select name="status" id="status" class="form-select" multiple>
                {% for key, value in status_choices %}
                    <option value="{{ key }}" {% if key in selected_statuses %}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>
        <div class="col-12">
            <label for="municipality" class="form-label">{% translate "Commune" %}</label>
            <select name="municipality" id="municipality" class="form-select" multiple>
                {% for pk, label in municipality_choices %}
                    <option value="{{ pk }}" {% if pk|stringformat:'s' in selected_municipalities %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </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: 400px;">
        <div class="col-12">
            <label for="asset_status" class="form-label">{% translate "Statut" %}</label>
            <select name="asset_status" id="asset_status" class="form-select" multiple>
                {% for key, value in status_choices %}
                    <option value="{{ key }}" {% if key in selected_statuses %}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:artworks_streets_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:artworks_assets_geojson' %}";
    
    const locationsurl = "{% url 'assets:artworks_streets' %}";
    const assetsurl = "{% url 'assets:artworks_assets' %}";
    
    var locations_property_fields = ['name_fr', 'municipality_name', 'road_code', 'section_code'];
    var locations_columns = [
        { field: 'name_fr', title: '{% translate "Nom" %}' },
        { field: 'municipality_name', title: '{% translate "Commune" %}', align: 'center' },
        { field: 'road_code', title: '{% translate "Code voirie" %}', align: 'center' },
        { field: 'section_code', title: '{% translate "Section" %}', align: 'center' }
    ];

    var assets_property_fields = ['name_fr', 'asset_kind_label', 'asset_subtype_label'];
    var assets_columns = [
        { field: 'name_fr', title: '{% translate "Nom" %}' },
        { field: 'asset_kind_label', title: '{% translate "Catégorie" %}', align: 'center' },
        { field: 'asset_subtype_label', title: '{% translate "Sous-type" %}', align: 'center' }
    ]


    const locations_layer_def = {
        id: 'locations',
        type: 'fill',
        source: 'locations',
        paint: {
            'fill-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffb300',
                '#ffe082'
            ],
            'fill-opacity': 0.45
        }
    };
    var locations_outline_layer;

    const monuments_layer_def = {
        id: 'assets',
        type: 'circle',
        source: 'assets',
        filter: ['==', ['get', 'asset_kind'], 'monument'],
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                8, 2,
                22, 12
            ],
            'circle-stroke-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b',
                '#00000000'
            ],
            'circle-stroke-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 3,
                0
            ],
            'circle-color': '#f24141',
            'circle-opacity': 0.75
        },
        minzoom: 8
    };

    const fountains_layer_def = {
        id: 'assets-fountains',
        type: 'circle',
        source: 'assets',
        filter: ['==', ['get', 'asset_kind'], 'fountain'],
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                8, 2,
                22, 12
            ],
            'circle-stroke-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ffeb3b',
                '#00000000'
            ],
            'circle-stroke-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 3,
                0
            ],
            'circle-color': '#1e88e5',
            'circle-opacity': 0.75
        },
        minzoom: 8
    };

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