Skip to content
Snippets Groups Projects
Commit 967d8767 authored by CANÉVET Cindy's avatar CANÉVET Cindy
Browse files

refactor: :lipstick: Improve details pages structure

parent 9df0efe1
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1581 additions and 1560 deletions
src/app/views/protected/suivis/detail-suivi/main-content/documents-pdf/documents-pdf.component.ts
+ 289
− 287
View file @ 967d8767
...@@ -40,306 +40,308 @@ import { StatisticType } from '../model/statistic-type.enums'; ...@@ -40,306 +40,308 @@ import { StatisticType } from '../model/statistic-type.enums';
FormsModule, FormsModule,
], ],
template: ` template: `
@if (this.websiteResourcesDetails(); as websiteResourcesDetails) { <div class="fr-col-12 fr-py-12v">
<div class="fr-grid-row"> @if (this.websiteResourcesDetails(); as websiteResourcesDetails) {
<div class="fr-col-12"> <div class="fr-grid-row">
<h2 class="fr-my-2w">Documents PDF</h2> <div class="fr-col-12">
</div> <h2 class="fr-my-2w">Documents PDF</h2>
<div class="fr-col-12 fr-col-lg-8"> </div>
<p> <div class="fr-col-12 fr-col-lg-8">
Les fichiers PDF (Portable Document Format) accompagnent parfois les <p>
articles web, en tant que liens ou pièces jointes pour compléter les Les fichiers PDF (Portable Document Format) accompagnent parfois les
propos, faciliter les présentations et les échanges de contenus. Ils articles web, en tant que liens ou pièces jointes pour compléter les
peuvent être consultables depuis le navigateur, et le plus souvent, propos, faciliter les présentations et les échanges de contenus. Ils
proposés au téléchargement, avec une notion de poids conséquente. peuvent être consultables depuis le navigateur, et le plus souvent,
</p> proposés au téléchargement, avec une notion de poids conséquente.
</div> </p>
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1"> </div>
<misis-download <div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1">
fileSuffix="Documents PDF" <misis-download
[data]="websiteResourcesDetails.resourceDetailDtos!" fileSuffix="Documents PDF"
/> [data]="websiteResourcesDetails.resourceDetailDtos!"
</div> />
</div>
<div class="fr-tabs"> <div class="fr-tabs">
<ul <ul
class="fr-tabs__list" class="fr-tabs__list"
role="tablist" role="tablist"
aria-label="[A modifier | nom du système d'onglet]" aria-label="[A modifier | nom du système d'onglet]"
> >
<li role="presentation"> <li role="presentation">
<button <button
id="tabpanel-404" id="tabpanel-404"
class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left" class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left"
tabindex="0" tabindex="0"
role="tab" role="tab"
aria-selected="true" aria-selected="true"
aria-controls="tabpanel-404-panel" aria-controls="tabpanel-404-panel"
> >
Graphique Graphique
</button> </button>
</li> </li>
<li role="presentation"> <li role="presentation">
<button <button
id="tabpanel-405" id="tabpanel-405"
class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left" class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left"
tabindex="-1" tabindex="-1"
role="tab" role="tab"
aria-selected="false" aria-selected="false"
aria-controls="tabpanel-405-panel" aria-controls="tabpanel-405-panel"
> >
Liste des documents Liste des documents
</button> </button>
</li> </li>
</ul> </ul>
<div <div
id="tabpanel-404-panel" id="tabpanel-404-panel"
class="fr-tabs__panel fr-tabs__panel--selected" class="fr-tabs__panel fr-tabs__panel--selected"
role="tabpanel" role="tabpanel"
aria-labelledby="tabpanel-404" aria-labelledby="tabpanel-404"
tabindex="0" tabindex="0"
> >
<div class="fr-col-12"> <div class="fr-col-12">
@if (statistics$ | async; as stats) { @if @if (statistics$ | async; as stats) { @if
(websiteResourcesDetails.resourceDetailDtos && (websiteResourcesDetails.resourceDetailDtos &&
websiteResourcesDetails.resourceDetailDtos.length == 0) { websiteResourcesDetails.resourceDetailDtos.length == 0) {
<misis-loading-alert <misis-loading-alert
[text]="AlertType.NO_DATA.text" [text]="AlertType.NO_DATA.text"
[class]="AlertType.NO_DATA.class" [class]="AlertType.NO_DATA.class"
/> />
} @else if (stats.labels!.length == 0) { } @else if (stats.labels!.length == 0) {
<misis-loading-alert <misis-loading-alert
[text]="AlertType.FIRST_ANALYZIS.text" [text]="AlertType.FIRST_ANALYZIS.text"
[class]="AlertType.FIRST_ANALYZIS.class" [class]="AlertType.FIRST_ANALYZIS.class"
/> />
} @else { } @else {
<misis-line-chart <misis-line-chart
[unit]="ChartsUnit.DAY" [unit]="ChartsUnit.DAY"
[data]="stats" [data]="stats"
[lineStyle]="[ [lineStyle]="[
LineStyle.dashedBlue, LineStyle.dashedBlue,
LineStyle.dashedGreen, LineStyle.dashedGreen,
LineStyle.pink LineStyle.pink
]" ]"
[enableDateSelector]="true" [enableDateSelector]="true"
[dataType]="DataType.BYTE" [dataType]="DataType.BYTE"
[title]="title" [title]="title"
[subtitle]="subtitle" [subtitle]="subtitle"
/> />
} } @else { } } @else {
<misis-loading-alert <misis-loading-alert
[text]="AlertType.NO_DATA.text" [text]="AlertType.NO_DATA.text"
[class]="AlertType.NO_DATA.class" [class]="AlertType.NO_DATA.class"
/> />
} }
</div> </div>
<div class="fr-col-12"> <div class="fr-col-12">
<h3 class="fr-my-2w">Comment réduire le poids des documents PDF</h3> <h3 class="fr-my-2w">Comment réduire le poids des documents PDF</h3>
<p> <p>
Pour réduire le poids d'un document PDF, il y a la possibilité de Pour réduire le poids d'un document PDF, il y a la possibilité de
recourir à l'outil gratuit de compression en ligne d'Adobe recourir à l'outil gratuit de compression en ligne d'Adobe
Acrobat. Celui-ci peut compresser des fichiers PDF pesant jusqu’à Acrobat. Celui-ci peut compresser des fichiers PDF pesant jusqu’à
2 Go. 2 Go.
</p> </p>
<p> <p>
L’outil de compression de PDF permet de compresser les fichiers L’outil de compression de PDF permet de compresser les fichiers
volumineux de ce format directement dans le navigateur, ainsi que volumineux de ce format directement dans le navigateur, ainsi que
de définir une taille de fichier optimale qui ne nuira pas à la de définir une taille de fichier optimale qui ne nuira pas à la
qualité de vos images, polices et autres contenus. qualité de vos images, polices et autres contenus.
</p> </p>
<a <a
href="https://www.adobe.com/fr/acrobat/online/compress-pdf.html" href="https://www.adobe.com/fr/acrobat/online/compress-pdf.html"
target="_blank" target="_blank"
title="Outil de compression en ligne d'Adobe Acrobat (gratuit) - nouvelle fenêtre" title="Outil de compression en ligne d'Adobe Acrobat (gratuit) - nouvelle fenêtre"
>Outil de compression en ligne d'Adobe Acrobat (gratuit)</a >Outil de compression en ligne d'Adobe Acrobat (gratuit)</a
> >
</div>
</div> </div>
</div> <div
<div id="tabpanel-405-panel"
id="tabpanel-405-panel" class="fr-tabs__panel"
class="fr-tabs__panel" role="tabpanel"
role="tabpanel" aria-labelledby="tabpanel-405"
aria-labelledby="tabpanel-405" tabindex="0"
tabindex="0" >
> <div class="fr-table fr-col-12">
<div class="fr-table fr-col-12"> <div class="fr-table__wrapper">
<div class="fr-table__wrapper"> <div class="fr-table__container">
<div class="fr-table__container"> <div class="fr-table__content">
<div class="fr-table__content"> <table class="fr-cell--multiline">
<table class="fr-cell--multiline"> <caption>
<caption> Liste des documents PDF
Liste des documents PDF </caption>
</caption> <thead>
<thead> <tr>
<tr> <th scope="col">Nom du document</th>
<th scope="col">Nom du document</th> <th scope="col">Lien de la page</th>
<th scope="col">Lien de la page</th> <th scope="col" class="fr-cell--right">Poids</th>
<th scope="col" class="fr-cell--right">Poids</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> @for (pdf of filteredDetailsDto(); track pdf.url) {
@for (pdf of filteredDetailsDto(); track pdf.url) { <tr>
<tr> <td>
<td> <a
<a [href]="pdf.url"
[href]="pdf.url" target="_blank"
target="_blank" class="fr-link"
class="fr-link" title="{{ pdf.filename }} - nouvelle fenêtre"
title="{{ pdf.filename }} - nouvelle fenêtre" >{{ pdf.filename }}</a
>{{ pdf.filename }}</a >
> </td>
</td> <td>
<td> <a
<a [href]="pdf.pageUrl"
[href]="pdf.pageUrl" target="_blank"
target="_blank" class="fr-link"
class="fr-link" title="Page contenant le document - nouvelle fenêtre"
title="Page contenant le document - nouvelle fenêtre" >{{ pdf.pageUrl }}</a
>{{ pdf.pageUrl }}</a >
> </td>
</td> <td class="fr-cell--right">
<td class="fr-cell--right"> {{ pdf.sizeInBytes! | convertBytesTo : 'MB' }}
{{ pdf.sizeInBytes! | convertBytesTo : 'MB' }} </td>
</td> </tr>
</tr> } @empty {
} @empty { <tr>
<tr> <td colspan="3">Aucun document PDF n'a été trouvé.</td>
<td colspan="3">Aucun document PDF n'a été trouvé.</td> </tr>
</tr> }
} </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</div> </div>
</div> <div class="fr-table__footer">
<div class="fr-table__footer"> <div class="fr-table__footer--start">
<div class="fr-table__footer--start"> <p class="fr-table__detail">
<p class="fr-table__detail"> {{ websiteResourcesDetails?.resourceDetailDtos?.length }}
{{ websiteResourcesDetails?.resourceDetailDtos?.length }} lignes
lignes </p>
</p> <div class="fr-select-group">
<div class="fr-select-group"> <label
<label class="fr-sr-only fr-label"
class="fr-sr-only fr-label" for="table-footer-select-7847"
for="table-footer-select-7847" >
>
Nombre de lignes par page
</label>
<select
class="fr-select"
aria-describedby="table-footer-select-7847-messages"
id="table-footer-select-7847"
name="table-footer-select-7847"
[(ngModel)]="pageSize"
(change)="setPageIndex(1, $event)"
>
<option value="" selected disabled hidden>
Nombre de lignes par page Nombre de lignes par page
</option> </label>
<option value="20">20 lignes par page</option> <select
<option value="25">25 lignes par page</option> class="fr-select"
<option value="30">30 lignes par page</option> aria-describedby="table-footer-select-7847-messages"
</select> id="table-footer-select-7847"
<div name="table-footer-select-7847"
class="fr-messages-group" [(ngModel)]="pageSize"
id="table-footer-select-7847-messages" (change)="setPageIndex(1, $event)"
aria-live="polite" >
></div> <option value="" selected disabled hidden>
Nombre de lignes par page
</option>
<option value="20">20 lignes par page</option>
<option value="25">25 lignes par page</option>
<option value="30">30 lignes par page</option>
</select>
<div
class="fr-messages-group"
id="table-footer-select-7847-messages"
aria-live="polite"
></div>
</div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> } @else {
} @else { <div class="fr-grid-row">
<div class="fr-grid-row"> <div class="fr-col">
<div class="fr-col"> <misis-loading-alert
<misis-loading-alert [text]="AlertType.LOADING.text"
[text]="AlertType.LOADING.text" [class]="AlertType.LOADING.class"
[class]="AlertType.LOADING.class" />
/> </div>
</div> </div>
}
</div> </div>
}
`, `,
styles: ``, styles: ``,
}) })
......
src/app/views/protected/suivis/detail-suivi/main-content/donnees-transferees/donnees-transferees.component.ts
+ 89
− 87
View file @ 967d8767
...@@ -25,96 +25,98 @@ import { DataService } from '../../../../../../core/service/data.service'; ...@@ -25,96 +25,98 @@ import { DataService } from '../../../../../../core/service/data.service';
DownloadComponent, DownloadComponent,
], ],
template: ` template: `
@if (this.statistics$ | async; as stats) { <div class="fr-col-12 fr-py-12v">
<div class="fr-grid-row"> @if (this.statistics$ | async; as stats) {
<div class="fr-col-12"> <div class="fr-grid-row">
<h2 class="fr-my-2w">Données transférées</h2> <div class="fr-col-12">
<h2 class="fr-my-2w">Données transférées</h2>
</div>
<div class="fr-col-12 fr-col-lg-8">
<p>
Une partie de l’empreinte énergétique des services numériques est liée
à la volumétrie des données échangées sur les réseaux.
</p>
</div>
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1">
<misis-download
fileSuffix="Données transférées"
[data]="stats.datasets"
/>
</div>
<div class="fr-col-12">
@if (stats.datasets!.length == 0) {
<misis-loading-alert
[text]="AlertType.FIRST_ANALYZIS.text"
[class]="AlertType.FIRST_ANALYZIS.class"
/>
}
<misis-line-chart
[unit]="ChartsUnit.DAY"
[data]="stats"
[enableDateSelector]="true"
[lineStyle]="[
LineStyle.dashedBlue,
LineStyle.dashedGreen,
LineStyle.pink
]"
[dataType]="DataType.BYTE"
[title]="title"
[subtitle]="subtitle"
/>
</div>
<div class="fr-col-12">
<h3 class="fr-my-2w">
Comment réduire l'impact des données transférées
</h3>
<p>Voici quelques conseils pour réduire le flux de données :</p>
<ul>
<li>Réduire le poids des contenus hébergés sur les serveurs.</li>
<li>Mettre en cache les données.</li>
<li>
Optimiser les flux en limitant les données au strict nécessaire et
en les compressant.
</li>
<li>
Réduire la qualité des vidéos, proposer des contenus audio si cela
est pertinent.
</li>
<li>
Développer le service numérique de telle manière qu'il ne provoque
pas le visionnage automatique de vidéos.
</li>
<li>
Réduire la volumétrie des données pour le service en évitant de
réaliser des requêtes client/serveur inutiles.
</li>
<li>
Réduire les appels à des API, scripts, librairies ou polices de
caractères tiers.
</li>
</ul>
<p>
Pour aller plus loin :
<a
href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf"
target="_blank"
title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre"
>
Référentiel Général de l'Écoconception des Services Numériques
(RGESN) - Mai 2024 (PDF)
</a>
</p>
</div>
</div> </div>
<div class="fr-col-12 fr-col-lg-8"> } @else {
<p> <div class="fr-grid-row">
Une partie de l’empreinte énergétique des services numériques est liée <div class="fr-col">
à la volumétrie des données échangées sur les réseaux. <misis-loading-alert
</p> [text]="AlertType.LOADING.text"
</div> [class]="AlertType.LOADING.class"
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1"> />
<misis-download </div>
fileSuffix="Données transférées"
[data]="stats.datasets"
/>
</div>
<div class="fr-col-12">
@if (stats.datasets!.length == 0) {
<misis-loading-alert
[text]="AlertType.FIRST_ANALYZIS.text"
[class]="AlertType.FIRST_ANALYZIS.class"
/>
}
<misis-line-chart
[unit]="ChartsUnit.DAY"
[data]="stats"
[enableDateSelector]="true"
[lineStyle]="[
LineStyle.dashedBlue,
LineStyle.dashedGreen,
LineStyle.pink
]"
[dataType]="DataType.BYTE"
[title]="title"
[subtitle]="subtitle"
/>
</div>
<div class="fr-col-12">
<h3 class="fr-my-2w">
Comment réduire l'impact des données transférées
</h3>
<p>Voici quelques conseils pour réduire le flux de données :</p>
<ul>
<li>Réduire le poids des contenus hébergés sur les serveurs.</li>
<li>Mettre en cache les données.</li>
<li>
Optimiser les flux en limitant les données au strict nécessaire et
en les compressant.
</li>
<li>
Réduire la qualité des vidéos, proposer des contenus audio si cela
est pertinent.
</li>
<li>
Développer le service numérique de telle manière qu'il ne provoque
pas le visionnage automatique de vidéos.
</li>
<li>
Réduire la volumétrie des données pour le service en évitant de
réaliser des requêtes client/serveur inutiles.
</li>
<li>
Réduire les appels à des API, scripts, librairies ou polices de
caractères tiers.
</li>
</ul>
<p>
Pour aller plus loin :
<a
href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf"
target="_blank"
title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre"
>
Référentiel Général de l'Écoconception des Services Numériques
(RGESN) - Mai 2024 (PDF)
</a>
</p>
</div>
</div>
} @else {
<div class="fr-grid-row">
<div class="fr-col">
<misis-loading-alert
[text]="AlertType.LOADING.text"
[class]="AlertType.LOADING.class"
/>
</div> </div>
}
</div> </div>
}
`, `,
styles: ``, styles: ``,
}) })
......
src/app/views/protected/suivis/detail-suivi/main-content/elements-dom/elements-dom.component.ts
+ 58
− 56
View file @ 967d8767
...@@ -27,67 +27,69 @@ import { StatisticType } from '../model/statistic-type.enums'; ...@@ -27,67 +27,69 @@ import { StatisticType } from '../model/statistic-type.enums';
DownloadComponent DownloadComponent
], ],
template: ` template: `
<h2 class="fr-my-2w">Nombre d'éléments du DOM</h2> <div class="fr-col-12 fr-py-12v">
<div> <h2 class="fr-my-2w">Nombre d'éléments du DOM</h2>
<div class="fr-editor"> <div>
<div class="fr-grid-row"> <div class="fr-editor">
<div class="fr-col-12 fr-col-lg-8"> <div class="fr-grid-row">
<p> <div class="fr-col-12 fr-col-lg-8">
Le DOM (Document Object Model) représente de manière structurée la page web. Il hiérarchise le contenu sous forme d'arborescence, composée de nœuds qui définissent les différents éléments de l'interface. <p>
<br />Ces éléments peuvent avoir un impact de par leur taille ou leur nombre. Le DOM (Document Object Model) représente de manière structurée la page web. Il hiérarchise le contenu sous forme d'arborescence, composée de nœuds qui définissent les différents éléments de l'interface.
</p> <br />Ces éléments peuvent avoir un impact de par leur taille ou leur nombre.
</div> </p>
@if (this.statistics$ | async; as statisticsDto) {
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1">
<misis-download fileSuffix="Nombre d'éléments du DOM" [data]="statisticsDto.datasets"/>
</div> </div>
@if (this.statistics$ | async; as statisticsDto) {
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1">
<misis-download fileSuffix="Nombre d'éléments du DOM" [data]="statisticsDto.datasets"/>
</div>
}
</div>
@if (this.statistics$ | async; as stats) {
@if (stats.datasets!.length == 0) {
<misis-loading-alert [text]="AlertType.FIRST_ANALYZIS.text" [class]="AlertType.FIRST_ANALYZIS.class" />
}
<misis-line-chart
[unit]="ChartsUnit.DAY"
[data]="stats"
[enableDateSelector]="true"
[lineStyle]="[LineStyle.dashedBlue, LineStyle.dashedGreen, LineStyle.pink]"
[dataType]="DataType.NUMBER"
[title]="title"
[subtitle]="subtitle"
/>
} @else {
<misis-loading-alert [text]="AlertType.LOADING.text" [class]="AlertType.LOADING.class" />
} }
</div> <div class="fr-grid-row">
@if (this.statistics$ | async; as stats) { <div class="fr-col">
@if (stats.datasets!.length == 0) { <h3 class="fr-my-2w">Comment réduire le nombre d'éléments du DOM</h3>
<misis-loading-alert [text]="AlertType.FIRST_ANALYZIS.text" [class]="AlertType.FIRST_ANALYZIS.class" /> </div>
}
<misis-line-chart
[unit]="ChartsUnit.DAY"
[data]="stats"
[enableDateSelector]="true"
[lineStyle]="[LineStyle.dashedBlue, LineStyle.dashedGreen, LineStyle.pink]"
[dataType]="DataType.NUMBER"
[title]="title"
[subtitle]="subtitle"
/>
} @else {
<misis-loading-alert [text]="AlertType.LOADING.text" [class]="AlertType.LOADING.class" />
}
<div class="fr-grid-row">
<div class="fr-col">
<h3 class="fr-my-2w">Comment réduire le nombre d'éléments du DOM</h3>
</div> </div>
</div> <div class="fr-grid-row">
<div class="fr-grid-row"> <div class="fr-col">
<div class="fr-col"> <p>
<p> Voici quelques conseils pour réduire l'impact de la structure DOM :
Voici quelques conseils pour réduire l'impact de la structure DOM : </p>
</p> </div>
</div> </div>
</div> <ul>
<ul> <li>Éviter une structure trop complexe.</li>
<li>Éviter une structure trop complexe.</li> <li>Réduire le nombre d'éléments du DOM ou le nombre d'éléments imbriqués (profondeur de l'arborescence).</li>
<li>Réduire le nombre d'éléments du DOM ou le nombre d'éléments imbriqués (profondeur de l'arborescence).</li> <li>Supprimer ou limiter les éléments cachés.</li>
<li>Supprimer ou limiter les éléments cachés.</li> <li>Veiller au nombre de pugins ajoutant des blocs d'éléments.</li>
<li>Veiller au nombre de pugins ajoutant des blocs d'éléments.</li> <li>Répartir les informations sur plusieurs pages si cela est pertinent afin d'avoir des interfaces individuelles plus légères.</li>
<li>Répartir les informations sur plusieurs pages si cela est pertinent afin d'avoir des interfaces individuelles plus légères.</li> </ul>
</ul> <div class="fr-grid-row">
<div class="fr-grid-row"> <div class="fr-col">
<div class="fr-col"> <p>
<p> Pour aller plus loin :
Pour aller plus loin : </p>
</p> </div>
</div> </div>
</div> <div class="fr-grid-row">
<div class="fr-grid-row"> <div class="fr-col">
<div class="fr-col"> <a href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf" target="_blank" title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre">Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF)</a>
<a href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf" target="_blank" title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre">Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF)</a> </div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/views/protected/suivis/detail-suivi/main-content/liste-des-pages/liste-des-pages.component.ts
+ 217
− 215
View file @ 967d8767
...@@ -31,235 +31,237 @@ import { ConvertBytesToPipe } from '../../../../../../shared/pipes/convert-bytes ...@@ -31,235 +31,237 @@ import { ConvertBytesToPipe } from '../../../../../../shared/pipes/convert-bytes
FormsModule FormsModule
], ],
template: ` template: `
@if (websiteDetailsDto(); as website) { <div class="fr-col-12 fr-py-12v">
@if (websiteDetailsDto(); as website) {
<div class="fr-grid-row">
<div class="fr-col">
<h2 class="fr-my-2w">Liste des pages</h2>
</div>
</div>
<div class="fr-grid-row"> <div class="fr-grid-row">
<div class="fr-col"> <div class="fr-col-md-8">
<h2 class="fr-my-2w">Liste des pages</h2> <p>
Les résultats de la dernière analyse représentent le poids des données
transférées et décodées au chargement de la page, ainsi que le nombre
de requêtes identifiées sur un affichage, et enfin le nombre
d'éléments du DOM qui constituent son interface.
</p>
</div>
<div class="fr-col-md-3 fr-col-offset-md-1">
<misis-download
fileSuffix="Liste des pages"
[data]="website.pageDetailDtos"
/>
</div> </div>
</div> </div>
<div class="fr-grid-row"> <div class="fr-grid-row">
<div class="fr-col-md-8"> <div class="fr-col-12">
<p> <div class="fr-table--lg fr-table">
Les résultats de la dernière analyse représentent le poids des données <div class="fr-table__wrapper">
transférées et décodées au chargement de la page, ainsi que le nombre <div class="fr-table__container">
de requêtes identifiées sur un affichage, et enfin le nombre <div class="fr-table__content">
d'éléments du DOM qui constituent son interface. <table class="fr-cell--multiline">
</p> <caption [hidden]="true">
</div> Pages du groupe
<div class="fr-col-md-3 fr-col-offset-md-1"> </caption>
<misis-download <thead>
fileSuffix="Liste des pages" <tr>
[data]="website.pageDetailDtos" <th scope="col">Lien de la page</th>
/> <th scope="col" class="fr-cell--right">
</div> Données transférées
</div> </th>
<div class="fr-grid-row"> <th scope="col" class="fr-cell--right">
<div class="fr-col-12"> Données décodées
<div class="fr-table--lg fr-table"> </th>
<div class="fr-table__wrapper"> <th scope="col" class="fr-cell--right">Requêtes</th>
<div class="fr-table__container"> <th scope="col" class="fr-cell--right">
<div class="fr-table__content"> Nombre d'éléments du DOM
<table class="fr-cell--multiline"> </th>
<caption [hidden]="true"> <th scope="col" class="fr-cell--right">Statut</th>
Pages du groupe </tr>
</caption> </thead>
<thead> <tbody>
<tr> @for (page of filteredPageDetailsDto(); track page.url) {
<th scope="col">Lien de la page</th> <tr>
<th scope="col" class="fr-cell--right"> <td>
Données transférées <a
</th> [href]="page.url"
<th scope="col" class="fr-cell--right"> target="_blank"
Données décodées class="fr-link"
</th> title="Accéder à la page - nouvelle fenêtre"
<th scope="col" class="fr-cell--right">Requêtes</th> [class.fr-ellipsis]="!page.title"
<th scope="col" class="fr-cell--right"> [class.link-ellipsis]="!page.title"
Nombre d'éléments du DOM >
</th> {{ page.title ? page.title : page.url }}
<th scope="col" class="fr-cell--right">Statut</th> </a>
</tr> </td>
</thead> <td class="fr-cell--right">
<tbody> {{
@for (page of filteredPageDetailsDto(); track page.url) { page.dataTransferedInBytes! | convertBytesTo : 'MB'
<tr> }}
<td> </td>
<a <td class="fr-cell--right">
[href]="page.url" {{ page.dataDecodedInBytes! | convertBytesTo : 'MB' }}
target="_blank" </td>
class="fr-link" <td class="fr-cell--right">
title="Accéder à la page - nouvelle fenêtre" {{ page.httpRequestsCount }}
[class.fr-ellipsis]="!page.title" </td>
[class.link-ellipsis]="!page.title" <td class="fr-cell--right">
> {{ page.domElementsCount }}
{{ page.title ? page.title : page.url }} </td>
</a> <td class="fr-cell--right">
</td> @switch (page.analyseStatut) { @case
<td class="fr-cell--right"> (AnalyseStatut.ERREUR_PAGE_302) { La page est redirigée
{{ (302) } @case (AnalyseStatut.ERREUR_PAGE_404) { La page
page.dataTransferedInBytes! | convertBytesTo : 'MB' est introuvable (404) } @case
}} (AnalyseStatut.ERREUR_PAGE_500) { La page contient une
</td> erreur interne (500) } @case (AnalyseStatut.INVALIDE) {
<td class="fr-cell--right"> Une erreur est survenue lors de l’analyse. Veuillez
{{ page.dataDecodedInBytes! | convertBytesTo : 'MB' }} contacter l’administrateur de MISIS } @case
</td> (AnalyseStatut.ERREUR_URL_NON_RESOLUE) { Une erreur est
<td class="fr-cell--right"> survenue en raison du nom de domaine de suivi du site }
{{ page.httpRequestsCount }} @case (AnalyseStatut.ERREUR_URL_MALFORMEE ||
</td> AnalyseStatut.ERREUR_URL_VIDE) { Une erreur est survenue
<td class="fr-cell--right"> en raison du format de l’URL } @case
{{ page.domElementsCount }} (AnalyseStatut.NOUVEAU) { En file d’attente pour la
</td> première analyse } @case (AnalyseStatut.TERMINEE) {
<td class="fr-cell--right"> Terminée } }
@switch (page.analyseStatut) { @case </td>
(AnalyseStatut.ERREUR_PAGE_302) { La page est redirigée </tr>
(302) } @case (AnalyseStatut.ERREUR_PAGE_404) { La page }
est introuvable (404) } @case </tbody>
(AnalyseStatut.ERREUR_PAGE_500) { La page contient une </table>
erreur interne (500) } @case (AnalyseStatut.INVALIDE) { </div>
Une erreur est survenue lors de l’analyse. Veuillez
contacter l’administrateur de MISIS } @case
(AnalyseStatut.ERREUR_URL_NON_RESOLUE) { Une erreur est
survenue en raison du nom de domaine de suivi du site }
@case (AnalyseStatut.ERREUR_URL_MALFORMEE ||
AnalyseStatut.ERREUR_URL_VIDE) { Une erreur est survenue
en raison du format de l’URL } @case
(AnalyseStatut.NOUVEAU) { En file d’attente pour la
première analyse } @case (AnalyseStatut.TERMINEE) {
Terminée } }
</td>
</tr>
}
</tbody>
</table>
</div> </div>
</div> </div>
</div> <div class="fr-table__footer">
<div class="fr-table__footer"> <div class="fr-table__footer--start">
<div class="fr-table__footer--start"> <p class="fr-table__detail">
<p class="fr-table__detail"> {{ websiteDetailsDto()?.pageDetailDtos?.length }} lignes
{{ websiteDetailsDto()?.pageDetailDtos?.length }} lignes </p>
</p> <div class="fr-select-group">
<div class="fr-select-group"> <label
<label class="fr-sr-only fr-label"
class="fr-sr-only fr-label" for="table-footer-select-7847"
for="table-footer-select-7847" >
>
Nombre de lignes par page
</label>
<select
class="fr-select"
aria-describedby="table-footer-select-7847-messages"
id="table-footer-select-7847"
name="table-footer-select-7847"
[(ngModel)]="pageSize"
(change)="setPageIndex(1, $event)"
>
<option value="" selected disabled hidden>
Nombre de lignes par page Nombre de lignes par page
</option> </label>
<option value="20">20 lignes par page</option> <select
<option value="25">25 lignes par page</option> class="fr-select"
<option value="30">30 lignes par page</option> aria-describedby="table-footer-select-7847-messages"
</select> id="table-footer-select-7847"
<div name="table-footer-select-7847"
class="fr-messages-group" [(ngModel)]="pageSize"
id="table-footer-select-7847-messages" (change)="setPageIndex(1, $event)"
aria-live="polite" >
></div> <option value="" selected disabled hidden>
Nombre de lignes par page
</option>
<option value="20">20 lignes par page</option>
<option value="25">25 lignes par page</option>
<option value="30">30 lignes par page</option>
</select>
<div
class="fr-messages-group"
id="table-footer-select-7847-messages"
aria-live="polite"
></div>
</div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
} @else { } @else {
<div class="fr-grid-row"> <div class="fr-grid-row">
<div class="fr-col"> <div class="fr-col">
<misis-loading-alert <misis-loading-alert
[text]="AlertType.LOADING.text" [text]="AlertType.LOADING.text"
[class]="AlertType.LOADING.class" [class]="AlertType.LOADING.class"
/> />
</div>
</div> </div>
}
</div> </div>
}
`, `,
styles: ``, styles: ``,
}) })
......
src/app/views/protected/suivis/detail-suivi/main-content/requetes/requetes.component.ts
+ 81
− 79
View file @ 967d8767
...@@ -26,87 +26,89 @@ import { StatisticType } from '../model/statistic-type.enums'; ...@@ -26,87 +26,89 @@ import { StatisticType } from '../model/statistic-type.enums';
DownloadComponent, DownloadComponent,
], ],
template: ` template: `
@if (this.statistics$ | async; as stats) { <div class="fr-col-12 fr-py-12v">
<div class="fr-grid-row"> @if (this.statistics$ | async; as stats) {
<div class="fr-col-12"> <div class="fr-grid-row">
<h2 class="fr-my-2w">Nombre de requêtes</h2> <div class="fr-col-12">
</div> <h2 class="fr-my-2w">Nombre de requêtes</h2>
<div class="fr-col-12 fr-col-lg-8"> </div>
<p> <div class="fr-col-12 fr-col-lg-8">
Les requêtes représentent les demandes que l'utilisateur, via le <p>
navigateur, envoie au serveur afin de réaliser différentes actions : Les requêtes représentent les demandes que l'utilisateur, via le
afficher des informations ou des ressources spécifiques, envoyer un navigateur, envoie au serveur afin de réaliser différentes actions :
formulaire, ... afficher des informations ou des ressources spécifiques, envoyer un
</p> formulaire, ...
<p> </p>
Ici sont prises en compte les requêtes effectuées au chargement de la <p>
page analysée. Ici sont prises en compte les requêtes effectuées au chargement de la
</p> page analysée.
</div> </p>
<div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1"> </div>
<misis-download <div class="fr-col-12 fr-col-lg-3 fr-col-offset-lg-1">
fileSuffix="Nombre de requêtes" <misis-download
[data]="stats.datasets" fileSuffix="Nombre de requêtes"
/> [data]="stats.datasets"
</div> />
<div class="fr-col-12"> </div>
@if (stats.datasets!.length == 0) { <div class="fr-col-12">
<misis-loading-alert @if (stats.datasets!.length == 0) {
[text]="AlertType.FIRST_ANALYZIS.text" <misis-loading-alert
[class]="AlertType.FIRST_ANALYZIS.class" [text]="AlertType.FIRST_ANALYZIS.text"
/> [class]="AlertType.FIRST_ANALYZIS.class"
} />
<misis-line-chart }
[unit]="ChartsUnit.DAY" <misis-line-chart
[data]="stats" [unit]="ChartsUnit.DAY"
[enableDateSelector]="true" [data]="stats"
[lineStyle]="[ [enableDateSelector]="true"
LineStyle.dashedBlue, [lineStyle]="[
LineStyle.dashedGreen, LineStyle.dashedBlue,
LineStyle.pink LineStyle.dashedGreen,
]" LineStyle.pink
[dataType]="DataType.NUMBER" ]"
[title]="title" [dataType]="DataType.NUMBER"
[subtitle]="subtitle" [title]="title"
/> [subtitle]="subtitle"
</div> />
<div class="fr-col-12"> </div>
<h2 class="fr-my-2w">Comment réduire le nombre de requêtes</h2> <div class="fr-col-12">
<p>Voici quelques conseils pour réduire le nombre de requêtes :</p> <h2 class="fr-my-2w">Comment réduire le nombre de requêtes</h2>
<ul> <p>Voici quelques conseils pour réduire le nombre de requêtes :</p>
<li> <ul>
Vérifier le nombre de requêtes de la page et leur temps de <li>
chargement. Vérifier le nombre de requêtes de la page et leur temps de
</li> chargement.
<li>Réduire le poids des contenus hébergés sur les serveurs.</li> </li>
<li>Mettre en cache les données.</li> <li>Réduire le poids des contenus hébergés sur les serveurs.</li>
<li> <li>Mettre en cache les données.</li>
Optimiser les flux en limitant les données au strict nécessaire et <li>
en les compressant. Optimiser les flux en limitant les données au strict nécessaire et
</li> en les compressant.
<li> </li>
Réduire les appels à des API, scripts, librairies ou polices de <li>
caractères tiers. Réduire les appels à des API, scripts, librairies ou polices de
</li> caractères tiers.
</ul> </li>
<p> </ul>
Pour aller plus loin : <p>
<a Pour aller plus loin :
href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf" <a
target="_blank" href="https://www.arcep.fr/uploads/tx_gspublication/referentiel_general_ecoconception_des_services_numeriques_version_2024.pdf"
title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre" target="_blank"
>Référentiel Général de l'Écoconception des Services Numériques title="Référentiel Général de l'Écoconception des Services Numériques (RGESN) - Mai 2024 (PDF) - nouvelle fenêtre"
(RGESN) - Mai 2024 (PDF)</a >Référentiel Général de l'Écoconception des Services Numériques
> (RGESN) - Mai 2024 (PDF)</a
</p> >
</p>
</div>
</div> </div>
} @else {
<misis-loading-alert
[text]="AlertType.LOADING.text"
[class]="AlertType.LOADING.class"
/>
}
</div> </div>
} @else {
<misis-loading-alert
[text]="AlertType.LOADING.text"
[class]="AlertType.LOADING.class"
/>
}
`, `,
styles: ``, styles: ``,
}) })
......
src/app/views/protected/suivis/detail-suivi/main-content/summary/summary.component.ts
+ 215
− 211
View file @ 967d8767
...@@ -22,226 +22,230 @@ import { tap } from 'rxjs'; ...@@ -22,226 +22,230 @@ import { tap } from 'rxjs';
standalone: true, standalone: true,
imports: [DatePipe, FormsModule], imports: [DatePipe, FormsModule],
template: ` template: `
<div class="fr-grid-row"> <div class="fr-col-12 fr-py-12v">
<h3>Informations sur le groupe</h3> <div class="fr-grid-row">
@if (websiteDetailsDto(); as website) { <div class="fr-col-12">
<div class="fr-col-12"> <h2 class="fr-my-2w">Informations sur le groupe</h2>
<p>
Groupe faisant partie d’un des {{ getGroupLength(website) }} groupes
du suivi {{ website.websiteName }}
</p>
<p>
Groupe créé le {{ getCreatedDate(website) | date : 'dd/MM/yyyy' }}
</p>
<p>
Dernière analyse complète en date du
{{ getLastAnalysis(website) | date : 'dd/MM/yyyy' }}
</p>
</div>
<div class="fr-col-12">
<h3>Problème(s) identifié(s)</h3>
<p>
{{website.groups?.[identity.groupeId]?.errorCount}} page(s) en erreur
sur {{website.groups?.[identity.groupeId]?.pageCount}} page(s) du
groupe ({{website.groups?.[identity.groupeId]?.errorCount}} sur
{{website.groups?.[identity.groupeId]?.pageCount}} en erreur)
</p>
</div>
<div class="fr-col-12 fr-col-md-10 fr-col-offset-md-2 fr-grid-row">
<span
class="fr-icon-alarm-warning-fill fr-col-1"
[class.fr-label--error]="getProgressBarValue(website) != 0"
[class.fr-label--success]="getProgressBarValue(website) == 0"
aria-hidden="true"
></span>
<div class="fr-col-10 progress-container">
<progress
id="progressBar"
class="progress-bar"
[value]="getProgressBarValue(website)"
max="1"
></progress>
<div
class="progress-text"
[innerText]="getProgressBarDisplayValue(website)"
></div>
</div> </div>
</div> @if (websiteDetailsDto(); as website) {
<div class="fr-col-12"> <div class="fr-col-12">
<div class="fr-table--lg fr-table"> <p>
<div class="fr-table__wrapper"> Groupe faisant partie d’un des {{ getGroupLength(website) }} groupes
<div class="fr-table__container"> du suivi {{ website.websiteName }}
<div class="fr-table__content"> </p>
<table class="fr-cell--multiline"> <p>
<caption [hidden]="true"> Groupe créé le {{ getCreatedDate(website) | date : 'dd/MM/yyyy' }}
Pages du groupe </p>
</caption> <p>
<thead> Dernière analyse complète en date du
<tr> {{ getLastAnalysis(website) | date : 'dd/MM/yyyy' }}
<th scope="col">URL</th> </p>
<th scope="col" class="fr-cell--right">Date d’analyse</th> </div>
<th scope="col" class="fr-cell--right"> <div class="fr-col-12">
Statut d’analyse <h3>Problème(s) identifié(s)</h3>
</th> <p>
</tr> {{website.groups?.[identity.groupeId]?.errorCount}} page(s) en erreur
</thead> sur {{website.groups?.[identity.groupeId]?.pageCount}} page(s) du
<tbody> groupe ({{website.groups?.[identity.groupeId]?.errorCount}} sur
@for (page of filteredPageDetailsDto(); track page.url) { {{website.groups?.[identity.groupeId]?.pageCount}} en erreur)
<tr> </p>
<td> </div>
<a <div class="fr-col-12 fr-col-md-10 fr-col-offset-md-2 fr-grid-row">
[href]="page.url" <span
target="_blank" class="fr-icon-alarm-warning-fill fr-col-1"
class="fr-link" [class.fr-label--error]="getProgressBarValue(website) != 0"
title="Accéder à la page - nouvelle fenêtre" [class.fr-label--success]="getProgressBarValue(website) == 0"
[class.fr-ellipsis]="!page.title" aria-hidden="true"
[class.link-ellipsis]="!page.title" ></span>
> <div class="fr-col-10 progress-container">
{{ page.title ? page.title : page.url }} <progress
</a> id="progressBar"
</td> class="progress-bar"
<td class="fr-cell--right"> [value]="getProgressBarValue(website)"
{{ page.lastAnalysis | date : 'dd/MM/yyyy' }} max="1"
</td> ></progress>
<td class="fr-cell--right"> <div
@switch (page.analyseStatut) { @case class="progress-text"
(AnalyseStatut.ERREUR_PAGE_302) { La page est redirigée [innerText]="getProgressBarDisplayValue(website)"
(302) } @case (AnalyseStatut.ERREUR_PAGE_404) { La page ></div>
est introuvable (404) } @case </div>
(AnalyseStatut.ERREUR_PAGE_500) { La page contient une </div>
erreur interne (500) } @case (AnalyseStatut.INVALIDE) { <div class="fr-col-12">
Une erreur est survenue lors de l’analyse. Veuillez <div class="fr-table--lg fr-table">
contacter l’administrateur de MISIS } @case <div class="fr-table__wrapper">
(AnalyseStatut.ERREUR_URL_NON_RESOLUE) { Une erreur est <div class="fr-table__container">
survenue en raison du nom de domaine de suivi du site } <div class="fr-table__content">
@case (AnalyseStatut.ERREUR_URL_MALFORMEE || <table class="fr-cell--multiline">
AnalyseStatut.ERREUR_URL_VIDE) { Une erreur est survenue <caption [hidden]="true">
en raison du format de l’URL } @case Pages du groupe
(AnalyseStatut.NOUVEAU) { En file d’attente pour la </caption>
première analyse } @case (AnalyseStatut.TERMINEE) { <thead>
Terminée } } <tr>
</td> <th scope="col">URL</th>
</tr> <th scope="col" class="fr-cell--right">Date d’analyse</th>
} <th scope="col" class="fr-cell--right">
</tbody> Statut d’analyse
</table> </th>
</tr>
</thead>
<tbody>
@for (page of filteredPageDetailsDto(); track page.url) {
<tr>
<td>
<a
[href]="page.url"
target="_blank"
class="fr-link"
title="Accéder à la page - nouvelle fenêtre"
[class.fr-ellipsis]="!page.title"
[class.link-ellipsis]="!page.title"
>
{{ page.title ? page.title : page.url }}
</a>
</td>
<td class="fr-cell--right">
{{ page.lastAnalysis | date : 'dd/MM/yyyy' }}
</td>
<td class="fr-cell--right">
@switch (page.analyseStatut) { @case
(AnalyseStatut.ERREUR_PAGE_302) { La page est redirigée
(302) } @case (AnalyseStatut.ERREUR_PAGE_404) { La page
est introuvable (404) } @case
(AnalyseStatut.ERREUR_PAGE_500) { La page contient une
erreur interne (500) } @case (AnalyseStatut.INVALIDE) {
Une erreur est survenue lors de l’analyse. Veuillez
contacter l’administrateur de MISIS } @case
(AnalyseStatut.ERREUR_URL_NON_RESOLUE) { Une erreur est
survenue en raison du nom de domaine de suivi du site }
@case (AnalyseStatut.ERREUR_URL_MALFORMEE ||
AnalyseStatut.ERREUR_URL_VIDE) { Une erreur est survenue
en raison du format de l’URL } @case
(AnalyseStatut.NOUVEAU) { En file d’attente pour la
première analyse } @case (AnalyseStatut.TERMINEE) {
Terminée } }
</td>
</tr>
}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> <div class="fr-table__footer">
<div class="fr-table__footer"> <div class="fr-table__footer--start">
<div class="fr-table__footer--start"> <p class="fr-table__detail">{{ websiteDetailsDto()?.pageDetailDtos?.length }} lignes</p>
<p class="fr-table__detail">{{ websiteDetailsDto()?.pageDetailDtos?.length }} lignes</p> <div class="fr-select-group">
<div class="fr-select-group"> <label
<label class="fr-sr-only fr-label"
class="fr-sr-only fr-label" for="table-footer-select-7847"
for="table-footer-select-7847" >
>
Nombre de lignes par page
</label>
<select
class="fr-select"
aria-describedby="table-footer-select-7847-messages"
id="table-footer-select-7847"
name="table-footer-select-7847"
[(ngModel)]="pageSize"
(change)="setPageIndex(1, $event)"
>
<option value="" selected disabled hidden>
Nombre de lignes par page Nombre de lignes par page
</option> </label>
<option value="20">20 lignes par page</option> <select
<option value="25">25 lignes par page</option> class="fr-select"
<option value="30">30 lignes par page</option> aria-describedby="table-footer-select-7847-messages"
</select> id="table-footer-select-7847"
<div name="table-footer-select-7847"
class="fr-messages-group" [(ngModel)]="pageSize"
id="table-footer-select-7847-messages" (change)="setPageIndex(1, $event)"
aria-live="polite" >
></div> <option value="" selected disabled hidden>
Nombre de lignes par page
</option>
<option value="20">20 lignes par page</option>
<option value="25">25 lignes par page</option>
<option value="30">30 lignes par page</option>
</select>
<div
class="fr-messages-group"
id="table-footer-select-7847-messages"
aria-live="polite"
></div>
</div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div>
<div class="fr-table__footer--middle">
<nav
role="navigation"
class="fr-pagination"
aria-label="Pagination"
[attr.data-fr-analytics-page-total]="maxPages.length"
>
<ul class="fr-pagination__list">
<li>
<a
class="fr-pagination__link fr-pagination__link--first"
id="table-footer-pagination-7851"
title="Première page"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(1, $event)"
#first
>
Première page
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
id="table-footer-pagination-7852"
title="Précédente"
[attr.aria-disabled]="isPaginationBackDisabled()"
role="link"
(click)="setPageIndex(currentPage - 1, $event)"
#previous
>
Précédente
</a>
</li>
@for (item of maxPages; track item) {
<li>
<a
class="fr-pagination__link"
id="table-footer-pagination-7848"
[attr.aria-current]="
item === currentPage ? 'page' : 'false'
"
title="Page {{ item }}"
[innerText]="item"
href="#"
(click)="setPageIndex(item, $event)"
>
</a>
</li>
}
<li>
<a
class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
[attr.aria-disabled]="isPaginationForwardDisabled()"
title="Suivante"
(click)="setPageIndex(currentPage + 1, $event)"
#next
>
Suivante
</a>
</li>
<li>
<a
class="fr-pagination__link fr-pagination__link--last"
id="table-footer-pagination-7854"
[attr.aria-disabled]="
currentPage === maxPages.length ? 'true' : 'false'
"
title="Dernière page"
(click)="setPageIndex(maxPages.length, $event)"
#last
>
Dernière page
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
}
</div> </div>
}
</div> </div>
`, `,
styles: ` styles: `
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment