Commit 7dfd6df2 authored by GuiΩ's avatar GuiΩ
Browse files

refactor(templates): Use pug in template

parent 03fec0b1
<template>
<div id="app">
<router-view/>
</div>
<template lang="pug">
#app
router-view/
</template>
<script>
......
<template>
<transition v-if="show">
<div class="frame-mask">
<div class="frame-wrapper">
<div class="classe-edit">
<table>
<tr>
<td><label for="nom">Nom</label></td>
<td><input id="nom" v-model="classe.nom"></td>
</tr>
<tr>
<td><label for="nom_latex">Nom en LaTeX</label></td>
<td><input id="nom_latex" v-model="classe.nom_latex"></td>
</tr>
<tr>
<td><label for="annee">Année</label></td>
<td><input id="annee" v-model="classe.annee"></td>
</tr>
<tr>
<td></td>
<td>
<button @click="$emit('save-classe')">Valider</button>
<button @click="$emit('cancel-edition')">Annuler</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</transition>
<template lang="pug">
transition(v-if="show")
.frame-mask
.frame-wrapper
.classe-edit
table
tr
td
label(for="nom")
td
input#nom(v-model="classe.nom")
tr
td
label(for="nom_latex") Nom en LaTeX
td
input#nom_latex(v-model="classe.nom_latex")
tr
td
label(for="annee") Année
td
input#annee(v-model="classe.annee")
tr
td
td
button(@click="$emit('save-classe')") Valider
button(@click="$emit('cancel-edition')") Annuler
</template>
<script>
......
<template>
<div id="config-classes">
<classe-edit :classe="classeEdited"
:show="classeEditing"
@message="$emit('message', $event)"
@save-classe="saveClasse"
@cancel-edition="classeEditing = false"/>
<button @click="editClasse()">Ajouter une classe</button>
<table>
<thead>
<tr>
<th>Classe</th>
<th>Année</th>
</tr>
</thead>
<tr v-for="classe in classes" class="classe" @click="editClasse(classe)">
<td>{{ classe.nom }}</td>
<td>{{ classe.annee }}</td>
</tr>
</table>
</div>
<template lang="pug">
#config-classes
classe-edit(
:classe="classeEdited"
:show="classeEditing"
@message="$emit('message', $event)"
@save-classe="saveClasse"
@cancel-edition="classeEditing = false")/
button(@click="editClasse()") Ajouter une classe
table
thead
tr
th Classe
th Année
tr.classe(
v-for="classe in classes"
@click="editClasse(classe)")
td {{ classe.nom }}
td {{ classe.annee }}
</template>
<script>
......
<template>
<div>
<h3>Modèles LaTeX:</h3>
<template v-for="model of models">
<button
<template lang="pug">
div
h3 Modèles LaTeX:
template(v-for="model of models")
button(
v-if="model.id || newModel"
v-bind:key="model.id"
v-bind:class="['tab-button', { active: currentModel === model }]"
v-on:click="currentModel = model">
{{ model.label }}
</button>
</template>
<button @click="newModel = true; currentModel = models[null]" :disabled="newModel">+</button>
<keep-alive>
<config-latex-model v-if="currentModel" :model_id="model_id" class="tab"
@message="$refs.messageBox.show($event)"></config-latex-model>
</keep-alive>
</div>
v-on:click="currentModel = model"
) {{ model.label }}
button(
@click="newModel = true; currentModel = models[null]"
:disabled="newModel"
) +
keep-alive
config-latex-model.tab(
v-if="currentModel"
:model_id="model_id"
@message="$refs.messageBox.show($event)")
</template>
<script>
......
<template>
<div>
<div v-if="model" class="model">
<table>
<tr>
<td>Nom :</td>
<td><input v-if="model"
v-model="model.label"
:disabled="!editable"
@input="$refs.saveBtn.disabled = false; $refs.saveInit.disabled = false"/>
</td>
</tr>
<tr>
<td>Description :</td>
<td><input v-if="model"
v-model="model.description"
:disabled="!editable"
size="80"
@input="$refs.saveBtn.disabled = false;$refs.saveInit.disabled = false"/></td>
</tr>
<tr>
<td>Nom de fichier :</td>
<td><input v-if="model"
v-model="model.file_name"
:disabled="!editable"
size="80"
@input="$refs.saveBtn.disabled = false;$refs.saveInit.disabled = false"/></td>
</tr>
<tr>
<td>type :</td>
<td>
<input id="HE" v-model="model.type" :disabled="!editable" type="radio" value="HE" @input="typeChanged"/>
<label for="HE">Header</label>
<input id="FE" v-model="model.type" :disabled="!editable" type="radio" value="FE" @input="typeChanged"/>
<label for="FE">Feuille</label>
<input id="SE" v-model="model.type" :disabled="!editable" type="radio" value="SE" @input="typeChanged"/>
<label for="SE">Séance</label>
<input id="QU" v-model="model.type" :disabled="!editable" type="radio" value="QU" @input="typeChanged"/>
<label for="QU">Question</label>
</td>
</tr>
</table>
<textarea v-if=" model.type === 'HE'" v-model="header" :disabled="!editable" cols="80" rows="30">
</textarea>
<textarea v-if=" model.type === 'FE'" v-model="feuille" :disabled="!editable" cols="80" rows="30">
</textarea>
<textarea v-if="model.type === 'FE' || model.type === 'SE'" v-model="seance" :disabled="!editable" cols="80"
rows="30">
</textarea>
<textarea v-if="model.type === 'FE' || model.type === 'SE' || model.type === 'QU'" v-model="question"
:disabled="!editable" cols="80" rows="30">
</textarea>
</div>
<button ref="saveBtn" disabled @click="save">Enregistrer</button>&nbsp;
<button ref="saveInit" disabled @click="loadModel">Réinitialiser</button>
</div>
<template lang="pug">
div
div.model(v-if="model")
table
tr
td Nom :
td
input(
v-if="model"
v-model="model.label"
:disabled="!editable"
@input="$refs.saveBtn.disabled = false; $refs.saveInit.disabled = false")/
tr
td Description :
td
input(
v-if="model"
v-model="model.description"
:disabled="!editable"
size="80"
@input="$refs.saveBtn.disabled = false;$refs.saveInit.disabled = false")/
tr
td Nom de fichier :
td
input(
v-if="model"
v-model="model.file_name"
:disabled="!editable"
size="80"
@input="$refs.saveBtn.disabled = false;$refs.saveInit.disabled = false")/
tr
td type :
td
input.HE(
v-model="model.type"
:disabled="!editable"
type="radio"
value="HE"
@input="typeChanged")/
label(for="HE") Header
input.FE(
v-model="model.type"
:disabled="!editable"
type="radio"
value="FE"
@input="typeChanged")/
label(for="FE") Feuille
input.SE(
v-model="model.type"
:disabled="!editable"
type="radio"
value="SE"
@input="typeChanged")/
label(for="SE") Séance
input.QU(
v-model="model.type"
:disabled="!editable"
type="radio"
value="QU"
@input="typeChanged")/
label(for="QU") Question
textarea(
v-if=" model.type === 'HE'"
v-model="header"
:disabled="!editable"
cols="80"
rows="30")
textarea(
v-if="model.type === 'FE'"
v-model="feuille"
:disabled="!editable"
cols="80"
rows="30")
textarea(
v-if="model.type === 'FE' || model.type === 'SE'"
v-model="seance"
:disabled="!editable"
cols="80"
rows="30")
textarea(
v-if="model.type === 'FE' || model.type === 'SE' || model.type === 'QU'"
v-model="question"
:disabled="!editable"
cols="80"
rows="30")
button(ref="saveBtn" disabled @click="save") Enregistrer
|&nbsp;
button(ref="saveInit" disabled @click="loadModel") Réinitialiser
</template>
<script>
......
<template>
<div>
Non encore implémenté.
</div>
<template lang="pug">
div Non encore implémenté.
</template>
<script>
......
<template>
<div id="configuration">
<message-box ref="messageBox"/>
<router-link to="/am/">⮜ Retour aux activités mentales</router-link>
<h2>Configuration:</h2>
<button
<template lang="pug">
#configuration
message-box(ref="messageBox")/
router-link(to="/am/") ⮜ Retour aux activités mentales
h2 Configuration:
button(
v-for="tab in tabs"
v-bind:key="tab.title"
v-bind:class="['tab-button', { active: currentComponent === tab.component }]"
v-on:click="currentComponent = tab.component">
{{ tab.title }}
</button>
<component v-bind:is="currentComponent" class="tab" @message="$refs.messageBox.show($event)"></component>
</div>
v-on:click="currentComponent = tab.component") {{ tab.title }}
component.tab(v-bind:is="currentComponent" @message="$refs.messageBox.show($event)")
</template>
<script>
......
<template>
<div>
<router-link to="/am/">⮜ Retour aux activités mentales</router-link>
<h2>Documentation</h2>
La documentation est comme le reste&nbsp;: succinte. Ce n'est qu'une ébauche qui devrait rapidement évoluer.
<h3>En Bref :</h3>
Une fois connecté(e), vous créez vos classe (lien 'Configuration' en haut à gauche)<br>
Une fois que cela est fait, vous revenez à la page principale.
<ul>
<li>Vous sélectionnez l'année et la classe pour laquelle vous voulez créer des activités mentales</li>
<li>Vous ajouter si besoin des feuilles et des séances dans les feuilles.</li>
<li>Vous selectionnez un thème puis un sous-thème,... jusqu'à faire apparaitre les questions
(les questions ne sont liées qu'aux feuilles de l'arbre)
</li>
<li>Lorque vous avez trouvé une question qui vous plait, vous l'insérez dans vos feuilles d'exercices par
glisser-déposer.
</li>
<li>Vous pouvez déplacer les questions d'une position à une autre.<br>
Pour supprimer une question il suffit de la glisser vers la liste des questions, à gauche.
</li>
<li>Lorsque votre feuille est prête, vous pouvez la télécharger en pdf
en cliquant sur le lien à côté du numéro de la feuille
</li>
<li>Une fois que vos élèves ont passé une séance, vous pouvez garder une tracer de la réussite de la classe
en cliquant sur le bouton 'saisir les notes', à droite de la séance.<br>
De même vous pouvez modifier la date en cliquat dessus et en tapant "Entrée" pour la valider.
</li>
<li>Une fois une question évaluée, il n'est plus possible de la retirer.
La glisser vers une autre séance en fera une copie.
</li>
</ul>
<h3>Ajout de questions</h3>
Lorsque l'on crée une nouvelle question, il faut suivre les étapes suivantes:
<ol>
<li>Créer la question (bouton "nouvelle question" ou bien "Dupliquer" dans le menu contextuel</li>
<li>La positionner à l'intérieur de chacun des thèmes dont elle fait partie</li>
<li>Demander sa validation (Éditer la question > 'À valider')<br>
À partir de ce moment elle n'est plus modifiable, mais son auteur peut l'utiliser dans ses séances.
</li>
<li> La question sera relue et validée par un administrateur du site.<br>
Elle sera alors disponible pour tous les utilisateurs.
</li>
</ol>
<h3>Modèles LaTeX</h3>
<template lang="pug">
div
router-link(to="/am/") ⮜ Retour aux activités mentales
h2 Documentation
|La documentation est comme le reste&nbsp;: succinte. Ce n'est qu'une ébauche qui devrait rapidement évoluer.
h3 En Bref :
|Une fois connecté(e), vous créez vos classe (lien 'Configuration' en haut à gauche)<br>
|Une fois que cela est fait, vous revenez à la page principale.
ul
li Vous sélectionnez l'année et la classe pour laquelle vous voulez créer des activités mentales
li Vous ajouter si besoin des feuilles et des séances dans les feuilles.
li Vous selectionnez un thème puis un sous-thème,... jusqu'à faire apparaitre les questions
|(les questions ne sont liées qu'aux feuilles de l'arbre)
li Lorque vous avez trouvé une question qui vous plait, vous l'insérez dans vos feuilles d'exercices par glisser-déposer.
li Vous pouvez déplacer les questions d'une position à une autre.
br
|Pour supprimer une question il suffit de la glisser vers la liste des questions, à gauche.
li Lorsque votre feuille est prête, vous pouvez la télécharger en pdf
|en cliquant sur le lien à côté du numéro de la feuille
li Une fois que vos élèves ont passé une séance, vous pouvez garder une tracer de la réussite de la classe
|en cliquant sur le bouton 'saisir les notes', à droite de la séance.
br
|De même vous pouvez modifier la date en cliquat dessus et en tapant "Entrée" pour la valider.
li Une fois une question évaluée, il n'est plus possible de la retirer.
|La glisser vers une autre séance en fera une copie.
h3 Ajout de questions
|Lorsque l'on crée une nouvelle question, il faut suivre les étapes suivantes:
ol
li Créer la question (bouton "nouvelle question" ou bien "Dupliquer" dans le menu contextuel
li La positionner à l'intérieur de chacun des thèmes dont elle fait partie
li Demander sa validation (Éditer la question > 'À valider')
br
|À partir de ce moment elle n'est plus modifiable, mais son auteur peut l'utiliser dans ses séances.
li La question sera relue et validée par un administrateur du site.
br
|Elle sera alors disponible pour tous les utilisateurs.
h3 Modèles LaTeX
Variables utilisables:
<ul>
<li>[[QUESTION]]: code LaTeX pour la question</li>
<li>[[ANNEE_SCO]]: année scolaire</li>
<li>[[CLASSE]]: nom de la classe</li>
<li>[[CLASSE_LATEX]]: code LaTeX pour le nom de la classe</li>
<li>[[NFEUILLE]]: le numéro de la feuille</li>
<li>[[NFEUILLE_n]]: le numéro de la feuille, codé sur n chiffre, complétés à gauche avec des 0</li>
<li>[[NSEANCE]]: le numéro de la séance</li>
<li> [[NSEANCE_n]]: le numéro de la séance, codé sur n chiffre, complétés à gauche avec des 0</li>
<li> [[NQUESTION]]: la place de la question dans la séance</li>
<li>[[NQUESTION_n]]: la place de la question dans la séance, codée sur n chiffre, complétés à gauche avec des 0 </li>
<li>[[IDQUESTION]] : l'identifiant de la question</li>
<li>[[IDQUESTION_n]] : l'identifiant de la question, codé sur n chiffre, complétés à gauche avec des 0</li>
<li>[[NIVEAU]]: le niveau de la classe</li>
<li>[[IMAGES_DIR]]: le répertoire des images (chemin absolu)</li>
<li>[[THUMBS_DIR]]: le répertoire des aperçus (chemin absolu)</li>
<li>[[NOT_FIRST]] <i>qqchose</i> [[END_NOT_FIRST]]: utilisé pour bouclé sur les feuilles, les séances ou les questions. Écrit <i>qqchose</i> si ce n'est pas le premier item de la boucle.</li>
<li>[[ONLY_FIRST]] <i>qqchose</i> [[END_ONLY_FIRST]]:utilisé pour bouclé sur les feuilles, les séances ou les questions. Écrit <i>qqchose</i> si c'est le premier item de la boucle.</li>
</ul>
</div>
ul
li [[QUESTION]]: code LaTeX pour la question
li [[ANNEE_SCO]]: année scolaire
li [[CLASSE]]: nom de la classe
li [[CLASSE_LATEX]]: code LaTeX pour le nom de la classe
li [[NFEUILLE]]: le numéro de la feuille
li [[NFEUILLE_n]]: le numéro de la feuille, codé sur n chiffre, complétés à gauche avec des 0
li [[NSEANCE]]: le numéro de la séance
li [[NSEANCE_n]]: le numéro de la séance, codé sur n chiffre, complétés à gauche avec des 0
li [[NQUESTION]]: la place de la question dans la séance
li [[NQUESTION_n]]: la place de la question dans la séance, codée sur n chiffre, complétés à gauche avec des 0
li [[IDQUESTION]] : l'identifiant de la question
li [[IDQUESTION_n]] : l'identifiant de la question, codé sur n chiffre, complétés à gauche avec des 0
li [[NIVEAU]]: le niveau de la classe
li [[IMAGES_DIR]]: le répertoire des images (chemin absolu)
li [[THUMBS_DIR]]: le répertoire des aperçus (chemin absolu)
li [[NOT_FIRST]]
i qqchose
|[[END_NOT_FIRST]]: utilisé pour bouclé sur les feuilles, les séances ou les questions. Écrit&#32;
i qqchose
| si ce n'est pas le premier item de la boucle.
li [[ONLY_FIRST]]
i qqchose
|[[END_ONLY_FIRST]]: utilisé pour boucler sur les feuilles, les séances ou les questions. Écrit&#32;
i qqchose
| si c'est le premier item de la boucle.
</template>
<script>
......
<template>
<div v-if="visible" class="context-menu" tabindex="0" @blur="$emit('on-close'); close()">
<slot></slot>
</div>
<template lang="pug">
.context-menu(
v-if="visible"
tabindex="0"
@blur="$emit('on-close'); close()")
slot
</template>
<script>
......
......@@ -14,29 +14,27 @@ Events:
question_ids: ids of questions of the updated scores}
'message' - event emitted to send a message
-->
<template>
<div class="feuille-list">
<div v-if="feuilles">
<template v-for="feuille_id in feuilles">
<feuille-list-feuille :feuille_id="feuille_id"
@message="$emit('message', $event)"
@question-edit="$emit('question-edit', $event)"
@question-drop="$emit('question-drop', $event)"
@feuille-changed="updateFeuille($event.feuille_id)"
@seance-changed="updateSeance($event.seance_id)"
@score-changed="scoreChanged($event)"
@seance-add="seanceAdd($event.feuille_id)"
@show-question-tooltip="$emit('show-question-tooltip', $event)"/>
</template>
</div>
<button v-if="classe" type="button" class="newfeuille-btn"
@click="$store.dispatch('feuilles/addFeuille')">
Ajouter une feuille
</button>
<span v-if="! classe">
Commencez par ajouter vos classes en cliquant sur "Configuration" en haut à gauche.
</span>
</div>
<template lang="pug">
.feuille-list
div(v-if="feuilles")
template(v-for="feuille_id in feuilles")
feuille-list-feuille(
:feuille_id="feuille_id"
@message="$emit('message', $event)"
@question-edit="$emit('question-edit', $event)"
@question-drop="$emit('question-drop', $event)"
@feuille-changed="updateFeuille($event.feuille_id)"
@seance-changed="updateSeance($event.seance_id)"
@score-changed="scoreChanged($event)"
@seance-add="seanceAdd($event.feuille_id)"
@show-question-tooltip="$emit('show-question-tooltip', $event)")/
button.newfeuille-btn(
v-if="classe"
type="button"
@click="$store.dispatch('feuilles/addFeuille')"
) Ajouter une feuille
span(v-if="! classe") Commencez par ajouter vos classes en cliquant sur "Configuration" en haut à gauche.
</template>
<script>
......
......@@ -10,33 +10,29 @@ Events:
question-edit - @see(FeuilleListFeuilleSeanceSlot)
question-drop - @see(FeuilleListFeuilleSeanceSlot)
-->
<template>
<div v-if="feuille" :data-testid="'feuille_' + feuille.id" class="feuille">
<div class="feuille-titre">feuille {{ feuille.position }}
<template v-for="model of $store.state.latex.models">
<template v-if="model.type === 'FE'">
<a :href="'api/feuille/' + feuille.id +'/get_pdf/?model_id=' + model.id">{{model.label}}.pdf</a>&nbsp;
</template>
</template>
</div>
<div v-if="feuille.seances && feuille.seances.length">
<template v-for="seance_id in feuille.seances">
<feuille-list-feuille-seance :key="seance_id"
:seance_id="seance_id"
@message="$emit('message', $event)"
@feuille-changed="$emit('feuille-changed', $event)"
@question-edit="$emit('question-edit', $event)"
@question-drop="$emit('question-drop', $event)"
@score-changed="$emit('score-changed', $event)"
@seance-changed="$emit('seance-changed', $event)"
@show-question-tooltip="$emit('show-question-tooltip', $event)"/>
</template>
</div>
<button type="button" class="newfeuille-btn"
@click="addSeance(feuille_id)">
Ajouter une séance
</button>
</div>
<template lang="pug">
.feuille(v-if="feuille" :data-testid="'feuille_' + feuille.id")
.feuille-titre feuille {{ feuille.position }}
template(v-for="model of $store.state.latex.models")
template(v-if="model.type === 'FE'")
a(:href="'api/feuille/' + feuille.id + '/get_pdf/?model_id=' + model.id") {{model.label}}.pdf
|&nbsp;
div(v-if="feuille.seances && feuille.seances.length")
template(v-for="seance_id in feuille.seances")
feuille-list-feuille-seance(
:key="seance_id"
:seance_id="seance_id"
@message="$emit('message', $event)"
@feuille-changed="$emit('feuille-changed', $event)"
@question-edit="$emit('question-edit', $event)"
@question-drop="$emit('question-drop', $event)"
@score-changed="$emit('score-changed', $event)"
@seance-changed="$emit('seance-changed', $event)"
@show-question-tooltip="$emit('show-question-tooltip', $event)")/
button.newfeuille-btn(
type="button"
@click="addSeance(feuille_id)"
) Ajouter une séance
</template>
<script>
......
......@@ -15,10 +15,10 @@ Events:
seance-changed: Event emitted when a seance have changed
$event = {seance_id: ...}
-->
<template>
<div v-if="seance" :data-testid="'seance_' + seance_id" class="seance">
<div>
<feuille-list-feuille-seance-slot