Commit 182d4468 authored by Benjam's avatar Benjam
Browse files

HP diagnostic

parent 4c2f9b52
......@@ -55,7 +55,6 @@ export class CraterApp extends LitElement {
@state()
private hashCourant = '';
@query('c-barre-navigation-echelle-territoriale') private barreNavigationEchelleTerritoriale?: BarreNavigationEchelleTerritoriale;
@query('c-entete') private entete!: Entete;
@query('c-message-erreur-glissant') private messageErreurGlissant!: MessageErreurGlissant;
......
......@@ -115,7 +115,7 @@ export class Entete extends LitElement {
}
#zone-recherche {
padding: 0.5rem;
background-color: var(--gris1);
background-color: var(--gris2);
}
#zone-recherche.visible {
display: grid;
......@@ -245,7 +245,7 @@ export class Entete extends LitElement {
</section>
<section id="zone-menu-principal">
<ul>
<li><a href="/accueil">Accueil</a></li>
<li><a href="/diagnostic">Diagnostic</a></li>
<li><a href="/carte">Carte</a></li>
<li><a href="/projet">Projet</a></li>
<li><a href="/methodologie">Méthodologie</a></li>
......@@ -317,6 +317,7 @@ export class Entete extends LitElement {
window.addEventListener('click', this.masquerChampRechercheTerritoire, { capture: true });
this.addEventListener(IDS_EVENEMENTS.selectionnerTerritoire, this.masquerChampRechercheTerritoire);
}
private supprimerListenerMasquer() {
window.removeEventListener('click', this.masquerChampRechercheTerritoire, { capture: true });
this.removeEventListener(IDS_EVENEMENTS.selectionnerTerritoire, this.masquerChampRechercheTerritoire);
......
......@@ -13,7 +13,7 @@ describe('Tests de la classe Rapport', () => {
const rapport = creerRapport();
//then
expect(rapport.getHierarchieTerritoires()).toBeUndefined();
expect(rapport.getEtat()).toEqual(EtatRapport.CHARGEMENT_EN_COURS);
expect(rapport.getEtat()).toEqual(EtatRapport.AUCUN_TERRITOIRE);
expect(rapport.getDiagnosticActif()).toBeUndefined();
expect(rapport.getListeDiagnostics()).toEqual([]);
});
......@@ -46,7 +46,7 @@ describe('Tests de la classe Rapport', () => {
rapport.reinitialiser();
// then
expect(rapport.getErreur()).toBeNull();
expect(rapport.getEtat()).toEqual(EtatRapport.CHARGEMENT_EN_COURS);
expect(rapport.getEtat()).toEqual(EtatRapport.AUCUN_TERRITOIRE);
});
it("Mettre à jour le territoire actif d'un rapport", () => {
......@@ -96,7 +96,7 @@ describe('Tests de la classe Rapport', () => {
// when
const rapport = creerRapport();
// then
expect(rapport.getEtat()).toEqual(EtatRapport.CHARGEMENT_EN_COURS);
expect(rapport.getEtat()).toEqual(EtatRapport.AUCUN_TERRITOIRE);
// when
rapport.setHierarchieTerritoires(hierarchieCommune);
rapport.ajouterDiagnostic(diagnosticCommune);
......@@ -113,7 +113,7 @@ describe('Tests de la classe Rapport', () => {
// when
rapport.reinitialiser();
// then
expect(rapport.getEtat()).toEqual(EtatRapport.CHARGEMENT_EN_COURS);
expect(rapport.getEtat()).toEqual(EtatRapport.AUCUN_TERRITOIRE);
});
it('Ajouter des diagnostics au rapport, puis charger une nouvelle hierarchie de territoires', () => {
......
......@@ -3,13 +3,14 @@ import { CategorieTerritoire, HierarchieTerritoires, Territoire } from '../terri
import { Diagnostic } from './diagnostics';
export enum EtatRapport {
AUCUN_TERRITOIRE = 'Aucun territoire',
CHARGEMENT_EN_COURS = 'Chargement',
PRET = 'Pret',
ERREUR = 'Erreur'
}
export class Rapport {
private etat: EtatRapport = EtatRapport.CHARGEMENT_EN_COURS;
private etat: EtatRapport = EtatRapport.AUCUN_TERRITOIRE;
private erreur: Error | null = null;
private hierarchieTerritoires: HierarchieTerritoires | undefined;
private idTerritoireActif: string | undefined;
......@@ -42,7 +43,7 @@ export class Rapport {
this.hierarchieTerritoires = undefined;
this.idTerritoireActif = undefined;
this.erreur = null;
this.etat = EtatRapport.CHARGEMENT_EN_COURS;
this.etat = EtatRapport.AUCUN_TERRITOIRE;
this.diagnostics.clear();
}
......@@ -53,7 +54,8 @@ export class Rapport {
setHierarchieTerritoires(hierarchieTerritoires: HierarchieTerritoires) {
this.reinitialiser();
this.hierarchieTerritoires = hierarchieTerritoires;
this.idTerritoireActif = this.hierarchieTerritoires.territoirePrincipal.id;
this.setTerritoireActif(this.hierarchieTerritoires.territoirePrincipal.id);
this.setEtatChargementEnCours();
}
getTerritoireActif(): Territoire | undefined {
......@@ -69,7 +71,7 @@ export class Rapport {
const idTerritoireActif = this.hierarchieTerritoires
?.getListeTerritoires()
.find((t) => t.categorie === CategorieTerritoire.fromString(idEchelleTerritoriale))?.id;
if (idTerritoireActif) this.idTerritoireActif = idTerritoireActif;
if (idTerritoireActif) this.setTerritoireActif(idTerritoireActif);
}
}
......
......@@ -10,7 +10,7 @@ import '../../composants/diagnostic/chapitres/ChapitreTransformationDistribution
import '../../composants/diagnostic/chapitres/ChapitreConsommation.js';
import '../../composants/diagnostic/chapitres/MenuNavigationSections.js';
import '../commun/PageSablier.js';
import './PageDiagnosticVide.js';
import './PageDiagnosticAccueil.js';
import '../../composants/structure/PiedPage.js';
import {
......@@ -65,16 +65,21 @@ export class PageDiagnostic extends LitElement {
@query('c-entete') private entete!: Entete;
@query('c-menu-navigation-sections') private menuNavigationSections?: MenuNavigationSections;
@query('c-barre-navigation-echelle-territoriale') private barreNavigationEchelleTerritoriale!: BarreNavigationEchelleTerritoriale;
@query('c-barre-navigation-echelle-territoriale') private barreNavigationEchelleTerritoriale?: BarreNavigationEchelleTerritoriale;
@query('#coeur-de-page') private coeurDePage!: CoeurDePage;
willUpdate() {
if (this.idTerritoirePrincipal && this.rapport.getEtat() === EtatRapport.AUCUN_TERRITOIRE) {
this.rapport.setEtatChargementEnCours();
}
}
render() {
console.log('Render diagnostic', this.rapport.getEtat());
return html`
<header class="zone-entete-page-position-fixe masquer-dans-pdf">
<c-entete activerRechercheTerritoire afficherMenuDiagnostic></c-entete>
<c-barre-navigation-echelle-territoriale></c-barre-navigation-echelle-territoriale>
</header>
<main class="zone-scroll-principal" aria-live="off">${this.renderCoeurDePage(this.rapport)}</main>
<c-pied-page></c-pied-page>
......@@ -83,19 +88,27 @@ export class PageDiagnostic extends LitElement {
renderCoeurDePage(rapport: Rapport) {
switch (rapport.getEtat()) {
case EtatRapport.AUCUN_TERRITOIRE:
return html`<c-page-diagnostic-accueil></c-page-diagnostic-accueil>`;
case EtatRapport.CHARGEMENT_EN_COURS:
return html` <c-page-sablier></c-page-sablier>`;
return html`<c-page-sablier></c-page-sablier>`;
case EtatRapport.PRET:
return html`
<c-barre-navigation-echelle-territoriale
@selectionner=${(evt: Event) => {
this.actionModifierEchelleTerritoriale((<EvenementSelectionner>evt).detail.idItemSelectionne);
}}
></c-barre-navigation-echelle-territoriale>
${this.section === 'synthese'
? ``
: unsafeHTML(
`<c-menu-navigation-sections class="masquer-sur-desktop-petit masquer-dans-pdf" idSectionActive=${this.section}></c-menu-navigation-sections>`
)}
: html`<c-menu-navigation-sections
class="masquer-sur-desktop-petit masquer-dans-pdf"
idSectionActive=${this.section}
></c-menu-navigation-sections>`}
${unsafeHTML(`<${this.tagCoeurDePage} id="coeur-de-page" class="chapitreDiagnostic"></${this.tagCoeurDePage}>`)}
`;
case EtatRapport.ERREUR:
return html`<c-page-diagnostic-vide></c-page-diagnostic-vide>`;
return html`<c-page-diagnostic-accueil afficherErreur></c-page-diagnostic-accueil>`;
}
}
......@@ -105,6 +118,9 @@ export class PageDiagnostic extends LitElement {
updated() {
switch (this.rapport.getEtat()) {
case EtatRapport.AUCUN_TERRITOIRE:
this.rapport = new Rapport();
break;
case EtatRapport.CHARGEMENT_EN_COURS:
this.controleurDiagnostic
.chargerRapport(new Rapport(), this.idTerritoirePrincipal, this.idEchelleTerritoriale)
......@@ -120,7 +136,7 @@ export class PageDiagnostic extends LitElement {
categorieTerritoire: this.rapport.getHierarchieTerritoires()?.territoirePrincipal.categorie.libelleCategorieHtml,
maillons: SA.maillons
});
this.barreNavigationEchelleTerritoriale.maj({
this.barreNavigationEchelleTerritoriale?.maj({
boutons: this.rapport
.getHierarchieTerritoires()!
.getListeTerritoires()
......@@ -154,9 +170,6 @@ export class PageDiagnostic extends LitElement {
this.entete.addEventListener(IDS_EVENEMENTS.selectionnerTerritoire, (e: Event) =>
this.actionNouveauTerritoirePrincipal((<EvenementSelectionnerTerritoire>e).detail.idTerritoireCrater)
);
this.barreNavigationEchelleTerritoriale?.addEventListener(IDS_EVENEMENTS.selectionner, (evt: Event) => {
this.actionModifierEchelleTerritoriale((<EvenementSelectionner>evt).detail.idItemSelectionne);
});
document.addEventListener(IDS_EVENEMENTS.exporter, (event: Event) => {
this.actionExporter((<CustomEvent>event).detail.type);
});
......
import '@lga/commun/build/composants/champ-recherche-territoire/ChampRechercheTerritoire.js';
import '../../composants/structure/Entete.js';
import '../../composants/structure/PiedPage.js';
import { EvenementNaviguer, EvenementSelectionnerTerritoire, 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, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { genererLienPageDiagnostic } from '../commun/pages-utils';
import diagnosticRawCss from './diagnostic.css';
@customElement('c-page-diagnostic-accueil')
export class PageDiagnosticAccueil extends LitElement {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
css`
main {
height: var(--hauteur-totale-hors-entete);
padding-top: 5rem;
background-color: var(--c-background);
}
h1 {
font-size: var(--title0);
}
#message-erreur {
text-align: center;
padding: 0.2rem;
margin: auto;
margin-bottom: 5rem;
background-color: var(--c-warning-c);
border-radius: 10px;
max-width: 800px;
}
#message-erreur h1 {
padding: 0.2rem;
}
#recherche {
text-align: center;
}
`
];
@property()
idElementCibleScroll = '';
@property({ type: Boolean })
afficherErreur = false;
render() {
return html`
<main class="zone-scroll-principal">
${unsafeHTML(
!this.afficherErreur
? `<h1 class="text-center padding-2">Découvrez le diagnostic alimentaire de votre territoire !</h1>`
: `<div id="message-erreur">
<h1 class="text-center padding-2">Territoire inconnu...</h1>
<p>
Il peut s'agir d'une erreur de saisie dans le nom ou le code du territoire dans l'URL, ou bien d'une indisponibilité
temporaire du serveur.
<br>Merci de vérifier votre saisie et d'essayer à nouveau dans quelques secondes ou de refaire une recherche.
<br/>Si le problème persiste, vous pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>`
)}
<div id="recherche">
<c-champ-recherche-territoire data-cy="champ-recherche-territoire"></c-champ-recherche-territoire>
</div>
</main>
`;
}
protected firstUpdated() {
document.addEventListener(IDS_EVENEMENTS.selectionnerTerritoire, (evt: Event) => {
this.dispatchEvent(new EvenementNaviguer(genererLienPageDiagnostic((<EvenementSelectionnerTerritoire>evt).detail.idTerritoireCrater)));
});
}
}
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { html, LitElement, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import diagnosticRawCss from './diagnostic.css';
@customElement('c-page-diagnostic-vide')
export class PageDiagnosticVide extends LitElement {
static styles = [unsafeCSS(baseRawCss), unsafeCSS(diagnosticRawCss)];
render() {
return html`
<main id="diagnostic__contenu-rapport__vide">
<div>
<h2>Données manquantes</h2>
<p>
Il peut s'agir d'une erreur de saisie dans le nom ou le code du territoire dans l'URL, ou bien d'une indisponibilité
temporaire du serveur.
<br />Merci de vérifier votre saisie, et d'essayer à nouveau dans quelques secondes. <br />Si le problème persiste, vous
pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>
</main>
`;
}
}
......@@ -5,7 +5,7 @@
:root {
--hauteur-barre-navigation-echelle-territoriale: 55px;
/* Redéfinition de la hauteur de l'entete qui est différente de celle par défaut définie dans base.css */
--hauteur-totale-entete: calc(var(--hauteur-entete) + var(--hauteur-barre-navigation-echelle-territoriale));
--hauteur-totale-hors-entete: calc(100vh - var(--hauteur-totale-entete));
color: var(--c-texte-base);
}
......@@ -66,7 +66,7 @@ article ul {
--------------------------------------*/
main {
margin-top: var(--hauteur-totale-entete);
margin-top: var(--hauteur-entete);
}
main.visible {
......@@ -422,7 +422,7 @@ summary {
}
:root {
--hauteur-totale-entete: 0rem;
--hauteur-entete: 0rem;
}
p {
......
......@@ -67,6 +67,10 @@ a:hover {
/* Jeux de couleurs mode clair */
/* Rq : nouveau jeux de couleurs en vue de la mise en place des différents modes clairs/sombre/accessible */
/* Convention : variables prefixees par 'c' (pour couleur) */
--c-warning-c: #F8DFA6;
--c-background: #e1e4ea;
--transparent: rgba(0, 0, 0, 0);
--blanc: #ffffff;
--noir: #000000;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment