loko/streetup/assets/templates/assets/structures_location_detail.html
2026-07-22 14:48:40 +02:00

408 lines
24 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% load tz %}
{% load i18n %}
{% load documents_tags %}
{% block content %}
<div class="row mt-2" style="height: calc(100vh - 200px);">
<div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
<h3 class="h3">
<i class="bi bi-rainbow"></i><span class="mx-2">{{ location.code}}</span> - <span class="mx-2">{{ location.get_name }}</span>
</h3>
<hr>
<div class="row mb-4">
<div class="col-md-8">
<label class="mx-2">{% translate "Structure" %}:</label>{{ location.structure }}<br>
<div class="my-2">
<label class="mx-2">{% translate "Localisation principale" %}:</label>
{% if location.is_main_location %}
<i class="bi bi-check-square"></i>
{% else %}
<a href="{{ location.structure.main_location.get_absolute_url }}">{{ location.structure.main_location }}</a>
{% endif %}
<br>
{% if location.parent_location %}
<label class="mx-2">{% translate "Parent" %}: </label>
<a href="{{ location.parent_location.get_absolute_url }}">{{ location.parent_location }}</a>
{% endif %}
</div>
</div>
<div class="col-md-4">
{% if location.lon %}
<a href="https://www.google.com/maps?cbll={{ location.lat|floatformat:'6u'}},{{ location.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" target="_blank" style="text-decoration: none; font-size: 16px; display: flex; align-items: center;">
<img src="{% static 'common/google-street-view-logo.png' %}" alt="{% translate 'Street View' %}" height="20" style="margin-right: 8px;">
{% translate "View in Google Street View" %}
</a>
{% endif %}
</div>
</div>
<!-- Documents -->
{% if location.is_main_location %}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h4>{% translate "Documents" %}</h4>
<button onclick="" class="btn btn-light border-0" title="{% translate 'Ajouter' %}" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
<i class="bi bi-plus-circle text-primary"></i>
</button>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 mb-3">
<label class="mx-2">{% translate "Répertoire principal" %}:</label>
{% if document_folder %}
<span class="mx-2"><a href="/documents/?folder={{ document_folder.slug }}">{{ location.structure }}</a></span>
{% else %}
<span class="mx-2"><a href="/documents/?folder={{ location.structure.linked_folder }}">{{ location.structure }}</a></span>
{% endif %}
</div>
</div>
<div class="row">
{% if use_managed_documents %}
{# Nouveau système de gestion documentaire #}
{% for doc_info in main_documents %}
{% if doc_info.document %}
<div class="col-md-3 mb-3">
<div class="card h-100 shadow-sm border rounded-3">
<div class="d-flex">
<!-- Colonne gauche : contenu document -->
<div class="flex-grow-1 p-2" style="min-width:0; overflow:hidden;">
<div class="d-flex flex-column align-items-center mb-2">
<!-- Badge centré -->
<div class="text-muted" style="font-size: 0.85em;">
<span class="badge bg-primary">{{ doc_info.tag.name }}</span>
</div>
<!-- Image -->
{% if doc_info.version and doc_info.version.file %}
<a href="{% private_file_url doc_info.version 'file' %}" target="_blank" class="text-decoration-none w-100">
<div class="img-thumbnail d-flex justify-content-center align-items-center mt-1" style="width: 100%; height: 100px; overflow: hidden; background-color: #f8f9fa;">
{% if doc_info.version.thumbnail %}
<img src="{% private_file_url doc_info.version 'thumbnail' %}" alt="{{ doc_info.document.title }}"
style="max-height: 100%; max-width: 100%; object-fit: contain;">
{% else %}
<span class="d-block w-100 px-2 text-muted"
style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85em;">
{{ doc_info.version.filename }}
</span>
{% endif %}
</div>
</a>
{% endif %}
</div>
<div class="text-muted text-start" style="font-size: 0.85em;">
{{ doc_info.document.updated_at|timezone:"Europe/Paris"|date:"d/m/Y" }}<br>
{% if doc_info.version %}v{{ doc_info.version.version_number }}{% endif %}
</div>
</div>
<!-- Colonne droite : icônes -->
<div class="d-flex flex-column justify-content-end align-items-center p-2" style="width: 40px; min-height: 100%;">
<!-- Historique -->
<button class="btn btn-sm p-0 border-0 bg-transparent mb-2"
data-bs-toggle="modal"
data-bs-target="#documentHistoryModal"
data-tag-slug="{{ doc_info.tag.slug }}"
data-location-id="{{ location.structure.id }}"
data-use-managed="true"
title="{% translate 'Historique' %}">
<i class="bi bi-clock-history text-primary"></i>
</button>
<!-- Lien vers le document -->
<a href="{% url 'documents:detail' doc_info.document.pk %}"
class="btn btn-sm p-0 border-0 bg-transparent mb-2"
title="{% translate 'Détail' %}">
<i class="bi bi-box-arrow-up-right text-secondary"></i>
</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% else %}
{# Ancien système - StructureDocument #}
{% for document in main_documents %}
{% if document %}
<div class="col-md-3 mb-3">
<div class="card h-100 shadow-sm border rounded-3">
<div class="d-flex">
<!-- Colonne gauche : contenu document -->
<div class="flex-grow-1 p-2" style="min-width:0; overflow:hidden;">
<div class="d-flex flex-column align-items-center mb-2">
<!-- Badge centré -->
<div class="text-muted" style="font-size: 0.85em;">
<span class="badge bg-primary">{{ document.get_document_type_display }}</span>
</div>
<!-- Image -->
<a href="{{ document.file.url }}" target="_blank" class="text-decoration-none w-100">
<div class="img-thumbnail d-flex justify-content-center align-items-center mt-1" style="width: 100%; height: 100px; overflow: hidden; background-color: #f8f9fa;">
{% if document.thumbnail %}
<img src="{{ document.thumbnail.url }}" alt="{{ document.filename }}"
style="max-height: 100%; max-width: 100%; object-fit: contain;">
{% else %}
<span class="d-block w-100 px-2 text-muted"
style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85em;">
{{ document.filename }}
</span>
{% endif %}
</div>
</a>
</div>
<div class="text-muted text-start" style="font-size: 0.85em;">
{{ document.upload_date|timezone:"Europe/Paris"|date:"d/m/Y" }}<br>
{{ document.uploaded_by.username }}
</div>
</div>
<!-- Colonne droite : icônes -->
<div class="d-flex flex-column justify-content-end align-items-center p-2" style="width: 40px; min-height: 100%;">
<!-- Historique -->
<button class="btn btn-sm p-0 border-0 bg-transparent mb-2"
data-bs-toggle="modal"
data-bs-target="#documentHistoryModal"
data-document-type="{{ document.document_type }}"
data-location-id="{{ document.structure.id }}"
title="{% translate 'Historique' %}">
<i class="bi bi-clock-history text-primary"></i>
</button>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
<!-- Modal form add document -->
<div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true" style="z-index: 10050;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addDocumentModalLabel">{% translate "Ajouter des documents" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
</div>
<div class="modal-body">
<form id="addDocumentForm" method="post" enctype="multipart/form-data" action="{% url 'assets:structures_add_document' location.structure.id %}">
{% csrf_token %}
<div class="mb-3">
<label for="fileInput" class="form-label">{% translate "Sélectionner des fichiers" %}</label>
<input type="file" id="fileInput" name="files" multiple class="form-control">
</div>
<div id="fileFieldsContainer">
<!-- Champs dynamiques injectés ici -->
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="documentSubmitButton">
{% translate "Ajouter" %}
<span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="documentSubmitSpinner"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Données JSON pour JavaScript -->
<script type="application/json" id="documentConfigData">
{
"use_managed_documents": {% if use_managed_documents %}true{% else %}false{% endif %},
"can_add_unique_tag_documents": {% if can_add_unique_tag_documents %}true{% else %}false{% endif %},
"config_url": "{% url 'assets:structures_document_config' location.structure.id %}"
}
</script>
<!-- Modal form delete document -->
<div class="modal fade" id="documentDeleteModal" tabindex="-1" aria-labelledby="documentDeleteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="documentDeleteModalLabel">{% translate "Confirmer la suppression" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
</div>
<div class="modal-body">
<p>{% translate "Voulez-vous vraiment supprimer ce document ?" %}</p>
<p><strong id="deleteDocumentFileName">{% translate "Nom du fichier" %}</strong></p>
</div>
<div class="modal-footer">
<form method="post" id="deleteDocumentForm" action="">
{% csrf_token %}
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
<button type="submit" class="btn btn-danger">{% translate "Supprimer" %}</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal for document history -->
<div class="modal fade" id="documentHistoryModal" tabindex="-1" aria-labelledby="documentHistoryModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="documentHistoryModalLabel">{% translate "Historique des documents" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
</div>
<div class="modal-body">
<div id="documentHistoryContent" class="row g-3">
<!-- Contenu dynamique injecté ici -->
</div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- Assets -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h4 data-bs-toggle="collapse" href="#assets_card_body" role="button">{% translate "Assets" %}</h4>
{% if can_create_assets %}
<button type="button" class="btn btn-light border-0" data-bs-toggle="modal" data-bs-target="#addAssetLocationModal" title="{% translate 'Créer un nouvel équipement' %}">
<i class="bi bi-plus-square text-success"></i> {% translate "Nouveau" %}
</button>
{% endif %}
</div>
<div class="card-body collapse show" id="assets_card_body">
<ul class="nav nav-tabs" id="assetsTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="assets-tree-tab" data-bs-toggle="tab"
data-bs-target="#assets-tree-structure" type="button" role="tab"
aria-controls="assets-tree-structure" aria-selected="true" style="color:black;">
{% translate "Arborescence" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="assets-archives-tab" data-bs-toggle="tab"
data-bs-target="#assets-archives" type="button" role="tab"
aria-controls="assets-archives" aria-selected="false" style="color:black;">
{% translate "Archives" %}
</button>
</li>
</ul>
<div class="tab-content my-2" id="assetsTabContent">
<div class="tab-pane fade show active" id="assets-tree-structure" role="tabpanel" aria-labelledby="assets-tree-tab">
<div class="d-flex align-items-center justify-content-between gap-2 mb-2 flex-wrap">
<div class="d-flex align-items-center gap-2 flex-wrap">
<span>{{ location.get_name }}</span>
{% if location_tree.children %}
{% blocktrans count c=location_tree.children|length %}
{{ c }} sous-localisation
{% plural %}
{{ c }} sous-localisations
{% endblocktrans %}
{% endif %}
{% if location_tree.assets %}
{% blocktrans count a=location_tree.assets|length %}
{{ a }} asset
{% plural %}
{{ a }} assets
{% endblocktrans %}
{% endif %}
</div>
<a href="{{ toggle_inactive_url }}" class="btn btn-sm {% if show_inactive_assets %}btn-outline-warning{% else %}btn-outline-secondary{% endif %}">
{% if show_inactive_assets %}
{% translate "Masquer les non-actifs" %}
{% else %}
{% translate "Afficher les non-actifs" %}
{% endif %}
</a>
</div>
{% include "assets/structures_location_tree.html" with node=location_tree include_inactive=show_inactive_assets only %}
</div>
<div class="tab-pane fade" id="assets-archives" role="tabpanel" aria-labelledby="assets-archives-tab">
…
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h4>{% translate "Interventions" %}</h4>
</div>
<div class="card-body">
<table id="interventions-table" class="table"
data-height="550"
data-pagination="true"
data-page-size="25"
data-click-to-select="true" >
<thead>
<tr>
<th data-field="actions" data-width="100"></th>
<th data-field="code">{% translate "Code" %}</th>
<th data-field="title">{% translate "Titre" %}</th>
<th data-field="begin_date">{% translate "Début" %}</th>
<th data-field="statut">{% translate "Statut" %}</th>
</tr>
<tbody>
{% for interv in interventions %}
<tr>
<td>
<a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="{% translate 'Détail' %}">
<i class="bi bi-info-circle"></i>
</a>
</td>
<td>{{ interv.code }}</td>
<td>{{ interv.title }}</td>
<td>{{ interv.begin_time|date:"d-m-Y H:i" }}</td>
<td>{{ interv.get_status_display }}</td>
</tr>
{% endfor %}
</tbody>
</thead>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div id="map">
</div>
</div>
</div>
<!-- Add Asset Modal -->
{% if can_create_assets %}
{% include "assets/components/add_asset_modal.html" with modal_id="addAssetLocationModal" thematic_code="structures" location=location %}
{% endif %}
{% endblock content%}
{% block script %}
{{ geom|json_script:"geom_value" }}
{{ location.lon|json_script:"lon_value" }}
{{ location.lat|json_script:"lat_value" }}
<script>
const structures_locations_url = "{% url 'assets:structures_locations' %}";
const document_history_url = "{% url 'assets:structures_document_history' %}";
const feature_geom = JSON.parse(document.getElementById("geom_value").textContent);
const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
</script>
<!-- Turf.js (local) -->
<script src="{% static 'common/turf.min.js' %}"></script>
<script src="{% static 'assets/structures_location_detail.js' %}"></script>
{% if can_create_assets %}
<script src="{% static 'assets/asset_add_modal.js' %}"></script>
{% endif %}
{% endblock script %}