Move new ui to ui directory
This commit is contained in:
parent
bb72c351ac
commit
f85758ef33
56 changed files with 0 additions and 0 deletions
111
ui/src/routes/users/[uid]/index.svelte
Normal file
111
ui/src/routes/users/[uid]/index.svelte
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<script context="module">
|
||||
export async function load({ params }) {
|
||||
return {
|
||||
props: {
|
||||
uid: params.uid,
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import UserSurveys from '../../../components/UserSurveys.svelte';
|
||||
import { user } from '../../../stores/user';
|
||||
import { getSurveys } from '../../../lib/surveys';
|
||||
import { getUser, getUserGrade, getUserScore } from '../../../lib/users';
|
||||
|
||||
export let uid;
|
||||
|
||||
let allPromos = false;
|
||||
</script>
|
||||
|
||||
{#await getUser(uid)}
|
||||
<h2>
|
||||
Étudiant
|
||||
</h2>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des détails…
|
||||
</div>
|
||||
{:then student}
|
||||
<div class="card mb-5">
|
||||
<div class="card-header d-flex justify-content-center align-items-center">
|
||||
<h2 class="card-title text-center">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
{#if student.firstname}
|
||||
{student.firstname} {student.lastname}
|
||||
{:else}
|
||||
{student.login}
|
||||
{/if}
|
||||
</h2>
|
||||
{#if student.promo}
|
||||
<span class="badge bg-success ms-1">{student.promo}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-3 text-center">
|
||||
<a href="https://photos.cri.epita.fr/{student.login}" target="_blank">
|
||||
<img src="https://photos.cri.epita.fr/thumb/{student.login}" alt="avatar" class="img-thumbnail" style="max-height: 250px">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<dl class="row">
|
||||
<dt class="col-2">ID</dt>
|
||||
<dd class="col-10">{student.id}</dd>
|
||||
|
||||
<dt class="col-2">Login</dt>
|
||||
<dd class="col-10">
|
||||
<a href="//cri.epita.fr/users/{student.login}" target="_blank">
|
||||
{student.login}
|
||||
</a>
|
||||
</dd>
|
||||
|
||||
<dt class="col-2">E-mail</dt>
|
||||
<dd class="col-10"><a href="mailto:{student.email}">{student.email}</a></dd>
|
||||
|
||||
<dt class="col-2">Nom</dt>
|
||||
<dd class="col-10">{student.lastname}</dd>
|
||||
|
||||
<dt class="col-2">Prénom</dt>
|
||||
<dd class="col-10">{student.firstname}</dd>
|
||||
|
||||
<dt class="col-2">Inscription</dt>
|
||||
<dd class="col-10">{student.time}</dd>
|
||||
|
||||
<dt class="col-2">Groupes</dt>
|
||||
<dd class="col-10">
|
||||
<ul ng-if="student.groups">
|
||||
{#each student.groups.split(',').slice(1) as g, gid (gid)}
|
||||
<li>
|
||||
<a href="https://cri.epita.fr/group/{g}/">{g}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</dd>
|
||||
|
||||
<dt class="col-2">Admin</dt>
|
||||
<dd class="col-10">{student.is_admin?"Oui":"Non"}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<button
|
||||
class="btn btn-secondary float-end"
|
||||
class:active={allPromos}
|
||||
on:click={e => allPromos = !allPromos}
|
||||
>
|
||||
Toutes les promos
|
||||
</button>
|
||||
<h3 class="card-title">
|
||||
Questionnaires
|
||||
</h3>
|
||||
</div>
|
||||
<UserSurveys
|
||||
{student}
|
||||
{allPromos}
|
||||
/>
|
||||
</div>
|
||||
{/await}
|
||||
64
ui/src/routes/users/[uid]/surveys/[sid].svelte
Normal file
64
ui/src/routes/users/[uid]/surveys/[sid].svelte
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<script context="module">
|
||||
export async function load({ params }) {
|
||||
return {
|
||||
props: {
|
||||
sid: params.sid,
|
||||
uid: params.uid,
|
||||
}
|
||||
};
|
||||
}
|
||||
</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';
|
||||
import { getUser } from '../../../../lib/users';
|
||||
|
||||
export let sid;
|
||||
export let uid;
|
||||
</script>
|
||||
|
||||
{#await getUser(uid)}
|
||||
<h2>
|
||||
Étudiant
|
||||
</h2>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des détails…
|
||||
</div>
|
||||
{:then student}
|
||||
{#await getSurvey(sid)}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-primary mx-3" role="status"></div>
|
||||
<span>Chargement du questionnaire …</span>
|
||||
</div>
|
||||
{:then survey}
|
||||
<div class="d-flex align-items-center">
|
||||
<h2>
|
||||
<a href="users/{student.id}/surveys/" class="text-muted" style="text-decoration: none">{student.login}</a> /
|
||||
{survey.title}
|
||||
</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 …</span>
|
||||
</div>
|
||||
{:then questions}
|
||||
<SurveyQuestions {survey} {questions} id_user={uid} />
|
||||
{/await}
|
||||
{:catch error}
|
||||
<div class="text-center">
|
||||
<h2>
|
||||
<a href="surveys/" class="text-muted" style="text-decoration: none"><</a>
|
||||
Questionnaire introuvable
|
||||
</h2>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{/await}
|
||||
{/await}
|
||||
64
ui/src/routes/users/[uid]/surveys/index.svelte
Normal file
64
ui/src/routes/users/[uid]/surveys/index.svelte
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<script context="module">
|
||||
export async function load({ params }) {
|
||||
return {
|
||||
props: {
|
||||
uid: params.uid,
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import UserSurveys from '../../../../components/UserSurveys.svelte';
|
||||
import { user } from '../../../../stores/user';
|
||||
import { getSurveys } from '../../../../lib/surveys';
|
||||
import { getUser, getUserGrade, getUserScore } from '../../../../lib/users';
|
||||
|
||||
export let uid;
|
||||
|
||||
let allPromos = false;
|
||||
</script>
|
||||
|
||||
{#await getUser(uid)}
|
||||
<h2>
|
||||
Étudiant
|
||||
</h2>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border me-2" role="status"></div>
|
||||
Chargement des détails…
|
||||
</div>
|
||||
{:then student}
|
||||
<div class="card mb-5">
|
||||
<div class="card-header d-flex justify-content-center align-items-center">
|
||||
<h2 class="card-title text-center">
|
||||
<a href="users/{student.id}"><i class="bi bi-chevron-left"></i></a>
|
||||
<i class="bi bi-person-fill"></i>
|
||||
{#if student.firstname}
|
||||
{student.firstname} {student.lastname}
|
||||
{:else}
|
||||
{student.login}
|
||||
{/if}
|
||||
</h2>
|
||||
{#if student.promo}
|
||||
<span class="badge bg-success ms-1">{student.promo}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<button
|
||||
class="btn btn-secondary float-end"
|
||||
class:active={allPromos}
|
||||
on:click={e => allPromos = !allPromos}
|
||||
>
|
||||
Toutes les promos
|
||||
</button>
|
||||
<h3 class="card-title">
|
||||
Questionnaires
|
||||
</h3>
|
||||
</div>
|
||||
<UserSurveys
|
||||
{student}
|
||||
{allPromos}
|
||||
/>
|
||||
</div>
|
||||
{/await}
|
||||
79
ui/src/routes/users/index.svelte
Normal file
79
ui/src/routes/users/index.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { user } from '../../stores/user';
|
||||
import DateFormat from '../../components/DateFormat.svelte';
|
||||
import { getUsers, getPromos } from '../../lib/users';
|
||||
|
||||
function showUser(user) {
|
||||
goto(`users/${user.id}`)
|
||||
}
|
||||
|
||||
let filterPromo = "";
|
||||
</script>
|
||||
|
||||
{#if $user && $user.is_admin}
|
||||
<a href="grades" class="btn btn-success ml-1 float-end" title="Notes">
|
||||
<i class="bi bi-files"></i>
|
||||
</a>
|
||||
{#await getPromos() then promos}
|
||||
<div class="float-end me-2">
|
||||
<select class="form-select" bind:value={filterPromo}>
|
||||
<option value="">-</option>
|
||||
{#each promos as promo, pid (pid)}
|
||||
<option value={promo}>{promo}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
<h2>
|
||||
Étudiants
|
||||
</h2>
|
||||
|
||||
{#await getUsers()}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-danger mx-3" role="status"></div>
|
||||
<span>Chargement des étudiants …</span>
|
||||
</div>
|
||||
{:then users}
|
||||
<table class="table table-sm table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Login</th>
|
||||
<th>E-mail</th>
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Date d'inscription</th>
|
||||
<th>Promo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each users.filter((u) => (filterPromo === "" || filterPromo === u.promo)) as u, uid (u.id)}
|
||||
<tr
|
||||
class:bg-danger={u.is_admin}
|
||||
>
|
||||
<td>
|
||||
{u.id}
|
||||
<div class="d-inline-block float-end" style="max-height: 1.5em">
|
||||
<img src="//photos.cri.epita.fr/square/{u.login}" alt={u.login} style="max-height: 2.5em; margin-top: -0.33em">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="users/{u.login}">{u.login}</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="mailto:{u.email}">{u.email}</a>
|
||||
</td>
|
||||
<td>{u.lastname}</td>
|
||||
<td>{u.firstname}</td>
|
||||
<td>
|
||||
<DateFormat date={u.time} dateStyle="short" timeStyle="medium" />
|
||||
</td>
|
||||
<td>{u.promo}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/await}
|
||||
Reference in a new issue