371 lines
15 KiB
Svelte
371 lines
15 KiB
Svelte
<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"><</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 …</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"}')} }
|
|
>
|
|
Pause
|
|
</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 + '}')} }
|
|
>
|
|
Lancer cette question
|
|
</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 …</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} %
|
|
</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 …</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} %
|
|
</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}
|