osm-labo/templates/admin/wiki_compare.html.twig
2025-09-01 16:02:14 +02:00

1030 lines
No EOL
62 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Comparaison Wiki OSM - {{ key }}{% endblock %}
{% block body %}
<style>
.limited-height-table {
max-height: 80vh;
overflow-y: auto;
display: block;
width: 100%;
}
.grammalecte-emphasis {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #ff0766;
background: #ece5e5;
border-radius: 3px;
padding: 3px;
}
.section-title,
.suggestion-before, .suggestion-after {
cursor: pointer;
min-width: 80%;
display: inline-block;
}
.section-title:hover,
.suggestion-before:hover, .suggestion-after:hover {
color: #d1e7dd;
background: #0f5132;
}
.suggestion-correction {
color: #0f5132;
background: #d1e7dd;
border-radius: 3px;
padding: 3px;
display: block;
cursor: pointer;
}
.suggestion-correction:hover {
color: #d1e7dd;
background: #0f5132;
}
.comparaison-sections .card-body li {
min-height: 40px;
}
.card:hover {
transform: none !important;
box-shadow: none !important;
}
.title-level-1 {
font-weight: bold;
}
.title-level-2 {
padding-left: 1.5rem;
opacity: 0.8;
}
.title-level-3 {
padding-left: 2.8rem;
opacity: 0.5;
}
.title-level-4 {
padding-left: 4rem;
opacity: 0.4;
}
.title-level-5 {
padding-left: 5.2rem;
opacity: 0.3;
}
.title-level-6 {
padding-left: 6.4rem;
font-size: 0.9rem;
opacity: 0.2;
}
/* Style for placeholder sections */
.list-group-item-warning.title-level-2,
.list-group-item-warning.title-level-3,
.list-group-item-warning.title-level-4,
.list-group-item-warning.title-level-5,
.list-group-item-warning.title-level-6 {
border-left: 4px solid #ffc107;
}
/* Make placeholder text more visible */
.text-muted.fst-italic {
color: #dc3545 !important;
font-weight: 500;
}
</style>
<div class="container mt-4">
{% include 'admin/_wiki_navigation.html.twig' %}
<h1>Comparaison Wiki OpenStreetMap - {{ key }}
{% if en_page.is_specific_page is defined and en_page.is_specific_page %}
<a href="{{ fr_page.url|default('https://wiki.openstreetmap.org/wiki/FR:' ~ key) }}">fr</a>
<a href="{{ en_page.url }}">en</a>
{% else %}
<a href="https://wiki.openstreetmap.org/wiki/FR:Key:{{ key }}">fr</a>
<a href="https://wiki.openstreetmap.org/wiki/Key:{{ key }}">en</a>
{% endif %}
</h1>
<p class="lead">
{% if en_page.is_specific_page is defined and en_page.is_specific_page %}
Comparaison détaillée des pages wiki en français et en anglais pour "{{ key }}".
{% else %}
Comparaison détaillée des pages wiki en français et en anglais pour la clé OSM "{{ key }}".
{% endif %}
</p>
<div id="illustrations" class="row mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">
<h3>Page anglaise</h3>
</div>
<div class="card-body text-center">
{% if en_page.description_img_url is defined and en_page.description_img_url %}
<img src="{{ en_page.description_img_url }}" alt="{{ key }}" class="img-fluid"
style="max-height: 200px; object-fit: contain;">
{% else %}
<div class="alert alert-secondary">Pas d'image d'illustration</div>
{% endif %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-info text-white">
<h3>Page française</h3>
</div>
<div class="card-body text-center">
{% if fr_page is defined and fr_page is not null and fr_page.description_img_url is defined and fr_page.description_img_url %}
<img src="{{ fr_page.description_img_url }}" alt="{{ key }}" class="img-fluid"
style="max-height: 200px; object-fit: contain;">
{% else %}
<div class="alert alert-secondary">Pas d'image d'illustration</div>
{% endif %}
</div>
</div>
</div>
</div>
{# suggestions de grammalecte #}
{% if fr_page is defined and fr_page is not null %}
{% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.section_comparison is defined and detailed_comparison.section_comparison is not null %}
<div class="card mb-4">
<div class="card-header">
<h2>Comparaison des sections</h2>
</div>
<div class="card-body comparaison-sections">
<div class="row">
<div class="col-md-6">
<div class="card h-100">
<div class="card-header bg-primary text-white">
<h3>Sections en anglais</h3>
<span class="badge bg-light text-dark">
{% if detailed_comparison.adjusted_en_section_count is defined %}
{{ detailed_comparison.adjusted_en_section_count }} sections ({{ en_page.sections|default(0) }} avec "Contents")
{% else %}
{{ en_page.sections|default(0) }} sections
{% endif %}
</span>
</div>
<div class="card-body">
<ul class="list-group mb-3">
{% if detailed_comparison['section_comparison']['en_only'] is defined and detailed_comparison['section_comparison']['en_only'] is iterable %}
{% for section in detailed_comparison['section_comparison']['en_only'] %}
<li class="list-group-item title-level-{{ section.level|default(1) }}">
<span class="badge bg-secondary pull-right">h{{ section.level|default(1) }}</span>
{% if section.title is defined and section.title is not empty %}
<span class="section-title">{{ section.title }}</span>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-header bg-info text-white">
<h3>Sections en français</h3>
<span class="badge bg-light text-dark">
{% if detailed_comparison.adjusted_fr_section_count is defined %}
{{ detailed_comparison.adjusted_fr_section_count }} sections ({{ fr_page.sections|default(0) }} avec "Sommaire")
{% else %}
{{ fr_page.sections|default(0) }} sections
{% endif %}
</span>
</div>
<div class="card-body">
<ul class="list-group mb-3">
{% if detailed_comparison['section_comparison']['fr_only'] is defined and detailed_comparison['section_comparison']['fr_only'] is iterable %}
{% for section in detailed_comparison['section_comparison']['fr_only'] %}
<li class="list-group-item title-level-{{ section.level|default(1) }}">
<span class="badge bg-secondary pull-right">h{{ section.level|default(1) }}</span>
{% if section.title is defined and section.title is not empty %}
<span class="section-title">{{ section.title }}</span>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
{% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.section_comparison is defined and detailed_comparison.section_comparison is not null %}
<button class="btn btn-outline-secondary copy-btn" data-content="different-sections">
<i class="bi bi-clipboard"></i> Copier les titres de sections différentes
</button>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% if fr_page is defined and fr_page is not null and detailed_comparison['grammar_suggestions'] is defined and detailed_comparison['grammar_suggestions'] is not null and detailed_comparison['grammar_suggestions']|length > 0 %}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h2>Suggestions de corrections grammaticales</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#allCorrectionsModal">
Voir toutes les corrections
</button>
</div>
<div class="card-body">
<div class="alert alert-info">
<p><i class="bi bi-info-circle"></i> Ces suggestions sont générées automatiquement par l'outil
Grammalecte et peuvent contenir des erreurs.</p>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered limited-height-table">
<thead>
<tr>
<th>Texte</th>
<th>Message</th>
<th>Suggestions</th>
</tr>
</thead>
<tbody>
{% for suggestion in detailed_comparison['grammar_suggestions'] %}
<tr>
<td>
{% if suggestion.before is defined and suggestion.text is defined and suggestion.after is defined %}
<div>
<span class="suggestion-before">
{{ suggestion.before|slice(-20)|trim }}
</span>
<strong class="text-danger grammalecte-emphasis">{{ suggestion.text }}</strong>
<span class="suggestion-after">
{{ suggestion.after|slice(0, 20)|trim }}
</span>
</div>
{% endif %}
</td>
<td>
{% if suggestion.paraghraph is defined %}
<code>$ {{ suggestion.paragraph }} {{ suggestion.start }}
- {{ suggestion.end }}</code>
{% endif %}
{% if suggestion.message is defined %}
{{ suggestion.message }}
{% endif %}
{# <pre> #}
{# {{ dump(suggestion) }} #}
{# </pre> #}
</td>
<td>
{% if suggestion.suggestions is defined and suggestion.suggestions is iterable and suggestion.suggestions|length > 0 %}
<div class="dropdown">
{# <button class="btn btn-sm btn-outline-primary dropdown-toggle" #}
{# type="button" id="dropdownMenuButton{{ loop.index }}" #}
{# data-bs-toggle="dropdown" aria-expanded="false"> #}
{# Suggestions ({{ suggestion.suggestions|length }}) #}
{# </button> #}
<ul class="dropdown-menu-grammalecte"
aria-labelledby="dropdownMenuButton{{ loop.index }}">
{% for correction in suggestion.suggestions %}
<li><code class="suggestion-correction">{{ correction }}</code>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<span class="text-muted">Aucune suggestion</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal for all corrections -->
<div class="modal fade" id="allCorrectionsModal" tabindex="-1" aria-labelledby="allCorrectionsModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="allCorrectionsModalLabel">Toutes les suggestions de
corrections</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Texte</th>
<th>Message</th>
<th>Suggestions</th>
</tr>
</thead>
<tbody>
{% for suggestion in detailed_comparison['grammar_suggestions'] %}
<tr>
<td>
{% if suggestion.before is defined and suggestion.text is defined and suggestion.after is defined %}
<code>{{ suggestion.before|slice(-30)|trim }}
<span class="text-danger">{{ suggestion.text }}</span>
{{ suggestion.after|slice(0, 30)|trim }}</code>
{% endif %}
</td>
<td>
{% if suggestion.message is defined %}
{{ suggestion.message }}
{% endif %}
</td>
<td>
{% if suggestion.suggestions is defined and suggestion.suggestions is iterable and suggestion.suggestions|length > 0 %}
<div class="dropdown">
<button class="btn btn-sm btn-outline-primary dropdown-toggle"
type="button"
id="modalDropdownMenuButton{{ loop.index }}"
data-bs-toggle="dropdown" aria-expanded="false">
Suggestions ({{ suggestion.suggestions|length }})
</button>
<ul class="dropdown-menu"
aria-labelledby="modalDropdownMenuButton{{ loop.index }}">
{% for correction in suggestion.suggestions %}
<li><a class="dropdown-item"
href="#">{{ correction }}</a></li>
{% endfor %}
</ul>
</div>
{% else %}
<span class="text-muted">Aucune suggestion</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
{% endif %}
{# fin des suggestions de grammalecte #}
{% if fr_page is defined and fr_page is not null and fr_page.categories is defined and (fr_page.categories|length == 0) and en_page is defined and en_page.categories is defined and (en_page.categories|length > 0) %}
<div class="card mb-4">
<div class="card-header bg-warning text-dark">
<h2>Suggestion d'ajout de catégories</h2>
</div>
<div class="card-body">
<div class="alert alert-warning">
<p><i class="bi bi-exclamation-triangle"></i> <strong>La page française ne contient aucune
catégorie.</strong></p>
<p>Les catégories aident à organiser les pages wiki et à les rendre plus facilement
découvrables. Considérez ajouter les catégories suivantes de la page anglaise :</p>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">
<h3>Catégories suggérées</h3>
</div>
<div class="card-body">
<ul class="list-group">
{% for category in en_page.categories %}
<li class="list-group-item">
{{ category }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-info text-white">
<h3>Comment ajouter des catégories</h3>
</div>
<div class="card-body">
<p>Pour ajouter des catégories à la page wiki :</p>
<ol>
<li>Éditez la page française sur le wiki OSM</li>
<li>Ajoutez les catégories à la fin de la page en utilisant la syntaxe suivante
:
</li>
</ol>
<div class="bg-light p-3 mb-3">
<code>
[[Category:Nom de la catégorie]]<br>
[[Category:Autre catégorie]]
</code>
</div>
<p>Vous pouvez également utiliser l'interface d'édition du wiki pour ajouter des
catégories.</p>
<div class="d-grid gap-2 mt-3">
<a href="{{ fr_page.url }}" target="_blank" class="btn btn-primary">
<i class="bi bi-pencil-square"></i> Éditer la page française
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if detailed_comparison and detailed_comparison.media_comparison %}
<div class="card mb-4">
<div class="card-header">
<h2>Comparaison des médias</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="card h-100">
<div class="card-header bg-primary text-white">
<h3>Images en anglais</h3>
<span class="badge bg-light text-dark">{{ en_page.media_count|default(0) }} images</span>
</div>
<div class="card-body">
<h4>Images uniquement en anglais
({{ detailed_comparison.media_comparison.en_only|length }} uniques
sur {{ detailed_comparison.media_comparison.en_only_count }} total)</h4>
<div class="row">
{% for media in detailed_comparison.media_comparison.en_only %}
<div class="col-12 mb-2">
<div class="card border-warning">
<img src="{{ media.src }}" class="card-img-top"
alt="{{ media.alt }}"
style="max-height: 150px; object-fit: contain;">
<div class="card-body p-2">
<p class="card-text small">{{ media.alt }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-header bg-info text-white">
<h3>Images en français</h3>
<span class="badge bg-light text-dark">{{ fr_page.media_count|default(0) }} images</span>
</div>
<div class="card-body">
<h4>Images uniquement en français
({{ detailed_comparison.media_comparison.fr_only|length }} uniques
sur {{ detailed_comparison.media_comparison.fr_only_count }} total)</h4>
<div class="row">
{% for media in detailed_comparison.media_comparison.fr_only %}
<div class="col-12 mb-2">
<div class="card border-info">
<img src="{{ media.src }}" class="card-img-top"
alt="{{ media.alt }}"
style="max-height: 150px; object-fit: contain;">
<div class="card-body p-2">
<p class="card-text small">{{ media.alt }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{# {% if detailed_comparison and detailed_comparison.link_comparison %} #}
{# <div class="card mb-4"> #}
{# <div class="card-header"> #}
{# <h2>Comparaison des liens</h2> #}
{# </div> #}
{# <div class="card-body"> #}
{# <div class="row"> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-primary text-white"> #}
{# <h3>Liens en anglais</h3> #}
{# <span class="badge bg-light text-dark">{{ en_page.link_count }} liens</span> #}
{# </div> #}
{# <div class="card-body"> #}
{# <h4>Comparaison des liens côte à côte</h4> #}
{# <div class="table-responsive"> #}
{# <table class="table table-sm"> #}
{# <thead> #}
{# <tr> #}
{# <th class="bg-primary text-white">Texte EN</th> #}
{# <th class="bg-primary text-white">URL EN</th> #}
{# <th class="bg-info text-white">Texte FR</th> #}
{# <th class="bg-info text-white">URL FR</th> #}
{# </tr> #}
{# </thead> #}
{# <tbody> #}
{# {% set en_links = detailed_comparison.link_comparison.en_only %} #}
{# {% set fr_links = detailed_comparison.link_comparison.fr_only %} #}
{# {% set max_links = max(en_links|length, fr_links|length) %} #}
{# {% for i in 0..(max_links - 1) %} #}
{# <tr> #}
{# {% if i < en_links|length %} #}
{# <td class="bg-light">{{ en_links[i].text }}</td> #}
{# <td class="bg-light"><a href="{{ en_links[i].href }}" #}
{# target="_blank" #}
{# class="small">{{ en_links[i].href|slice(0, 30) }} #}
{# ...</a></td> #}
{# {% else %} #}
{# <td class="bg-light"></td> #}
{# <td class="bg-light"></td> #}
{# {% endif %} #}
{# {% if i < fr_links|length %} #}
{# <td>{{ fr_links[i].text }}</td> #}
{# <td><a href="{{ fr_links[i].href }}" target="_blank" #}
{# class="small">{{ fr_links[i].href|slice(0, 30) }} #}
{# ...</a></td> #}
{# {% else %} #}
{# <td></td> #}
{# <td></td> #}
{# {% endif %} #}
{# </tr> #}
{# {% endfor %} #}
{# </tbody> #}
{# </table> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# {% endif %} #}
{# {% if detailed_comparison and detailed_comparison.category_comparison %} #}
{# <div class="card mb-4"> #}
{# <div class="card-header"> #}
{# <h2>Comparaison des catégories</h2> #}
{# </div> #}
{# <div class="card-body"> #}
{# <div class="row"> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-primary text-white"> #}
{# <h3>Catégories en anglais</h3> #}
{# <span class="badge bg-light text-dark"> #}
{# {{ (detailed_comparison.category_comparison.en_only|length + detailed_comparison.category_comparison.common|length) }} catégories #}
{# </span> #}
{# </div> #}
{# <div class="card-body"> #}
{# <h4>Catégories communes #}
{# ({{ detailed_comparison.category_comparison.common|length }})</h4> #}
{# <ul class="list-group mb-3"> #}
{# {% for category in detailed_comparison.category_comparison.common %} #}
{# <li class="list-group-item">{{ category }}</li> #}
{# {% endfor %} #}
{# </ul> #}
{# <h4>Catégories uniquement en anglais #}
{# ({{ detailed_comparison.category_comparison.en_only|length }})</h4> #}
{# <ul class="list-group"> #}
{# {% for category in detailed_comparison.category_comparison.en_only %} #}
{# <li class="list-group-item list-group-item-warning">{{ category }}</li> #}
{# {% endfor %} #}
{# </ul> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-info text-white"> #}
{# <h3>Catégories en français</h3> #}
{# <span class="badge bg-light text-dark"> #}
{# {{ (detailed_comparison.category_comparison.fr_only|length + detailed_comparison.category_comparison.common|length) }} catégories #}
{# </span> #}
{# </div> #}
{# <div class="card-body"> #}
{# <h4>Catégories communes #}
{# ({{ detailed_comparison.category_comparison.common|length }})</h4> #}
{# <ul class="list-group mb-3"> #}
{# {% for category in detailed_comparison.category_comparison.common %} #}
{# <li class="list-group-item">{{ category }}</li> #}
{# {% endfor %} #}
{# </ul> #}
{# <h4>Catégories uniquement en français #}
{# ({{ detailed_comparison.category_comparison.fr_only|length }})</h4> #}
{# <ul class="list-group"> #}
{# {% for category in detailed_comparison.category_comparison.fr_only %} #}
{# <li class="list-group-item list-group-item-info">{{ category }}</li> #}
{# {% endfor %} #}
{# </ul> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# {% endif %} #}
{# {% else %} #}
{# <div class="card mb-4"> #}
{# <div class="card-header bg-warning text-dark"> #}
{# <h2>Traduction française manquante</h2> #}
{# </div> #}
{# <div class="card-body"> #}
{# <div class="alert alert-warning"> #}
{# <p><i class="bi bi-exclamation-triangle"></i> <strong>La page wiki pour la clé "{{ key }}" #}
{# n'existe pas en français.</strong></p> #}
{# <p>Vous pouvez contribuer en créant cette page sur le wiki OpenStreetMap.</p> #}
{# </div> #}
{# <div class="row"> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-primary text-white"> #}
{# <h3>Version anglaise</h3> #}
{# <p class="mb-0"> #}
{# <small>Dernière modification: {{ en_page.last_modified }}</small> #}
{# </p> #}
{# </div> #}
{# <div class="card-body"> #}
{# <ul class="list-group mb-3"> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Sections #}
{# <span class="badge bg-primary rounded-pill"> #}
{# {% if detailed_comparison.adjusted_en_section_count is defined %} #}
{# {{ detailed_comparison.adjusted_en_section_count }} #}
{# {% else %} #}
{# {{ en_page.sections }} #}
{# {% endif %} #}
{# </span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Mots #}
{# <span class="badge bg-primary rounded-pill">{{ en_page.word_count }}</span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Liens #}
{# <span class="badge bg-primary rounded-pill">{{ en_page.link_count }}</span> #}
{# </li> #}
{# </ul> #}
{# <div class="d-grid gap-2"> #}
{# <a href="{{ en_page.url }}" target="_blank" class="btn btn-outline-primary"> #}
{# <i class="bi bi-box-arrow-up-right"></i> Voir la page anglaise #}
{# </a> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="sections-en"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des sections #}
{# </button> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="links-en"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des liens #}
{# </button> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-info text-white"> #}
{# <h3>Créer la version française</h3> #}
{# </div> #}
{# <div class="card-body"> #}
{# <p>Vous pouvez créer la page française en suivant ces étapes :</p> #}
{# <ol> #}
{# <li>Consultez la version anglaise pour comprendre le contenu</li> #}
{# <li>Créez une nouvelle page avec le préfixe "FR:" sur le wiki OSM</li> #}
{# <li>Traduisez le contenu en respectant la structure de la page anglaise</li> #}
{# <li>Ajoutez des exemples pertinents pour le contexte français</li> #}
{# </ol> #}
{# <div class="d-grid gap-2 mt-4"> #}
{# <a href="{{ create_fr_url }}" target="_blank" class="btn btn-success"> #}
{# <i class="bi bi-plus-circle"></i> Créer la page française #}
{# </a> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# {% endif %} #}
{# <div class="card mb-4"> #}
{# <div class="card-header"> #}
{# <h2>Score de décrépitude</h2> #}
{# </div> #}
{# <div class="card-body"> #}
{# <p>Le score de décrépitude est calculé en prenant en compte plusieurs facteurs, avec une pondération #}
{# plus importante pour la différence de nombre de mots :</p> #}
{# <div class="table-responsive"> #}
{# <table class="table table-striped"> #}
{# <thead> #}
{# <tr> #}
{# <th>Facteur</th> #}
{# <th>Valeur</th> #}
{# <th>Poids</th> #}
{# <th>Contribution</th> #}
{# </tr> #}
{# </thead> #}
{# <tbody> #}
{# {% for key, component in score_components %} #}
{# <tr> #}
{# <td>{{ component.description }}</td> #}
{# <td>{{ component.value }}</td> #}
{# <td>{{ component.weight * 100 }}%</td> #}
{# <td>{{ component.component|round(2) }}</td> #}
{# </tr> #}
{# {% endfor %} #}
{# <tr class="table-dark"> #}
{# <td colspan="3"><strong>Score total</strong></td> #}
{# <td> #}
{# {% set total_score = 0 %} #}
{# {% for key, component in score_components %} #}
{# {% set total_score = total_score + component.component %} #}
{# {% endfor %} #}
{# <strong>{{ total_score|round(2) }}</strong> #}
{# </td> #}
{# </tr> #}
{# </tbody> #}
{# </table> #}
{# </div> #}
{# <div class="alert alert-info"> #}
{# <p><strong>Comment interpréter ce score :</strong></p> #}
{# <ul> #}
{# <li>Plus le score est élevé, plus la page française est considérée comme "décrépite" par rapport #}
{# à la version anglaise. #}
{# </li> #}
{# <li>La différence de nombre de mots compte pour 50% du score, car c'est l'indicateur le plus #}
{# important de la complétude de la traduction. #}
{# </li> #}
{# <li>Les différences de sections (15%), de liens (15%) et de date de modification (20%) #}
{# complètent le score. #}
{# </li> #}
{# </ul> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# <div class="mt-3"> #}
{# <a href="{{ path('app_admin_wiki') }}" class="btn btn-secondary"> #}
{# <i class="bi bi-arrow-left"></i> Retour à la liste des pages wiki #}
{# </a> #}
{# </div> #}
{# <div class="card mb-4"> #}
{# <div class="card-header"> #}
{# <h2>Comparaison des versions</h2> #}
{# </div> #}
{# <div class="card-body"> #}
{# <div class="row"> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-primary text-white"> #}
{# <h3>Version anglaise</h3> #}
{# <p class="mb-0"> #}
{# <small>Dernière modification: {{ en_page.last_modified }}</small> #}
{# </p> #}
{# </div> #}
{# <div class="card-body"> #}
{# <ul class="list-group mb-3"> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Sections #}
{# <span class="badge bg-primary rounded-pill"> #}
{# {% if detailed_comparison.adjusted_en_section_count is defined %} #}
{# {{ detailed_comparison.adjusted_en_section_count }} #}
{# {% else %} #}
{# {{ en_page.sections }} #}
{# {% endif %} #}
{# </span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Mots #}
{# <span class="badge bg-primary rounded-pill">{{ en_page.word_count }}</span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Liens #}
{# <span class="badge bg-primary rounded-pill">{{ en_page.link_count }}</span> #}
{# </li> #}
{# </ul> #}
{# <div class="d-grid gap-2"> #}
{# <a href="{{ en_page.url }}" target="_blank" class="btn btn-outline-primary"> #}
{# <i class="bi bi-box-arrow-up-right"></i> Voir la page #}
{# </a> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="sections-en"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des sections #}
{# </button> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="links-en"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des liens #}
{# </button> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# <div class="col-md-6"> #}
{# <div class="card h-100"> #}
{# <div class="card-header bg-info text-white"> #}
{# <h3>Version française</h3> #}
{# <p class="mb-0"> #}
{# <small>Dernière modification: {{ fr_page.last_modified }}</small> #}
{# </p> #}
{# </div> #}
{# <div class="card-body"> #}
{# <ul class="list-group mb-3"> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Sections #}
{# <span class="badge bg-info rounded-pill"> #}
{# {% if detailed_comparison.adjusted_fr_section_count is defined %} #}
{# {{ detailed_comparison.adjusted_fr_section_count }} #}
{# {% else %} #}
{# {{ fr_page.sections }} #}
{# {% endif %} #}
{# </span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Mots #}
{# <span class="badge bg-info rounded-pill">{{ fr_page.word_count }}</span> #}
{# </li> #}
{# <li class="list-group-item d-flex justify-content-between align-items-center"> #}
{# Liens #}
{# <span class="badge bg-info rounded-pill">{{ fr_page.link_count }}</span> #}
{# </li> #}
{# </ul> #}
{# <div class="d-grid gap-2"> #}
{# <a href="{{ fr_page.url }}" target="_blank" class="btn btn-outline-info"> #}
{# <i class="bi bi-box-arrow-up-right"></i> Voir la page #}
{# </a> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="sections-fr"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des sections #}
{# </button> #}
{# <button class="btn btn-outline-secondary copy-btn" data-content="links-fr"> #}
{# <i class="bi bi-clipboard"></i> Copier la liste des liens #}
{# </button> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
</div>
<!-- Hidden content for copy functionality -->
<div id="sections-en" style="display: none;">
{{ en_sections|default('Sections de la page anglaise pour ' ~ key) }}
</div>
<div id="links-en" style="display: none;">
{{ en_links|default('Liens de la page anglaise pour ' ~ key) }}
</div>
{% if fr_page is defined and fr_page is not null %}
<div id="sections-fr" style="display: none;">
{{ fr_sections|default('Sections de la page française pour ' ~ key) }}
</div>
<div id="links-fr" style="display: none;">
{{ fr_links|default('Liens de la page française pour ' ~ key) }}
</div>
<div id="different-sections" style="display: none;">
{% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.aligned_sections is defined and detailed_comparison.aligned_sections is iterable %}
{# Add sections that are in English but missing in French #}
{% for section in detailed_comparison.aligned_sections %}
{% if section.en is defined and section.en.title is defined and section.en.title is not empty and section.fr is defined and section.fr.is_placeholder is defined and section.fr.is_placeholder %}
{{ "=" | repeat(section.en.level|default(1)) }} {{ section.en.title }} {{ "=" | repeat(section.en.level|default(1)) }} (À traduire en français)
{% endif %}
{% endfor %}
{# Add sections that are in French but missing in English #}
{% for section in detailed_comparison.aligned_sections %}
{% if section.fr is defined and section.fr.title is defined and section.fr.title is not empty and section.en is defined and section.en.is_placeholder is defined and section.en.is_placeholder %}
{{ "=" | repeat(section.fr.level|default(1)) }} {{ section.fr.title }} {{ "=" | repeat(section.fr.level|default(1)) }} (FR only)
{% endif %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Add click event listeners to all copy buttons
document.querySelectorAll('.copy-btn').forEach(function (button) {
button.addEventListener('click', function () {
// Get the content to copy
const contentId = this.getAttribute('data-content');
const content = document.getElementById(contentId).textContent;
// Copy to clipboard
navigator.clipboard.writeText(content).then(function () {
// Change button text temporarily to indicate success
const originalText = button.innerHTML;
button.innerHTML = '<i class="bi bi-check"></i> Copié!';
setTimeout(function () {
button.innerHTML = originalText;
}, 2000);
}).catch(function (err) {
console.error('Erreur lors de la copie :', err);
// alert('Erreur lors de la copie. Veuillez réessayer.');
});
});
});
// Add click event listeners to all suggestion-correction elements
document.querySelectorAll('.suggestion-correction, .suggestion-before, .suggestion-after, .section-title').forEach(function (element) {
element.addEventListener('click', function () {
// Get the text content to copy
const content = this.textContent.trim();
// Copy to clipboard
navigator.clipboard.writeText(content).then(function () {
// Add a temporary class for visual feedback
element.classList.add('bg-success');
element.classList.add('text-white');
// Create and show a tooltip
const tooltip = document.createElement('div');
tooltip.textContent = 'Copié!';
tooltip.style.position = 'absolute';
tooltip.style.backgroundColor = '#28a745';
tooltip.style.color = 'white';
tooltip.style.padding = '5px 10px';
tooltip.style.borderRadius = '3px';
tooltip.style.fontSize = '12px';
tooltip.style.zIndex = '1000';
// Position the tooltip near the element
const rect = element.getBoundingClientRect();
tooltip.style.top = (window.scrollY + rect.bottom + 5) + 'px';
tooltip.style.left = (window.scrollX + rect.left) + 'px';
// Add the tooltip to the document
document.body.appendChild(tooltip);
// Remove the visual feedback and tooltip after a delay
setTimeout(function () {
element.classList.remove('bg-success');
element.classList.remove('text-white');
document.body.removeChild(tooltip);
}, 1500);
}).catch(function (err) {
console.error('Erreur lors de la copie :', err);
});
});
});
// Add click event listeners to dropdown items in the modal
document.querySelectorAll('#allCorrectionsModal .dropdown-item').forEach(function (element) {
element.addEventListener('click', function (e) {
e.preventDefault(); // Prevent the default link behavior
// Get the text content to copy
const content = this.textContent.trim();
// Copy to clipboard
navigator.clipboard.writeText(content).then(function () {
// Add a temporary class for visual feedback
element.classList.add('bg-success');
element.classList.add('text-white');
// Remove the visual feedback after a delay
setTimeout(function () {
element.classList.remove('bg-success');
element.classList.remove('text-white');
}, 1500);
}).catch(function (err) {
console.error('Erreur lors de la copie :', err);
});
});
});
});
</script>
{% endblock %}
{% endif %}
{% endblock %}