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

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

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

<script lang="ts">
 import SurveyBadge from '../../../../components/SurveyBadge.svelte';
 import SurveyQuestions from '../../../../components/SurveyQuestions.svelte';
 import { getSurvey } from '../../../../lib/surveys';
 import { getQuestions } from '../../../../lib/questions';

 export let surveyP;
</script>

{#await surveyP then survey}
    <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>

    {#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 ng-click="showResponses()" ng-controller="ResponsesController">
                            <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).length} /
                                        {responses.length}
                                    {:else}
                                        0
                                    {/if}
                                </td>
                                <td>
                                    {#if responses && responses.filter((r) => r.time_scored).length}
                                        {responses.reduce((p, c) => (p + c.score?c.score:0), 0)/responses.filter((r) => r.time_scored).length}
                                    {:else}
                                        --&nbsp;%
                                    {/if}
                                </td>
                            {/await}
                        </tr>
                    {/each}
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2">Moyenne</th>
                        <th><!--{mean}-->&nbsp;%</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    {/await}
{/await}