feature(routing): add projects and routes links inside detail pages #279

idrinth-api-bench · Jun 13, 2024 · 7894d38 · 7894d38
1 parent 10ad99a
commit 7894d38
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="@idrinth-api-bench/assets/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="@idrinth-api-bench/assets/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0" />
+    <title>History Website for @idrinth-api-bench</title>
   </head>
   <body class="dark-mode">
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script
+      type="module"
+      src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/language/en.yml b/language/en.yml
@@ -1,32 +1,33 @@
 overview:
-  title: "Projects"
+  title: 'Projects'
   meta:
-    title: "Projects"
-    description: "All your projects in an easy to grasp overview."
+    title: 'Projects'
+    description: 'All your projects in an easy to grasp overview.'
 login:
-  username: "Username"
-  submit: "Login"
-  title: "Login"
+  username: 'Username'
+  submit: 'Login'
+  title: 'Login'
   meta:
-      title: "Login"
-      description: "Login to your account."
+    title: 'Login'
+    description: 'Login to your account.'
 projects:
-  title: "Projects"
-  description: "A line graph per project to compare their global performance(user choice of Average or Median) + a bar graph with the error count"
+  title: 'Projects'
+  description: 'A line graph per project to compare their global performance(user choice of Average or Median) + a bar graph with the error count'
   meta:
-    title: "Projects"
+    title: 'Projects'
 project:
-  title: "Project"
-  description: "A line graph per route in the project to compare their global performance(user choice of Average or Median) + a bar graph with the error count"
+  title: 'Project'
+  description: 'A line graph per route in the project to compare their global performance(user choice of Average or Median) + a bar graph with the error count'
   meta:
-    title: "Project"
+    title: 'Project'
+  routes: 'Routes'
 route:
-  title: "Route"
-  description: "A line graph per mean and average in the route to compare their and a bar graph with the error count"
+  title: 'Route'
+  description: 'A line graph per mean and average in the route to compare their and a bar graph with the error count'
   meta:
-    title: "Route"
+    title: 'Route'
 global-performance-chart:
-  title: "Global Performance"
-  mean: "Mean"
-  average: "Average"
-loading: "Loading..."
+  title: 'Global Performance'
+  mean: 'Mean'
+  average: 'Average'
+loading: 'Loading...'
diff --git a/language/it.yml b/language/it.yml
@@ -20,6 +20,7 @@ project:
   description: 'Un grafico a linea per rotta per comparare la loro performance globale + un grafico a barre con il conteggio degli errori.'
   meta:
     title: 'Progetto'
+  routes: 'Rotte'
 route:
   title: 'Rotta'
   description: 'Un grafico a linea per mediana e media per la rotta per comparare la loro performance e un grafico a barre con il conteggio degli errori.'

diff --git a/src/pages/Project.svelte b/src/pages/Project.svelte
@@ -9,13 +9,25 @@
   let projectMetricsResponse: ProjectResponse;
   (async () => {
     projectMetricsResponse = await getProject(project);
+    console.log(projectMetricsResponse)
   })();
 </script>
 
 <div class="project">
   <h1>{t('project.title')}: {project}</h1>
   <p>{t('project.description')}</p>
 
+  <h2>{t('project.routes')}</h2>
+  <ul>
+    {#if projectMetricsResponse}
+      {#each Object.keys(projectMetricsResponse) as route}
+        <li>
+          <a href={`/${project}/${route}`}>{route}</a>
+        </li>
+      {/each}
+    {/if}
+  </ul>
+
   {#if projectMetricsResponse}
     <ProjectPerformanceLineChart {projectMetricsResponse}/>
   {/if}

diff --git a/src/pages/Projects.svelte b/src/pages/Projects.svelte
@@ -1,8 +1,8 @@
 <script async lang="ts" context="module">
-  import t from "../lib/t";
+  import GlobalPerformanceLineChart from '../components/GlobalPerformanceLineChart.svelte';
   import { getProjects } from '../lib/http-client.js';
   import type { ProjectsResponse } from '../lib/response-types';
-  import GlobalPerformanceLineChart from '../components/GlobalPerformanceLineChart.svelte';
+  import t from "../lib/t";
 
   const projectMetricsResponse: ProjectsResponse = await getProjects();
 </script>
@@ -13,5 +13,13 @@
   <h1>{t('projects.title')}</h1>
   <p>{t('projects.description')}</p>
 
+  <ul>
+    {#each Object.keys(projectMetricsResponse) as project}
+      <li>
+        <a href={`/${project}`}>{project}</a>
+      </li>
+    {/each}
+  </ul>
+
   <GlobalPerformanceLineChart {projectMetricsResponse}/>
 </div>