From 39acdee6b25a5b95ca93fec2151577e52c4651c3 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 6 Jun 2022 14:40:18 +0200
Subject: [PATCH] ui: Display score grid in team page

---
 configs/nginx/base/demo.conf                |  7 ++
 configs/nginx/base/docker.conf              |  7 ++
 configs/nginx/base/prod.conf                |  7 ++
 frontend/ui/src/components/ScoreGrid.svelte | 84 +++++++++++++++++++++
 frontend/ui/src/routes/edit.svelte          |  9 +++
 5 files changed, 114 insertions(+)
 create mode 100644 frontend/ui/src/components/ScoreGrid.svelte

diff --git a/configs/nginx/base/demo.conf b/configs/nginx/base/demo.conf
index d2234498..448af78e 100644
--- a/configs/nginx/base/demo.conf
+++ b/configs/nginx/base/demo.conf
@@ -150,6 +150,13 @@ server {
             expires epoch;
             add_header Cache-Control no-cache;
         }
+        location /scores.json {
+            include fic-auth.conf;
+
+            root /srv/TEAMS/$team/;
+            expires epoch;
+            add_header Cache-Control no-cache;
+        }
         location = /events.json {
             root /srv/TEAMS/;
             expires epoch;
diff --git a/configs/nginx/base/docker.conf b/configs/nginx/base/docker.conf
index 416147cb..a9f004bd 100644
--- a/configs/nginx/base/docker.conf
+++ b/configs/nginx/base/docker.conf
@@ -136,6 +136,13 @@ server {
             expires epoch;
             add_header Cache-Control no-cache;
         }
+        location /scores.json {
+	    include    fic-get-team.conf;
+
+            root       ${PATH_TEAMS}/$team/;
+            expires    epoch;
+            add_header Cache-Control no-cache;
+        }
         location /teams.json {
             root       ${PATH_TEAMS};
             expires    epoch;
diff --git a/configs/nginx/base/prod.conf b/configs/nginx/base/prod.conf
index 59bd79e6..bfecd55e 100644
--- a/configs/nginx/base/prod.conf
+++ b/configs/nginx/base/prod.conf
@@ -140,6 +140,13 @@ server {
             expires epoch;
             add_header Cache-Control no-cache;
         }
+        location /scores.json {
+            include fic-get-team.conf;
+
+            root /srv/TEAMS/$team/;
+            expires epoch;
+            add_header Cache-Control no-cache;
+        }
         location = /events.json {
             root /srv/TEAMS/;
             expires epoch;
diff --git a/frontend/ui/src/components/ScoreGrid.svelte b/frontend/ui/src/components/ScoreGrid.svelte
new file mode 100644
index 00000000..828173f1
--- /dev/null
+++ b/frontend/ui/src/components/ScoreGrid.svelte
@@ -0,0 +1,84 @@
+<script>
+ import {
+     Badge,
+     CardBody,
+     Column,
+     Icon,
+     Table,
+ } from 'sveltestrap';
+
+ import DateFormat from '../components/DateFormat.svelte';
+
+ import { my } from '../stores/my.js';
+ import { themes } from '../stores/themes.js';
+
+ let req = null;
+ function refresh_scores() {
+     req = fetch('scores.json', {headers: {'Accept': 'application/json'}}).then((data) => data.json());
+ }
+ refresh_scores();
+
+ export { className as class };
+ let className = '';
+</script>
+
+{#await req}
+    <CardBody>
+        Veuillez patienter &hellips;
+    </CardBody>
+{:then scores}
+    {#if scores}
+        <Table class="mb-0" hover striped rows={scores} let:row>
+            <Column header="Heure">
+                <DateFormat date={new Date(row.time)} />
+            </Column>
+            <Column header="Raison">
+                {#if row.reason == "Validation"}
+                    <Badge color="success"><Icon name="check" /></Badge>
+                    Étape validée
+                {:else if row.reason == "First blood"}
+                    <Badge color="light"><Icon name="trophy" /></Badge>
+                    Bonus premier sang
+                {:else if row.reason == "Bonus flag"}
+                    <Badge color="danger"><Icon name="flag-fill" /></Badge>
+                    Flag bonus complété
+                {:else if row.reason == "Tries"}
+                    <Badge color="warning"><Icon name="backspace" /></Badge>
+                    Malus nombre de tentatives
+                {:else if row.reason == "Hint"}
+                    <Badge color="info"><Icon name="lightbulb" /></Badge>
+                    Indice dévoilé
+                {:else if row.reason == "Display choices"}
+                    <Badge color="secondary"><Icon name="info-square" /></Badge>
+                    Échange champ de texte contre liste de choix
+                {:else}
+                    <Badge color="primary"><Icon name="question" /></Badge>
+                    {row.reason}
+                {/if}
+                {#if row.id_exercice && $my.exercices[row.id_exercice]}
+                    sur <a href="/{$themes[$my.exercices[row.id_exercice].theme_id].urlid}/{$themes[$my.exercices[row.id_exercice].theme_id].exercices[row.id_exercice].urlid}">
+                        {$themes[$my.exercices[row.id_exercice].theme_id].exercices[row.id_exercice].title}
+                    </a>
+                {/if}
+            </Column>
+            <Column header="Détail">
+                <span title="Valeur initiale (cette valeur est fixe)">{Math.trunc(10*row.points)/10}</span> &times; <span title="Coefficient multiplicateur (il varie selon les événements en cours sur la plateforme)">{row.coeff}</span>
+            </Column>
+            <Column header="Points">
+                {Math.trunc(10*row.points * row.coeff)/10}
+            </Column>
+        </Table>
+    {:else}
+        Vous n'avez fait aucune action vous faisant gagner ou perdre des points.
+    {/if}
+    <button class="btn btn-primary" on:click={refresh_scores}>
+        <Icon name="arrow-clockwise" />
+    </button>
+{:catch error}
+    <CardBody>
+        Une erreur s'est produite: {JSON.stringify(error)}
+    </CardBody>
+    <button class="btn btn-primary" on:click={refresh_scores}>
+        <Icon name="arrow-clockwise" />
+    </button>
+{/await}
diff --git a/frontend/ui/src/routes/edit.svelte b/frontend/ui/src/routes/edit.svelte
index 0deccc73..71d9ca83 100644
--- a/frontend/ui/src/routes/edit.svelte
+++ b/frontend/ui/src/routes/edit.svelte
@@ -13,12 +13,14 @@
      Alert,
      Badge,
      Card,
+     CardHeader,
      Col,
      Container,
      Icon,
      Row,
  } from 'sveltestrap';
 
+ import ScoreGrid from '../components/ScoreGrid.svelte';
  import TeamChangeName from '../components/TeamChangeName.svelte';
  import TeamMembers from '../components/TeamMembers.svelte';
 
@@ -45,6 +47,13 @@
             {/if}
             </Col>
             <Col md>
+            <Card>
+                <CardHeader>
+                    <Icon name="table" />
+                    Détail du score
+                </CardHeader>
+                <ScoreGrid />
+            </Card>
             <!--BrowserNotify /-->
             </Col>
         </Row>