Move new ui to ui directory
This commit is contained in:
parent
bb72c351ac
commit
f85758ef33
56 changed files with 0 additions and 0 deletions
47
ui/src/components/Correction.svelte
Normal file
47
ui/src/components/Correction.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import CorrectionResponses from './CorrectionResponses.svelte';
|
||||
|
||||
export let question = null;
|
||||
export let cts = null;
|
||||
export let child = null;
|
||||
export let filter = "";
|
||||
export let notCorrected = false;
|
||||
export let showStudent = false;
|
||||
export let templates = [];
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
{#if question && (question.kind == 'mcq' || question.kind == 'ucq')}
|
||||
{#await question.getProposals()}
|
||||
<div class="text-center mt-4">
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
<span>Récupération des propositions…</span>
|
||||
</div>
|
||||
{:then proposals}
|
||||
<CorrectionResponses
|
||||
{cts}
|
||||
bind:this={child}
|
||||
{filter}
|
||||
{question}
|
||||
{notCorrected}
|
||||
{proposals}
|
||||
{showStudent}
|
||||
{templates}
|
||||
on:nb_responses={(v) => dispatch('nb_responses', v.detail)}
|
||||
/>
|
||||
{/await}
|
||||
{:else}
|
||||
<CorrectionResponses
|
||||
{cts}
|
||||
bind:this={child}
|
||||
{filter}
|
||||
{question}
|
||||
{notCorrected}
|
||||
{showStudent}
|
||||
{templates}
|
||||
on:nb_responses={(v) => dispatch('nb_responses', v.detail)}
|
||||
/>
|
||||
{/if}
|
||||
112
ui/src/components/CorrectionReference.svelte
Normal file
112
ui/src/components/CorrectionReference.svelte
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<script>
|
||||
import { CorrectionTemplate } from '../lib/correctionTemplates';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
export let cts = null;
|
||||
export let nb_responses = 0;
|
||||
export let question = null;
|
||||
export let templates = [];
|
||||
|
||||
export let filter = "";
|
||||
|
||||
function addTemplate() {
|
||||
const ct = new CorrectionTemplate()
|
||||
if (question) {
|
||||
ct.id_question = question.id;
|
||||
}
|
||||
templates.push(ct);
|
||||
templates = templates;
|
||||
}
|
||||
|
||||
function delTemplate(tpl) {
|
||||
tpl.delete().then(() => {
|
||||
const idx = templates.findIndex((e) => e.id === tpl.id);
|
||||
if (idx >= 0) {
|
||||
templates.splice(idx, 1);
|
||||
}
|
||||
templates = templates;
|
||||
});
|
||||
}
|
||||
|
||||
function submitTemplate(tpl) {
|
||||
tpl.save().then(() => {
|
||||
templates = templates;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="{className}">
|
||||
{#each templates as template (template.id)}
|
||||
<form class="row mb-2" on:submit|preventDefault={() => submitTemplate(template)}>
|
||||
<div class="col-2">
|
||||
<div class="input-group">
|
||||
<input
|
||||
placeholder="RegExp"
|
||||
class="form-control"
|
||||
class:bg-warning={template.regexp && template.regexp === filter}
|
||||
bind:value={template.regexp}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
class:btn-outline-secondary={!template.regexp || template.regexp !== filter}
|
||||
class:btn-outline-warning={template.regexp && template.regexp === filter}
|
||||
on:click={() => { if (filter == template.regexp) filter = ''; else filter = template.regexp; } }
|
||||
>
|
||||
<i class="bi bi-filter"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<input placeholder="Intitulé" class="form-control" bind:value={template.label}>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="-12"
|
||||
class="form-control"
|
||||
bind:value={template.score}
|
||||
>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea
|
||||
placeholder="Explication pour l'étudiant"
|
||||
class="form-control form-control-sm"
|
||||
bind:value={template.score_explaination}
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="col-1 d-flex flex-column">
|
||||
<div class="text-end">
|
||||
{#if cts && template.id && cts[template.id.toString()]}
|
||||
{Math.trunc(Object.keys(cts[template.id.toString()]).length/nb_responses*1000)/10} %
|
||||
{:else}
|
||||
N/A
|
||||
{/if}
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
on:click={() => delTemplate(template)}
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
>
|
||||
<i class="bi bi-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/each}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-info me-1"
|
||||
on:click={addTemplate}
|
||||
disabled={templates.length > 0 && !templates[templates.length-1].id}
|
||||
>
|
||||
<i class="bi bi-plus"></i> Ajouter un template
|
||||
</button>
|
||||
</div>
|
||||
124
ui/src/components/CorrectionResponseFooter.svelte
Normal file
124
ui/src/components/CorrectionResponseFooter.svelte
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<script>
|
||||
import { user } from '../stores/user';
|
||||
import { autoCorrection } from '../lib/correctionTemplates';
|
||||
|
||||
export let cts = null;
|
||||
export let rid = 0;
|
||||
export let response = null;
|
||||
export let templates = [];
|
||||
|
||||
let my_tpls = { };
|
||||
let my_correction = null;
|
||||
|
||||
function submitCorrection() {
|
||||
if (response.score === undefined || response.score === null) {
|
||||
if (my_correction && my_correction.score !== undefined) {
|
||||
response.score = my_correction.score;
|
||||
} else {
|
||||
response.score = 100;
|
||||
}
|
||||
}
|
||||
|
||||
if (response.score_explaination === undefined || response.score_explaination === null) {
|
||||
if (my_correction && my_correction.score_explaination !== undefined) {
|
||||
response.score_explaination = my_correction.score_explaination;
|
||||
}
|
||||
}
|
||||
|
||||
response.id_corrector = $user.id
|
||||
response.time_scored = (new Date()).toISOString()
|
||||
|
||||
response.save().then((res) => {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$: {
|
||||
if (cts && templates && response && response.id_user) {
|
||||
for (const t of templates) {
|
||||
if (my_tpls[t.id] === undefined && cts[t.id.toString()]) {
|
||||
my_tpls[t.id] = cts[t.id.toString()][response.id_user] !== undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form
|
||||
class="row"
|
||||
on:submit|preventDefault={submitCorrection}
|
||||
>
|
||||
<div class="col-auto">
|
||||
<button
|
||||
class="btn btn-success me-1"
|
||||
class:mt-4={rid%2}
|
||||
>
|
||||
<i class="bi bi-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="row row-cols-3">
|
||||
{#each templates as template (template.id)}
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="r{response.id}t{template.id}"
|
||||
on:change={() => {my_tpls[template.id] = !my_tpls[template.id]; autoCorrection(response.id_user, my_tpls).then((r) => my_correction = r); }}
|
||||
checked={my_tpls[template.id]}
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="r{response.id}t{template.id}"
|
||||
>
|
||||
{template.label}
|
||||
</label>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
<div class="input-group mb-2">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
placeholder="Score"
|
||||
bind:value={response.score}
|
||||
>
|
||||
{#if my_correction}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-light"
|
||||
on:click={() => { response.score = my_correction.score; response.score_explaination = my_correction.score_explaination; }}
|
||||
>
|
||||
{my_correction.score}
|
||||
</button>
|
||||
{/if}
|
||||
<span class="input-group-text">/100</span>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
class="form-control mb-2"
|
||||
placeholder="Appréciation"
|
||||
bind:value={response.score_explaination}
|
||||
></textarea>
|
||||
</div>
|
||||
</form>
|
||||
{#if my_correction}
|
||||
<div
|
||||
class="alert row mt-1 mb-0"
|
||||
class:bg-success={my_correction.score > 100}
|
||||
class:alert-success={my_correction.score >= 95 && my_correction.score <= 100}
|
||||
class:alert-info={my_correction.score < 95 && my_correction.score >= 70}
|
||||
class:alert-warning={my_correction.score < 70 && my_correction.score >= 45}
|
||||
class:alert-danger={my_correction.score < 45}
|
||||
>
|
||||
<strong class="col-auto">
|
||||
{my_correction.score} %
|
||||
</strong>
|
||||
<div class="col">
|
||||
{my_correction.score_explaination}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
130
ui/src/components/CorrectionResponses.svelte
Normal file
130
ui/src/components/CorrectionResponses.svelte
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import QuestionProposals from './QuestionProposals.svelte';
|
||||
import ResponseCorrected from './ResponseCorrected.svelte';
|
||||
import CorrectionResponseFooter from './CorrectionResponseFooter.svelte';
|
||||
import { autoCorrection } from '../lib/correctionTemplates';
|
||||
import { getUser } from '../lib/users';
|
||||
|
||||
export let cts = null;
|
||||
export let filter = "";
|
||||
export let hilights = "";
|
||||
export let question = null;
|
||||
export let proposals = null;
|
||||
export let notCorrected = false;
|
||||
export let showStudent = false;
|
||||
export let templates = false;
|
||||
|
||||
function refreshResponses() {
|
||||
let req = question.getResponses();
|
||||
|
||||
req.then((res) => {
|
||||
responses = res;
|
||||
dispatch('nb_responses', res.length);
|
||||
});
|
||||
|
||||
return req;
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let req_responses = refreshResponses();
|
||||
let responses = [];
|
||||
|
||||
let filteredResponses = [];
|
||||
$:{
|
||||
filteredResponses = responses.filter((r) => (notCorrected || !r.time_scored) && (!filter || r.value.match(filter)));
|
||||
}
|
||||
|
||||
export async function applyCorrections() {
|
||||
for (const r of filteredResponses) {
|
||||
const my_correction = { };
|
||||
|
||||
for (const tpl of templates) {
|
||||
if (!tpl.regexp) continue;
|
||||
|
||||
if (r.value.match(tpl.regexp)) {
|
||||
my_correction[tpl.id] = true;
|
||||
} else {
|
||||
my_correction[tpl.id] = false;
|
||||
}
|
||||
}
|
||||
|
||||
const auto = await autoCorrection(r.id_user, my_correction);
|
||||
r.score = auto.score;
|
||||
r.score_explaination = auto.score_explaination;
|
||||
await r.save();
|
||||
}
|
||||
req_responses = refreshResponses();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await req_responses}
|
||||
<div class="text-center mt-4">
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
<span>Récupération des réponses…</span>
|
||||
</div>
|
||||
{:then}
|
||||
{#each filteredResponses as response, rid (response.id)}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card mt-3">
|
||||
<div class="card-body">
|
||||
{#if question.kind == 'mcq' || question.kind == 'ucq'}
|
||||
{#if !proposals}
|
||||
<div class="alert bg-danger">
|
||||
Une erreur s'est produite, aucune proposition n'a été chargée
|
||||
</div>
|
||||
{:else}
|
||||
<QuestionProposals
|
||||
kind={question.kind}
|
||||
prefixid={'r' + response.id}
|
||||
{proposals}
|
||||
readonly
|
||||
value={response.value}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<p
|
||||
class="card-text"
|
||||
style="white-space: pre-line"
|
||||
>
|
||||
{response.value}
|
||||
</p>
|
||||
{/if}
|
||||
<ResponseCorrected
|
||||
{response}
|
||||
/>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<CorrectionResponseFooter
|
||||
{cts}
|
||||
{rid}
|
||||
bind:response={response}
|
||||
{templates}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if showStudent}
|
||||
<div class="col-auto">
|
||||
<div class="text-center mt-2" style="max-width: 110px">
|
||||
{#await getUser(response.id_user)}
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
{:then user}
|
||||
<a href="/users/{user.login}">
|
||||
<img class="img-thumbnail" src="https://photos.cri.epita.fr/thumb/{user.login}" alt="avatar {user.login}">
|
||||
<div
|
||||
class="text-truncate"
|
||||
title={user.login}
|
||||
>
|
||||
{user.login}
|
||||
</div>
|
||||
</a>
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/await}
|
||||
17
ui/src/components/DateFormat.svelte
Normal file
17
ui/src/components/DateFormat.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
export let date;
|
||||
export let dateStyle = "long";
|
||||
export let timeStyle = "long";
|
||||
|
||||
function formatDate(input, dateStyle, timeStyle) {
|
||||
if (typeof input === 'string') {
|
||||
input = new Date(input);
|
||||
}
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle,
|
||||
timeStyle,
|
||||
}).format(input);
|
||||
}
|
||||
</script>
|
||||
|
||||
{formatDate(date, dateStyle, timeStyle)}
|
||||
170
ui/src/components/QuestionForm.svelte
Normal file
170
ui/src/components/QuestionForm.svelte
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import QuestionHeader from './QuestionHeader.svelte';
|
||||
import QuestionProposals from './QuestionProposals.svelte';
|
||||
import ResponseCorrected from './ResponseCorrected.svelte';
|
||||
import { user } from '../stores/user';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
export let question;
|
||||
export let qid;
|
||||
export let response_history = null;
|
||||
export let readonly = false;
|
||||
export let survey = null;
|
||||
export let value = "";
|
||||
|
||||
export let edit = false;
|
||||
|
||||
function saveQuestion() {
|
||||
question.save().then((response) => {
|
||||
question.description = response.description;
|
||||
question = question;
|
||||
edit = false;
|
||||
})
|
||||
}
|
||||
function editQuestion() {
|
||||
edit = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card my-3 {className}">
|
||||
<QuestionHeader
|
||||
bind:question={question}
|
||||
{qid}
|
||||
{edit}
|
||||
>
|
||||
{#if $user && $user.is_admin}
|
||||
<button class="btn btn-sm btn-danger ms-1 float-end" on:click={() => dispatch('delete')}>
|
||||
<i class="bi bi-trash-fill"></i>
|
||||
</button>
|
||||
{#if edit}
|
||||
<button class="btn btn-sm btn-success ms-1 float-end" on:click={saveQuestion}>
|
||||
<i class="bi bi-check"></i>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="btn btn-sm btn-primary ms-1 float-end" on:click={editQuestion}>
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</QuestionHeader>
|
||||
<slot></slot>
|
||||
<div class="card-body">
|
||||
{#if false && response_history}
|
||||
<div class="d-flex justify-content-end mb-2">
|
||||
<div class="col-auto">
|
||||
Historique :
|
||||
<select class="form-select">
|
||||
<option value="new">Actuel</option>
|
||||
{#each response_history as history (history.id)}
|
||||
<option value={history.id}>{new Intl.DateTimeFormat('default', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'}).format(new Date(history.time_submit))}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if edit}
|
||||
{#if question.kind == 'text' || question.kind == 'int'}
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="q{qid}placeholder">Placeholder</label>
|
||||
<div class="col">
|
||||
<input class="form-control" id="q{qid}placeholder" bind:value={question.placeholder}>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{#await question.getProposals()}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
<span>Chargement des choix …</span>
|
||||
</div>
|
||||
{:then proposals}
|
||||
<QuestionProposals
|
||||
edit
|
||||
id_question={question.id}
|
||||
kind={question.kind}
|
||||
{proposals}
|
||||
readonly
|
||||
bind:value={value}
|
||||
on:change={() => { dispatch("change"); }}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{:else if question.kind == 'mcq' || question.kind == 'ucq'}
|
||||
{#await question.getProposals()}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
<span>Chargement des choix …</span>
|
||||
</div>
|
||||
{:then proposals}
|
||||
<QuestionProposals
|
||||
kind={question.kind}
|
||||
{proposals}
|
||||
{readonly}
|
||||
bind:value={value}
|
||||
on:change={() => { dispatch("change"); }}
|
||||
/>
|
||||
{/await}
|
||||
{:else if readonly}
|
||||
<p class="card-text alert alert-secondary" style="white-space: pre-line">{value}</p>
|
||||
{:else if question.kind == 'int'}
|
||||
<input
|
||||
class="ml-5 col-sm-2 form-control"
|
||||
type="number"
|
||||
bind:value={value}
|
||||
placeholder={question.placeholder}
|
||||
on:change={() => { dispatch("change"); }}
|
||||
>
|
||||
{:else}
|
||||
<textarea
|
||||
class="form-control"
|
||||
rows="6"
|
||||
bind:value={value}
|
||||
placeholder={question.placeholder}
|
||||
on:change={() => { dispatch("change"); }}
|
||||
></textarea>
|
||||
{/if}
|
||||
|
||||
{#if survey && survey.corrected}
|
||||
<ResponseCorrected
|
||||
response={response_history}
|
||||
{survey}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if false}
|
||||
<div ng-controller="ProposalsController" ng-if="question.kind == 'ucq' || question.kind == 'mcq'">
|
||||
<div class="form-group form-check" ng-if="!question.edit && question.kind == 'mcq'" ng-repeat="proposal in proposals">
|
||||
<input type="checkbox" class="form-check-input" id="p{proposal.id}" ng-model="question['p' + proposal.id]" disabled={readonly}>
|
||||
<label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
|
||||
</div>
|
||||
<div class="form-group form-check" ng-if="!question.edit && question.kind == 'ucq'" ng-repeat="proposal in proposals">
|
||||
<input type="radio" class="form-check-input" name="proposals{question.id}" id="p{proposal.id}" ng-model="question.value" value="{proposal.id}" disabled={survey.readonly}>
|
||||
<label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
|
||||
</div>
|
||||
<div class="form-group row" ng-if="question.edit" ng-repeat="proposal in proposals">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" id="pi{proposal.id}" placeholder="Label" ng-model="proposal.label">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-success ml-1" ng-click="saveProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-check" ></i></button>
|
||||
<button type="button" class="btn btn-danger ml-1" ng-click="deleteProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-trash-fill"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-info ml-1" ng-click="addProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')" ng-disabled="!question.id"><i class="bi bi-plus"></i> Ajouter des proposals
|
||||
</button><span ng-show="question.edit && (question.kind == 'ucq' || question.kind == 'mcq') && !question.id" class="ml-2" style="font-style:italic"> Créez la question pour ajouter des propositions</span>
|
||||
</div>
|
||||
<div class="ml-3 card-text alert alert-success" ng-if="!question.edit && (question.response.score_explaination || question.response.score)">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<strong>{question.response.score} %</strong>
|
||||
</div>
|
||||
<p class="col mb-0" style="white-space: pre-line">{question.response.score_explaination}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
44
ui/src/components/QuestionHeader.svelte
Normal file
44
ui/src/components/QuestionHeader.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import { user } from '../stores/user';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
export let question = null;
|
||||
export let qid = null;
|
||||
export let edit = false;
|
||||
</script>
|
||||
|
||||
<div class="card-header {className}">
|
||||
<slot></slot>
|
||||
|
||||
{#if edit}
|
||||
<div class="card-title row">
|
||||
<label for="q{qid}title" class="col-auto col-form-label font-weight-bold">Titre :</label>
|
||||
<div class="col"><input id="q{qid}title" class="form-control" bind:value={question.title}></div>
|
||||
</div>
|
||||
{:else}
|
||||
<h4 class="card-title mb-0">{#if qid !== null}{qid + 1}. {/if}{question.title}</h4>
|
||||
{/if}
|
||||
|
||||
{#if edit}
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="q{qid}kind">Type de réponse</label>
|
||||
<div class="col">
|
||||
<select class="form-select" id="q{qid}kind" bind:value={question.kind}>
|
||||
<option value="text">Texte</option>
|
||||
<option value="int">Entier</option>
|
||||
<option value="ucq">QCU</option>
|
||||
<option value="mcq">QCM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea class="form-control mb-2" bind:value={question.desc_raw} placeholder="Description de la question"></textarea>
|
||||
{:else if question.description}
|
||||
<p class="card-text mt-2">{@html question.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
118
ui/src/components/QuestionProposals.svelte
Normal file
118
ui/src/components/QuestionProposals.svelte
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import { QuestionProposal } from '../lib/questions';
|
||||
|
||||
export let edit = false;
|
||||
export let proposals = [];
|
||||
export let kind = 'mcq';
|
||||
export let prefixid = '';
|
||||
export let readonly = false;
|
||||
export let id_question = 0;
|
||||
export let value;
|
||||
|
||||
let valueCheck = [];
|
||||
$: {
|
||||
if (value) {
|
||||
valueCheck = value.split(',');
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function addProposal() {
|
||||
const p = new QuestionProposal();
|
||||
p.id_question = id_question;
|
||||
proposals.push(p);
|
||||
proposals = proposals;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each proposals as proposal, pid (proposal.id)}
|
||||
<div class="form-check">
|
||||
{#if kind == 'mcq'}
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
disabled={readonly}
|
||||
name={prefixid + 'proposal' + proposal.id_question}
|
||||
id={prefixid + 'p' + proposal.id}
|
||||
bind:group={valueCheck}
|
||||
value={proposal.id.toString()}
|
||||
on:change={() => { value = valueCheck.join(','); dispatch("change"); }}
|
||||
>
|
||||
{:else}
|
||||
<input
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
disabled={readonly}
|
||||
name={prefixid + 'proposal' + proposal.id_question}
|
||||
id={prefixid + 'p' + proposal.id}
|
||||
bind:group={value}
|
||||
value={proposal.id.toString()}
|
||||
on:change={() => { dispatch("change"); }}
|
||||
>
|
||||
{/if}
|
||||
{#if edit}
|
||||
<form on:submit|preventDefault={() => { proposal.save().then(() => proposal = proposal); } }>
|
||||
<div class="input-group input-group-sm mb-2">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
bind:value={proposal.label}
|
||||
on:input={() => proposal.changed = true}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-danger"
|
||||
tabindex="-1"
|
||||
disabled={!proposal.id}
|
||||
on:click={() => { proposal.delete().then(() => { proposals.splice(pid, 1); proposals = proposals; }); }}
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn"
|
||||
class:btn-success={proposal.changed}
|
||||
class:btn-outline-success={!proposal.changed}
|
||||
disabled={!proposal.changed}
|
||||
>
|
||||
<i class="bi bi-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<label
|
||||
class="form-check-label"
|
||||
for={prefixid + 'p' + proposal.id}
|
||||
>
|
||||
{proposal.label}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{#if edit}
|
||||
{#if kind == 'mcq'}
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
disabled
|
||||
checked
|
||||
>
|
||||
{:else}
|
||||
<input
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
disabled
|
||||
checked
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-link"
|
||||
on:click={addProposal}
|
||||
>
|
||||
ajouter
|
||||
</button>
|
||||
{/if}
|
||||
52
ui/src/components/ResponseCorrected.svelte
Normal file
52
ui/src/components/ResponseCorrected.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
export let response = null;
|
||||
export let survey = null;
|
||||
</script>
|
||||
|
||||
{#if response.score !== undefined}
|
||||
<div
|
||||
class="alert row mb-0"
|
||||
class:alert-success={response.score >= 95}
|
||||
class:alert-info={response.score < 95 && response.score >= 70}
|
||||
class:alert-warning={response.score < 70 && response.score >= 45}
|
||||
class:alert-danger={response.score < 45}
|
||||
>
|
||||
<div class="col-auto">
|
||||
<strong
|
||||
title="Tu as obtenu un score de {response.score} %, ce qui correspond à {Math.trunc(response.score*10/5)/10}/20."
|
||||
>
|
||||
{response.score} %
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
{#if response.score_explaination}
|
||||
{response.score_explaination}
|
||||
{:else if response.score === 100}
|
||||
<i class="bi bi-check"></i>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if response && survey}
|
||||
{#if response.value}
|
||||
<div class="alert alert-dark text-danger row mb-0">
|
||||
<div class="col-auto" style="margin: -0.4em; font-size: 2em;">
|
||||
🤯
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Oups, tu sembles être passé entre les mailles du filet !</strong>
|
||||
Cette question a bien été corrigée, mais une erreur s'est produite dans la correction de ta réponse.
|
||||
<a href="mailto:nemunaire@nemunai.re?subject=Question non corrigée (questionnaire {survey.id})">Contacte ton enseignant</a> au plus vite.
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert alert-danger row mb-0">
|
||||
<div class="col-auto" style="margin: -0.4em; font-size: 2em;">
|
||||
😟
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Tu n'as pas répondu à cette question.</strong>
|
||||
Que s'est-il passé ?
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
77
ui/src/components/StudentGrades.svelte
Normal file
77
ui/src/components/StudentGrades.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script>
|
||||
import { getSurveys } from '../lib/surveys';
|
||||
import { getUsers, getGrades, getPromos } from '../lib/users';
|
||||
|
||||
export let promo = null;
|
||||
</script>
|
||||
|
||||
{#await getPromos() then promos}
|
||||
<div class="float-end me-2">
|
||||
<select class="form-select" bind:value={promo}>
|
||||
<option value={null}>tous</option>
|
||||
{#each promos as promo, pid (pid)}
|
||||
<option value={promo}>{promo}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/await}
|
||||
<h2>
|
||||
Étudiants {#if promo !== null}{promo}{/if}
|
||||
<small class="text-muted">Notes</small>
|
||||
</h2>
|
||||
|
||||
{#await getSurveys()}
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des questionnaires corrigés…
|
||||
</div>
|
||||
{:then surveys}
|
||||
{#await getGrades()}
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des notes…
|
||||
</div>
|
||||
{:then grades}
|
||||
<div class="card mb-5">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Login</th>
|
||||
{#each surveys as survey (survey.id)}
|
||||
{#if survey.corrected && (promo === null || survey.promo == promo)}
|
||||
<th><a href="surveys/{survey.id}" style="text-decoration: none">{survey.title}</a></th>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getUsers()}
|
||||
<tr>
|
||||
<td colspan="20">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des étudiants…
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{:then users}
|
||||
{#each users as user (user.id)}
|
||||
{#if promo === null || user.promo === promo}
|
||||
<tr>
|
||||
<td><a href="users/{user.id}" style="text-decoration: none">{user.id}</a></td>
|
||||
<td><a href="users/{user.login}" style="text-decoration: none">{user.login}</a></td>
|
||||
{#each surveys as survey (survey.id)}
|
||||
{#if survey.corrected && (promo === null || survey.promo == promo)}
|
||||
<td>{grades[user.id][survey.id]?grades[user.id][survey.id]:"N/A"}</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/await}
|
||||
{/await}
|
||||
134
ui/src/components/SurveyAdmin.svelte
Normal file
134
ui/src/components/SurveyAdmin.svelte
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { getQuestions } from '../lib/questions';
|
||||
import { ToastsStore } from '../stores/toasts';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let survey = null;
|
||||
|
||||
function saveSurvey() {
|
||||
survey.save().then((response) => {
|
||||
dispatch('saved');
|
||||
}, (error) => {
|
||||
ToastsStore.addErrorToast({
|
||||
msg: error.errmsg,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function deleteSurvey() {
|
||||
survey.delete().then((response) => {
|
||||
goto(`surveys`);
|
||||
}, (error) => {
|
||||
ToastsStore.addErrorToast({
|
||||
msg: error.errmsg,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function duplicateSurvey() {
|
||||
survey.duplicate().then((response) => {
|
||||
goto(`surveys/${response.id}`);
|
||||
}).catch((error) => {
|
||||
ToastsStore.addErrorToast({
|
||||
msg: error.errmsg,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={saveSurvey}>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="title" class="col-form-label col-form-label-sm">Titre du questionnaire</label>
|
||||
</div>
|
||||
<div class="col-sm-8">{survey.id}
|
||||
<input type="text" class="form-control form-control-sm" id="title" bind:value={survey.title}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="promo" class="col-form-label col-form-label-sm">Promo</label>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-4 col-lg-2">
|
||||
<input type="number" step="1" min="0" max="2068" class="form-control form-control-sm" id="promo" bind:value={survey.promo}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="group" class="col-form-label col-form-label-sm">Restreindre au groupe</label>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-4 col-lg-2">
|
||||
<input class="form-control form-control-sm" id="group" bind:value={survey.group}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="direct" class="col-form-label col-form-label-sm">Question en direct</label>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
{#await getQuestions(survey.id) then questions}
|
||||
<select id="direct" class="form-select form-select-sm" bind:value={survey.direct}>
|
||||
<option value={null}>Pas de direct</option>
|
||||
<option value={0}>Pause</option>
|
||||
{#each questions as question (question.id)}
|
||||
<option value={question.id}>{question.id} - {question.title}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control form-control-sm" id="start_availability" bind:value={survey.start_availability}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3 text-sm-end">
|
||||
<label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control form-control-sm" id="end_availability" bind:value={survey.end_availability}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cols-3 mx-1 my-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="shown" bind:checked={survey.shown}>
|
||||
<label class="form-check-label" for="shown">
|
||||
Afficher le questionnaire
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="corrected" bind:checked={survey.corrected}>
|
||||
<label class="form-check-label" for="corrected">
|
||||
Marqué comme corrigé
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Enregistrer</button>
|
||||
{#if survey.id}
|
||||
<button type="button" class="btn btn-danger" on:click={deleteSurvey}>Supprimer</button>
|
||||
<button type="button" class="btn btn-secondary" on:click={duplicateSurvey}>Dupliquer avec ces nouveaux paramètres</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<hr>
|
||||
12
ui/src/components/SurveyBadge.svelte
Normal file
12
ui/src/components/SurveyBadge.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let survey;
|
||||
let className = '';
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
{#if survey.direct != null}<span class="badge bg-danger {className}">Direct</span>
|
||||
{:else if survey.startAvailability() > Date.now()}<span class="badge bg-info {className}">Prévu</span>
|
||||
{:else if survey.endAvailability() > Date.now()}<span class="badge bg-warning {className}">En cours</span>
|
||||
{:else if !survey.corrected}<span class="badge bg-primary text-light {className}">Terminé</span>
|
||||
{:else}<span class="badge bg-success {className}">Corrigé</span>
|
||||
{/if}
|
||||
92
ui/src/components/SurveyList.svelte
Normal file
92
ui/src/components/SurveyList.svelte
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { user } from '../stores/user';
|
||||
import DateFormat from '../components/DateFormat.svelte';
|
||||
import SurveyBadge from '../components/SurveyBadge.svelte';
|
||||
import { getSurveys } from '../lib/surveys';
|
||||
import { getScore } from '../lib/users';
|
||||
|
||||
let req_surveys = getSurveys();
|
||||
export let direct = null;
|
||||
|
||||
req_surveys.then((surveys) => {
|
||||
for (const survey of surveys) {
|
||||
if (survey.direct != null) {
|
||||
direct = survey;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Intitulé</th>
|
||||
<th>Date</th>
|
||||
{#if $user}
|
||||
<th>Score</th>
|
||||
{/if}
|
||||
</tr>
|
||||
</thead>
|
||||
{#await req_surveys}
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-3">
|
||||
<div class="spinner-border mx-3" role="status"></div>
|
||||
<span>Chargement des questionnaires …</span>
|
||||
</td>
|
||||
</tr>
|
||||
{:then surveys}
|
||||
<tbody style="cursor: pointer;">
|
||||
{#each surveys as survey, sid (survey.id)}
|
||||
{#if (survey.shown || survey.direct != null) && (!$user || (!$user.was_admin || $user.promo == survey.promo) || $user.is_admin)}
|
||||
{#if $user && $user.is_admin && (sid == 0 || surveys[sid-1].promo != survey.promo)}
|
||||
<tr class="bg-info text-light">
|
||||
<th colspan="5" class="fw-bold">
|
||||
{survey.promo}
|
||||
</th>
|
||||
</tr>
|
||||
{/if}
|
||||
<tr on:click={e => goto(survey.direct != null ?`surveys/${survey.id}/live`:$user.is_admin?`surveys/${survey.id}/responses`:`surveys/${survey.id}`)}>
|
||||
<td>
|
||||
{survey.title}
|
||||
<SurveyBadge {survey} class="float-end" />
|
||||
</td>
|
||||
{#if survey.start_availability > Date.now()}
|
||||
<td>
|
||||
<DateFormat date={survey.start_availability} dateStyle="medium" timeStyle="medium" />
|
||||
<svg class="bi bi-arrow-bar-right" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.146 6.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L14.793 10l-2.647-2.646a.5.5 0 010-.708z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M8 10a.5.5 0 01.5-.5H15a.5.5 0 010 1H8.5A.5.5 0 018 10zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"></path></svg>
|
||||
</td>
|
||||
{:else}
|
||||
<td>
|
||||
<svg class="bi bi-arrow-bar-left" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.854 6.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L5.207 10l2.647-2.646a.5.5 0 000-.708z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12 10a.5.5 0 00-.5-.5H5a.5.5 0 000 1h6.5a.5.5 0 00.5-.5zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"></path></svg>
|
||||
<DateFormat date={survey.end_availability} dateStyle="medium" timeStyle="medium" />
|
||||
</td>
|
||||
{/if}
|
||||
{#if !$user}
|
||||
{:else if !survey.corrected}
|
||||
<td>N/A</td>
|
||||
{:else}
|
||||
<td>
|
||||
{#await getScore(survey)}
|
||||
<div class="spinner-border spinner-border-sm" role="status"></div>
|
||||
{:then score}
|
||||
{score.score}
|
||||
{/await}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
{/await}
|
||||
{#if $user && $user.is_admin}
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<a href="surveys/new" class="btn btn-sm btn-primary">Ajouter un questionnaire</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
{/if}
|
||||
</table>
|
||||
111
ui/src/components/SurveyQuestions.svelte
Normal file
111
ui/src/components/SurveyQuestions.svelte
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<script>
|
||||
import { user } from '../stores/user';
|
||||
import { ToastsStore } from '../stores/toasts';
|
||||
import QuestionForm from '../components/QuestionForm.svelte';
|
||||
import { Question } from '../lib/questions';
|
||||
|
||||
export let survey = null;
|
||||
export let id_user = null;
|
||||
export let questions = [];
|
||||
let newquestions = [];
|
||||
let submitInProgress = false;
|
||||
|
||||
function submitAnswers() {
|
||||
submitInProgress = true;
|
||||
|
||||
const res = [];
|
||||
for (const r in responses) {
|
||||
res.push({"id_question": responses[r].id_question, "value": String(responses[r].value)})
|
||||
}
|
||||
|
||||
survey.submitAnswers(res, id_user).then((response) => {
|
||||
submitInProgress = false;
|
||||
ToastsStore.addToast({
|
||||
msg: "Vos réponses ont bien étés sauvegardées.",
|
||||
color: "success",
|
||||
title: "Questionnaire",
|
||||
});
|
||||
}, (error) => {
|
||||
submitInProgress = false;
|
||||
ToastsStore.addErrorToast({
|
||||
msg: "Une erreur s'est produite durant l'envoi de vos réponses : " + error + "\nVeuillez réessayer dans quelques instants.",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function addQuestion() {
|
||||
const q = new Question();
|
||||
q.id_survey = survey.id;
|
||||
newquestions.push(q);
|
||||
newquestions = newquestions;
|
||||
}
|
||||
|
||||
function deleteQuestion(question, qid) {
|
||||
question.delete().then(() => {
|
||||
questions.splice(qid, 1);
|
||||
questions = questions;
|
||||
})
|
||||
}
|
||||
|
||||
function deleteNewQuestion(question, qid) {
|
||||
if (question.id) {
|
||||
question.delete().then(() => {
|
||||
newquestions.splice(qid, 1);
|
||||
newquestions = newquestions;
|
||||
})
|
||||
} else {
|
||||
newquestions.splice(qid, 1);
|
||||
newquestions = newquestions;
|
||||
}
|
||||
}
|
||||
|
||||
let responses = {};
|
||||
for (const q of questions) {
|
||||
responses[q.id] = {id_question: q.id, value: ""};
|
||||
}
|
||||
survey.retrieveAnswers(id_user).then((response) => {
|
||||
if (response) {
|
||||
for (const res of response.reverse()) {
|
||||
responses[res.id_question] = res;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<form class="mb-5" on:submit|preventDefault={submitAnswers}>
|
||||
{#each questions as question, qid (question.id)}
|
||||
<QuestionForm
|
||||
{survey}
|
||||
qid={qid}
|
||||
question={question}
|
||||
response_history={responses[question.id]}
|
||||
readonly={survey.isFinished() && !$user.is_admin}
|
||||
on:delete={() => deleteQuestion(question, qid)}
|
||||
bind:value={responses[question.id].value}
|
||||
/>
|
||||
{/each}
|
||||
{#each newquestions as question, qid (qid)}
|
||||
<QuestionForm
|
||||
qid={questions.length + qid}
|
||||
question={question}
|
||||
edit
|
||||
on:delete={() => deleteNewQuestion(question, qid)}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
{#if !survey.corrected || $user.is_admin}
|
||||
<button type="submit" class="btn btn-primary" disabled={submitInProgress || (survey.isFinished() && !$user.is_admin)}>
|
||||
{#if submitInProgress}
|
||||
<div class="spinner-border spinner-border-sm me-1" role="status"></div>
|
||||
{/if}
|
||||
Soumettre les réponses
|
||||
</button>
|
||||
{/if}
|
||||
{#if $user && $user.is_admin}
|
||||
<button type="button" class="btn btn-info" on:click={addQuestion}>
|
||||
Ajouter une question
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
18
ui/src/components/Toaster.svelte
Normal file
18
ui/src/components/Toaster.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
import { ToastsStore } from '../stores/toasts';
|
||||
</script>
|
||||
|
||||
<div class="toast-container position-absolute top-0 end-0 p-3">
|
||||
{#each $ToastsStore.toasts as toast}
|
||||
<div class="toast show" role="alert">
|
||||
<div class="toast-header">
|
||||
<div class="bg-{toast.color} rounded me-2"> </div>
|
||||
<strong>{#if toast.title}{toast.title}{:else}Questionnaire{/if}</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
{toast.msg}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
61
ui/src/components/UserSurveys.svelte
Normal file
61
ui/src/components/UserSurveys.svelte
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { getSurveys } from '../lib/surveys';
|
||||
import { getUser, getUserGrade, getUserScore } from '../lib/users';
|
||||
|
||||
export let student = null;
|
||||
export let allPromos = false;
|
||||
</script>
|
||||
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Titre</th>
|
||||
<th>Promo</th>
|
||||
<th>Avancement</th>
|
||||
<th>Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#await getSurveys()}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des questionnaires…
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{:then surveys}
|
||||
{#each surveys as survey, sid (survey.id)}
|
||||
{#if allPromos || survey.promo === student.promo}
|
||||
<tr on:click={e => goto(`users/${student.id}/surveys/${survey.id}`)}>
|
||||
<td>{survey.id}</td>
|
||||
<td>{survey.title}</td>
|
||||
<td>{survey.promo}</td>
|
||||
{#await getUserGrade(student.id, survey)}
|
||||
<td>
|
||||
<div class="spinner-border spinner-border-sm" role="status"></div>
|
||||
</td>
|
||||
{:then gr}
|
||||
<td title="{gr.grades}">
|
||||
{gr.avancement * 100} %
|
||||
</td>
|
||||
{/await}
|
||||
{#await getUserScore(student.id, survey)}
|
||||
<td>
|
||||
<div class="spinner-border spinner-border-sm" role="status"></div>
|
||||
</td>
|
||||
{:then score}
|
||||
<td>
|
||||
{score.score}{#if score.score >= 0}/20{/if}
|
||||
</td>
|
||||
{/await}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
60
ui/src/components/ValidateSubmissions.svelte
Normal file
60
ui/src/components/ValidateSubmissions.svelte
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<script>
|
||||
import { user } from '../stores/user';
|
||||
import DateFormat from '../components/DateFormat.svelte';
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
|
||||
const rendus_baseurl = "https://virli.nemunai.re/rendus/";
|
||||
|
||||
async function getUserRendus() {
|
||||
const res = await fetch(`${rendus_baseurl}${$user.login}.json`)
|
||||
if (res.status == 200) {
|
||||
return await res.json();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<table class="table {className}">
|
||||
{#await getUserRendus()}
|
||||
Please wait...
|
||||
{:then rendus}
|
||||
<thead>
|
||||
<tr>
|
||||
{#each Object.keys(rendus) as renduname, rid (rid)}
|
||||
<th>{renduname}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{#each Object.keys(rendus) as renduname, rid (rid)}
|
||||
<th
|
||||
class:bg-danger={!rendus[renduname]}
|
||||
class:text-center={!rendus[renduname]}
|
||||
class:bg-success={rendus[renduname]}
|
||||
>
|
||||
{#if rendus[renduname]}
|
||||
<DateFormat date={rendus[renduname].date} dateStyle="medium" timeStyle="medium" /><br>
|
||||
<span class="hash" title={rendus[renduname].hash}>{rendus[renduname].hash}</span>
|
||||
{:else}
|
||||
–
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
{/await}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.hash {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue