teach/atsebay.t
Archived
1
0
Fork 0
Code Issues Pull requests Releases Activity

Move new ui to ui directory

Browse source
This commit is contained in:
nemunaire 2022-03-01 13:43:45 +01:00
commit f85758ef33
56 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

39
ui/src/routes/surveys/[sid]/__layout.svelte Normal file
View file

@ -0,0 +1,39 @@
<script context="module">
import { getSurvey } from '../../../lib/surveys';
export async function load({ params, stuff }) {
const survey = getSurvey(params.sid);
return {
props: {
survey,
},
stuff: {
...stuff,
survey,
}
};
}
</script>
<script lang="ts">
export let survey;
</script>
{#await survey}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement du questionnaire &hellip;</span>
</div>
{:then}
<slot></slot>
{:catch error}
<div class="text-center">
<h2>
<a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
Questionnaire introuvable
</h2>
<span>{error}</span>
</div>
{/await}

370
ui/src/routes/surveys/[sid]/admin.svelte Normal file
View file

@ -0,0 +1,370 @@
<script context="module">
export async function load({ params, stuff }) {
return {
props: {
surveyP: stuff.survey,
sid: params.sid,
},
};
}
</script>
<script>
import { user } from '../../../stores/user';
import SurveyAdmin from '../../../components/SurveyAdmin.svelte';
import SurveyBadge from '../../../components/SurveyBadge.svelte';
import { getQuestions } from '../../../lib/questions';
import { getUsers } from '../../../lib/users';
export let surveyP;
export let sid;
let survey;
let req_questions;
surveyP.then((s) => {
survey = s;
updateQuestions();
if (survey.direct !== null) {
wsconnect();
}
});
function updateQuestions() {
req_questions = getQuestions(survey.id);
}
let ws = null;
let ws_up = false;
let wsstats = null;
let current_question = null;
let responses = {};
let users = {};
function updateUsers() {
getUsers().then((usr) => {
const tmp = { };
for (const u of usr) {
tmp[u.id.toString()] = u;
}
users = tmp;
});
}
updateUsers();
let responsesbyid = { };
$: {
const tmp = { };
for (const response in responses) {
if (!tmp[response]) tmp[response] = [];
for (const r in responses[response]) {
tmp[response].push(responses[response][r]);
}
}
responsesbyid = tmp;
}
function wsconnect() {
if (ws !== null) return;
ws = new WebSocket((window.location.protocol == 'https'?'wss://':'ws://') + window.location.host + `/api/surveys/${sid}/ws-admin`);
ws.addEventListener("open", () => {
ws_up = true;
ws.send('{"action":"get_responses"}');
ws.send('{"action":"get_stats"}');
});
ws.addEventListener("close", (e) => {
ws_up = false;
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
ws = null;
setTimeout(function() {
wsconnect();
}, 1500);
});
ws.addEventListener("error", (err) => {
ws_up = false;
console.log('Socket closed due to error.', err.message);
ws = null;
});
ws.addEventListener("message", (message) => {
const data = JSON.parse(message.data);
console.log(data);
if (data.action && data.action == "new_question") {
current_question = data.question;
} else if (data.action && data.action == "stats") {
wsstats = data.stats;
} else if (data.action && data.action == "new_response") {
if (!responses[data.question]) responses[data.question] = {};
responses[data.question][data.user] = data.value;
} else {
current_question = null;
}
});
}
</script>
{#await surveyP then survey}
{#if $user && $user.is_admin}
{#if survey.direct !== null}
<a href="surveys/{survey.id}/live" class="btn btn-danger ms-1 float-end" title="Aller au direct"><i class="bi bi-film"></i></a>
<button
type="button"
class="btn btn-primary ms-1 float-end"
on:click={() => { if (confirm("Sûr ?")) ws.send('{"action":"end"}') }}
>
Terminer
</button>
{/if}
<a href="surveys/{survey.id}/responses" class="btn btn-success ms-1 float-end" title="Voir les réponses"><i class="bi bi-files"></i></a>
{/if}
<div class="d-flex align-items-center">
<h2>
<a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
{survey.title}
<small class="text-muted">
Administration
</small>
</h2>
{#if survey.direct !== null}
<div
class="badge rounded-pill ms-2"
class:bg-success={ws_up}
class:bg-danger={!ws_up}
>
{#if ws_up}Connecté{:else}Déconnecté{/if}
</div>
{:else}
<SurveyBadge
class="mx-2"
{survey}
/>
{/if}
</div>
{#if survey.direct === null}
<SurveyAdmin
{survey}
/>
{:else}
{#await req_questions}
<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 my-3">
<table class="table table-hover table-striped mb-0">
<thead>
<tr>
<th>
Question
<button
type="button"
class="btn btn-sm btn-info ms-1"
on:click={updateQuestions}
title="Rafraîchir les questions"
>
<i class="bi bi-arrow-counterclockwise"></i>
</button>
</th>
<th>
Réponses
</th>
<th>
Actions
<button
type="button"
class="btn btn-sm btn-primary"
disabled={!current_question || !ws_up}
on:click={() => { ws.send('{"action":"pause"}')} }
>
<i class="bi bi-pause-fill"></i>
</button>
</th>
</tr>
</thead>
<tbody>
{#each questions as question (question.id)}
<tr>
<td>
{#if responses[question.id]}
<a href="surveys/{sid}/admin#q{question.id}_res">
{question.title}
</a>
{:else}
{question.title}
{/if}
</td>
<td>
{#if responses[question.id]}
{Object.keys(responses[question.id]).length}
{:else}
0
{/if}
{#if wsstats}/ {wsstats.nb_clients}{/if}
</td>
<td>
<button
type="button"
class="btn btn-sm btn-primary"
disabled={question.id === current_question || !ws_up}
on:click={() => { ws.send('{"action":"new_question", "question":' + question.id + '}')} }
>
<i class="bi bi-play-fill"></i>
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/await}
{/if}
<hr>
<button
type="button"
class="btn btn-sm btn-info ms-1 float-end"
on:click={() => { ws.send('{"action":"get_responses"}') }}
title="Rafraîchir les réponses"
>
<i class="bi bi-arrow-counterclockwise"></i>
<i class="bi bi-card-checklist"></i>
</button>
<h3>
Réponses
</h3>
{#if Object.keys(responses).length}
{#each Object.keys(responses) as q, qid (qid)}
{#await req_questions then questions}
{#each questions as question}
{#if question.id == q}
<h4 id="q{question.id}_res">
{question.title}
</h4>
{#if question.kind == 'ucq'}
{#await question.getProposals()}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement des propositions &hellip;</span>
</div>
{:then proposals}
<div class="card mb-4">
<table class="table table-sm table-striped table-hover mb-0">
<tbody>
{#each proposals as proposal (proposal.id)}
<tr>
<td>
{proposal.label}
</td>
<td>
{responsesbyid[q].filter((e) => e == proposal.id.toString()).length}/{responsesbyid[q].length}
</td>
<td>
{Math.trunc(responsesbyid[q].filter((e) => e == proposal.id.toString()).length / responsesbyid[q].length * 1000)/10}&nbsp;%
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/await}
{:else if question.kind == 'mcq'}
{#await question.getProposals()}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement des propositions &hellip;</span>
</div>
{:then proposals}
<div class="card mb-4">
<table class="table table-sm table-striped table-hover mb-0">
<tbody>
{#each proposals as proposal (proposal.id)}
<tr>
<td>
{proposal.label}
</td>
<td>
{responsesbyid[q].filter((e) => e.indexOf(proposal.id.toString()) >= 0).length}/{responsesbyid[q].length}
</td>
<td>
{Math.trunc(responsesbyid[q].filter((e) => e.indexOf(proposal.id.toString()) >= 0).length / responsesbyid[q].length * 1000)/10}&nbsp;%
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/await}
{:else}
<div class="card mb-4">
<ul class="list-group list-group-flush">
{#each Object.keys(responses[q]) as user, rid (rid)}
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span>
{responses[q][user]}
</span>
<a href="users/{user}" target="_blank" class="badge bg-dark rounded-pill">
{#if users && users[user]}
{users[user].login}
{:else}
{user}
{/if}
</a>
</li>
{/each}
</ul>
</div>
{/if}
{/if}
{/each}
{/await}
{/each}
{/if}
<hr>
<button
type="button"
class="btn btn-sm btn-info ms-1 float-end"
on:click={() => { ws.send('{"action":"get_stats"}') }}
title="Rafraîchir les stats"
>
<i class="bi bi-arrow-counterclockwise"></i>
<i class="bi bi-123"></i>
</button>
<button
type="button"
class="btn btn-sm btn-primary ms-1 float-end"
title="Rafraîchir la liste des utilisateurs"
on:click={updateUsers}
>
<i class="bi bi-arrow-clockwise"></i>
<i class="bi bi-people"></i>
</button>
<h3>
Connectés
{#if wsstats}
<small class="text-muted">{wsstats.nb_clients} utilisateurs</small>
{/if}
</h3>
{#if wsstats}
<div class="row row-cols-5 py-3">
{#each wsstats.users as login, lid (lid)}
<div class="col">
<div class="card">
<img alt="{login}" src="//photos.cri.epita.fr/thumb/{login}" class="card-img-top">
<div class="card-footer text-center text-truncate p-0">
<a href="users/{login}" target="_blank">
{login}
</a>
</div>
</div>
</div>
{/each}
</div>
{/if}
{/await}

66
ui/src/routes/surveys/[sid]/index.svelte Normal file
View file

@ -0,0 +1,66 @@
<script context="module">
import { getSurvey } from '../../../lib/surveys';
export async function load({ params, stuff }) {
return {
props: {
surveyP: stuff.survey,
},
};
}
</script>
<script lang="ts">
import { goto } from '$app/navigation';
import { user } from '../../../stores/user';
import SurveyAdmin from '../../../components/SurveyAdmin.svelte';
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;
$: {
if (surveyP) {
surveyP.then((survey) => {
if (survey.direct && !$user.is_admin) {
goto(`surveys/${survey.id}/live`);
}
})
}
}
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>
<a href="surveys/{survey.id}/responses" class="btn btn-success ms-1 float-end" title="Voir les réponses"><i class="bi bi-files"></i></a>
{#if survey.direct}
<a href="surveys/{survey.id}/live" class="btn btn-danger ms-1 float-end" title="Aller au direct"><i class="bi bi-film"></i></a>
{/if}
{/if}
<div class="d-flex align-items-center">
<h2>
<a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
{survey.title}
</h2>
<SurveyBadge class="ms-2" {survey} />
</div>
{#if $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}
<SurveyQuestions {survey} {questions} />
{/await}
{/await}

151
ui/src/routes/surveys/[sid]/live.svelte Normal file
View file

@ -0,0 +1,151 @@
<script context="module">
export async function load({ params, stuff }) {
return {
props: {
surveyP: stuff.survey,
sid: params.sid,
},
};
}
</script>
<script>
import { user } from '../../../stores/user';
import { ToastsStore } from '../../../stores/toasts';
import SurveyBadge from '../../../components/SurveyBadge.svelte';
import QuestionForm from '../../../components/QuestionForm.svelte';
import { getQuestion } from '../../../lib/questions';
export let surveyP;
export let sid;
let survey;
surveyP.then((s) => survey = s);
let ws_up = false;
let show_question = null;
let value;
let req_question;
let nosend = false;
function afterQUpdate(q) {
value = undefined;
if (q) {
q.getMyResponse().then((response) => {
if (response && response.value)
value = response.value;
})
}
}
$: {
if (show_question) {
req_question = getQuestion(show_question);
req_question.then(afterQUpdate);
}
}
function wsconnect() {
const ws = new WebSocket((window.location.protocol == 'https'?'wss://':'ws://') + window.location.host + `/api/surveys/${sid}/ws`);
ws.addEventListener("open", () => {
ws_up = true;
});
ws.addEventListener("close", (e) => {
ws_up = false;
show_question = false;
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
setTimeout(function() {
wsconnect();
}, 1500);
});
ws.addEventListener("error", (err) => {
ws_up = false;
console.log('Socket closed due to error.', err.message);
});
ws.addEventListener("message", (message) => {
const data = JSON.parse(message.data);
console.log(data);
if (data.action && data.action == "new_question") {
show_question = data.question;
} else {
show_question = null;
}
});
}
wsconnect();
function sendValue() {
if (show_question && value && !nosend) {
survey.submitAnswers([{"id_question": show_question, "value": value}], $user.id_user).then((response) => {
console.log("Vos réponses ont bien étés sauvegardées.");
}, (error) => {
value = null;
ToastsStore.addErrorToast({
msg: "Une erreur s'est produite durant l'envoi de vos réponses : " + error + "\nVeuillez réessayer dans quelques instants.",
});
});
}
}
</script>
{#await surveyP then survey}
{#if $user && $user.is_admin}
<a href="surveys/{survey.id}/admin" class="btn btn-primary ms-1 float-end" title="Aller à l'interface d'administration"><i class="bi bi-pencil"></i></a>
<a href="surveys/{survey.id}/responses" class="btn btn-success ms-1 float-end" title="Voir les réponses"><i class="bi bi-files"></i></a>
{/if}
<div class="d-flex align-items-center mb-5">
<h2>
<a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
{survey.title}
</h2>
<div
class="badge rounded-pill ms-2"
class:bg-success={ws_up}
class:bg-danger={!ws_up}
>
{#if ws_up}Connecté{:else}Déconnecté{/if}
</div>
</div>
<form on:submit|preventDefault={sendValue}>
{#if show_question}
{#await req_question}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement d'une nouvelle question &hellip;</span>
</div>
{:then question}
<QuestionForm
qid={show_question}
{question}
bind:value={value}
on:change={sendValue}
>
<!--div class="progress" style="border-radius: 0; height: 4px">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div-->
</QuestionForm>
{#if question.kind != 'mcq' && question.kind != 'ucq'}
<button
class="btn btn-primary"
>
Soumettre la réponse
</button>
{/if}
{/await}
{:else if ws_up}
<h2 class="text-center">
Pas de question actuellement
</h2>
{:else}
<h2 class="text-center">
La session est terminée. <small class="text-muted">On se retrouve une prochaine fois&hellip;</small>
</h2>
{/if}
</form>
{/await}

156
ui/src/routes/surveys/[sid]/responses/[rid].svelte Normal file
View file

@ -0,0 +1,156 @@
<script context="module">
import { getSurvey } from '../../../../lib/surveys';
export async function load({ params, stuff }) {
return {
props: {
surveyP: stuff.survey,
rid: params.rid,
},
};
}
</script>
<script lang="ts">
import Correction from '../../../../components/Correction.svelte';
import CorrectionReference from '../../../../components/CorrectionReference.svelte';
import SurveyBadge from '../../../../components/SurveyBadge.svelte';
import QuestionHeader from '../../../../components/QuestionHeader.svelte';
import { getCorrectionTemplates } from '../../../../lib/correctionTemplates';
import { getQuestion } from '../../../../lib/questions';
export let surveyP;
export let rid;
let showResponses = false;
let showStudent = false;
let notCorrected = false;
let nb_responses = 0;
let child;
let waitApply = false;
let ctpls = getCorrectionTemplates(rid);
let filter = "";
let cts = { };
ctpls.then((ctpls) => {
for (const tpl of ctpls) {
cts[tpl.id] = { };
tpl.getCorrections().then((c) => {
if (c) {
for (const d of c) {
cts[tpl.id][d.id_user] = d;
}
}
})
}
cts = cts;
});
</script>
{#await surveyP then survey}
{#await getQuestion(rid)}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement de la question&hellip;</span>
</div>
{:then question}
{#await ctpls}
<div class="text-center">
<div class="spinner-border text-primary mx-3" role="status"></div>
<span>Chargement de la question&hellip;</span>
</div>
{:then correctionTemplates}
<div class="float-end">
<input
class="form-control"
placeholder="filtre"
bind:value={filter}
>
</div>
<div class="d-flex align-items-center">
<h2>
<a href="surveys/{survey.id}/responses" class="text-muted" style="text-decoration: none">&lt;</a>
{survey.title}
<small class="text-muted">Corrections</small>
</h2>
<SurveyBadge class="ms-2" {survey} />
</div>
<div class="card sticky-top">
<QuestionHeader
{question}
>
<button
class="btn btn-sm btn-link float-start"
on:click={() => showResponses = !showResponses}
>
<i
class="bi"
class:bi-chevron-right={!showResponses}
class:bi-chevron-down={showResponses}
></i>
</button>
{#if showResponses}
<button
type="button"
class="btn btn-sm btn-success float-end ms-3 me-1"
title="Appliquer les corrections par regexp"
on:click={() => {waitApply = true; child.applyCorrections().then(() => { waitApply = false; })} }
disabled={waitApply}
>
{#if waitApply}
<div class="spinner-border spinner-border-sm" role="status"></div>
{:else}
<i class="bi bi-check-all"></i>
{/if}
</button>
{/if}
<button
type="button"
class="btn btn-sm float-end mx-1"
class:btn-outline-info={!showStudent}
class:btn-info={showStudent}
on:click={() => showStudent = !showStudent}
title="Afficher les étudiants"
>
<i class="bi bi-people"></i>
</button>
<button
type="button"
class="btn btn-sm float-end mx-1"
class:btn-outline-info={!notCorrected}
class:btn-info={notCorrected}
on:click={() => notCorrected = !notCorrected}
title="Afficher les réponses corrigées"
>
<i class="bi bi-files"></i>
</button>
</QuestionHeader>
{#if showResponses}
<CorrectionReference
class="card-body"
{cts}
bind:filter={filter}
{nb_responses}
{question}
templates={correctionTemplates}
/>
{/if}
</div>
<Correction
{cts}
{filter}
{question}
{showStudent}
{notCorrected}
bind:child={child}
templates={correctionTemplates}
on:nb_responses={(v) => { nb_responses = v.detail; } }
/>
{/await}
{/await}
{/await}
<div class="mb-5"></div>

85
ui/src/routes/surveys/[sid]/responses/index.svelte Normal file
View file

@ -0,0 +1,85 @@
<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}

8
ui/src/routes/surveys/index.svelte Normal file
View file

@ -0,0 +1,8 @@
<script lang="ts">
import { user } from '../../stores/user';
import SurveyList from '../../components/SurveyList.svelte';
</script>
<div class="card bg-light">
<SurveyList />
</div>