1ere version tableau contenu panier

src/Maj.vue

 <template>
   <div>
-    Maj
+    <span class="niveau" id="recues" v-on:click="naviguer">Maj Recues</span><br>
+    <div id="detailRecues" class="masque"><p>Liste des maj recues</p></div>
+    <span class="niveau" id="proposees" v-on:click="naviguer">Maj Proposées</span>
+    <div id="detailProposees" class="masque"><p>Liste des maj proposees</p></div>
+
   </div>
 </template>
 
 <script>
 export default {
-  name: "Maj"
+  name: "Maj",
+  methods: {
+    naviguer: function (e) {
+      e.target.classList.toggle("niveau-down")
+      //alert(e.target.id)
+      document.getElementById("detail" + e.target.id[0].toUpperCase() + e.target.id.substring(1)).classList.toggle('affiche')
+    }
+  }
 }
 </script>
 
 <style scoped>
+div{
+  text-align: center;
+}
+
+.niveau::before {
+  content: "\25B6";
+  color: black;
+  display: inline-block;
+  margin-left: 2px;
+  margin-right: 4px;
+
+}
 
+.niveau-down::before {
+  transform: rotate(90deg);
+}
+
+.masque {
+  display: none;
+}
+
+.affiche {
+  display: block;
+}
 </style>
\ No newline at end of file

src/Menu.vue

@@ -68,7 +68,7 @@ export default {
     width: 100px;
     background: white;
     border: thin solid black;
-    margin-top: 1px;
+    margin-top: 100px;
     margin-left: 93.5%;
     position: absolute;
     display: flex;

src/Profil.vue

 <template>
   <div>
-    Profil
+    <p id="infoTitre"> Vos informations : </p>
+    <p> Auteur : </p>
+    <p> Ecole : </p>
+    <p> "Note" : </p>
+    <p> "Publications" : </p>
+  <button class="changermdp" v-on:click="modeEdition">ChangerMdp</button>
+    <div id="editMode" v-show="editMode">
+    <label for="mdp1">Entrer le nouveau mdp</label>
+    <input type="password" id="mdp1">      <br>
+
+      <label for="mdp1">Entrer a nouveau votre mdp</label>
+    <input type="password" id="mdp2">      <br>
+
+      <button class="changermdp" v-on:click="validerChangement">Valider</button>
+
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Profil"
+  name: "Profil",
+  data: function () {
+    return {
+      editMode: false,
+    }
+  },
+  methods: {
+    modeEdition: function () {
+      this.editMode = ! this.editMode
+    },
+    validerChangement: function (){
+      alert ('mot de passe changé')
+      this.editMode = ! this.editMode
+
+    }
+  }
 }
 </script>
 
 <style scoped>
+  div{
+    text-align: center;
+  }
+
+  #infoTitre {
+    text-decoration: underline;
+  }
+
+  .changermdp{
+    width: auto;
+  }
 
+  #editMode{
+    display: flex;
+    flex-direction: column;
+    width: 350px;
+    align-items: center;
+    margin: 10px auto 0;
+  }
 </style>
\ No newline at end of file

src/Tags.vue

 <template>
 <div>
-  Tags
+  <p>Tags (a définir et à réaliser)</p>
 </div>
 </template>
 
@@ -11,5 +11,7 @@ export default {
 </script>
 
 <style scoped>
-
+p {
+  text-align: center;
+}
 </style>
\ No newline at end of file

src/components/Volet_Base.vue

 <template>
 
-<div>
-  <button id="changerVariante" v-on:click="changerVariante">changer</button>
-
-  <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_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"/>
+  <div>
+    <button id="changerVariante" v-on:click="changerVariante">changer</button>
+
+    <div id="principal">
+      <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_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"/>
+        </div>
+      </div>
+      <div id="tableau">
+        <table>
+          <thead>
+          <tr>
+            <th colspan="7">Contenus</th>
+          </tr>
+          </thead>
+          <tr>
+            <th>Titre</th>
+            <th>Version actuelle</th>
+            <th>Date Version actuelle</th>
+            <th>Nbre d'Utilisations</th>
+            <th>Likes</th>
+            <th>Tags</th>
+            <th v-on:click="supprimerContenus"><img src="../assets/img/balai.png" alt="pipi" height=20 width=20/></th>
+
+          </tr>
+          <tbody>
+
+            <tr v-for="(index) in contenus" :key="index">
+              <td class="titreContenu">{{ index }}</td>
+              <td>with two columns</td>
+              <td>The table body</td>
+              <td>with two columns</td>
+              <td>with two columns</td>
+              <td>with two columns</td>
+
+              <td class="boutonSupprimer">  <input type="checkbox" id="horns" name="horns"/></td>
+
+            </tr>
+<!--          <tr>
+            <td class="titreContenu">Titre td</td>
+            <td>with two columns</td>
+            <td>The table body</td>
+            <td>with two columns</td>
+            <td>with two columns</td>
+            <td>with two columns</td>
+
+            <td class="boutonSupprimer"><input type="checkbox" id="horns" name="horns"/></td>
+
+          </tr>-->
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
+
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -30,7 +80,8 @@ export default {
       isActif: true,
       modeChoisi: "Panier",
       filtre_choisi: "",
-      variante: false
+      variante: false,
+      contenus: []
     }
   },
   mounted() {
@@ -54,9 +105,24 @@ export default {
     changerVariante: function (){
       this.variante = ! this.variante
 
-        this.$emit("choix_variante", {variante: this.variante})
+      this.$emit("choix_variante", {variante: this.variante})
 
 
+    },
+    supprimerContenus: function () {
+
+     /*/ $(':checkbox:checked').each(function () {
+        console.log($(this).prev(".titreContenu").id)
+      })*/
+
+      let inputs = document.querySelectorAll("input[type='checkbox']")
+      for(let i = 0; i < inputs.length; i++) {
+        if ( inputs[i].checked)
+        inputs[i].parentElement.parentElement.style.display='none'
+      }
+    },
+    ajouterContenu: function () {
+      this.contenus.push("nouveau contenu")
     }
   }
 }
@@ -64,6 +130,34 @@ export default {
 
 <style scoped>
 
+#principal {
+  display: flex;
+
+}
+
+table {
+  margin-top: 97.5px;
+  margin-left: 20px;
+  width: 1550px;
+}
+
+th,
+td {
+  border: 1px solid #333;
+
+}
+
+td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+thead,
+tfoot {
+  background-color: #333;
+  color: #fff;
+}
+
 #volet{
   position: relative;
   width: 300px;
@@ -82,5 +176,18 @@ export default {
   width: auto;
 }
 
+.circle {
+  border: 1px solid black ;
+  margin-top: 1%;
+  border-radius: 50%;
+  display: flex; /* or inline-flex */
+  align-items: center;
+  justify-content: center;
+  height: 75px;
+  width: 75px;
+  background: white url(../assets/img/plus.png);
+  background-size: cover;
+}
+
 
 </style>
\ No newline at end of file