Skip to content

O
OpenQuizz
Commit 44aa8a43 authored by Jérémie Passerat's avatar Jérémie Passerat
Browse files
Options

Sauvegarde du 23/08 avant mise en ligne

parent f8214df8
Hide whitespace changes
Inline Side-by-side
Showing with 766 additions and 167 deletions
package-lock.json
View file @ 44aa8a43
......@@ -27,7 +27,8 @@
"vue-js-popover": "^1.2.1",
"vue-showdown": "^3.1.0",
"vue-simplemde": "^2.0.0",
"vue-star-rating": "^1.7.0"
"vue-star-rating": "^1.7.0",
"vuejs-toggle-switch": "^1.3.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......@@ -19647,6 +19648,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vuejs-toggle-switch": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/vuejs-toggle-switch/-/vuejs-toggle-switch-1.3.3.tgz",
"integrity": "sha512-eE3dOSdGlD+DK5BCFOkpK0tkFHmuKpFZF8KMHP6Fd+8uEPNHPtBxVPYLFpwRwiaJ1zgQDNARI7eC/Hw7WDY/wQ=="
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......@@ -36733,6 +36739,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuejs-toggle-switch": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/vuejs-toggle-switch/-/vuejs-toggle-switch-1.3.3.tgz",
"integrity": "sha512-eE3dOSdGlD+DK5BCFOkpK0tkFHmuKpFZF8KMHP6Fd+8uEPNHPtBxVPYLFpwRwiaJ1zgQDNARI7eC/Hw7WDY/wQ=="
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
src/Index.vue
View file @ 44aa8a43
......@@ -14,11 +14,11 @@
<Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
v-bind:contenuEnPublication="contenuEnPublication" @recalculerNotif="recalculerNotification"
@majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
v-bind:rechercherPublications="rechercherPublications"></Maj>
v-bind:rechercherPublications="rechercherPublications" v-bind:darktheme="darktheme"></Maj>
<Profil v-show="etat === 'Profil'" ></Profil>
<GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" v-bind:modeGestion="modeGestion" ></GererTagsLibres>
<TagsFixes v-show="etat === 'newContenu_Tags'"></TagsFixes>
<p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>
<!-- <p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>-->
<NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></NewContenu>
<ImporterFichier v-show="etat === 'importContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></ImporterFichier>
<span id="prout" v-show="hoverManuel">Manuel d'utilisation d'OpenQuizz</span>
......@@ -49,7 +49,7 @@ export default {
variante: false,
contenuEnPublication: "",
isNotif: false,
errorLogin: false,
// errorLogin: false,
auteur: "",
isRecu: false,
isPropose: false,
......@@ -58,7 +58,7 @@ export default {
nvoContenu: '',
rechercherPublications: false,
majContenus: false,
errorMessage: 'Login ou mot de passe erroné',
// errorMessage: 'Login ou mot de passe erroné',
darktheme: '',
deconnexion: false,
nouveauTitre: '',
......@@ -76,12 +76,12 @@ export default {
setLogged: function (event) {
if (event.isLogged){
this.etat = "Contenu"
this.errorLogin = false
//this.errorLogin = false
this.auteur = event.auteur
}
else {
/* else {
this.errorLogin = true
}
}*/
},
/**
* @vuese
......
src/Login.vue
View file @ 44aa8a43
......@@ -21,6 +21,9 @@
<button @click.prevent="logIn" >Connexion</button>
<p style="text-align: center; margin-top: 0vh; color: greenyellow" v-show="errorLogin">{{errorMessage}}</p>
</div>
</div>
</template>
......@@ -50,7 +53,8 @@ export default {
that.$emit("user_logged", {"isLogged" : true, "auteur": that.login})
}
}).catch(function () {
that.$emit("user_logged", {"isLogged" : false})
//that.$emit("user_logged", {"isLogged" : false})
that.errorLogin = true
})
},
keymonitor: function(event) {
......@@ -62,7 +66,9 @@ export default {
data: function () {
return {
login: "",
password: ""
password: "",
errorMessage: 'Login ou mot de passe erroné',
errorLogin: false
}
},
}
......@@ -76,7 +82,8 @@ body {
}
#loginForm {
width : 500px;
width : 56vh;
height: 35vh;
text-align: center;
align-content: center;
margin: 6% auto 0;
......
src/Maj.vue
View file @ 44aa8a43
<template>
<div>
<div id="switch" v-show="!detailContenu">
<span :class="darktheme ? 'switchDark' : 'switch'" v-bind:style="isModeRecu ? {'font-weight': 'bold'} : {'font-weight': 1}" @click="changerTabMaj" id="recues">Recues</span>
<span :class="darktheme ? 'switchDark' : 'switch'" v-bind:style="!isModeRecu ? {'font-weight': 'bold'} : {'font-weight': 1}" @click="changerTabMaj" id="proposees">Proposees</span>
</div>
<div v-show="!detailContenu">
<p> Vous êtes {{auteur}}</p>
<span v-bind:class="['niveau', {'niveau-down' : contenusRecu.length > 0}]" id="recues" v-on:click="naviguer">Maj Recues</span><br>
<div id="detailRecues" class="masque" v-bind:class="{'affiche' : contenusRecu.length > 0}">
<div id="detailRecues" v-show="isModeRecu">
<table>
<thead>
<thead :class="darktheme ? 'headerDark' : 'header'">
<tr>
<th colspan="6">Contenus</th>
</tr>
</thead>
<tr>
<tr class="titres">
<th>Titre</th>
<th>Auteur</th>
<th>Version courante</th>
......@@ -32,9 +33,9 @@
<td>{{ item.auteurDemande }}</td>
<td>{{ item.version_en_cours }}</td>
<td>01/06/2021</td>
<!-- <td id="valider" v-on:click="gererPublication(item, 'o')"><img v-bind:src="imageCoche" alt='' height=20 width=20></td>-->
<!-- <td id="valider" v-on:click="gererPublication(item, 'o')"><img v-bind:src="imageCoche" alt='' height=20 width=20></td>-->
<td id="valider" v-on:click="gererPublication(item, 'o')"><span class="validerPublicationRecue"></span></td>
<!-- <td id="refuser" v-on:click="gererPublication(item, 'n')"><img v-bind:src="imageCroix" alt='' height=20 width=20></td>-->
<!-- <td id="refuser" v-on:click="gererPublication(item, 'n')"><img v-bind:src="imageCroix" alt='' height=20 width=20></td>-->
<td id="valider" v-on:click="gererPublication(item, 'n')"><span class="supprimerPublicationRecue"></span></td>
......@@ -44,16 +45,14 @@
</div>
<span class="niveau" id="proposees" v-bind:class="{'niveau-down' : contenusPropose.length > 0}" v-on:click="naviguer">Maj Proposées</span>
<div id="detailProposees" class="masque" v-bind:class="{'affiche' : contenusPropose.length > 0}">
<div id="detailProposees" v-show="!isModeRecu">
<table>
<thead>
<thead :class="darktheme ? 'headerDark' : 'header'">
<tr>
<th colspan="8">Contenus</th>
</tr>
</thead>
<tr>
<tr class="titres">
<th>Titre</th>
<th>Auteur</th>
......@@ -69,7 +68,7 @@
<tr v-for="(item, index) in contenusPropose" :key="index">
<td :id="JSON.stringify(item._id)" v-on:click="consulterContenuMaj(item)">{{item.titre}}</td>
<b-popover :target="JSON.stringify(item._id)" v-on:show="rechercherTexteMaj(item.idContenuEnCours)" triggers="hover" placement="bottom">
<b-popover :target="JSON.stringify(item._id)" v-on:show="rechercherTexteMaj(item)" triggers="hover" placement="bottom">
<p v-html="texteDuContenuMaj"></p>
</b-popover>
<td>{{ item.auteurContenu }}</td>
......@@ -87,7 +86,8 @@
</table>
</div>
</div>
<Consulter_Contenu v-show="detailContenu" @retour_arriere="retourArriere" v-bind:auteur="auteur" v-bind:contenuClique="contenuChoisi" v-bind:contenu-clique-provenance="contenuCliqueProvenance"/>
<Consulter_Contenu v-show="detailContenu" @retour_arriere="retourArriere" v-bind:auteur="auteur"
v-bind:contenuClique="contenuClique" v-bind:contenu-clique-provenance="contenuCliqueProvenance"/>
</div>
</template>
......@@ -101,7 +101,15 @@ export default {
components: {
Consulter_Contenu
},
props: ['contenuEnPublication', 'auteur', 'isRecu', 'isPropose', 'rechercherPublications'],
props: {
// L'auteur actuellement connecté
auteur: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
// signal d'actualisation des mises à jour disponibles
rechercherPublications: {}
},
// props: ['contenuEnPublication', 'auteur', 'isRecu', 'isPropose', 'rechercherPublications'],
methods: {
/**
* @vuese
......@@ -245,7 +253,7 @@ export default {
*/
consulterContenuMaj: function (item) {
this.detailContenu = true
this.contenuChoisi = item
this.contenuClique = item
this.contenuCliqueProvenance = "maj"
this.$emit("ChangerTitre", {titre: "Consultation du contenu " + item.titre})
},
......@@ -276,6 +284,9 @@ export default {
)
} else {
idContenu = item._id
// alert("ici")
//console.log(idContenu)
console.log(item.$oid)
Service.recupererTexteContenu(JSON.stringify(idContenu)).then(
function (response) {
let showdown = require('showdown'),
......@@ -295,6 +306,13 @@ export default {
*/
isContenuMajVide: function () {
return this.contenusPropose.length === 0 && this.contenusRecu.length === 0
},
/**
* @vuese
* Basculer du tableau des maj recues au tableau des maj proposées et vice-versa
*/
changerTabMaj: function () {
this.isModeRecu = !this.isModeRecu
}
},
data: function () {
......@@ -307,9 +325,10 @@ export default {
contenusPropose: [],
action: false,
detailContenu: false,
contenuChoisi: null,
contenuClique: null,
contenuCliqueProvenance: '',
texteDuContenuMaj: ''
texteDuContenuMaj: '',
isModeRecu: true
}
},
watch: {
......@@ -347,13 +366,13 @@ div{
transform: rotate(90deg);
}
.masque {
/*.masque {
display: none;
}
.affiche {
display: block;
}
}*/
table {
margin-top: 10px;
......@@ -374,12 +393,22 @@ td {
vertical-align: middle;
}
thead,
tfoot {
.header {
background-color: #333;
color: #fff;
}
.headerDark {
background-color: #fff;
color: #333;
}
.titres {
background-color: orange;
}
.validerPublicationRecue::before {
/*content: "\2713";*/
content: "\2705";
......@@ -407,4 +436,34 @@ tfoot {
color: white;
}
#switch {
height: 5vh;
width: 20vh;
/*border: 1px solid black;*/
margin: 1vh auto;
display: flex;
}
#recues, #proposees {
/* border: 1px solid black; */
flex-basis: 50%;
horiz-align: center;
text-align: center;
margin-top: auto;
margin-bottom: auto;
padding-left: 1vh;
}
#recues {
border-right: 1px solid black;
}
.switch {
color: black;
}
.switchDark {
color: white;
}
</style>
\ No newline at end of file
src/Manuel.vue
View file @ 44aa8a43
<template>
<div style="text-align: center">
<div :style="darktheme ? {'color' : 'white'} : {'color' : 'black'} " style="text-align: center">
<h1>Bienvenue sur le manuel d'utilisation de l'application OpenQuizz</h1>
<div style="display: flex">
<div id="menuLateral">
<ul>
<li><h5><span class="aucuneEducation" @click="naviguer"></span><a href="#titreUn"> I - La connexion</a></h5></li>
<li><h5><span class="symboleSectionInamovible"></span><a href="#titreZero"> OpenQuizz - Généralités</a></h5></li>
<li><h5><span class="symboleSectionInamovible"></span><a href="#titreUn"> I - La connexion</a></h5></li>
<li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreDeux"> II - L'application</a></h5></li>
<ul class="cache">
<li class="sousSection"><a href="#titreDeuxUn">Présentation Générale de l'interface</a></li>
<li class="sousSection"><a href="#titreDeuxDeux">Le mode Sombre</a>></li>
<li class="sousSection"><a href="#titreDeuxTrois">Le menu Panier/Banque</a>></li>
<li class="sousSection"><a href="#titreDeuxQuatre">Affichage du volet latéral</a>></li>
<li class="sousSection"><a href="#titreDeuxCinq">Le volet latéral</a>></li>
<li class="sousSection"><a href="#titreDeuxSix">Le tableau des contenus</a>></li>
<li class="sousSection"><a href="#titreDeuxSept">Le menu des options</a>></li>
<li class="sousSection"><a href="#titreDeuxHuit">L'ajout de contenu dans le panier</a>></li>
</ul>
<li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreTrois"> III - La gestion des contenus</a></h5></li>
<ul class="cache">
<li class="sousSection"><a href="#titreTroisUn">L'ajout / L'import de contenu (dans le panier)</a></li>
<li class="sousSection"><a href="#titreTroisDeux">L'appropriation d'un contenu (via la banque)</a></li>
<li class="sousSection"><a href="#titreTroisTrois">La consultation d'un contenu</a></li>
<li class="sousSection"><a href="#titreTroisQuatre">La modification d'un contenu</a></li>
<li class="sousSection"><a href="#titreTroisCinq">La mise à jour d'un contenu</a></li>
<li class="sousSection"><a href="#titreTroisSix">La suppression d'un contenu</a></li>
</ul>
<li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreQuatre"> IV - Le filtrage des contenus</a></h5></li>
<ul class="cache">
<li class="sousSection"><a href="#titreQuatreUn">Filtre 'tags officiels'</a></li>
<li class="sousSection"><a href="#titreQuatreDeux">Filtre 'tags libres'</a></li>
<li class="sousSection"><a href="#titreQuatreTrois">Filtre 'auteur'</a></li>
<li class="sousSection"><a href="#titreQuatreQuatre">Fitre 'type/source'</a></li>
<li class="sousSection"><a href="#titreQuatreCinq">Fitlre 'date'</a></li>
<li class="sousSection"><a href="#titreQuatreSix">Filtre 'note'</a></li>
<li class="sousSection"><a href="#titreQuatreSept">La recherche</a></li>
</ul>
<li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreCinq"> V - Les autres options</a></h5></li>
<ul class="cache">
<li>Dos Santos</li>
<li>Ribeiro</li>
<li class="sousSection"><a href="#titreCinqUn">Profil</a></li>
<li class="sousSection"><a href="#titreCinqDeux">Mises à jour</a></li>
<li class="sousSection"><a href="#titreCinqTrois">Tags</a></li>
<li class="sousSection"><a href="#titreCinqQuatre">Evaluations</a></li>
<li class="sousSection"><a href="#titreCinqCinq">Deconnexion</a></li>
</ul>
<li><h5>Manuel</h5></li>
</ul>
</div>
<div id="ohHolyNight">
<br id="titreZero">
<h2 >OpenQuizz - Généralités</h2>
<br>
<h2 id="titreUn">I - La connexion</h2>
<p style="text-align: left; text-indent: 3vh;"> Le site OpenQuizz est une application permettant une gestion élargie de contenus pédagogiques</p>
<p style="text-align: left; text-indent: 3vh;"> Ce manuel d'utilisation a vocation à détailler toutes les actions possibles sur l'application OpenQuizz</p>
<br id="titreUn">
<h2>I - La connexion</h2>
<br>
<p style="text-align: left; text-indent: 3vh;"> Pour vous connecter sur le site, il vous suffit de vous rendre sur l'adresse {adresse} et de renseigner
votre identifiant et votre mot de passe dans les zones prévues à cet effet. En cas d'échec, un message d'erreur apparaitra.</p>
votre identifiant et votre mot de passe dans les zones prévues à cet effet, puis de cliquer sur 'Connexion'. En cas d'échec, un message d'erreur apparaitra.
et vous pourrez alors corriger votre saisie pour accéder à l'application OpenQuizz</p>
<p style="text-align: left; text-indent: 3vh;"> Dans un futur proche cette page permettra également de s'inscrire à OpenQuizz.</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<br>
<img src="../src/assets/imgManuel/connexion.png"/>
<br>
<!-- Partie 2 - L'ihm -->
<br id="titreDeux">
<h2>II - L'application</h2>
<br>
<p style="text-align: left; text-indent: 3vh;"> Dans cette partie il sera détaillé toutes les actions possibles avec l'application OpenQuizz. Elle n'est
accesible que via une connexion réussie (cf <a href="#titreUn">partie précédente</a>)</p>
<br id="titreDeuxUn">
<br>
<h3 >Présentation Générale de l'interface</h3>
<br>
<img src="../src/assets/imgManuel/accueil_1.png"/>
<p>Légende :</p>
<p> (Tous ces points seront développés dans les parties ci dessous)</p>
<br>
<p> ① Interrupteur permettant d'activer / de désactiver le mode sombre</p>
<p> ② Interrupteur permettant de changer de place le menu de choix panier/banque</p>
<p> ③ Interrupteur permettant de masquer / d'afficher le volet latéral</p>
<p> ④ Volet Latéral. Gestion des filtres de recherche et bascule panier / banque</p>
<p> ⑤ Tableau des contenus. Il recense le panier, et est variable en fonction des filtres choisis</p>
<p> ⑥ Menu d'options. Il permet d'accéder aux autres fonctionnalités du site</p>
<p> ⑦ Bouton d'ajout de contenu. Présent également en 'mode panier'</p>
<br id="titreDeuxDeux">
<br>
<h3 >① Le mode Sombre</h3>
<br>
<p>Pour votre confort visuel, vous pouvez décider de passer l'affichage du site en "mode sombre", comme ceci : </p>
<br>
<img src="../src/assets/imgManuel/mode_sombre.png"/>
<br id="titreDeuxTrois">
<br>
<h3 >② Le menu Panier/Banque</h3>
<br>
<p>En bas du volet latéral est présent un menu à choix permettant la bascule entre le panier et la banque. Si désiré, il est possible de faire passer ce
menu en haut pour plus de confort visuel</p>
<br>
<img src="../src/assets/imgManuel/variante_menu_haut.png">
<br id="titreDeuxQuatre">
<br>
<h3 >③ Affichage du volet latéral</h3>
<br>
<p>Le volet latéral est totalement masquable en cliquant sur le bouton ③ , ce qui permet d'avoir un confort visuel augmenté pour
la consultation du tableau des contenus</p>
<p> De plus, quand le volet est rétracté, les informations concernant les tags des contenus apparaissent</p>
<br>
<img src="../src/assets/imgManuel/volet_retracte.png">
<br id="titreDeuxCinq">
<br>
<h3 >④ Le volet latéral</h3>
<br>
<p>Le volet latéral est utile pour deux choses. Premièrement, permettre de filtrer la liste des contenus via une série de filtres disponibles, aussi
bien en mode panier qu'en mode banque (détail dans la <a href="#titreQuatre">partie IV</a>). Ensuite, il comprend le menu pour basculer du panier à la banque
(sauf si <a href="#titreDeuxTrois"> la variante</a> a été cliquée)</p>
<br>
<img src="../src/assets/imgManuel/liste_filtres.png">
<br id="titreDeuxSix">
<br>
<h3 >⑤ Le tableau des contenus</h3>
<br>
<p>Le tableau des contenus, que ce soit en mode panier ou en mode banque, recense tous les contenus disponibles pour l'utilisateur connecté, éventuellement
raffinés si des filtres ont été choisis</p>
<br>
<p>Le tableau en 'mode banque' : </p>
<img src="../src/assets/imgManuel/mode_banque.png">
<br id="titreDeuxSept">
<br>
<h3 >⑥ Le menu des options</h3>
<br>
<p>Un certain nombre de fonctionnalités de l'application sont accessibles via ce menu. Cf. <a href="#titreCinq">partie V</a> pour le détail de chaque entrée du menu</p>
<br>
<img src="../src/assets/imgManuel/menu_options.png">
<br id="titreDeuxHuit">
<br>
<h3 >⑦ L'ajout de contenu dans le panier</h3>
<br>
<p>L'ajout de contenu est possible via différentes voies. Quand on clique sur le ⑦ une infobulle apparait, offrant ce choix</p>
<p>La suite du processus d'ajout est détaillée dans la <a href="#titreTroisUnxœ">partie III</a></p>
<br>
<img src="../src/assets/imgManuel/nouveau_contenu.png">
<!-- Partie 3 - Les contenus -->
<br id="titreTrois">
<h2>III - Les contenus</h2>
<br>
<p>Un contenu correspond à une ressource utile pédagogiquement (par exemple: un quiz). Ces contenus sont principalement liés à des plateformes
pédagogiques (ex: moodle, h5p)</p>
<p>Le panier correspond à tous les contenus 'propres' d'un utilisateur : </p>
<ul>
<li>Ceux qu'il a créé ou importés d'une plateforme tierce</li>
<li>Ceux d'autres auteurs qu'il s'est 'approprié'</li>
<li>Ceux qui sont en cours de modification</li>
</ul>
<br id="titreTroisUn">
<h3 >1/ L'ajout / L'import de contenu (dans le panier)</h3>
<br>
<h4>⓵ Le contenu markdown</h4>
<br>
<p>La première étape pour créer un contenu Markdown est de cliquer sur le ⊕ en bas à droite de l'écran (en mode panier), puis de choisir l'option
1. Créer un markdown</p>
<br>
<p>L'utilisateur arrive ensuite sur une page dédiée à la création du contenu. Deux zones sont à remplir : </p>
<p>En premier lieu, renseigner un titre</p>
<p>Et ensuite le 'coeur' du contenu, en langage 'markdown', doit être saisi dans la partie gauche de la zone principale de l'écran</p>
<p>La zone de droite sert à prévisualiser le contenu mis en forme</p>
<br>
<img src="../src/assets/imgManuel/markdown.png"/>
<br>
<br>
<p> Après avoir validé le contenu, une page permettant de renseigner les tags fixes apparait</p>
<p> Les tags fixes permettent de catégoriser le contenu de manière 'normalisée' pour que l'auteur et les autres utilisateurs, via la banque, puissent rapidement et
facilement l'identifier </p>
<p> Il est nécessaire de renseigner au moins 1 échelon de tag libre</p>
<br>
<img src="../src/assets/imgManuel/tags_fixes.png"/>
<br>
<br>
<h4>⓶ L'import de fichier</h4>
<br>
<p>La première étape pour créer un contenu Markdown est de cliquer sur le ⊕ en bas à droite de l'écran (en mode panier), puis de choisir l'option
2. Importer un xml moodle</p>
<br>
<img src="../src/assets/imgManuel/import_fichier.png"/>
<br>
<br>
<p> Comme pour la création directe de contenu, il est nécessaire de renseigner au moins 1 échelon de tag libre</p>
<br>
<img src="../src/assets/imgManuel/tags_fixes.png"/>
<br>
<br>
<br id="titreTroisDeux">
<h3 >2/ L'appropriation d'un contenu (via la banque)</h3>
<br>
<h4>⓵ L'appropriation directe</h4>
<br>
<p>La dernière colonne du tableau permet, en mode banque, de sélectionner un ou plusieurs contenus. Un clic sur l'étoile en haut de la colonne transfèrera
tous les contenus dans le panier de l'auteur (la version courante)</p>
<img src="../src/assets/imgManuel/tiers_1.png"/>
<br>
<br>
<h4>⓶ L'appropriation indirecte</h4>
<br>
<p>Un click sur le titre du contenu permet de consulter le détail du contenu. Un bouton en haut de page permet de 'mettre en favori' le contenu, et, si
elles existent, de s'approprier une version antérieure du contenu dans son panier</p>
<p>Comme pour la partie panier, un survol du titre à la souris permet de prévisualiser l'intérieur du contenu</p>
<br>
<img src="../src/assets/imgManuel/tiers_2.png"/>
<br>
<br id="titreTroisTrois">
<h3 >3/ La consultation d'un contenu</h3>
<br>
<h4>⓵ La prévisualisation de l'intérieur du contenu</h4>
<br>
<p> Pour pouvoir avoir un premier apercu de l'intérieur d'un contenu, il faut passer la souris sur son titre, et la prévisualisation s'affichera : </p>
<br>
<img src="../src/assets/imgManuel/previsualisation_contenu.png"/>
<br>
<br>
<h4>⓶ La page de consultation d'un contenu</h4>
<br>
<p> Pour accéder à cette page, il faut cliquer sur le titre d'un contenu (au niveau du tableau) : </p>
<p> On remarque que l'ecran se divise en deux parties : une zone d'informations, avec le détail du contenu et quelques actions disponibles ; et une zone
permettant la visualisation et la modification du contenu</p>
<br>
<br>
<img src="../src/assets/imgManuel/consultation_ecran.png"/>
<br>
<br id="tagsAssocies">
<h4>⓷ La gestion des tags associés</h4>
<br>
<p> Pour accéder à cette zone, il faut avoir accédé à la page de consultation du contenu et cliquer sur le crayon à coté de la mention 'modifier Tags'</p>
<p> Dans cette zone, il sera possible d'associer et de dissocier des tags libres au contenu mais aussi de modifier les tags fixes (sous réserve que le contenu
que l'utilisateur consulte soit un de ceux qu'il a créé ou importé</p>
<br>
<img src="../src/assets/imgManuel/tags_contenu.png"/>
<br>
<br>
<h4>⓸ La notation (contenu 'tiers')</h4>
<br>
<p> Dans le cadre de la consultation d'un contenu tiers, il est possible de lui associer une noter personnelle, qui sert, pour les utilisateurs consultant
ce contenu dans la banque, à en évaluer la qualité</p>
<p> Pour ce faire, cliquer sur 'noter' et sélectionner le nombre d'étoiles désiré, pour donner une note sur 5 (les demi-étoiles sont possibles)</p>
<p> Toute note choisie est définitive, sous réserve de ne pas supprimer le contenu tiers</p>
<br>
<img src="../src/assets/imgManuel/notation_contenu.png"/>
<br>
<br id="titreTroisQuatre">
<h3 >4/ La modification d'un contenu</h3>
<br>
<p> Pour accéder à cette zone, il faut avoir accédé à la page de consultation du contenu</p>
<p> Il est possible de modifier le titre du contenu (via la zone de texte située en haut au centre) mais aussi l'intérieur du contenu (via la zone bipartite
du milieu de l'écran)</p>
<p>Une fois les modifications effectuées, cliquer sur le bouton modifier en bas de la zone et un nouveau contenu 'en-cours' apparaitra dans le tableau des
contenus du panier</p>
<img src="../src/assets/imgManuel/consultation_ecran.png"/>
<br id="titreTroisCinq">
<h3 >5/ La mise à jour d'un contenu</h3>
<br>
<p> Pour faire évoluer un contenu de version, deux cas sont possibles : </p>
<br>
<p>※ Si vous voulez faire évoluer un contenu de votre création, il faut consulter le contenu en cours. Une option 'valider contenu' apparaitra à droite de
la barre d'informations</p>
<br>
<img src="../src/assets/imgManuel/valider_contenu.png"/>
<br>
<br>
<p>※ Si vous voulez faire évoluer un contenu 'tiers', il faudra passer par une demande de publication. Le contenu suivra alors le processus de gestion des
demandes de mise à jour, détaillée dans la <a href="#titreCinqDeux">partie V</a>. L'option pour cette demande sera située au même
endroit que l'option 'valider contenu' mentionnée ci dessus</p>
<br>
<img src="../src/assets/imgManuel/publier_contenu.png"/>
<br>
<br id="titreTroisSix">
<h3 >6/ La suppression d'un contenu</h3>
<br>
<p> Deux façone de supprimer un contenu : </p>
<h4>⓵ La suppression directe</h4>
<br>
<p> Sur un principe similaire à l'appropriation directe, il faut, en mode panier, cocher la dernière colonne des contenus pour sélectionner le ou les contenus
à supprimer, puis cliquer sur la poubelle en haut de la colonne</p>
<br>
<img src="../src/assets/imgManuel/suppression_directe.png"/>
<br>
<h4>⓶ La suppression indirecte</h4>
<br>
<p> Pour se faire, il faut consulter l'intérieur du contenu. A droite de la zone de modification du titre se situe l'icone du poubelle servant à supprimer
le contenu consulté</p>
<br>
<img src="../src/assets/imgManuel/consultation_ecran.png"/>
<br>
<!-- Partie 4 - Les filtres -->
<br id="titreQuatre">
<h2>IV - Le filtrage des contenus</h2>
<br>
<p> Que l'on soit en mode banque ou en mode panier, il peut être utile de restreindre, via des critères définis, les contenus affichés à l'écran</p>
<p> Une zone prévue, en haut du volet latéral, permet d'afficher tous les filtres choisis. Une croix à côté de chaque filtre permet de le supprimer</p>
<p> Voici donc les possibilités offertes par OpenQuizz : </p>
<br>
<br id="titreQuatreUn">
<h3 >1/ Filtre 'tags officiels'</h3>
<br>
<p> Obligatoirement présents, ces filtres sont disponibles dans les modes panier et banque. Au niveau de la zone d'affichage le nom du filtre (ou 'sous-filtre')
apparait, et un survol du filtre permet, le cas échéant, d'en découvrir le 'chemin complet' (les filtres étant organisés hiérarchiquement)</p>
<br>
<img src="../src/assets/imgManuel/filtre_tags_officiels.png"/>
<br>
<br id="titreQuatreDeux">
<h3 >2/ Filtre 'tags libres'</h3>
<br>
<br>
<p> Contrairement aux tags officiels ces filtres, exclusifs à l'auteur connecté, ne sont disponibles que dans la banque.
Ils servent à offrir une catégorisation personnalisée des contenus, et sont modifiables pour chaque contenu (cf. <a href="#tagsAssocies">partie III</a>)
Etant construits sur le modèle hiararchique des tags officiels, un survol permet également d'en découvrir le chemin complet</p>
<br>
<img src="../src/assets/imgManuel/filtre_tags_libres.png"/>
<br>
<br id="titreQuatreTrois">
<h3 >3/ Filtre 'auteur'</h3>
<br>
<p> Ce filtre permet de choisir des contenus d'un ou de plusieurs auteurs</p>
<br>
<img src="../src/assets/imgManuel/filtre_auteur.png"/>
<br>
<br id="titreQuatreQuatre">
<h3 >4/ Fitre 'type/source'</h3>
<br>
<p> Ce filtre permet de choisir des contenus selon son type (quiz, ...) ou sa source (markdown, moodle, ...)</p>
<br>
<img src="../src/assets/imgManuel/filtre_type_source.png"/>
<br>
<br id="titreQuatreCinq">
<h3 >5/ Fitlre 'date'</h3>
<br>
<p> Ce filtre permet d'isoler des contenus plus ou moins récents. Une seule occurence du filtre est possible à la fois</p>
<br>
<img src="../src/assets/imgManuel/filtre_date.png"/>
<br>
<br id="titreQuatreSix">
<h3 >6/ Filtre 'note'</h3>
<br>
<p> Ce filtre permet d'isoler de choisir des contenus en prenant une note minimale, une note maximale ou une fourchette de notes.</p>
<p> Il n'est pas possible de choisir une note minimale/maximale et une fourchette en même temps</p>
<br>
<img src="../src/assets/imgManuel/filtre_note.png"/>
<br>
<br id="titreQuatreSept">
<h3 >7/ La recherche</h3>
<br>
<p> (En cours de construction) Cliquer sur l'icone à droite de la zone de sélection des filtres fait entrer en 'mode recherche'</p>
<p> Une zone de saisie de texte permet de choisir un terme</p>
<br>
<img src="../src/assets/imgManuel/filtre_recherche.png"/>
<br>
<!-- Partie 5 - Les options -->
<br id="titreCinq">
<h2>V - Les autres options</h2>
<br>
<br id="titreCinqUn">
<h3 >1/ Profil</h3>
<br>
<p> Dans cette partie il est possible de consulter son profil, renseigné lors de l'inscription, et en particulier son ecole, sa note d'auteur (modalités à
définir)</p>
<p> C'est également ici qu'un utilisateur pourra modifier son mot de passe</p>
<br id="titreCinqDeux">
<h3 >2/ Mises à jour</h3>
<br>
<p>C'est la partie ou sont visibles toutes les mises à jour recues ou proposées de l'utilisateur (un menu permettant la bascule entre les deux)</p>
<p>Une icone de notification s'affiche à coté du menu en haut à droite si une mise à jour est disponible pour l'utilisateur</p>
<br>
<img src="../src/assets/imgManuel/icone_notification_maj.png"/>
<br>
<br>
<h4>⓵ Les maj recues</h4>
<br>
<p> Elles sont de deux types: les mises à jour de contenu personnel et les mises à jour de contenu tiers</p>
<p> Pour chacun de ces types, deux actions sont disponibles : l'acceptationn et le refus</p>
<p> La prévisualisation (via survol du titre) et la consultation (via click sur le titre) de la mise à jour sont disponibles</p>
<br>
<img src="../src/assets/imgManuel/maj_recues.png"/>
<br>
<br>
<h4>⓶ Les maj proposées</h4>
<p> Les mises à jour proposées, suite au click sur 'Publier le contenu', peuvent être dans 3 états différents : </p>
<p> -EnCours. Dès qu'une demande de publication, et dans l'attente d'une action de l'auteur original du contenu. Aucune action possible</p>
<p> -Acceptée. Le contenu a été mis à jour. Le bouton supprimer, pour faire disparaitre la ligne, apparait </p>
<p> -Refusée. L'auteur de base du contenu ne désire pas le mettre à jour. Trois actions sont alors disponibles :
<p style="text-indent: 2vh">-Conserver le contenu. Il sera marqué comme un contenu en cours mais ne pourra plus faire l'objet de demande de publication</p>
<p style="text-indent: 2vh">-Creer un nouveau contenu. Permet de convertir le contenu en cours à l'origine de la demande de publication en contenu personnel</p>
<p style="text-indent: 2vh">-Supprimer le contenu. Efface la demande de publication et le contenu associé</p>
<br>
<img src="../src/assets/imgManuel/maj_proposees.png"/>
<br>
<br>
<br id="titreCinqTrois">
<h3 >3/ Tags</h3>
<br>
<p> Dans cette zone il est possible de gérer toute l'arborescence des tags libres de l'utilisateur connecté: ajouter ou supprimer un tag libre, qu'il soit
'à la racine' ou un sous tag</p>
<br>
<img src="../src/assets/imgManuel/gestion_tags.png"/>
<br>
<br id="titreCinqQuatre">
<h3 >4/ Evaluations</h3>
<br>
<p> Cette option permet la création, la consultation et la suppression d'évaluations. Créer une évaluation permet de conserver l'information sur
des contenus </p>
<br id="titreCinqCinq">
<h3 >5/ Deconnexion</h3>
<br>
<p> Quitte OpenQuizz et permet de revenir à l'écran de connexion </p>
</div>
</div>
</div>
......@@ -81,7 +516,7 @@ export default {
},
methods: {
naviguer: function (e) {
e.target.classList.toggle("aucuneEducationDown")
e.target.classList.toggle("symboleSectionDown")
console.log(e.target.parentNode.parentNode.nextSibling)
e.target.parentNode.parentNode.nextElementSibling.classList.toggle('affiche')
......@@ -93,7 +528,7 @@ export default {
<style scoped>
#menuLateral{
height: 50vh;
height: auto;
width: 30vh;
margin-left: 10vh;
margin-top: 10vh;
......@@ -113,6 +548,12 @@ export default {
}
img {
width: 119vh;
border: 0.5px solid black;
margin-bottom: 0.5vh;
}
ul {
list-style: none;
padding-left: 1vh;
......@@ -125,15 +566,27 @@ a {
color: black;
}
.aucuneEducation::before {
p {
text-align: left;
text-indent: 3vh;
margin-top: 0 ;
margin-bottom: 0 ;
}
.symboleSection::before {
content: "\27A2";
display: inline-block;
}
.aucuneEducationDown::before {
.symboleSectionDown::before {
transform: rotate(90deg);
}
.symboleSectionInamovible::before {
content: "\2756";
display: inline-block;
}
.cache {
display: none;
}
......@@ -143,5 +596,15 @@ a {
margin-top: -1vh;
}
.sousSection{
list-style: circle inside;
padding-left: 1vh;
}
.sousSection::before {
left: 30px;
}
</style>
\ No newline at end of file
src/Menu.vue
View file @ 44aa8a43
<template>
<div v-bind:class="[darkMode ? 'dark' : '', etat === 'manuel' ? 'menuManuel' : 'menuHaut']">
<DarkModeSwitch v-bind:style="[etat === 'manuel' ? {'margin-top': '10px', 'padding-top': '0px', 'padding-bottom': '5px', 'padding-left': '4px'} : {'margin-top': '10px'}, {'margin-left': '10px'}]" @switched="onSwitched"/>
<Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante"></Choix_Mode_Variante>
<span :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ titrePage }}</span>
<Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante && nouveauTitre !== 'Manuel d\'utilisation de l\'application OpenQuizz'"></Choix_Mode_Variante>
<span v-show="!variante || nouveauTitre === 'Manuel d\'utilisation de l\'application OpenQuizz'" :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ titrePage }}</span>
<div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
<div class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
......@@ -99,17 +99,18 @@ export default {
*/
publicationsRecues: function () {
let that = this
Service.getPublicationsRecues(this.auteur).then(function (response) {
let contenusRecu = response.data
console.log("Salut salut, je le suis dans publications recues")
Service.getPublicationsRecues(this.auteur).then(function (response) {
let contenusRecu = response.data
for (let i = 0; i < contenusRecu.length; i++) {
if (contenusRecu[i].etat === "enCours") {
that.isNotif = contenusRecu.length !== 0
that.isRecu = that.isNotif
break
}
}
that.majTiers()
......@@ -122,6 +123,9 @@ export default {
*/
publicationsProposees: function () {
let that = this
console.log("Salut salut, je le suis dans publications proposees")
Service.getPublicationsProposees(this.auteur).then(function (response) {
let contenusPropose = response.data
......@@ -131,6 +135,7 @@ export default {
if (contenusPropose[i].etat !== "enCours") {
that.isNotif = true
that.isPropose = that.isNotif
break
}
}
that.changerStyle()
......@@ -221,6 +226,15 @@ export default {
this.titrePage = this.nouveauTitre
}
},
/**
* @vuese
* Si on clique sur manuel on desactive le 'menu annexe'
*/
etat: function () {
if (this.etat === 'manuel'){
this.isAffiche = false
}
}
}
}
</script>
......@@ -247,8 +261,8 @@ export default {
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
height: 4.2vh;
width: 4.2vh;
background: gold url(assets/img/person2.png);
background-size: cover;
......@@ -263,8 +277,8 @@ export default {
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
height: 4.2vh;
width: 4.2vh;
margin-right: 0.25%;
}
......@@ -276,8 +290,8 @@ export default {
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
height: 4.2vh;
width: 4.2vh;
margin-right: 0.25%;
}
......
src/assets/imgManuel/.~lock.connexion.png# 0 → 100644
View file @ 44aa8a43
,passerat,weber-Latitude-5520,12.08.2021 13:46,file:///home/passerat/.config/libreoffice/4;
\ No newline at end of file
src/components/Barre_Filtre.vue
View file @ 44aa8a43
......@@ -24,7 +24,9 @@ export default {
type: Boolean
},
// Signal d'activation ou non du theme sombre
darktheme: {}
darktheme: {},
// signal de détection pour la remize à zéro de la barre de filtre
filtre_choisi: {}
},
methods: {
/**
......@@ -40,6 +42,12 @@ export default {
return {
selected: "",
}
},
watch: {
filtre_choisi: function () {
if (this.filtre_choisi === "")
this.selected = ""
}
}
}
</script>
......
src/components/Choix_Mode.vue
View file @ 44aa8a43
......@@ -68,7 +68,6 @@ export default {
<style scoped>
#choixDuMode {
flex-basis: 10%;
display: flex;
z-index: 1;
}
......@@ -77,7 +76,9 @@ export default {
width: 49%;
flex-grow: 1;
text-align: center;
vertical-align: center;
vertical-align: bottom;
padding-bottom: 0px;
padding-top: 10px;
}
.nonClicked {
......
src/components/Consulter_Contenu.vue
View file @ 44aa8a43
<template>
<div>
<p>{{titreContenu}} </p>
<p style="margin-top: 2vh"> {{titreContenu}} </p>
<div id="actionsContenu" v-show="!isContenuRefuse">
......@@ -165,11 +165,10 @@ export default {
this.titreContenu = this.contenuClique.titre
this.populariteContenu = this.contenuClique.popularite
this.tagsContenus = this.contenuClique.tags_fixes.join(", ")
this.tagsContenus = this.contenuClique.tags_fixes === undefined ? [] : this.contenuClique.tags_fixes.join(", ")
this.isContenuRefuse = false
this.noteContenu = this.calculerNoteDetailContenu()
this.noteContenu = this.contenuClique.versionEnCours === undefined ? '' : this.calculerNoteDetailContenu()
if (Object.prototype.hasOwnProperty.call(this.contenuClique, 'refuse')){
this.isContenuRefuse = true
......@@ -178,7 +177,7 @@ export default {
Service.recupererTexteContenuEnCours(JSON.stringify(this.contenuClique._id)).then(
function (response) {
that.contenu = response.data
// alert(response.data)
alert("Les enfantches : " + response.data)
}
)
......
src/components/Detail_Contenu.vue
View file @ 44aa8a43
......@@ -56,22 +56,26 @@ export default {
// Transmet la création d'un filtre
// @arg filtre le filtre créé
this.$emit("creer_filtre", {filtre: event})
}
},
computed: {
/**
* @vuese
* Changement du texte de base du volet
*/
texte: function () {
if (this.modeFiltre)
return "Ajoutez des filtres pour restreindre la recherche, ou effectuez une recherche libre (bouton en haut à droite)"
else
return "Entrez un terme a rechercher dans le texte ou à l'intérieur d'un contenu, ou effectuez une recherche via filtres (bouton en haut à droite) "
watch: {
modeFiltre: function () {
this.filtre_choisi = ""
}
},
computed: {
/**
* @vuese
* Changement du texte de base du volet
*/
texte: function () {
if (this.modeFiltre)
return "Ajoutez des filtres pour restreindre la recherche, ou effectuez une recherche libre (bouton en haut à droite)"
else
return "Entrez un terme a rechercher dans le texte ou à l'intérieur d'un contenu, ou effectuez une recherche via filtres (bouton en haut à droite) "
}
}
}
</script>
<style scoped>
......
src/components/Modifier_Contenu.vue
View file @ 44aa8a43
......@@ -11,7 +11,7 @@
Source : {{contenuClique.source}}
</div>
<div id="notePopularite">
Note de la version : {{noteContenu}}<br>
Note version : {{noteContenu}}<br>
Popularité : {{contenuClique.popularite}}<br>
</div>
<span id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</span>
......@@ -38,7 +38,7 @@
<div id="actionsContenu">
<!-- <button class="boutonAction" v-on:click="actionContenu('supprimer')">Supprimer</button>-->
<span class="boutonAction" v-if="contenuCliqueProvenance !== 'perso'" v-on:click="actionContenu('supprimer')" id="supprimerContenu"></span>
<span class="boutonAction" v-if="contenuCliqueProvenance !== 'perso' && contenuCliqueProvenance !== 'tiers'" v-on:click="actionContenu('supprimer')" id="supprimerContenu"></span>
<span class="boutonAction" v-else v-on:click="actionContenu('supprimer')" id="supprimerContenuSolo"></span>
<!-- <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>-->
......
src/components/Volet_Base.vue
View file @ 44aa8a43
......@@ -12,7 +12,8 @@
<div id="ensembleVolet">
<button id="boutonVolet" v-on:click="desactiverVolet" v-bind:style="{'margin-top': '0%'}"></button>
<div class="full" id="volet" v-bind:style="darktheme ? {'border-color': 'white'} : {'border-color': 'black'}" v-show="isActif">
<Volet_Menu v-bind:darktheme="darktheme" v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre" @basculeRechercheFiltre="basculeRechercheFiltre"/>
<Volet_Menu v-bind:darktheme="darktheme" v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre"
@basculeRechercheFiltre="basculeRechercheFiltre" v-bind:filtre_choisi="filtre_choisi"/>
<Volet_Contenu v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"
v-bind:auteur="auteur" @filtresChoisis="filtresChoisis" v-bind:razModeVariante="razModeVariante"
v-bind:modeFiltre="modeFiltre" v-bind:deconnexion="deconnexion" />
......@@ -91,8 +92,8 @@
<td>{{ item.note_perso }}</td>
<td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_fixes.toString()">{{item.tags_fixes.toString()}}</td>
<td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
<td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_libres.toString()">
{{ item.tags_libres.toString() }}</td>
<td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="tagsLibresContenu(item)">
{{tagsLibresContenu(item)}}</td>
<td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
<td>{{ item.type }}</td>
<td>{{ item.source }}</td>
......@@ -300,6 +301,13 @@ export default {
$('#ensembleVolet').draggable()
},
methods: {
tagsLibresContenu: function(item){
// return item.tags_libres.toString()
if (item.tags_libres === undefined)
return ""
else
return item.tags_libres.toString()
},
/**
* @vuese
* Charger les contenus du panier de l'auteur connecté
......@@ -756,7 +764,7 @@ export default {
// contenusFiltres.forEach(contenu => console.log(contenu.tags_libres.length))
for (let i = 0; i < filtre_tags_libres.length; i++) {
if(filtre_tags_libres[i] === 'Contenu Sans Tag'){
if(filtre_tags_libres[i] === 'sans Tag Libre'){
contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_libres.length === 0)
} else {
contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_libres.includes(filtre_tags_libres[i]))
......@@ -989,12 +997,12 @@ export default {
}
.choixPanier{
margin-left: 30px;
margin-left: 3.35vh;
margin-top: 0px;
}
table {
width: 1550px;
width: 167vh;
}
th,
......@@ -1015,8 +1023,8 @@ tfoot {
#volet{
position: relative;
width: 300px;
height: 500px;
width: 33.5vh;
height: 56vh;
border: 1px solid;
margin-top: 2px;
margin-left: 10px;
......@@ -1024,17 +1032,17 @@ tfoot {
}
#boutonVolet {
margin-top: 5px;
margin-left: 10px;
margin-top: 0.55vh;
margin-left: 1.1vh;
}
#changerVariante {
/*width: auto;*/
text-align: center;
line-height: 1em;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 20px;
margin-left: 1.1vh;
margin-top: 0.55vh;
margin-bottom: 2.2vh;
}
......@@ -1044,8 +1052,8 @@ tfoot {
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 75px;
width: 75px;
height: 8.4vh;
width: 8.4vh;
/*background: white url(../assets/img/plus.png);*/
background: white url(../assets/img/plus.png);
background-size: cover;
......@@ -1098,20 +1106,20 @@ th image
}
.supprimerContenus{
width: 27px;
width: 3vh;
}
.supprimerContenus > img {
height: 20px;
width: 20px;
height: 2.2vh;
width: 2.2vh;
padding-bottom: 4px;
padding-top: -3px;
background-color: orange;
}
.ajouterTiers {
height: 20px;
width: 20px;
height: 2.2vh;
width: 2.2vh;
background: orange url(../assets/img/etoile.png);
}
......
src/components/Volet_Contenu.vue
View file @ 44aa8a43
......@@ -8,7 +8,9 @@
<Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
v-bind:auteur="auteur" v-bind:darktheme="darktheme" @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/>
</div>
<Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
<div id="detailChoixMode">
<Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
</div>
</div>
</template>
......@@ -17,6 +19,7 @@
import Choix_Mode from "../components/Choix_Mode";
import Detail_Filtre from "../components/Detail_Filtre";
import Detail_Contenu from "../components/Detail_Contenu";
export default {
name: "Volet_Contenu",
components: {
......@@ -40,7 +43,7 @@ export default {
// Signal de deconnexion
deconnexion: {}
},
},
methods: {
/**
* @vuese
......@@ -85,7 +88,7 @@ export default {
<style scoped>
#contenu {
width: 100%;
height: 98.25%;
height: 97.85%;
margin-top: -5%;
display: flex;
flex-direction: column;
......@@ -105,8 +108,8 @@ export default {
display: inline-block;
text-align: center;
vertical-align: middle;
margin-top: 25%;
margin-bottom: 25%;
margin-top: 15%;
margin-bottom: 15%;
overflow: auto;
}
......
src/components/Volet_Menu.vue
View file @ 44aa8a43
<template>
<div class="menu">
<div id="listeFiltres" class="filtre">
<Barre_Filtre v-bind:darktheme="darktheme" v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-bind:darktheme="darktheme" v-show="!modeFiltre"/>
<div id="listeFiltres" class="filtre">
<Barre_Filtre v-bind:darktheme="darktheme" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-bind:darktheme="darktheme" v-show="!modeFiltre"/>
</div>
<!-- <button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>-->
<!-- <button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>-->
<span v-if="modeFiltre" class="modeFiltre" v-on:click="changerModeMenu"></span>
<button v-else v-bind:class="!darktheme ? 'modeRecherche' : 'modeRechercheDark'" v-on:click="changerModeMenu"></button>
</div>
......@@ -23,14 +24,19 @@ export default {
// Variable permettant de déterminer si on est en mode panier ou en mode banque
panierChoisi: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
darktheme: {},
// signal de détection pour la remize à zéro de la barre de filtre
filtre_choisi: {}
},
},
data: function () {
return {
modeFiltre: true
}
},
mounted() {
this.$emit("basculeRechercheFiltre", {choix: true})
},
methods: {
/**
* @vuese
......@@ -38,6 +44,7 @@ export default {
*/
changerModeMenu: function (){
this.modeFiltre = !this.modeFiltre
alert("Je le suis en train de changer le mode filtre")
this.$emit("basculeRechercheFiltre", {choix: this.modeFiltre})
},
/**
......@@ -68,10 +75,10 @@ export default {
}
.modeFiltre::before{
/* background-color: white;
background-image: url(../assets/img/loupe.png);
background-size: cover;
border: none;*/
/* background-color: white;
background-image: url(../assets/img/loupe.png);
background-size: cover;
border: none;*/
content: "\1F50D";
width: 23px;
height: 23px;
......
src/components/filtres/Filtre_Tag_Libre.vue
View file @ 44aa8a43
<template>
<div id="body" v-bind:class="editMode ? 'modeConsultation' : 'modeModification'">
<div v-bind:class="editMode ? 'modeConsultation' : 'modeModification'">
<!-- arborescence globale -->
<ul id="arborescenceLibre" class="menuNonFinal" >
<ul :class="editMode ? 'editArborescenceLibre' : 'arborescenceLibre'" class="menuNonFinal" >
<!-- creation de nouveau filtre de 'niveau' 1 -->
<li v-if="editMode">
<span v-bind:class="darktheme ? 'nouveauTagLibreDark' : 'nouveauTagLibre'"
......@@ -12,13 +12,13 @@
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibre"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<!-- selection de contenus sans filtre libre établi -->
<li v-on:click="nouveauFiltre($event)" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
<li v-on:click="nouveauFiltre($event, 'sans Tag Libre')" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
<!-- affichage des filtres personnels de l'utilisateur -->
<ul v-for="filtre in filtresNiveauUn" :key="filtre" class="tagsLibres">
<!-- <li v-on:click="nouveauFiltre(filtre)"><span class="niveauInamovible"></span>{{ filtre }}-->
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ filtre }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibre"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
......@@ -28,7 +28,7 @@
<ul v-for="filtre in filtresNiveauDeux(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibre">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreDeux(filtre)}}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreDeux"><span class="niveauInamovible"></span>
......@@ -39,7 +39,7 @@
<ul v-for="filtre in filtresNiveauTrois(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreDeux">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreTrois(filtre) }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreTrois"><span class="niveauInamovible"></span>
......@@ -50,7 +50,7 @@
<ul v-for="filtre in filtresNiveauQuatre(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreTrois">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ affichageFiltreQuatre(filtre) }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreQuatre"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
......@@ -108,17 +108,19 @@ export default {
* quand on clique sur un filtre on l'envoie dans le "circuit"
*/
nouveauFiltre: function (event, filtre) {
// bricolage pour empecher qu'un filtre ne soit créé quand on clique sur une flèche pour activer / desactiver l'arborescence
if(event.target.tagName !== 'SPAN')
this.$emit("creer_filtre", {filtre: filtre, type: this.filtreChoisi})
// alert("filtre" + filtre === undefined + " now loading")
},
/**
* @vuese
* suppression (définitive) d'un tag libre
*/
supprimerTagLibre: function (e) {
Service.supprimerTagLibre(this.auteur, Service.supprimerTagLibre(this.auteur, e.target.parentNode.innerText.trim()))
this.filtresLibres = this.filtresLibres.filter(filtre => filtre !== e.target.parentNode.innerText.trim())
supprimerTagLibre: function (e, filtreClique) {
Service.supprimerTagLibre(this.auteur, filtreClique)
this.filtresLibres = this.filtresLibres.filter(filtre => filtre !== filtreClique)
},
/**
* @vuese
......@@ -168,8 +170,10 @@ export default {
* @vuese
* masquage de la zone de saisie d'un nouveau tag
*/
masquerTagLibre: function () {
masquerTagLibre: function (e) {
this.nouveauTagLibre = false
//alert("Par la barbe de Pipien Velletier")
e.target.parentNode.hidden = !e.target.parentNode.hidden
},
/**
* @vuese
......@@ -296,6 +300,15 @@ export default {
list-style-type: none;
}
.arborescenceLibre {
padding-inline-start: 4px;
margin-left: 10px;
}
.editArborescenceLibre {
margin-top: 5vh;
margin-left: 55vh;
}
.tagsLibres {
list-style-type: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment