From 5960ff7ca4d1d0c6d9e6779a97b69c6d63fe940a Mon Sep 17 00:00:00 2001 From: Bastien Gatellier Date: Mon, 22 Jan 2024 21:04:52 +0100 Subject: [PATCH] feat: display the screenshot of the webpage that has been analyzed (#313) * feat: display the screenshot of the webpage that has been analyzed * refactor: simplify the way the screenshot is displayed * feat: make the screenshot visible with the other way to display results --- assets/js/components/SiteAnalysisResult.js | 16 +++++-- assets/js/services/AnalysisService.js | 8 ++++ assets/js/services/ApiService.js | 42 ++++++++++++------- .../partials/widgets/result-appreciation.html | 1 + 4 files changed, 48 insertions(+), 19 deletions(-) diff --git a/assets/js/components/SiteAnalysisResult.js b/assets/js/components/SiteAnalysisResult.js index 1709d286..af66a8f0 100644 --- a/assets/js/components/SiteAnalysisResult.js +++ b/assets/js/components/SiteAnalysisResult.js @@ -39,6 +39,7 @@ class SiteAnalysisResult { async _init() { const urlParams = new URLSearchParams(window.location.search); const langSwitchersElements = document.querySelectorAll(".language-switcher a.lang") + const screenshotImgElement = document.querySelector(".result-screenshot") let pageResultData = {}; @@ -47,6 +48,11 @@ class SiteAnalysisResult { if (urlParams.has("url") && urlParams.has("size") && urlParams.has("ges")) { for (const [key, value] of urlParams.entries()) { pageResultData[key] = value; + + if (key === "id") { + const screenshotUrl = AnalysisService.fetchAnalysisScreenshotUrlById(urlParams.get("id")) + screenshotImgElement.setAttribute("src", screenshotUrl) + } } // update the link URL of every lang switcher @@ -58,13 +64,17 @@ class SiteAnalysisResult { // else fetch analysis result from id // NOTE : url params example to test : "?id=ec839aca-7c12-42e8-8541-5f7f94c36b7f } else if (urlParams.has("id")) { - const id = urlParams.get("id"); + const analysisId = urlParams.get("id"); + // window.location.pathname is something like /resultat (in french) or /en/result (in english) - pageResultData = await AnalysisService.fetchAnalysisById(id, window.location.pathname); + pageResultData = await AnalysisService.fetchAnalysisById(analysisId, window.location.pathname) + + const screenshotUrl = AnalysisService.fetchAnalysisScreenshotUrlById(analysisId) + screenshotImgElement.setAttribute("src", screenshotUrl) // update the link URL of every lang switcher langSwitchersElements.forEach((a) => { - const href = a.getAttribute("href") + "?id=" + id + const href = a.getAttribute("href") + "?id=" + analysisId a.setAttribute("href", href) }) } else { diff --git a/assets/js/services/AnalysisService.js b/assets/js/services/AnalysisService.js index ca20752e..050dfb0c 100644 --- a/assets/js/services/AnalysisService.js +++ b/assets/js/services/AnalysisService.js @@ -56,6 +56,14 @@ class AnalysisService { } } + /** + * @param {string} id + * @returns {string} + */ + fetchAnalysisScreenshotUrlById(id) { + return ApiService.fetchAnalysisScreenshotUrlById(id) + } + /** * * @param {string} id diff --git a/assets/js/services/ApiService.js b/assets/js/services/ApiService.js index b04edc51..30ebcdf7 100644 --- a/assets/js/services/ApiService.js +++ b/assets/js/services/ApiService.js @@ -1,34 +1,36 @@ import ky from "ky"; +const BASE_URL = "https://api.ecoindex.fr/v1/" +const BROWSER_WIDTH = 1920 +const BROWSER_HEIGHT = 1080; + class ApiService { #controller = null; - #baseURL = "https://api.ecoindex.fr/v1/"; - #browserWidth = 1920; - #browserHeight = 1080; /** * Create a new analysis task by URL * * @param {string} url URL - * @returns {Response} response object + * @returns {Promise} */ async newAnalysisTaskByURL(url) { const options = { method: "post", json: { - width: this.#browserWidth, - height: this.#browserHeight, + width: BROWSER_WIDTH, + height: BROWSER_HEIGHT, url, }, }; + return this.#fetchApi("tasks/ecoindexes", options); } /** * Request a task analysis by its id * - * @param {string} id Id - * @returns {Response} response object + * @param {string} id Analysis Id + * @returns {Promise} */ async fetchAnalysisTaskById(id) { const options = { @@ -43,16 +45,26 @@ class ApiService { return this.#fetchApi("tasks/ecoindexes/" + id, options); } + /** + * Get the URL that generates the screenshot of the analyzed page + * @param {string} id Analysis Id + * @returns {string} API URL + */ + fetchAnalysisScreenshotUrlById(id) { + return `${BASE_URL}ecoindexes/${id}/screenshot`; + } + /** * Request an analysis by its id * * @param {string} id Id - * @returns {Response} response object + * @returns {Promise} */ async fetchAnalysisById(id) { const options = { method: "get", }; + return this.#fetchApi("ecoindexes/" + id, options); } @@ -75,8 +87,8 @@ class ApiService { * @param {Object} options object (with url or id) * @param {string} [options.method] Method: 'post' or 'get' * @param {Object} [options.json] Object of properties to post in body (relevant for post method) - * @param {Object} [Options.retry] Retry object to override default Ky retry request property - * @returns {Response} response object + * @param {Object} [options.retry] Retry object to override default Ky retry request property + * @returns {Promise} response object */ async #fetchApi(slug, options) { this.abortAnalysis(); @@ -84,18 +96,16 @@ class ApiService { const { signal } = controller; - const response = await ky(slug, { + return ky(slug, { ...options, - prefixUrl: this.#baseURL, + prefixUrl: BASE_URL, timeout: 60000, // 60s instead of 10s default signal, headers: { "content-type": "application/json", }, redirect: "follow", - }).json(); - - return response; + }).json() } } diff --git a/layouts/partials/widgets/result-appreciation.html b/layouts/partials/widgets/result-appreciation.html index b0015a74..619e95fe 100644 --- a/layouts/partials/widgets/result-appreciation.html +++ b/layouts/partials/widgets/result-appreciation.html @@ -10,6 +10,7 @@

{{ i18n "ResultScore" | safeHTML }} 0 / 100

+
{{ $label := i18n "ResultScoreExplainationLabel" }} {{ $content := i18n "ResultScoreExplainationContent" }}