atsebay.t/ui/src/routes/surveys/[sid]/responses/index.svelte

<script context="module">
 import { getSurvey } from '$lib/surveys';
 import { getUsers } from '$lib/users';

 export async function load({ params, stuff }) {
     return {
         props: {
             surveyP: stuff.survey,
         },
     };
 }
</script>

<script lang="ts">
 import { goto } from '$app/navigation';

 import { user } from '$lib/stores/user';
 import StartStopLiveSurvey from '$lib/components/StartStopLiveSurvey.svelte';
 import SurveyAdmin from '$lib/components/SurveyAdmin.svelte';
 import SurveyBadge from '$lib/components/SurveyBadge.svelte';
 import SurveyQuestions from '$lib/components/SurveyQuestions.svelte';
 import { getQuestions } from '$lib/questions';

 export let surveyP;
 let usersP = null;
 surveyP.then((s) => {
     usersP = getUsers(s.promo, s.group);
 })
 let edit = false;
</script>

{#await surveyP then survey}
    {#if $user && $user.is_admin}
        <button class="btn btn-primary ms-1 float-end" on:click={() => { edit = !edit; } } title="Éditer"><i class="bi bi-pencil"></i></button>
        <StartStopLiveSurvey
            {survey}
            class="ms-1 float-end"
            on:update={() => goto(`surveys/${survey.id}/admin`)}
        />
    {/if}
    <div class="d-flex align-items-center">
        <h2>
            <a href="surveys/{survey.id}" class="text-muted" style="text-decoration: none">&lt;</a>
            {survey.title}
            <small class="text-muted">Corrections</small>
        </h2>
        <SurveyBadge class="ms-2" {survey} />
    </div>

    {#if $user && $user.is_admin && edit}
        <SurveyAdmin {survey} on:saved={() => edit = false} />
    {/if}

    {#await getQuestions(survey.id)}
        <div class="text-center">
            <div class="spinner-border text-primary mx-3" role="status"></div>
            <span>Chargement des questions &hellip;</span>
        </div>
    {:then questions}
        <div class="card mt-3 mb-5">
            <table class="table table-hover table-striped mb-0">
                <thead>
                    <tr>
                        <th>Question</th>
                        <th>Réponses</th>
                        <th>Moyenne</th>
                    </tr>
                </thead>
                <tbody ng-controller="SurveyGradesController">
                    {#each questions as question (question.id)}
                        <tr>
                            <td><a href="surveys/{survey.id}/responses/{question.id}">{question.title}</a></td>
                            {#await question.getResponses()}
                                <td colspan="2" class="text-center">
                                    <div class="spinner-border mx-3" role="status"></div>
                                    <span>Chargement &hellip;</span>
                                </td>
                            {:then responses}
                                <td>
                                    {#if responses}
                                        {responses.filter((r) => !r.time_scored || (r.time_reported && r.time_reported >= r.time_scored)).length} /
                                        {responses.length}
                                        {#await usersP then users}
                                            <br>
                                            {Math.trunc(responses.length/users.length*1000)/10}&nbsp;%
                                        {/await}
                                    {:else}
                                        0
                                    {/if}
                                </td>
                                <td>
                                    {#if responses && responses.filter((r) => r.time_scored).length}
                                        {Math.trunc(responses.reduce((p, c) => (p + (c.score?c.score:0)), 0)/responses.filter((r) => r.time_scored).length*10)/10}&nbsp;%
                                    {:else}
                                        --&nbsp;%
                                    {/if}
                                </td>
                            {/await}
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {/await}
{/await}