diff --git a/backend/src/index.ts b/backend/src/index.ts index 9253cb78f3dc8e28b39c452db08fd898fd29413c..298ace7a8d2257b06ed2e925e0acafba213515fe 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -58,6 +58,11 @@ import { connection } from "./db"; server.get("/", async (request, reply) => { // reply.code(200).send("Hello, World!"); + + const gamesCount = (await connection.table("games").count())[0].count; + const cluesCount = (await connection.table("clues").count())[0].count; + const shotsCount = (await connection.table("shots").count())[0].count; + const gamesByDate = await connection .table("games") .select( @@ -76,6 +81,9 @@ server.get("/", async (request, reply) => { .orderBy("bucket"); reply.view("/templates/dashboard.ejs", { + gamesCount, + cluesCount, + shotsCount, gamesByDate, shotsByDuration, }); diff --git a/backend/templates/dashboard.ejs b/backend/templates/dashboard.ejs index 9cadcd8f9774331bbe3f82f0fdf70573c776bd1b..8d2c5b8e6f2f1a8db0daac26a7e745628e2ca2e1 100644 --- a/backend/templates/dashboard.ejs +++ b/backend/templates/dashboard.ejs @@ -32,9 +32,45 @@ <div class="container-fluid"> <div class="row"> <main class="col-lg-8 col-md-10 mx-auto p-md-4"> + + <h1>Quick facts</h1> + <div class="row"> + <div class="col-sm-4"> + <div class="card text-dark bg-light m-2"> + <div class="card-body"> + <h5 class="card-title"> + <%= gamesCount %> + </h5> + <h6 class="card-subtitle mb-2 text-muted">Games played</h6> + </div> + </div> + </div> + <div class="col-sm-4"> + <div class="card text-dark bg-light m-2"> + <div class="card-body"> + <h5 class="card-title"> + <%= cluesCount %> + </h5> + <h6 class="card-subtitle mb-2 text-muted">Clues shown</h6> + </div> + </div> + </div> + <div class="col-sm-4"> + <div class="card text-dark bg-light m-2"> + <div class="card-body"> + <h5 class="card-title"> + <%= shotsCount %> + </h5> + <h6 class="card-subtitle mb-2 text-muted">Shots taken</h6> + </div> + </div> + </div> + </div> + <h1>Game count by date</h1> <script id="gamesByDateData" type="application/json"><%- JSON.stringify(gamesByDate) %></script> <canvas id="gamesByDateChart"></canvas> + <h1>Shot count by duration [ms]</h1> <script id="shotsByDurationData" type="application/json"><%- JSON.stringify(shotsByDuration) %></script> <canvas id="shotsByDurationChart"></canvas>