tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

map on home

Browse source
This commit is contained in:
Tykayn 2025-07-05 12:37:01 +02:00 • committed by tykayn
parent a5cd69961f
commit 56f62c45bb
14 changed files with 588 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
bin/console
View file

@ -12,6 +12,11 @@ if (!is_file(dirname(__DIR__).'/vendor/autoload_runtime.php')) {
throw new LogicException('Symfony Runtime is missing. Try running "composer require symfony/runtime".');
}
// Optimisations pour éviter les timeouts
ini_set('max_execution_time', 300);
ini_set('memory_limit', '512M');
set_time_limit(300);
require_once dirname(__DIR__).'/vendor/autoload_runtime.php';
return function (array $context) {

5
config/packages/doctrine.yaml
View file

@ -4,6 +4,11 @@ doctrine:
options:
1002: "SET NAMES utf8mb4"
1000: true
# Optimisations pour éviter les timeouts
PDO::ATTR_TIMEOUT: 300
PDO::ATTR_PERSISTENT: false
PDO::MYSQL_ATTR_USE_BUFFERED_QUERY: true
PDO::MYSQL_ATTR_INIT_COMMAND: "SET SESSION wait_timeout=300, interactive_timeout=300"
# IMPORTANT: You MUST configure your server version,
# either here or in the DATABASE_URL env var (see .env file)

11
config/packages/framework.yaml
View file

@ -5,7 +5,16 @@ framework:
http_method_override: false
handle_all_throwables: true
# Optimisations pour éviter les timeouts
cache:
app: cache.adapter.filesystem
system: cache.adapter.system
directory: '%kernel.cache_dir%/pools/app'
default_redis_provider: 'redis://localhost'
default_memcached_provider: 'memcached://localhost'
default_doctrine_dbal_provider: database_connection
default_pdo_provider: null
pools: { }
# Enables session support. Note that the session will ONLY be started if you read or write from it.
# Remove or comment this section to explicitly disable session support.

5
public/index.php
View file

@ -4,6 +4,11 @@ use App\Kernel;
require_once dirname(__DIR__).'/vendor/autoload_runtime.php';
// Optimisations pour éviter les timeouts
ini_set('max_execution_time', 300);
ini_set('memory_limit', '1024M');
set_time_limit(300);
return function (array $context) {
return new Kernel($context['APP_ENV'], (bool) $context['APP_DEBUG']);
};

61
src/Controller/AdminController.php
View file

@ -471,6 +471,61 @@ final class AdminController extends AbstractController
]);
}
#[Route('/admin/stats/{insee_code}/followup-graph/{theme}', name: 'admin_followup_theme_graph', requirements: ['insee_code' => '\\d+'])]
public function followupThemeGraph(string $insee_code, string $theme): Response
{
$stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zone' => $insee_code]);
if (!$stats) {
$this->addFlash('error', 'Aucune stats trouvée pour ce code INSEE.');
return $this->redirectToRoute('app_admin');
}
$themes = \App\Service\FollowUpService::getFollowUpThemes();
if (!isset($themes[$theme])) {
$this->addFlash('error', 'Thème non reconnu.');
return $this->redirectToRoute('app_admin_stats', ['insee_code' => $insee_code]);
}
// Récupérer toutes les données de followup pour ce thème
$followups = $stats->getCityFollowUps();
$countData = [];
$completionData = [];
foreach ($followups as $fu) {
if ($fu->getName() === $theme . '_count') {
$countData[] = [
'date' => $fu->getDate()->format('Y-m-d'),
'value' => $fu->getMeasure()
];
}
if ($fu->getName() === $theme . '_completion') {
$completionData[] = [
'date' => $fu->getDate()->format('Y-m-d'),
'value' => $fu->getMeasure()
];
}
}
// Trier par date
usort($countData, fn($a, $b) => $a['date'] <=> $b['date']);
usort($completionData, fn($a, $b) => $a['date'] <=> $b['date']);
$this->actionLogger->log('followup_theme_graph', [
'insee_code' => $insee_code,
'theme' => $theme,
'theme_label' => $themes[$theme] ?? 'Unknown'
]);
return $this->render('admin/followup_theme_graph.html.twig', [
'stats' => $stats,
'theme' => $theme,
'theme_label' => $themes[$theme],
'count_data' => json_encode($countData),
'completion_data' => json_encode($completionData),
'icons' => \App\Service\FollowUpService::getFollowUpIcons(),
]);
}
#[Route('/admin/placeType/{osm_kind}/{osm_id}', name: 'app_admin_by_osm_id')]
public function placeType(string $osm_kind, string $osm_id): Response
{
@ -484,11 +539,7 @@ final class AdminController extends AbstractController
]);
return $this->redirectToRoute('app_admin_commerce', ['id' => $place->getId()]);
} else {
$this->actionLogger->log('ERROR_admin/placeType', ['osm_kind' => $osm_kind, 'osm_id' => $osm_id,
'name' => $place->getName(),
'code_insee' => $place->getZipCode(),
'uuid' => $place->getUuidForUrl()
]);
$this->actionLogger->log('ERROR_admin/placeType', ['osm_kind' => $osm_kind, 'osm_id' => $osm_id]);
$this->addFlash('error', 'Le lieu n\'existe pas.');
$this->actionLogger->log('ERROR_admin/placeType', ['osm_kind' => $osm_kind, 'osm_id' => $osm_id]);
return $this->redirectToRoute('app_public_index');

57
src/Controller/PublicController.php
View file

@ -120,12 +120,67 @@ class PublicController extends AbstractController
{
$stats = $this->entityManager->getRepository(Stats::class)->findAll();
// Préparer les données pour la carte
$citiesForMap = [];
foreach ($stats as $stat) {
if ($stat->getZone() && $stat->getZone() !== 'undefined' && preg_match('/^\d+$/', $stat->getZone())) {
// Récupérer les coordonnées de la ville via l'API Nominatim
$cityName = $stat->getName() ?: $stat->getZone();
$coordinates = $this->getCityCoordinates($cityName, $stat->getZone());
if ($coordinates) {
$citiesForMap[] = [
'name' => $cityName,
'zone' => $stat->getZone(),
'coordinates' => $coordinates,
'placesCount' => $stat->getPlacesCount(),
'completionPercent' => $stat->getCompletionPercent(),
'population' => $stat->getPopulation(),
'url' => $this->generateUrl('app_admin_stats', ['insee_code' => $stat->getZone()])
];
}
}
}
return $this->render('public/home.html.twig', [
'controller_name' => 'PublicController',
'stats' => $stats
'stats' => $stats,
'citiesForMap' => $citiesForMap,
'maptiler_token' => $_ENV['MAPTILER_TOKEN'] ?? null
]);
}
/**
* Récupère les coordonnées d'une ville via l'API Nominatim
*/
private function getCityCoordinates(string $cityName, string $inseeCode): ?array
{
// Cache simple pour éviter trop d'appels API
$cacheKey = 'city_coords_' . $inseeCode;
// Vérifier le cache (ici on utilise une approche simple)
// En production, vous pourriez utiliser le cache Symfony
$query = urlencode($cityName . ', France');
$url = "https://nominatim.openstreetmap.org/search?q={$query}&format=json&limit=1&countrycodes=fr";
try {
$response = file_get_contents($url);
$data = json_decode($response, true);
if (!empty($data) && isset($data[0]['lat']) && isset($data[0]['lon'])) {
return [
'lat' => (float) $data[0]['lat'],
'lon' => (float) $data[0]['lon']
];
}
} catch (\Exception $e) {
// En cas d'erreur, on retourne null
}
return null;
}
#[Route('/edit/{zipcode}/{name}/{uuid}', name: 'app_public_edit')]
public function edit_with_uuid($zipcode, $name, $uuid): Response
{

2
templates/admin/followup_embed_graph.html.twig
View file

@ -5,7 +5,7 @@
{% block body %}
<div class="container mt-4">
<h1><i class="bi {{ icon }} fs-2"></i> {{ label }} <small class="text-muted">- {{ stats.name }}</small></h1>
<canvas id="embedThemeChart" width="600" height="300"></canvas>
<canvas id="embedThemeChart" width="600" height="400"></canvas>
<div class="mb-3 mt-2">
<a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info me-2">
<i class="bi bi-bar-chart"></i> Voir la page de la ville

6
templates/admin/followup_global_graph.html.twig
View file

@ -10,7 +10,7 @@
</div>
<div class="mb-4">
<h3>Nombre de villes et complétion moyenne</h3>
<canvas id="global-summary-chart" height="80"></canvas>
<canvas id="global-summary-chart" height="400"></canvas>
</div>
<hr>
<h3>Suivi par thématique</h3>
@ -23,8 +23,8 @@
<i class="bi {{ followup_icons[type]|default('bi-question-circle') }}"></i>
{{ label }}
</h5>
<canvas id="chart-{{ type }}-count" height="60"></canvas>
<canvas id="chart-{{ type }}-completion" height="60"></canvas>
<canvas id="chart-{{ type }}-count" height="400"></canvas>
<canvas id="chart-{{ type }}-completion" height="400"></canvas>
</div>
</div>
</div>

2
templates/admin/followup_graph.html.twig
View file

@ -22,7 +22,7 @@
<p>Historique des objets suivis (nombre et complétion).</p>
{% for type, label in followup_labels %}
<h2 id="title-{{ type }}"><i class="bi {{ followup_icons[type]|default('bi-question-circle') }} fs-2"></i> {{ label }}</h2>
<canvas id="{{ type }}Chart" width="600" height="300"></canvas>
<canvas id="{{ type }}Chart" width="600" height="400"></canvas>
<div class="mb-3">
{% set overpass_query = '[out:json][timeout:60];\narea["ref:INSEE"="' ~ stats.zone ~ '"]->.searchArea;\n(' ~ followup_overpass[type]|default('') ~ ');\n\n(._;>;);\n\nout meta;\n>;' %}
<a href="https://overpass-turbo.eu/?Q={{ overpass_query|url_encode }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">

275
templates/admin/followup_theme_graph.html.twig Normal file
View file

@ -0,0 +1,275 @@
{% extends 'base_embed.html.twig' %}
{% block title %}Graphique {{ theme_label }} - {{ stats.name }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.chart-container {
width: 100%;
height: 400px;
margin: 20px 0;
}
.stats-header {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid #dee2e6;
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #0d6efd;
}
.stat-label {
font-size: 14px;
color: #6c757d;
margin-top: 5px;
}
.chart-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #dee2e6;
}
.chart-tab {
padding: 10px 20px;
background: none;
border: none;
cursor: pointer;
border-bottom: 3px solid transparent;
}
.chart-tab.active {
border-bottom-color: #0d6efd;
color: #0d6efd;
}
.chart-content {
display: none;
}
.chart-content.active {
display: block;
}
</style>
{% endblock %}
{% block body %}
<div class="container-fluid">
<div class="stats-header">
<h2>
<i class="bi {{ icons[theme]|default('bi-question-circle') }}"></i>
{{ theme_label }} - {{ stats.name }}
</h2>
<p class="mb-0">Code INSEE: {{ stats.zone }}</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value" id="currentCount">-</div>
<div class="stat-label">Nombre actuel</div>
</div>
<div class="stat-card">
<div class="stat-value" id="currentCompletion">-</div>
<div class="stat-label">Complétion actuelle</div>
</div>
<div class="stat-card">
<div class="stat-value" id="dataPoints">-</div>
<div class="stat-label">Points de données</div>
</div>
<div class="stat-card">
<div class="stat-value" id="lastUpdate">-</div>
<div class="stat-label">Dernière mise à jour</div>
</div>
</div>
<div class="chart-tabs">
<button class="chart-tab active" data-chart="count">Nombre d'objets</button>
<button class="chart-tab" data-chart="completion">Pourcentage de complétion</button>
</div>
<div class="chart-content active" id="count-chart">
<div class="chart-container">
<canvas id="countChart"></canvas>
</div>
</div>
<div class="chart-content" id="completion-chart">
<div class="chart-container">
<canvas id="completionChart"></canvas>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
const countData = {{ count_data|raw }};
const completionData = {{ completion_data|raw }};
// Mettre à jour les statistiques
function updateStats() {
if (countData.length > 0) {
const latestCount = countData[countData.length - 1];
document.getElementById('currentCount').textContent = latestCount.value;
document.getElementById('lastUpdate').textContent = new Date(latestCount.date).toLocaleDateString('fr-FR');
}
if (completionData.length > 0) {
const latestCompletion = completionData[completionData.length - 1];
document.getElementById('currentCompletion').textContent = latestCompletion.value + '%';
}
document.getElementById('dataPoints').textContent = Math.max(countData.length, completionData.length);
}
// Configuration commune pour les graphiques
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'dd/MM/yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
beginAtZero: true,
title: {
display: true
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
};
// Graphique du nombre d'objets
const countCtx = document.getElementById('countChart').getContext('2d');
const countChart = new Chart(countCtx, {
type: 'line',
data: {
datasets: [{
label: 'Nombre d\'objets',
data: countData.map(d => ({
x: new Date(d.date),
y: d.value
})),
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.1
}]
},
options: {
...commonOptions,
scales: {
...commonOptions.scales,
y: {
...commonOptions.scales.y,
title: {
display: true,
text: 'Nombre d\'objets'
}
}
}
}
});
// Graphique de la complétion
const completionCtx = document.getElementById('completionChart').getContext('2d');
const completionChart = new Chart(completionCtx, {
type: 'line',
data: {
datasets: [{
label: 'Pourcentage de complétion',
data: completionData.map(d => ({
x: new Date(d.date),
y: d.value
})),
borderColor: '#198754',
backgroundColor: 'rgba(25, 135, 84, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.1
}]
},
options: {
...commonOptions,
scales: {
...commonOptions.scales,
y: {
...commonOptions.scales.y,
max: 100,
title: {
display: true,
text: 'Pourcentage de complétion (%)'
}
}
}
}
});
// Gestion des onglets
document.querySelectorAll('.chart-tab').forEach(tab => {
tab.addEventListener('click', function() {
// Retirer la classe active de tous les onglets
document.querySelectorAll('.chart-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.chart-content').forEach(c => c.classList.remove('active'));
// Ajouter la classe active à l'onglet cliqué
this.classList.add('active');
const chartId = this.getAttribute('data-chart') + '-chart';
document.getElementById(chartId).classList.add('active');
});
});
// Initialiser les statistiques
updateStats();
</script>
{% endblock %}

10
templates/admin/stats.html.twig
View file

@ -170,6 +170,9 @@
<span class="completion-badge {{ completion_class }}"></span><br>
<i class="bi {{ followup_icons[type]|default('bi-question-circle') }} fs-2 mb-1"></i><br>
<a href="http://127.0.0.1:8111/import?url=https://overpass-api.de/api/interpreter?data={{ overpass_query|url_encode }}" target="_blank" class="fw-bold text-decoration-underline text-dark" title="Charger dans JOSM">{{ followup_labels[type]|default(type|capitalize) }}</a><br>
<a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': type}) }}" target="_blank" class="btn btn-sm btn-outline-primary mt-1" title="Voir le graphique">
<i class="bi bi-graph-up"></i>
</a><br>
<span title="Nombre"> {{ data.count is defined ? data.count.getMeasure() : '?' }}</span><br>
<span title="Complétion"> {{ completion is not null ? completion : '?' }}%</span>
{% if progression7Days[type] is defined %}
@ -200,6 +203,9 @@
<span class="completion-badge" style="background:#eee;"></span><br>
<i class="bi bi-question-circle fs-2 mb-1"></i><br>
<span class="fw-bold">{{ followup_labels[type]|default(type|capitalize) }}</span><br>
<a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': type}) }}" target="_blank" class="btn btn-sm btn-outline-secondary mt-1" title="Voir le graphique">
<i class="bi bi-graph-up"></i> Graphique
</a><br>
<span title="Nombre">N = ?</span><br>
<span title="Complétion">?%</span>
</div>
@ -280,7 +286,7 @@
<div class="row ">
<div class="col-md-6 col-12 ">
<canvas id="repartition_tags" width="600" height="300" style="max-width:100%; margin: 20px 0;"></canvas>
<canvas id="repartition_tags" width="600" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
</div>
@ -303,7 +309,7 @@
</div>
<div class="card mt-4">
{% include 'admin/stats_history.html.twig' with {stat: stats} %}
<canvas id="distribution_completion" class="mt-4 mb-4" height="600"></canvas>
<canvas id="distribution_completion" class="mt-4 mb-4" height="400"></canvas>
<div class="row">

2
templates/admin/stats_history.html.twig
View file

@ -3,7 +3,7 @@
<h2>Évolution du taux de complétion</h2>
</div>
<div class="card-body">
<canvas id="completionHistoryChart" height="500"></canvas>
<canvas id="completionHistoryChart" height="400" style="height:400px !important; max-height:400px; min-height:200px;"></canvas>
</div>
</div>

161
templates/public/home.html.twig
View file

@ -4,8 +4,46 @@
{% block stylesheets %}
{{ parent() }}
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
<style>
#citiesMap {
height: 400px;
width: 100%;
margin-bottom: 2rem;
border-radius: 8px;
overflow: hidden;
}
.map-container {
position: relative;
}
.map-legend {
position: absolute;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 12px;
z-index: 1000;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.city-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@ -93,6 +131,38 @@
vous aider.
</p>
{% if citiesForMap is not empty %}
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
<p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
</div>
<div class="card-body p-0">
<div class="map-container">
<div id="citiesMap"></div>
<div class="map-legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #28a745;"></div>
<span>Complétion > 80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #17a2b8;"></div>
<span>Complétion 50-80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffc107;"></div>
<span>Complétion < 50%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-12">
<label class="label" for="researchShop">
@ -148,6 +218,7 @@
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
{# <script src='{{ asset('js/utils.js') }}'></script> #}
<script type="module">
// import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
@ -157,6 +228,96 @@
</script>
<script>
// Données des villes pour la carte
const citiesData = {{ citiesForMap|json_encode|raw }};
const mapToken = '{{ maptiler_token }}';
// Initialiser la carte si des données sont disponibles
if (citiesData.length > 0 && mapToken) {
document.addEventListener('DOMContentLoaded', function() {
// Créer les features GeoJSON pour la carte
const features = citiesData.map(city => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [city.coordinates.lon, city.coordinates.lat]
},
properties: {
name: city.name,
zone: city.zone,
placesCount: city.placesCount,
completionPercent: city.completionPercent,
population: city.population,
url: city.url
}
}));
const geojson = {
type: 'FeatureCollection',
features: features
};
// Calculer le centre de la carte (moyenne des coordonnées)
const bounds = new maplibregl.LngLatBounds();
features.forEach(feature => {
bounds.extend(feature.geometry.coordinates);
});
// Initialiser la carte
const map = new maplibregl.Map({
container: 'citiesMap',
style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
bounds: bounds,
fitBoundsOptions: {
padding: 50
}
});
// Ajouter les marqueurs
features.forEach(feature => {
const properties = feature.properties;
// Déterminer la couleur selon le pourcentage de complétion
let color = '#ffc107'; // Jaune par défaut
if (properties.completionPercent > 80) {
color = '#28a745'; // Vert
} else if (properties.completionPercent > 50) {
color = '#17a2b8'; // Bleu
}
// Créer le marqueur
const marker = new maplibregl.Marker({
color: color,
scale: 0.8
})
.setLngLat(feature.geometry.coordinates)
.setPopup(
new maplibregl.Popup({ offset: 25 })
.setHTML(`
<div style="min-width: 200px;">
<h6 style="margin: 0 0 10px 0; color: #333;">${properties.name}</h6>
<div style="font-size: 12px; color: #666;">
<div><strong>Code INSEE:</strong> ${properties.zone}</div>
<div><strong>Lieux:</strong> ${properties.placesCount}</div>
<div><strong>Complétion:</strong> ${properties.completionPercent}%</div>
${properties.population ? `<div><strong>Population:</strong> ${properties.population.toLocaleString()}</div>` : ''}
</div>
<div style="margin-top: 10px;">
<a href="${properties.url}" class="btn btn-sm btn-primary" style="text-decoration: none;">
Voir les statistiques
</a>
</div>
</div>
`)
)
.addTo(map);
});
// Ajouter les contrôles de navigation
map.addControl(new maplibregl.NavigationControl());
});
}
// Créer le formulaire email
const emailFormHtml = `
<form id="emailForm" class="mt-3">

1
templates/public/nav.html.twig
View file

@ -22,6 +22,7 @@
<li><a class="dropdown-item" href="{{ path('app_public_latest_changes') }}"><i class="bi bi-clock-fill"></i> {{ 'display.latest_changes'|trans }}</a></li>
<li><a class="dropdown-item" href="{{ path('admin_fraicheur_histogramme') }}"><i class="bi bi-clock-history"></i> Fraîcheur de la donnée</a></li>
<li><a class="dropdown-item" href="/api/v1/stats/export?pretty=1"><i class="bi bi-download"></i> Export JSON des villes</a></li>
<li><a class="dropdown-item" href="/admin/export_csv"><i class="bi bi-filetype-csv"></i> Exporter les villes (CSV)</a></li>
</ul>
</li>
<li class="nav-item">