Skip to content

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

Integration navigation arborescence tags libres

parent 2076cd5f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 853 additions and 136 deletions
src/Contenu.vue
View file @ f8214df8
......@@ -3,7 +3,7 @@
<Volet_Base @rechercherNouvellesPublications="rechercherNouvellesPublications" @choix_variante="choixVariante"
@newContenu="newContenu" v-bind:nvoContenu="nvoContenu" v-bind:auteur="auteur"
v-bind:contenuAjoute="contenuAjoute" v-bind:majContenus="majContenus" v-bind:darktheme="darktheme"
v-bind:deconnexion="deconnexion" @ChangerTitre="ChangerTitre" />
v-bind:deconnexion="deconnexion" v-bind:etat="etat" @ChangerTitre="ChangerTitre" />
</div>
</template>
......@@ -61,7 +61,9 @@ export default {
// Signal d'activation ou non du theme sombre
darktheme: {},
// Signal de déconnexion
deconnexion: {}
deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
}
}
</script>
......
src/GererTagsLibres.vue
View file @ f8214df8
<template>
<div>
<div style="text-align: center"><br>Bonjour, je suis le menu de gestion des tags libres<br><br>
Vous avez {{tagsLibresAuteur.length}} tags libres existants : <br><br>
<ul>
<li v-for="tag in tagsLibresAuteur" :key="tag">{{tag}} <button v-on:click="supprimerTag(tag)">supprimer</button></li>
</ul>
<div id="creationTag">
<label>Creer un tag libre :</label><br>
<input type="text" placeholder="tag a créer" v-model="nouveauTag">
<button id="creerTag" v-on:click="creerTag"> Creer</button>
</div>
</div>
<Filtre_Tag_Libre v-bind:modeGestion = "modeGestion" v-bind:auteur="auteur"></Filtre_Tag_Libre>
</div>
</template>
<script>
import Service from "./service/Service";
import Filtre_Tag_Libre from "@/components/filtres/Filtre_Tag_Libre";
export default {
name: "GererTagsLibres",
components: {Filtre_Tag_Libre},
data: function () {
return {
tagsLibresAuteur: [],
......@@ -31,7 +20,9 @@ export default {
},
props: {
//l'auteur connecte
auteur: {}
auteur: {},
// signal permettant de déterminer si on accede a filtre_tags_libres via cette page ou pas
modeGestion: {}
},
methods: {
creerTag: function () {
......@@ -46,6 +37,7 @@ export default {
//alert("Supprimer le tag " + tag)
//let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer}
//this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
alert("hi hi")
Service.supprimerTagLibre(this.auteur, tagAVirer)
this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer)
}
......
src/Index.vue
View file @ f8214df8
......@@ -8,7 +8,7 @@
</Menu>
<Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute"
@choix_variante="choixVariante" @newContenu="newContenu"
@rechercherNouvellesPublications="rechercherPublications = !rechercherPublications"
@rechercherNouvellesPublications="rechercherPublications = !rechercherPublications" v-bind:etat="etat"
v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion"
@ChangerTitre="ChangerTitre"></Contenu>
<Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
......@@ -16,11 +16,14 @@
@majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
v-bind:rechercherPublications="rechercherPublications"></Maj>
<Profil v-show="etat === 'Profil'" ></Profil>
<GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" ></GererTagsLibres>
<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>
<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>
<span :class="etat !== 'manuel' ? 'manuel' : 'retourManuel'" v-on:mouseover="popoverManuel" v-on:mouseleave="popoverManuel" v-on:click="consulterManuel"> </span>
<Manuel v-show="etat === 'manuel'" v-bind:etatTmp="etatTmp" v-bind:darktheme="darktheme"></Manuel>
</div>
</template>
......@@ -34,6 +37,7 @@ import NewContenu from "./NewContenu";
import ImporterFichier from "./ImporterFichier";
import GererTagsLibres from "@/GererTagsLibres";
import TagsFixes from "@/TagsFixes";
import Manuel from "@/Manuel";
// import Service from "./service/Service";
// import showdown from "showdown"
......@@ -57,7 +61,11 @@ export default {
errorMessage: 'Login ou mot de passe erroné',
darktheme: '',
deconnexion: false,
nouveauTitre: ''
nouveauTitre: '',
couleurFond: 'aqua',
modeGestion: false,
hoverManuel: false,
etatTmp: ''
}
},
methods: {
......@@ -90,8 +98,9 @@ export default {
if (event.choix === "Contenu"){
this.deconnexion = !this.deconnexion
}
if (event.choix === "Tags"){
this.modeGestion = !this.modeGestion
}
if (event.choix === "Mises à jour"){
this.isRecu = event.isRecu
this.isPropose = event.isPropose
......@@ -152,6 +161,13 @@ export default {
*/
darkTheme: function (event) {
this.darktheme = event.active
if (this.darktheme === true){
document.body.style.backgroundColor = "lightslategray";
//document.body.style.color = "white";
} else {
document.body.style.backgroundColor = "aqua";
//document.body.style.color = "black";
}
},
/**
* @vuese
......@@ -159,10 +175,27 @@ export default {
*/
ChangerTitre: function (event) {
this.nouveauTitre = event.titre
},
popoverManuel: function () {
this.hoverManuel = !this.hoverManuel
},
consulterManuel: function () {
if (this.etat === 'manuel'){
this.etat = this.etatTmp
this.nouveauTitre = ""
} else {
this.etatTmp = this.etat
this.etat = 'manuel'
this.nouveauTitre = "Manuel d'utilisation de l'application OpenQuizz"
}
}
},
mounted() {
document.body.style.backgroundColor = "aqua";
},
components:{
Manuel,
TagsFixes,
GererTagsLibres,
ImporterFichier,
......@@ -177,4 +210,31 @@ export default {
</script>
<style scoped>
.manuel::before {
content: "\01F4D6";
position: fixed;
bottom: 1%;
left: 1%;
font-size: 32px;
}
.retourManuel::before {
content: "\2B05";
position: fixed;
bottom: 1%;
left: 1%;
font-size: 32px;
}
#prout {
background-color: white;
padding: 10px;
position: absolute;
bottom: 6%;
left: 1%;
}
</style>
\ No newline at end of file
src/Login.vue
View file @ f8214df8
......@@ -31,9 +31,7 @@ import Service from './service/Service'
export default {
name: "Login",
mounted() {
document.body.style.backgroundColor = "aqua";
},
methods: {
logIn: function () {
let that = this
......
src/Maj.vue
View file @ f8214df8
......@@ -32,8 +32,11 @@
<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="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, '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="valider" v-on:click="gererPublication(item, 'n')"><span class="supprimerPublicationRecue"></span></td>
</tr>
</tbody>
......@@ -73,11 +76,11 @@
<td>1</td>
<td>01/06/2021</td>
<td>{{ item.etat }}</td>
<td v-if="item.etat === 'refus'" v-on:click="conserver(item)"><img v-bind:src="imageCoche" alt='' height=20 width=20></td>
<td v-if="item.etat === 'refus'" v-on:click="conserver(item)"><span class="conserverPublicationRefusee"></span></td>
<td v-else></td>
<td v-if="item.etat === 'refus'" v-on:click="creerNouveau(item)"><img v-bind:src="imgNouveau" alt='' height=20 width=20></td>
<td v-if="item.etat === 'refus'" v-on:click="creerNouveau(item)"><span class="creerNouveauContenu"></span></td>
<td v-else></td>
<td v-if="item.etat !== 'enCours'" v-on:click="supprimer(item)"><img v-bind:src="imgPoubelle" alt='' height=20 width=20></td>
<td v-if="item.etat !== 'enCours'" v-on:click="supprimer(item)"><span class="supprimerPublicationProposee"></span></td>
<td v-else></td>
</tr>
</tbody>
......@@ -377,4 +380,31 @@ tfoot {
color: #fff;
}
.validerPublicationRecue::before {
/*content: "\2713";*/
content: "\2705";
color: white;
}
.supprimerPublicationRecue::before {
/*content: "\2717";*/
content: "\274E";
color: white;
}
.supprimerPublicationProposee::before {
content: "\01F5D1";
color: white;
}
.creerNouveauContenu::before {
content: "\1F195";
color: white;
}
.conserverPublicationRefusee::before {
content: "\1F512";
color: white;
}
</style>
\ No newline at end of file
src/Manuel.vue 0 → 100644
View file @ f8214df8
<template>
<div 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>
<ul class="cache">
<li>Dos Santos</li>
<li>Ribeiro</li>
</ul>
<li><h5>Manuel</h5></li>
</ul>
</div>
<div id="ohHolyNight">
<br>
<h2 id="titreUn">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>
<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>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Manuel",
props: {
// mode sombre activé ou non
darktheme: {},
// permet de récupérer la précedente page affichée
etatTmp: {},
},
methods: {
naviguer: function (e) {
e.target.classList.toggle("aucuneEducationDown")
console.log(e.target.parentNode.parentNode.nextSibling)
e.target.parentNode.parentNode.nextElementSibling.classList.toggle('affiche')
}
}
}
</script>
<style scoped>
#menuLateral{
height: 50vh;
width: 30vh;
margin-left: 10vh;
margin-top: 10vh;
border: 1px solid black;
position: fixed;
}
#ohHolyNight {
width: 120vh;
min-height: 100%;
height: 100%;
margin-top: 10vh;
margin-bottom: 5vh;
margin-left: 65vh;
border: 1px solid coral;
}
ul {
list-style: none;
padding-left: 1vh;
padding-top: 1vh;
text-align: left;
}
a {
text-decoration: none;
color: black;
}
.aucuneEducation::before {
content: "\27A2";
display: inline-block;
}
.aucuneEducationDown::before {
transform: rotate(90deg);
}
.cache {
display: none;
}
.affiche {
display: block;
margin-top: -1vh;
}
</style>
\ No newline at end of file
src/Menu.vue
View file @ f8214df8
<template>
<div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''">
<DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/>
<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 id="prout">{{ titrePage }}</span>
<span :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-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
<div class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
</div>
<div :class="darkMode ? 'circleVideDark' : 'circleVide'" v-else> </div>
<div class="menu" v-bind:class="darkMode ? 'menuDark' : ''" v-show="isAffiche">
<div v-if="etat !== 'Profil'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Profil</div>
<div v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
<div v-if="etat !== 'Mises à jour'" v-bind:class="darkMode ? 'sous_menuDark' : ''" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
<div v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
<div v-if="etat !== 'Tags'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
<div v-if="etat !== 'Tags'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
<div v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
<div v-if="etat !== 'Evaluations'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
<div v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
......@@ -44,6 +45,11 @@ export default {
roblox: "https://www.google.com/url?sa=i&url=https%3A%2F%2Feducation.roblox.com%2F&psig=AOvVaw2WUZcaXl4Wpn3dLXhgO41R&ust=1626436473301000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCIjmoJWC5fECFQAAAAAdAAAAABAD"
}
},
computed: {
menuHaut: function () {
return "menuProut"
}
},
props: {
// Permet de déterminer si on est dans le mode mise à jour ou pas
etat: {},
......@@ -63,9 +69,10 @@ export default {
*/
choixMenuAnnexe: function (e) {
const menuClique = e.target.innerText
if (menuClique !== 'Contenu'){
if (menuClique !== "Contenu"){
this.titrePage = menuClique
} else {
}
else {
this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
}
this.$emit("menu_choisi", {choix: menuClique})
......@@ -213,18 +220,25 @@ export default {
} else {
this.titrePage = this.nouveauTitre
}
}
},
}
}
</script>
<style scoped>
#menuHaut{
.menuHaut{
display: flex;
background-color: white;
justify-content: center;
}
.menuManuel{
display: flex;
background-color: white;
justify-content: space-between;
}
.circle {
border: 1px solid yellow;
margin-top: 0.25%;
......@@ -241,6 +255,33 @@ export default {
}
.circleVide {
border: 1px solid white;
margin-top: 0.25%;
margin-bottom: 0.25%;
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
margin-right: 0.25%;
}
.circleVideDark {
border: 1px solid black;
margin-top: 0.25%;
margin-bottom: 0.25%;
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
margin-right: 0.25%;
}
.menuVariante{
margin-top: 1%;
z-index: 1;
......@@ -285,7 +326,7 @@ export default {
}
#prout {
.prout {
display: flex;
position: absolute;
......@@ -293,6 +334,12 @@ export default {
margin-bottom: 0.1%;
}
.proutManuel {
margin-top: 0.5%;
margin-bottom: 0.1%;
}
.dark, .menuDark, .sous_menuDark {
background-color: #111 !important;
color: #eee;
......
src/TagsFixes.vue
View file @ f8214df8
......@@ -127,7 +127,7 @@ export default {
this.tagsModifies = ""
this.validationTags = 1
this.niveauDeux = 1
alert(this.tagsBanque.length)
//alert(this.tagsBanque.length)
this.tagUn = this.tagsBanque[0]
if (this.tagsBanque.length > 1){
//ert("Hihi")
......
src/TagsLibres.vue
View file @ f8214df8
<template>
<div>
<div id="pageTagLibre" v-bind:style="darktheme ? 'background-color: black; color: white' : 'background-color: white'">
<div id="tagsPresents"><br>
<label>Voici les tags libres présents sur ce contenu :</label><br>
<p v-if="tagsLibres.length === 0">Aucun tag présent</p>
......@@ -14,11 +14,6 @@
<option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option>
</select><br><br>
</div>
<div id="creationTag">
<label>Creer un tag libre :</label><br>
<input type="text" placeholder="tag a créer" v-model="nouveauTag">
<button id="creerTag" v-on:click="creerTag"></button>
</div>
<p>----------------------------------------------------------------------------</p>
<TagsFixes v-bind:isModif="isModif" v-bind:tagsBanque="tagsBanque" v-bind:id_contenu="id_contenu"></TagsFixes>
</div>
......@@ -37,15 +32,12 @@ export default {
// récupération de l'auteur
auteur: {},
// provenance du contenu
contenuCliqueProvenance: {}
contenuCliqueProvenance: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
methods:{
ajouterLeTag: function () {
/* let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
Service.ajouterTagLibre(data)*/
// Associer le tag au contenu pour l'auteur connecté
// Et l'ajouter à l'array des tags libres de Vue
let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
Service.associerTagLibre(data)
......@@ -109,6 +101,11 @@ ul {
}
/*#pageTagLibre {
margin-left: 20%;
margin-right: 20%;
}*/
.supprimerTag {
background: aqua url(assets/img/croix2.png);
background-size: cover;
......@@ -122,4 +119,12 @@ ul {
border: none;
margin-left: 3px;
}
#tagsPresents {
padding-top: 0.75 %;
}
#ajouterTag {
padding-bottom: 0.75%;
}
</style>
\ No newline at end of file
src/components/AjouterTags.vue deleted 100644 → 0
View file @ 2076cd5f
<template>
<div>
Bienvenue sur la page ou vous pourrez ajouter les tags nécessaires à accoler à la question que vous venez de créer
</div>
</template>
<script>
export default {
name: "AjouterTags"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/Consulter_Contenu.vue
View file @ f8214df8
......@@ -154,9 +154,6 @@ export default {
noteContenu: 0,
tagsContenus: []
}
},
computed: {
},
watch: {
/**
......
src/components/Detail_Contenu.vue
View file @ f8214df8
......@@ -3,7 +3,7 @@
<p v-show="filtre_choisi.length === 0">{{ texte }}</p>
<Filtre_Tag v-show="filtre_choisi === 'tags officiels'" @creer_filtre="creer_filtre"/>
<Filtre_Tag_Libre v-show="filtre_choisi === 'tags libres' " v-bind:filtreChoisi="filtre_choisi" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
<Filtre_Tag_Libre v-bind:darktheme="darktheme" v-show="filtre_choisi === 'tags libres' " v-bind:filtreChoisi="filtre_choisi" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
<Filtre_Auteur v-bind:panierChoisi="panierChoisi" v-show="filtre_choisi === 'auteur'" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
<Filtre_Date v-show="filtre_choisi === 'date' " @creer_filtre="creer_filtre"/>
<Filtre_Note_Popularite v-show="filtre_choisi === 'note' " @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/>
......@@ -43,7 +43,9 @@ export default {
// mode panier enclenché ou non
panierChoisi: {},
// Signal de deconnexion
deconnexion: {}
deconnexion: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
methods: {
/**
......@@ -58,6 +60,10 @@ export default {
}
},
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)"
......
src/components/Detail_Filtre.vue
View file @ f8214df8
<template>
<div id="detail_filtre">
<button id="effacerFiltres" v-on:click="effacer_Filtres"></button>
<!-- <button id="effacerFiltres" v-on:click="effacer_Filtres"></button>-->
<span v-bind:class="darktheme ? 'effacerFiltresDark' : 'effacerFiltres'" v-on:click="effacer_Filtres"></span>
<div id="filtresChoisis" v-for="(index) in filtres_Choisis" :key="index.filtre">
<span class="filtreChoisi"> {{index.filtre}} <button class="supprimerFiltre" v-on:click="supprimer($event, index)"></button></span>
<span :id="JSON.stringify(index.filtre)" class="filtreChoisi"> {{affichageTag(index)}} <button class="supprimerFiltre" v-on:click="supprimer($event, index)"></button></span>
<b-popover v-if="index.type === 'tags libres'" :target="JSON.stringify(index.filtre)" triggers="hover" placement="rightbottom">
<p>{{ index.filtre }}</p>
</b-popover>
</div>
</div>
</template>
......@@ -15,8 +18,10 @@ export default {
// Variable de stockage des nouveaux filtres
nouveau_filtre: {},
// Signal de deconnexion
deconnexion: {}
},
deconnexion: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
methods: {
/**
* @vuese
......@@ -75,6 +80,17 @@ export default {
default:
break
}
},
/**
* @vuese
* Permet le raffinage de l'affichage si on a un tag libre
*/
affichageTag: function (index) {
if(index.type ==='tags libres'){
if(index.filtre.lastIndexOf("/") !== -1)
return index.filtre.substring(index.filtre.lastIndexOf("/") + 1)
}
return index.filtre
}
},
watch: {
......@@ -149,13 +165,20 @@ export default {
align-items: center;
}
#effacerFiltres {
.effacerFiltres::before {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
background: white url(../assets/img/balai.png);
background-size: cover;
border: none;
content: "\01F9F9";
}
.effacerFiltresDark::before {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
content: "\01F9F9";
color: transparent;
text-shadow: 0 0 0 white;
}
</style>
\ No newline at end of file
src/components/Modifier_Contenu.vue
View file @ f8214df8
<template>
<div>
<div id="titreContenu">
<div id="titreContenu" v-bind:style="darktheme ? 'color:white' : ''">
<!-- <select v-show="(contenuCliqueProvenance === 'banque'
|| contenuCliqueProvenance === 'perso')
......@@ -14,7 +14,7 @@
Note de la version : {{noteContenu}}<br>
Popularité : {{contenuClique.popularite}}<br>
</div>
<button id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</button>
<span id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</span>
<div id="modifTitre">
......@@ -37,11 +37,19 @@
</div>
<div id="actionsContenu">
<button v-on:click="actionContenu('supprimer')">Supprimer</button>
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')" v-on:click="actionContenu('validerModification')">Valider la modification</button>
<!-- <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-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>-->
<span class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')" id="publierContenu">publier contenu</span>
<!-- <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
v-on:click="actionContenu('validerModification')">Valider la modification</button>-->
<span class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
v-on:click="actionContenu('validerModification')" id="validerContenu">valider contenu</span>
</div>
</div>
<br>
......@@ -50,7 +58,7 @@
<mavon-editor :language="'fr'" style="position: static; height: 79vh; margin-top: -0.5%" v-model="texteDuContenu"/>
</div>
<TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" @actionTagLibre="actionTagLibre"
style="position: static; height: 79vh; margin-top: -0.5%"></TagsLibres>
style="position: static; height: 79vh; margin-top: -0.5%" v-bind:darktheme="darktheme"></TagsLibres>
<div class="markdown">
<br>
<button id="validerModif" v-on:click="action('valider')">modifier </button>
......@@ -84,7 +92,9 @@ export default {
// la version du contenu cliqué
contenuCliqueVersion: {},
// le contenu clique
contenuClique: {}
contenuClique: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
data: function () {
return {
......@@ -331,4 +341,74 @@ button {
align-items: inherit;
position: relative
}
.boutonAction {
margin-right: 2px;
}
#supprimerContenuSolo::before {
content: "\01F5D1";
/* border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;*/
}
#supprimerContenuSoloDark::before {
content: "\01F5D1";
color: transparent;
text-shadow: 0 0 0 white;
}
#supprimerContenu::before {
content: "\01F5D1";
border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;
}
#supprimerContenuDark::before {
content: "\01F5D1";
color: transparent;
text-shadow: 0 0 0 white;
border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;
}
#validerContenu::before {
content: "\2712";
margin-right: 5px;
}
#publierContenuDark::before {
content: "\01F4F0";
margin-right: 5px;
color: transparent;
text-shadow: 0 0 0 white;
}
#validerContenuDark::before {
content: "\2712";
margin-right: 5px;
color: transparent;
text-shadow: 0 0 0 white;
}
#publierContenu::before {
content: "\01F4F0";
margin-right: 5px;
}
#tagsLibres::before {
content: "\270F ";
transform: rotate(180deg);
padding-right: 5px;
margin-right: 5px;
/* left: 350px;
position: absolute;*/
}
</style>
\ No newline at end of file
src/components/Volet_Base.vue
View file @ f8214df8
......@@ -57,8 +57,9 @@
<th v-on:click="trierColonne" v-show="!isActif && panierChoisi">Tags Libres</th>
<th v-on:click="trierColonne" >Type</th>
<th v-on:click="trierColonne">Source</th>
<th v-on:click="supprimerContenus" class="supprimerContenus">
<img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
<!-- <th v-on:click="supprimerContenus" class="supprimerContenus">
<img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>-->
<th v-on:click="supprimerContenus" class="supprimerContenus"> <span v-bind:class="panierChoisi ? 'imgPoubelle' : 'imgEtoile'"></span></th>
</tr>
<tbody>
......@@ -136,7 +137,7 @@
<Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
<Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
v-show="modeModification" @actionContenu="actionContenu" v-bind:contenuClique = "contenuClique"
v-show="modeModification" @actionContenu="actionContenu" v-bind:contenuClique = "contenuClique" v-bind:darktheme="darktheme"
@choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne" @actionTagLibre="actionTagLibre"/>
</div>
......@@ -176,7 +177,9 @@ export default {
// Signal d'activation ou non du theme sombre
darktheme: {},
// Signal de déconnexion
deconnexion: {}
deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
},
data: function () {
return {
......@@ -278,6 +281,13 @@ export default {
majContenus: function () {
this.contenusDuPanier()
this.contenusDeLaBanque()
},
/**
* @vuese
* Si l'etat change (on sort du 'mode contenu'), on réinitialise le volet latéral
*/
etat: function(){
this.filtre_choisi = ""
}
},
......@@ -743,7 +753,7 @@ export default {
let filtre_tags_libres = (event.filtres.filter(contenu => contenu.type === 'tags libres').map(contenu => contenu.filtre))
contenusFiltres.forEach(contenu => console.log(contenu.tags_libres.length))
// 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'){
......@@ -1113,17 +1123,17 @@ th image
#ensemble {
background-color: whitesmoke;
height: 966px;
height: 94.75vh;
}
#tableau {
background-color: lightgrey;
padding-top: 0.25%;
}
/*#divPrincipale {
background-color: lightgray;
}*/
#divPrincipale {
overflow-y: hidden;
overflow-x: hidden;
}
/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
......@@ -1147,6 +1157,15 @@ th image
.tableaudark th {
border-color: white;
}
.imgPoubelle::before {
content: "\01F5D1";
}
.imgEtoile::before {
content: "\2B50";
}
......
src/components/Volet_Contenu.vue
View file @ f8214df8
......@@ -2,11 +2,11 @@
<div id="contenu">
<div id = "detailFiltre">
<Detail_Filtre v-bind:nouveau_filtre="nouveau_filtre" @filtresChoisis="filtresChoisis" v-bind:deconnexion="deconnexion"/>
<Detail_Filtre v-bind:darktheme="darktheme" v-bind:nouveau_filtre="nouveau_filtre" @filtresChoisis="filtresChoisis" v-bind:deconnexion="deconnexion"/>
</div>
<div id = "detailContenu">
<Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
v-bind:auteur="auteur" @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/>
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>
......@@ -107,7 +107,7 @@ export default {
vertical-align: middle;
margin-top: 25%;
margin-bottom: 25%;
overflow: auto;
}
......
src/components/Volet_Menu.vue
View file @ f8214df8
......@@ -4,7 +4,9 @@
<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>
<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>
</template>
......@@ -65,17 +67,30 @@ export default {
height: 23px;
}
.modeFiltre{
background-color: white;
.modeFiltre::before{
/* background-color: white;
background-image: url(../assets/img/loupe.png);
background-size: cover;
border: none;
border: none;*/
content: "\1F50D";
width: 23px;
height: 23px;
}
.modeRecherche{
background-color: white;
background-color: whitesmoke;
background-image: url(../assets/img/filtre.png);
background-size: cover;
border: none;
width: 23px;
height: 23px;
}
.modeRechercheDark{
background-color: #353839;
background-image: url(../assets/img/filtre-inverse.png);
background-size: cover;
border: none;
width: 23px;
height: 23px;
}
</style>
\ No newline at end of file
src/components/filtres/Filtre_Auteur.vue
View file @ f8214df8
......@@ -17,6 +17,7 @@ import Service from "../../service/Service";
export default {
name: "Filtre_Auteur",
methods: {
// recuperation de l'auteur choisi
choixAuteur: function () {
if (this.auteur !== undefined)
this.$emit("creer_filtre", {filtre: this.auteur, type: 'auteur'})
......
src/components/filtres/Filtre_Date.vue
View file @ f8214df8
......@@ -21,9 +21,9 @@
export default {
name: "Filtre_Date",
methods: {
// recuperation de la date choisie
choixDate: function () {
this.$emit("creer_filtre", {filtre: this.date, type: 'date'})
// this.date = 'Toutes les périodes'
}
},
data: function () {
......
src/components/filtres/Filtre_Note.vue
View file @ f8214df8
......@@ -50,6 +50,7 @@ export default {
}
},
methods:{
// récupération du choix du filtre "note min"
choixNoteMin: function () {
let vraieNoteMin = parseFloat(this.noteMin.substring(1))
let vraieNoteMax = 5
......@@ -63,6 +64,7 @@ export default {
}
this.noteMin = ""
},
// récupération du choix du filtre "note max"
choixNoteMax: function () {
let vraieNoteMin = 0
if (this.noteMin !== 0)
......@@ -77,6 +79,7 @@ export default {
this.noteMax = ""
},
// récupération du choix du filtre "plage de note"
validerPlage: function () {
this.$emit("creer_filtre", {filtre: this.borneInf + " - " + this.borneSup, type: "noteBorne"})
this.borneInf = 0
......
src/components/filtres/Filtre_Tag.vue
View file @ f8214df8
......@@ -94,10 +94,13 @@ export default {
name: "Filtre_Tag",
methods: {
/**
* @vuese
* activation / desactivation de l'arborescence
*/
naviguer: function (e) {
if (e.offsetX > e.target.offsetLeft) {
//alert(e.target.text())
//alert("Je veux mettre" + e.target.innerText + "en filtre")
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
}
......@@ -106,6 +109,11 @@ export default {
e.target.parentNode.nextElementSibling.classList.toggle('affiche')
}
},
/**
* @vuese
* récupération d'un click sur un des échelon
*/
nouveauFiltre: function (e) {
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
......
src/components/filtres/Filtre_Tag_Libre.vue
View file @ f8214df8
This diff is collapsed.
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