Commit 46561c18 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Livraison #2 novembre 2022

parents 07244c52 b4e45877
......@@ -14,7 +14,7 @@
"build:vite": "vite build --mode ${npm_config_env}",
"build:sitemaps": "npx ts-node ./sitemaps/generer_sitemaps.ts & copyfiles sitemaps/sitemap-index.xml build -f",
"build:copy-config": "copyfiles -a -u 2 \"config/${npm_config_env}/**/*\" build",
"build": "run-s clean build:types build:test build:vite build:sitemaps build:copy-config",
"build": "run-s clean build:types build:test build:vite build:copy-config",
"serve": "vite preview --port 8088",
"cypress:open": "cypress open --config 'baseUrl=http://localhost:8088/'",
"cypress:run": "run-s cypress:run:firefox",
......
......@@ -23,7 +23,7 @@ export function genererSitemap() {
${urlsCartes}
</urlset>`;
if (!existsSync('./build')) mkdirSync('./build')
if (!existsSync('./build')) mkdirSync('./build');
writeFileSync('./build/sitemap-ui.xml', contenu, {
flag: 'w'
});
......
......@@ -27,7 +27,7 @@ declare global {
}
}
type NomPage = 'accueil' | 'diagnostic' | 'carte' | 'projet' | 'methodologie' | 'api';
type NomPage = `accueil` | `diagnostic` | `carte` | `projet` | `methodologie` | `api`;
@customElement('c-crater-app')
export class CraterApp extends LitElement {
......@@ -38,7 +38,10 @@ export class CraterApp extends LitElement {
static styles = css``;
@state()
pageCourante: NomPage = 'accueil';
private pageCourante: NomPage = 'accueil';
@state()
private coeurDePageCourante?: string;
@state()
private idTerritoirePrincipal?: string;
......@@ -69,21 +72,25 @@ export class CraterApp extends LitElement {
page.redirect('/projet.html', '/projet');
page.redirect('/methodologie.html', '/methodologie');
page.redirect('/api-doc.html', '/api-doc');
page('/accueil', (ctx) => this.routerVersPage(ctx, 'accueil'));
page('/diagnostic', (ctx) => this.routerVersPage(ctx, 'diagnostic'));
page('/diagnostic', (ctx) => this.routerVersPage(ctx, 'diagnostic', 'synthese'));
page('/diagnostic/territoire', (ctx) => this.routerVersPage(ctx, 'diagnostic', 'territoire'));
page(`/diagnostic/maillons/:idMaillon`, (ctx) => this.routerVersPage(ctx, 'diagnostic', ctx.params.idMaillon));
page('/carte', (ctx) => this.routerVersPage(ctx, 'carte'));
page('/projet', (ctx) => this.routerVersPage(ctx, 'projet'));
page('/methodologie', (ctx) => this.routerVersPage(ctx, 'methodologie'));
page('/api-doc', (ctx) => this.routerVersPage(ctx, 'api'));
page('*', (ctx) => this.routerVersPage(ctx, 'accueil'));
page.redirect('*', '/accueil');
page();
}
private routerVersPage = (context: Context, nomPage: NomPage) => {
private routerVersPage = (context: Context, nomPage: NomPage, nomCoeurDePage?: string) => {
if (this.pageCourante !== nomPage) {
this.resetScrollPage();
}
this.pageCourante = nomPage;
this.coeurDePageCourante = nomCoeurDePage;
this.idTerritoirePrincipal = this.getRequestParamValue(context.querystring, PARAMETRE_URL_IDENTIFIANT_TERRITOIRE);
this.idEchelleTerritoriale = this.getRequestParamValue(context.querystring, PARAMETRE_URL_ECHELLE_TERRITORIALE);
this.idIndicateur = this.getRequestParamValue(context.querystring, PARAMETRE_URL_IDENTIFIANT_INDICATEUR);
......@@ -118,8 +125,11 @@ export class CraterApp extends LitElement {
return importDynamique(
import('./pages/diagnostic/PageDiagnostic.js'),
html`<c-page-diagnostic
tagCoeurDePage="c-chapitre-${ifDefined(this.coeurDePageCourante)}"
section=${ifDefined(this.coeurDePageCourante)}
idTerritoirePrincipal=${ifDefined(this.idTerritoirePrincipal)}
idElementCibleScroll="${ifDefined(this.hashCourant)}"
idEchelleTerritoriale=${ifDefined(this.idEchelleTerritoriale)}
idElementCibleScroll=${ifDefined(this.hashCourant)}
></c-page-diagnostic>`,
html`<c-page-sablier></c-page-sablier>`
);
......@@ -128,8 +138,8 @@ export class CraterApp extends LitElement {
import('./pages/carte/PageCarte.js'),
html`<c-page-carte
idTerritoirePrincipal=${ifDefined(this.idTerritoirePrincipal)}
idEchelleTerritoriale="${ifDefined(this.idEchelleTerritoriale)}"
idIndicateur="${ifDefined(this.idIndicateur)}"
idEchelleTerritoriale=${ifDefined(this.idEchelleTerritoriale)}
idIndicateur=${ifDefined(this.idIndicateur)}
></c-page-carte>`,
html`<c-page-sablier></c-page-sablier>`
);
......@@ -150,22 +160,22 @@ export class CraterApp extends LitElement {
}
}
// TODO : a terme on peut supprimer naviguer en s'appuyant directement sur des href dans le code d'origine, et en laissant pagejs interceper les evt
naviguer(url: string, cible = '_self') {
console.log(`Naviger vers url=${url}, cible=${cible}`);
if (url.startsWith('#')) {
// lien intern vers hash
const urlCible = new URL(location.href);
urlCible.hash = url;
page(`${urlCible.pathname}${urlCible.search}${urlCible.hash}`);
} else if (!url.startsWith('http') && cible === 'self') {
// lien interne
if (estActifModeBeta()) url.includes('?') ? (url += '&beta') : (url += '?beta');
page(url);
const urlCible = new URL(location.href);
} else if (!url.startsWith('http') && cible === '_self') {
// lien interne, url sans http://hostname
const urlCible = new URL(`${location.protocol}\\${location.host}/${url}`);
// TODO : modifier ce fonctionnement => stocker l'état du mode beta dans un champ de CraterApp, et ne plus avoir besoin de le faire suivre dans l'url
if (estActifModeBeta() && !urlCible.searchParams.has(PARAMETRE_URL_ACTIVER_FONCTIONS_BETA)) {
urlCible.searchParams.set(PARAMETRE_URL_ACTIVER_FONCTIONS_BETA, '');
}
urlCible.hash = url;
page(url);
page(`${urlCible.pathname}${urlCible.search}${urlCible.hash}`);
} else {
// lien externe
window.open(url, cible);
......
......@@ -4,16 +4,21 @@ import { CSS_BREAKPOINT_MAX_WIDTH_TABLETTE, EvenementDeplacerCarte } from '@lga/
import { getApiBaseUrl } from '@lga/commun/build/env/config-baseurl';
import { arrondirANDecimales } from '@lga/commun/build/outils/base';
import * as geojson from 'geojson';
import { Feature, Point } from 'geojson';
import { Feature, FeatureCollection, Point } from 'geojson';
import L, { FeatureGroup, GeoJSON, GeoJSONOptions, LatLng, LatLngBounds, Layer, LayerGroup, LeafletMouseEvent, Map, PathOptions } from 'leaflet';
import leafletRawCss from 'leaflet/dist/leaflet.css';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import { customElement, property } from 'lit/decorators.js';
import { EchelleTerritoriale } from '../../../domaines/carte/EchelleTerritoriale';
import { TerritoiresVisiblesCarte } from '../../../domaines/carte/TerritoiresVisiblesCarte';
import { StyleIndicateur } from '../../../domaines/systeme-alimentaire';
import { chargerContoursTerritoires, chargerCoucheHotelsDepartements, chargerCoucheHotelsRegions } from '../../../requetes-api/requetes-api-carte';
import {
chargerContoursTerritoires,
chargerCoucheHotelsDepartements,
chargerCoucheHotelsRegions,
chargerIndicateurs
} from '../../../requetes-api/requetes-api-carte';
import { TerritoiresVisiblesCarte, ValeurIndicateurParIdTerritoire } from './TerritoiresVisiblesCarte';
//
// Config
......@@ -61,7 +66,10 @@ export class WidgetCarte extends LitElement {
private coucheContoursTerritoires?: GeoJSON<DonneesFeatureTerritoire>;
private nomIndicateur?: string;
private unite?: string;
private territoiresVisiblesCarte?: TerritoiresVisiblesCarte;
private idEchelleTerritoriale?: string;
private echelleTerritoriale?: EchelleTerritoriale;
private nomIndicateurRequeteApi?: string;
private territoiresVisiblesCarte: TerritoiresVisiblesCarte = new TerritoiresVisiblesCarte();
private styleIndicateur?: StyleIndicateur;
private couchesVilles: CouchesVilles = {
coucheHotelsDepartements: null,
......@@ -134,9 +142,19 @@ export class WidgetCarte extends LitElement {
`
];
firstUpdated() {
@property({ type: Boolean })
autoriserZoom = false;
@property({ type: Boolean })
autoriserMouvements = false;
// TODO: comportement à implémenter
@property({ type: Boolean })
afficherBoutonPleinEcran = false;
async firstUpdated() {
this.carteLeaflet = this.initialiserCarteLeaflet();
this.chargerBboxDepartements();
await this.chargerBboxDepartements();
document.addEventListener('click', this.gererClickFermeturePopup);
this.carteLeaflet!.on('moveend', this.gererDeplacementCarte, this);
this.carteLeaflet!.on('zoomend', () => this.majCoucheVillesAfficheeSelonZoom());
......@@ -149,7 +167,7 @@ export class WidgetCarte extends LitElement {
// Init
//////////////////////////////////////
private initialiserCarteLeaflet(): Map {
const mapInitiale: Map = L.map(<HTMLElement>this.shadowRoot!.querySelector('#carte'), {
const carte = L.map(<HTMLElement>this.shadowRoot!.querySelector('#carte'), {
zoomControl: false,
attributionControl: false,
minZoom: 5,
......@@ -159,28 +177,46 @@ export class WidgetCarte extends LitElement {
wheelPxPerZoomLevel: 150,
maxBounds: BOUDING_BOX_LARGE
}).fitBounds(BOUNDING_BOX_FRANCE);
return mapInitiale;
if (!this.autoriserZoom) {
carte.touchZoom.disable();
carte.doubleClickZoom.disable();
carte.scrollWheelZoom.disable();
carte.boxZoom.disable();
carte.keyboard.disable();
}
if (!this.autoriserMouvements) {
carte.dragging.disable();
}
return carte;
}
//////////////////////////////////////
// Déclaration des fonctions publiques
//////////////////////////////////////
maj(
idEchelleTerritoriale: string,
territoiresVisiblesCarte: TerritoiresVisiblesCarte,
maxZoom: number,
async maj(
echelleTerritoriale: EchelleTerritoriale,
nomIndicateur: string,
unite: string,
nomIndicateurRequeteApi: string,
styleIndicateur: StyleIndicateur,
idTerritoirePourZoom?: string
idTerritoireSelectionne?: string,
idDepartementAppartenanceCommune?: string
) {
this.majCoucheVillesAfficheeSelonZoom();
this.nomIndicateur = nomIndicateur;
this.unite = unite;
this.territoiresVisiblesCarte = territoiresVisiblesCarte;
this.styleIndicateur = styleIndicateur;
this.majCoucheContoursTerritoire(territoiresVisiblesCarte.contoursGeojson!);
this.gererZoom(maxZoom, idEchelleTerritoriale, idTerritoirePourZoom);
this.idEchelleTerritoriale = echelleTerritoriale.id;
this.echelleTerritoriale = echelleTerritoriale;
this.nomIndicateurRequeteApi = nomIndicateurRequeteApi;
// setMaxZoom fait ici, car sinon il interfere avec les fitBounds ou panTo dans centreEtZoomer (voir https://github.com/Leaflet/Leaflet/issues/7019)
this.carteLeaflet?.setMaxZoom(echelleTerritoriale.maxZoom);
await this.chargementInitialTerritoiresVisibles(idDepartementAppartenanceCommune);
this.majCoucheContoursTerritoire(this.territoiresVisiblesCarte.contoursGeojson!);
this.centrerEtZoomer(echelleTerritoriale, idTerritoireSelectionne);
}
//////////////////////////////////////
// Callback leaflet pour affichage popup
......@@ -298,26 +334,23 @@ export class WidgetCarte extends LitElement {
};
}
private gererZoom(maxZoom: number, idEchelleTerritoriale: string, idTerritoirePourZoom?: string) {
if (idTerritoirePourZoom) {
private centrerEtZoomer(echelleTerritoriale: EchelleTerritoriale, idTerritoireSelectionne?: string) {
if (idTerritoireSelectionne) {
let donneesFeatureGeoJson: DonneesFeatureTerritoire;
const fgTerritoireZoom: FeatureGroup = this.coucheContoursTerritoires?.getLayers().find((l: Layer) => {
const feature = (l as FeatureGroup).feature;
donneesFeatureGeoJson = (feature as geojson.Feature<geojson.GeometryObject, DonneesFeatureTerritoire>)?.properties;
return donneesFeatureGeoJson?.id_territoire === idTerritoirePourZoom;
return donneesFeatureGeoJson?.id_territoire === idTerritoireSelectionne;
}) as FeatureGroup;
//gestion différenciée selon que l'on part d'une commune pour aller vers un niveau supérieur ou inversement pour éviter conflit entre fitBounds et setMaxZoom
if (idEchelleTerritoriale === EchelleTerritoriale.Communes.id)
this.carteLeaflet!.setMaxZoom(maxZoom).fitBounds(fgTerritoireZoom.getBounds());
else this.carteLeaflet!.fitBounds(fgTerritoireZoom.getBounds()).setMaxZoom(maxZoom);
// Animate=false permet d'éviter certaines interférences avec les setZoom (https://github.com/Leaflet/Leaflet/issues/7019)
this.carteLeaflet!.setZoom(echelleTerritoriale.maxZoom, { animate: false }).panTo(fgTerritoireZoom.getBounds().getCenter(), {
animate: false
});
fgTerritoireZoom.setStyle({ weight: 2, color: 'black' });
this.ouvrirPopup(idTerritoirePourZoom, donneesFeatureGeoJson!.nom_territoire, fgTerritoireZoom.getBounds().getCenter());
this.ouvrirPopup(idTerritoireSelectionne, donneesFeatureGeoJson!.nom_territoire, fgTerritoireZoom.getBounds().getCenter());
} else {
this.carteLeaflet!.setMaxZoom(maxZoom);
if (idEchelleTerritoriale === EchelleTerritoriale.Communes.id && this.carteLeaflet!.getZoom() < EchelleTerritoriale.Communes.minZoom) {
this.carteLeaflet!.setZoom(EchelleTerritoriale.Communes.minZoom);
if (echelleTerritoriale === EchelleTerritoriale.Communes) {
this.carteLeaflet!.setZoom(Math.max(this.carteLeaflet!.getZoom(), EchelleTerritoriale.Communes.minZoom), { animate: false });
}
}
}
......@@ -349,9 +382,9 @@ export class WidgetCarte extends LitElement {
}
};
private chargerBboxDepartements() {
private async chargerBboxDepartements() {
if (!this.bboxDepartements) {
chargerContoursTerritoires(getApiBaseUrl(), EchelleTerritoriale.Departements.nomGeojson).then((contoursDepartements) => {
await chargerContoursTerritoires(getApiBaseUrl(), EchelleTerritoriale.Departements.nomGeojson).then((contoursDepartements) => {
this.bboxDepartements = contoursDepartements.features.map(
(contourDepartement: geojson.Feature<geojson.GeometryObject, DonneesFeatureTerritoire>) => {
const contourDepartementGeoJSON = L.geoJSON(contourDepartement);
......@@ -363,6 +396,77 @@ export class WidgetCarte extends LitElement {
return Promise.resolve();
}
private async chargementInitialTerritoiresVisibles(idDepartementInitialCommune?: string): Promise<void> {
this.territoiresVisiblesCarte.reset();
const promisesContours: Promise<FeatureCollection>[] = [];
const promisesValeurs: Promise<ValeurIndicateurParIdTerritoire[]>[] = [];
if (this.idEchelleTerritoriale) {
if (this.idEchelleTerritoriale === EchelleTerritoriale.Communes.id && idDepartementInitialCommune !== undefined) {
promisesContours.push(
chargerContoursTerritoires(
getApiBaseUrl(),
EchelleTerritoriale.fromId(this.idEchelleTerritoriale!)!.nomGeojson,
idDepartementInitialCommune
)
);
promisesValeurs.push(
chargerIndicateurs(getApiBaseUrl(), this.nomIndicateurRequeteApi!, this.idEchelleTerritoriale!, idDepartementInitialCommune)
);
} else if (this.idEchelleTerritoriale !== EchelleTerritoriale.Communes.id) {
promisesContours.push(
chargerContoursTerritoires(getApiBaseUrl(), EchelleTerritoriale.fromId(this.idEchelleTerritoriale!)!.nomGeojson)
);
promisesValeurs.push(chargerIndicateurs(getApiBaseUrl(), this.nomIndicateurRequeteApi!, this.idEchelleTerritoriale!));
}
}
return Promise.all([
Promise.all(promisesContours).then((resultatsPromises: FeatureCollection[]) => {
resultatsPromises.forEach((r) => this.territoiresVisiblesCarte!.ajouterContours(r));
}),
Promise.all(promisesValeurs).then((resultatsPromises: ValeurIndicateurParIdTerritoire[][]) => {
resultatsPromises.forEach((r) => this.territoiresVisiblesCarte!.ajouterValeursIndicateurs(r));
})
]).then(() => {
return;
});
}
private async chargementComplementTerritoiresVisiblesPourCommunes(): Promise<void> {
if (this.idEchelleTerritoriale !== EchelleTerritoriale.Communes.id) {
// Rien à faire pour EPCI, Departement et Region car tout est chargé lors de l'initialisation
return Promise.resolve();
}
const promisesContours: Promise<FeatureCollection>[] = [];
const promisesValeurs: Promise<ValeurIndicateurParIdTerritoire[]>[] = [];
if (this.carteLeaflet!.getZoom() >= EchelleTerritoriale.Communes.minZoom) {
this.territoiresVisiblesCarte.reset();
const idsDepartementsVisibles: string[] = await this.calculerIdsDepartementsVisibles(this.carteLeaflet!.getBounds());
idsDepartementsVisibles.map((idDepartement) => {
promisesContours.push(
chargerContoursTerritoires(getApiBaseUrl(), EchelleTerritoriale.fromId(this.idEchelleTerritoriale!)!.nomGeojson, idDepartement)
);
promisesValeurs.push(chargerIndicateurs(getApiBaseUrl(), this.nomIndicateurRequeteApi!, this.idEchelleTerritoriale!, idDepartement));
});
} else {
// cas Commune et zoom trop large => on ne charge rien, ne doit pas se produire
console.warn(
`Attention, pas de chargement des données, zoom trop large pour les communes : ${this.carteLeaflet!.getZoom()} et ${
EchelleTerritoriale.Communes.minZoom
}`
);
}
return Promise.all([
Promise.all(promisesContours).then((resultatsPromises: FeatureCollection[]) => {
resultatsPromises.forEach((r) => this.territoiresVisiblesCarte!.ajouterContours(r));
}),
Promise.all(promisesValeurs).then((resultatsPromises: ValeurIndicateurParIdTerritoire[][]) => {
resultatsPromises.forEach((r) => this.territoiresVisiblesCarte!.ajouterValeursIndicateurs(r));
})
]).then(() => {
return;
});
}
private async calculerIdsDepartementsVisibles(coordonneesViewBox: L.LatLngBounds) {
await this.chargerBboxDepartements();
return this.bboxDepartements!.filter((bboxDepartement) => {
......@@ -375,5 +479,8 @@ export class WidgetCarte extends LitElement {
const coordonneesViewBox = this.carteLeaflet!.getBounds();
this.dispatchEvent(new EvenementDeplacerCarte(await this.calculerIdsDepartementsVisibles(coordonneesViewBox), zoom));
// Dans le cas des communes, une fois que la carte est centrée, on peut charger les contours et indicateurs des communes d'autres départements s'ils sont dans la viewbox
await this.chargementComplementTerritoiresVisiblesPourCommunes();
this.majCoucheContoursTerritoire(this.territoiresVisiblesCarte.contoursGeojson!);
}
}
......@@ -24,6 +24,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import { genererLienCarte } from '../../../pages/commun/pages-utils';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { ModeFiltrageSeries, Serie, SerieMultiple } from '../charts/chart-outils';
import { ChartBarres } from '../charts/ChartBarres';
import { ChartDoubleBarresOpposees } from '../charts/ChartDoubleBarresOpposees';
......@@ -35,7 +36,7 @@ import { SyntheseMaillon } from '../sections/SyntheseMaillon';
import { VoirEgalement } from '../sections/VoirEgalement';
@customElement('c-chapitre-agriculteurs-exploitations')
export class ChapitreAgriculteursExploitations extends LitElement {
export class ChapitreAgriculteursExploitations extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -18,6 +18,7 @@ import { IDS_INDICATEURS } from '../../../domaines/systeme-alimentaire/configura
import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuration/maillons';
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { ChartTreemapConsommation } from '../charts/ChartTreemapConsommation';
import { CommentAgir } from '../sections/CommentAgir';
import { IndicateurDetaille } from '../sections/IndicateurDetaille';
......@@ -29,7 +30,7 @@ import { VoirEgalement } from '../sections/VoirEgalement';
import { creerDonneesTreemapConsommation } from './chapitres-outils';
@customElement('c-chapitre-consommation')
export class ChapitreConsommation extends LitElement {
export class ChapitreConsommation extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -20,6 +20,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import { genererLienCarte } from '../../../pages/commun/pages-utils';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { Serie, SerieMultiple } from '../charts/chart-outils';
import { ChartLignes } from '../charts/ChartLignes';
import { ChartLignesDeuxAxesY } from '../charts/ChartLignesDeuxAxesY';
......@@ -31,7 +32,7 @@ import { SyntheseMaillon } from '../sections/SyntheseMaillon';
import { VoirEgalement } from '../sections/VoirEgalement';
@customElement('c-chapitre-intrants')
export class ChapitreIntrants extends LitElement {
export class ChapitreIntrants extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -21,6 +21,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import { genererLienCarte } from '../../../pages/commun/pages-utils';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { Tableau } from '../../base/Tableau';
import { Serie, SerieMultiple } from '../charts/chart-outils';
import { ChartBarres } from '../charts/ChartBarres';
......@@ -36,7 +37,7 @@ import { VoirEgalement } from '../sections/VoirEgalement';
import { creerDonneesTreemapConsommation } from './chapitres-outils';
@customElement('c-chapitre-production')
export class ChapitreProduction extends LitElement {
export class ChapitreProduction extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -14,6 +14,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { sourcesDonnees } from '../../../domaines/systeme-alimentaire/configuration/sources-donnees';
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import ICONE_SUPERFICIE from '../../../ressources/images/ha.svg';
import ICONE_SAU_PRODUCTIVE from '../../../ressources/images/ha-agricoles.svg';
import ICONE_HABITANTS from '../../../ressources/images/habitants.svg';
......@@ -22,7 +23,7 @@ import { ChartRadar } from '../charts/ChartRadar';
import { MessageCle } from '../sections/MessageCle';
@customElement('c-chapitre-synthese')
export class ChapitreSynthese extends LitElement {
export class ChapitreSynthese extends LitElement implements CoeurDePage {
static styles = [unsafeCSS(baseRawCss), unsafeCSS(diagnosticRawCss)];
rapport?: Rapport;
......@@ -35,6 +36,7 @@ export class ChapitreSynthese extends LitElement {
@query('#message-cle-agriculteurs-exploitations')
private readonly messageCleAgriculteursExploitations!: MessageCle;
@query('#message-cle-intrants')
private readonly messageCleIntrants!: MessageCle;
......@@ -56,7 +58,7 @@ export class ChapitreSynthese extends LitElement {
</div>
<div class="grid-synthese">
<div class="grid-synthese-item">
<a class="cmp__scroll-vers infos-generales" data-cible-scroll="#section-presentation-territoire">
<a class="infos-generales" href="/diagnostic/territoire${document.location.search}">
<div class="info-generale">
<img class="icone" src="${ICONE_HABITANTS}" width="70px" />
<div class="info">
......
......@@ -25,6 +25,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import { genererLienCarte } from '../../../pages/commun/pages-utils';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { Serie, SerieMultiple } from '../charts/chart-outils';
import { ChartBarres } from '../charts/ChartBarres';
import { CommentAgir } from '../sections/CommentAgir';
......@@ -35,7 +36,7 @@ import { SyntheseMaillon } from '../sections/SyntheseMaillon';
import { VoirEgalement } from '../sections/VoirEgalement';
@customElement('c-chapitre-terres-agricoles')
export class ChapitreTerresAgricoles extends LitElement {
export class ChapitreTerresAgricoles extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -8,10 +8,11 @@ import { customElement, query, state } from 'lit/decorators.js';
import { Rapport } from '../../../domaines/diagnostics';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { Tableau } from '../../base/Tableau';
@customElement('c-chapitre-territoire')
export class ChapitreTerritoire extends LitElement {
export class ChapitreTerritoire extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
......@@ -19,6 +19,7 @@ import { IDS_MAILLONS } from '../../../domaines/systeme-alimentaire/configuratio
import { SA } from '../../../domaines/systeme-alimentaire/configuration/systeme-alimentaire';
import { genererLienCarte } from '../../../pages/commun/pages-utils';
import diagnosticRawCss from '../../../pages/diagnostic/diagnostic.css';
import { CoeurDePage } from '../../../pages/diagnostic/PageDiagnostic.js';
import { Serie, SerieMultiple } from '../charts/chart-outils';
import { ChartBarres } from '../charts/ChartBarres';
import { ChartDistancesAuxCommerces } from '../charts/ChartDistancesAuxCommerces';
......@@ -30,7 +31,7 @@ import { SyntheseMaillon } from '../sections/SyntheseMaillon';
import { VoirEgalement } from '../sections/VoirEgalement';
@customElement('c-chapitre-transformation-distribution')
export class ChapitreTransformationDistribution extends LitElement {
export class ChapitreTransformationDistribution extends LitElement implements CoeurDePage {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
......
import { CSS_BREAKPOINT_MAX_WIDTH_MOBILE_PAYSAGE, IDS_EVENEMENTS } from '@lga/commun/build/composants/composants-base';
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { querySelectorDeep } from 'query-selector-shadow-dom';
import { customElement, property, state } from 'lit/decorators.js';
declare global {
interface HTMLElementTagNameMap {
......@@ -13,7 +12,6 @@ declare global {
export interface Section {
id: string;
nom: string;
visibilite: number;
}
@customElement('c-menu-navigation-sections')
......@@ -59,17 +57,12 @@ export class MenuNavigationSections extends LitElement {
transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}
.item-menu-actif,
.item-menu-actif a {
.item-actif,
.item-actif a {
color: var(--c-texte-menu-navigation-sections-surbrillance);
}
.item-menu-inactif a:hover {
text-decoration: underline;
cursor: pointer;
}