Skip to content

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

sauvegarde volet fini avec vue

parent fda5aa0c
Hide whitespace changes
Inline Side-by-side
Showing with 804 additions and 71 deletions
src/App.vue
View file @ ddd38673
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<Volet_Base/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Volet_Base from "@/components/Volet_Base";
export default {
name: 'App',
components: {
HelloWorld
}
Volet_Base
},
created() {
alert('prpr')
},
data: function () {
return {
userLogged: true
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
button {
height: 20px;
width: 20px;
}
</style>
src/Index.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<Login v-show="!userLogged" @isLogged="setLogged"></Login>
<App v-show="userLogged"></App>
</div>
</template>
<script>
import Login from "@/Login";
import App from "@/App";
export default {
name: "Index.vue",
data: function () {
return {
userLogged: false
}
},
methods: {
setLogged: function () {
this.userLogged = true
}
},
components:{
Login,
App
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/Login.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<p> AYAYAYAYAY </p>
<form v-on:submit="logIn()">
<label for="identifiant">Identifiant</label>
<br>
<input type="text" id="identifiant" placeholder="identifiant" v-model="login" required="required">
<br>
<br>
<label for="motdepasse">Mot de Passe</label>
<br>
<input type="password" id="motdepasse" placeholder="mot de passe" v-model="password" required="required">
<br>
<br>
<input type="submit" value="connexion">
</form>
</div>
</template>
<script>
export default {
name: "Login",
methods: {
logIn: function () {
this.$emit("isLogged", {isLogged: true})
}
},
data: function () {
return {
login: "",
password: ""
}
},
}
</script>
<style scoped>
form {
width : 1000px;
text-align: center;
align-content: center;
margin: 20% auto 0;
}
input.text, input.password{
width: 350px;
text-align: center;
}
</style>
\ No newline at end of file
src/components/Barre_Filtre.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<form>
<select class="filtre" name="filtre" v-model="selected" v-on:change="a()" size="1">
<option disabled value="">Choix du filtre</option>
<option>tags officiels</option>
<option v-show="modeChoisi === 'Panier'">tags libres</option>
<option>auteur</option>
<option>type / source</option>
<option>date</option>
<option>note / popularité</option>
</select>
</form>
</div>
</template>
<script>
export default {
name: "Barre_Filtre",
props: ['modeChoisi'],
methods: {
a: function (){
this.$emit("filtre_choisi", {filtre: this.selected}) }
},
data: function () {
return {
selected: "",
}
}
}
</script>
<style scoped>
.filtre {
width: 250px;
margin-top: 2px;
flex-basis: 80%;
}
</style>
\ No newline at end of file
src/components/Barre_Recherche.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<form><input type="text" class="filtre" placeholder="votre recherche"></form>
</div>
</template>
<script>
export default {
name: "Barre_Recherche"
}
</script>
<style scoped>
.filtre {
width: 250px;
margin-top: 2px;
flex-basis: 80%;
}
</style>
\ No newline at end of file
src/components/Choix_Mode.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
<div id = "contenusPanier" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
<p>Panier</p>
</div>
<div id = "contenusBanque" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
<p>Banque</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Choix_Mode",
data: function () {
return {
contenuPanier: true,
}
},
methods: {
changerChoix: function () {
this.contenuPanier = !this.contenuPanier
this.$emit("mode_choisi", {mode: this.contenuPanier})
},
}
}
</script>
<style scoped>
#choixDuMode {
border: 1px solid black;
flex-basis: 10%;
display: flex;
}
#contenusPanier, #contenusBanque {
width: 49%;
flex-grow: 1;
text-align: center;
}
.nonClicked {
outline: 1px solid black;
}
.clicked {
outline: 5px solid yellow;
}
</style>
\ No newline at end of file
src/components/Detail_Contenu.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<p v-show="filtre_choisi.length === 0">Ajoutez des filtres pour restreindre la recherche, ou effectuez une recherche libre (bouton en haut à droite)</p>
<Filtre_Tag v-show="filtre_choisi === 'tags officiels' || filtre_choisi === 'tags libres' " @creer_filtre="creer_filtre"/>
<Filtre_Auteur v-show="filtre_choisi === 'auteur'" @creer_filtre="creer_filtre"/>
<Filtre_Date v-show="filtre_choisi === 'date' " @creer_filtre="creer_filtre"/>
<Filtre_Note_Popularite v-show="filtre_choisi === 'note / popularité' " @creer_filtre="creer_filtre"/>
<Filtre_Type_Source v-show="filtre_choisi === 'type / source'" @creer_filtre="creer_filtre"/>
</div>
</template>
<script>
import Filtre_Tag from "@/components/filtres/Filtre_Tag";
import Filtre_Auteur from "@/components/filtres/Filtre_Auteur";
import Filtre_Date from "@/components/filtres/Filtre_Date";
import Filtre_Note_Popularite from "@/components/filtres/Filtre_Note_Popularite";
import Filtre_Type_Source from "@/components/filtres/Filtre_Type_Source";
export default {
name: "Detail_Contenu",
components: {
Filtre_Tag,
Filtre_Auteur,
Filtre_Date,
Filtre_Note_Popularite,
Filtre_Type_Source
},
props: ['filtre_choisi'],
methods: {
creer_filtre: function (event) {
this.$emit("creer_filtre", {filtre: event.filtre})
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/Detail_Filtre.vue 0 → 100644
View file @ ddd38673
<template>
<div id="detail_filtre">
<button id="effacerFiltres" v-on:click="effacer_Filtres"></button>
<div id="filtresChoisis" v-for="(index) in filtres_Choisis" :key="index">
<span class="filtreChoisi"> {{index}} <button class="supprimerFiltre" v-on:click="supprimer"></button></span>
</div>
</div>
</template>
<script>
export default {
name: "Detail_Filtre",
props: ['nouveau_filtre'],
methods: {
supprimer: function (e) {
e.target.parentElement.remove()
},
effacer_Filtres: function () {
this.filtres_Choisis = []
}
},
watch: {
nouveau_filtre: function(newVal) { // watch it
//alert('Prop changed: ' + newVal + ' | was: ' + oldVal)
this.filtres_Choisis.push(newVal)
}
}
, data: function () {
return {
filtres_Choisis: [],
}
}
}
// <span class="filtreChoisi">' + e.target.innerText + '<button class="supprimerFiltre"></button></span>
</script>
<style scoped>
.supprimerFiltre {
background: white url(../assets/img/croix.png);
background-size: cover;
border: none;
}
#detail_filtre {
display: flex;
flex-direction: row;
padding: 1px;
margin: 1px;
flex-flow: wrap;
}
.filtreChoisi{
padding: 1px;
border: 1px solid black;
display: inline-flex;
margin: 1px;
align-items: center;
}
#effacerFiltres {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
background: white url(../assets/img/balai.png);
background-size: cover;
border: none;
}
</style>
\ No newline at end of file
src/components/HelloWorld.vue deleted 100644 → 0
View file @ fda5aa0c
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/Volet_Base.vue 0 → 100644
View file @ ddd38673
<template>
<div id="ensemble">
<button id="boutonVolet" v-on:click="desactiverVolet"></button>
<div class="full" id="volet" v-show="isActif">
<Volet_Menu v-bind:mode-choisi = "modeChoisi" @filtre_choisi="passerFiltre"/>
<Volet_Choix @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi"/>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import 'jquery-ui-bundle'
import Volet_Menu from "@/components/Volet_Menu";
import Volet_Choix from "@/components/Volet_Contenu";
export default {
name: "Volet_Base",
components: {
Volet_Menu,
Volet_Choix
},
data: function () {
return {
isActif: true,
modeChoisi: "Panier",
filtre_choisi: ""
}
},
mounted() {
$('#ensemble').draggable()
},
methods: {
desactiverVolet: function () {
this.isActif = !this.isActif
},
ajusterMode: function (event) {
if (event.mode === true){
this.modeChoisi = "Panier"
}
else {
this.modeChoisi = "Banque"
}
},
passerFiltre: function(event){
this.filtre_choisi = event.filtre
}
}
}
</script>
<style scoped>
#volet{
position: relative;
width: 300px;
height: 500px;
border: 1px solid black;
margin-top: 2px;
margin-left: 10px;
}
#boutonVolet {
margin-top: 130px;
margin-left: 10px;
}
</style>
\ No newline at end of file
src/components/Volet_Contenu.vue 0 → 100644
View file @ ddd38673
<template>
<div id="contenu">
<div id = "detailFiltre">
<Detail_Filtre v-bind:nouveau_filtre="nouveau_filtre" />
</div>
<div id = "detailContenu">
<Detail_Contenu v-bind:filtre_choisi="filtre_choisi" @creer_filtre="creer_filtre"/>
</div>
<Choix_Mode @mode_choisi="ajusterMode" />
</div>
</template>
<script>
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_Choix",
components: {
Choix_Mode,
Detail_Filtre,
Detail_Contenu
},
props: ['filtre_choisi'],
methods: {
ajusterMode: function (event) {
this.$emit("mode_choisi", {mode: event.mode})
},
creer_filtre: function (event) {
this.nouveau_filtre = event.filtre
}
},
data: function () {
return {
nouveau_filtre: "",
}
}
}
</script>
<style scoped>
#contenu {
width: 100%;
height: 98.25%;
margin-top: -5%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#detailFiltre {
flex-basis: 10%;
border-bottom: 1px solid black;
margin-top: 11px;
padding: 2px;
}
#detailContenu {
flex-basis: 80%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin-top: 25%;
margin-bottom: 25%;
}
</style>
\ No newline at end of file
src/components/Volet_Menu.vue 0 → 100644
View file @ ddd38673
<template>
<div class="menu">
<div id="listeFiltres" class="filtre">
<Barre_Filtre v-bind:modeChoisi="modeChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-show="!modeFiltre"/>
</div>
<button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>
</div>
</template>
<script>
import Barre_Filtre from "@/components/Barre_Filtre";
import Barre_Recherche from "@/components/Barre_Recherche";
export default {
name: "Volet_Menu",
components: {
Barre_Recherche,
Barre_Filtre
},
props: ['modeChoisi'],
data: function () {
return {
modeFiltre: true
}
},
methods: {
changerModeMenu: function (){
this.modeFiltre = !this.modeFiltre
},
passerFiltre: function(event){
this.$emit("filtre_choisi", {filtre: event.filtre})
}
},
}
</script>
<style scoped>
.menu {
width: 100%;
height: 5%;
display: inline-flex;
justify-content: space-around;
}
#recherche {
width: 23px;
height: 23px;
}
.modeFiltre{
background-color: white;
background-image: url(../assets/img/loupe.png);
background-size: cover;
border: none;
}
.modeRecherche{
background-color: white;
background-image: url(../assets/img/filtre.png);
background-size: cover;
border: none;
}
</style>
\ No newline at end of file
src/components/filtres/Filtre_Auteur.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<div id="selectionnerAuteur">
<span>selectionner un auteur : </span><br><br>
<select id="auteur" name="auteur" size="1" v-model="auteur" v-on:change="choixAuteur()">
<option>Auteur 1</option>
<option>Auteur 2</option>
<option>Auteur 3</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: "Filtre_Auteur",
methods: {
choixAuteur: function () {
// alert(this.auteur)
this.$emit("creer_filtre", {filtre: this.auteur})
}
},
data: function () {
return {
auteur: "",
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/filtres/Filtre_Date.vue 0 → 100644
View file @ ddd38673
<template>
<div id="selectionnerDateunique">
<span>selectionner une plage de dates</span><br>
<label for="dateDebut">Date début</label>
<input id="dateDebut" type="date" required="required"/><br>
<label for="dateFin">Date fin</label>
<input id="dateFin" type="date" required="required"/><br>
<button class="validerFiltre" id="validerDates" value="valider" v-on:click="choixDate"/>
</div>
</template>
<script>
export default {
name: "Filtre_Date",
methods: {
choixDate: function () {
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/filtres/Filtre_Note_Popularite.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<p> (Modalités du filtre à définir ultérieurement)</p>
<div id="selectionnerNote"><span>selectionner une "note"</span></div>
<br>
ou
<br>
<br>
<div id="selectionnerPopularité"><span>selectionner une popularité</span></div>
</div>
</template>
<script>
export default {
name: "Filtre_Note_Popularite"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/filtres/Filtre_Tag.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<ul id="arborescence" class="menuNonFinal">
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Menu1</li>
<ul class="cache menuNonFinal">
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 1</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 2</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
</ul>
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Menu2</li>
<ul class="cache menuNonFinal">
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 1</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 2</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
</ul>
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Menu3</li>
<ul class="cache menuNonFinal">
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 1</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
<li class="element" v-on:click="naviguer"><span class="niveau"></span>Sous Menu 2</li>
<ul class="cache">
<li class="element" v-on:click="nouveauFiltre">Water</li>
<li class="element" v-on:click="nouveauFiltre">Coffee</li>
</ul>
</ul>
</ul>
</div>
</template>
<script>
//import $ from 'jquery'
export default {
name: "Filtre_Tag",
methods: {
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})
}
else{
e.target.classList.toggle("niveau-down")
e.target.parentNode.nextElementSibling.classList.toggle('affiche')
}
},
nouveauFiltre: function (e) {
this.$emit("creer_filtre", {filtre: e.target.innerText})
}
}
}
</script>
<style scoped>
.menuNonFinal {
list-style-type: none;
}
#arborescence {
padding: 4px;
text-align: left;
margin: 0 0 0 10px;
}
.niveau {
user-select: text;
}
body {
cursor: pointer;
}
.niveau::before {
content: "\25B6";
color: black;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.niveau-down::before {
transform: rotate(90deg);
}
.cache {
display: none;
}
.affiche {
display: block;
}
.element{
display: flex;
}
</style>
\ No newline at end of file
src/components/filtres/Filtre_Type_Source.vue 0 → 100644
View file @ ddd38673
<template>
<div>
<div id="selectionnerType">
<span>selectionner un type</span><br><br>
<select id="type" name="type" size="1" v-model="type" v-on:change="choixType()">
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
<div id="selectionnerSource">
<br> <span>selectionner une source</span><br><br>
<select id="source" name="source" size="1" v-model="source" v-on:change="choixSource()">
<option>source1</option>
<option>source2</option>
<option>source3</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: "Filtre_Type_Source",
data: function () {
return {
type: "",
source: "",
}
},
methods: {
choixType: function () {
this.$emit("creer_filtre", {filtre: this.type})
},
choixSource: function () {
this.$emit("creer_filtre", {filtre: this.source})
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/main.js
View file @ ddd38673
import Vue from 'vue'
import App from './App.vue'
//import Index from '@/Index'
Vue.config.productionTip = false
new Vue({
......
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