Merge pull request #120 from Nathan-Etave/feat/utilisateur

Merge de la branche feat/utilisateur dans dev

Author: RomainMechain

app/file_handler/routes.py

@@ -4,6 +4,7 @@
 from flask_login import current_user, login_required
 from app import socketio
 from app.extensions import db
+from app.models.favoris import FAVORIS
 
 @bp.route('/dossier/<int:folder_id>/fichier/<int:file_id>', methods=['GET'])
 @login_required
@@ -22,10 +23,13 @@ def file(folder_id, file_id):
 @socketio.on('get_files_details', namespace='/file_handler')
 def get_files_details(data):
     files_id = data['files']
+    favoris = db.session.query(FAVORIS.c.id_Fichier).filter(FAVORIS.c.id_Utilisateur == current_user.id_Utilisateur).all()
+    favoris_ids = [favori.id_Fichier for favori in favoris]
     files = []
     for file_id in files_id:
         file = db.session.query(FICHIER).filter(FICHIER.id_Fichier == file_id).first()
         dict_file = file.to_dict()
         dict_file['id_Dossier'] = file.DOSSIER_.id_Dossier
+        dict_file['is_favorite'] = file.id_Fichier in favoris_ids
         files.append(dict_file)
     socketio.emit('files_details', files, namespace='/file_handler')

app/static/js/desktop.js

@@ -1,27 +1,30 @@
 import { previewAfterRender } from './preview.js';
+import { baseAfterRender } from './base.js';
 
 document.addEventListener('DOMContentLoaded', function () {
     let deskList = JSON.parse(localStorage.getItem('desktop'));
     if (deskList === null) {
         deskList = [];
         localStorage.setItem('desktop', JSON.stringify(deskList));
     }
+    let csrfToken = document.querySelector('meta[name="csrf-token"]').content;
 
     const socket = io.connect('/file_handler');
-
     socket.emit('get_files_details', { 'files': deskList });
 
     let currentFile = 1;
+    let desktop = document.getElementById('desk-section');
 
     socket.on('files_details', function (data) {
-        let desktop = document.getElementById('desk-section');
         let modalFooter = document.querySelector('.nav-tabs');
         desktop.innerHTML = '';
 
         let deskFileNumber = 1;
         data.forEach(function (file) {
             let div = document.createElement('div');
             div.className = 'col-2';
+            div.id = "div-file-" + file.id_Fichier;
+            div.setAttribute('data-number', deskFileNumber);
 
             let card = document.createElement('div');
             card.className = 'card';
@@ -43,6 +46,15 @@ document.addEventListener('DOMContentLoaded', function () {
                                  </div>
                                  <div>
                                     <p class="card-title h5" style="font-size: 1.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">${file.nom_Fichier}<p>
+                                 </div>
+                                 <div class="desktop-element">
+                                    <a href="#" id="${ file.id_Fichier }" class="favori" is-fav="${ file.is_favorite }" onclick="event.stopPropagation();">
+                                        <i class="fa-solid fa-star fa-lg me-2" style="color: #FFD43B;"
+                                            id="fav-${ file.id_Fichier }"></i>
+                                    </a>
+                                    <a href="#" id="${ file.id_Fichier }" class="desktop-btn" onclick="event.stopPropagation();">
+                                        <i class="fa-regular fa-square-minus fa-lg" id="desk-${ file.id_Fichier }"></i>
+                                    </a>
                                  </div>`;
 
             fileDiv.addEventListener('click', function () {
@@ -86,6 +98,78 @@ document.addEventListener('DOMContentLoaded', function () {
             deskFileNumber++;
 
         });
+
+        let favs = document.querySelectorAll('.favori');
+            favs.forEach(function (fav) {
+                let id = fav.id;
+                let isFav = fav.getAttribute('is-fav');
+                let etoile = document.getElementById("fav-" + id);
+                if (isFav === "true") {
+                    fav.className = "favori-true";
+                }
+                else {
+                    fav.className = "favori-false";
+                    etoile.className = "fa-regular fa-star fa-lg me-2";
+                }
+                fav.addEventListener('click', function (event) {
+                    event.preventDefault();
+                    if (fav.className === "favori-true") {
+                        fetch("/favori/" + id, {
+                            method: "DELETE",
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRFToken': csrfToken
+                            }
+                        })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.status === "ok") {
+                                    fav.className = "favori-false";
+                                    etoile.className = "fa-regular fa-star fa-lg me-2";
+                                }
+                                else {
+                                    alert("Erreur lors de la suppression du favori");
+                                }
+                            });
+                    }
+                    else {
+                        fetch("/recherche/favori/" + id, {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRFToken': csrfToken
+                            }
+                        })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.status === "ok") {
+                                    fav.className = "favori-true";
+                                    etoile.className = "fa-solid fa-star fa-lg me-2";
+                                }
+                                else {
+                                    alert("Erreur lors de l'ajout du favori");
+                                }
+                            });
+                    }
+                });
+            });
+
+
+        let deskBtns = document.querySelectorAll('.desktop-btn');
+        deskBtns.forEach(function (btn) {
+            btn.addEventListener('click', function () {
+                let id = btn.id;
+                let deskList = JSON.parse(localStorage.getItem('desktop'));
+                let index = deskList.indexOf(id);
+                if (index !== -1) {
+                deskList.splice(index, 1);
+                }
+                localStorage.setItem('desktop', JSON.stringify(deskList));
+                window.location.reload();
+            });
+        });
+
+
         previewAfterRender();
 
     });
@@ -119,4 +203,11 @@ document.addEventListener('DOMContentLoaded', function () {
         currentFile = 0;
     });
 
+    let btnClear = document.getElementById("clear");
+    btnClear.addEventListener('click', function () {
+        localStorage.setItem('desktop', JSON.stringify([]));
+        desktop.innerHTML = '';
+        baseAfterRender(0);
+    });
+
 });

app/templates/desktop/index.html

@@ -25,6 +25,7 @@ <h1 class="text-center mb-5">Bureau</h1>
 <section id="desk-section" class="d-flex flex-wrap row">
 
 </section>
+<button type="button" class="btn btn-primary position-fixed bottom-0 end-0 m-3" id="clear">Tout supprimer</button>
 
 {% include 'components/desktop_preview.html' %}
 {% endblock %}