Gestionnaire de photos online

J'ai une petit projet pour l'université, mais vu que j'ai 4 autre projets au même temps, je n'ai plus de temps pour celui. Je ne cherche pas juste de me le faire le projet, mais j’aimerais bien aussi le comprendre et être capable de le faire moi même.

Il y a déjà une squelette bootstrap/html pour le site, et fonctions js, il reste a définir quelques fonctions en js pour pouvoir faire les fonctionnalités demandées:

On souhaite réaliser un outil de gestion d’une collection de photographies. A chaque photo est associé un ensemble de tags qui permettent de constituer des albums. L’hébergement des photos et des données se fera sur un serveur dédié. On souhaite offrir les principales fonctionnalités suivantes :

Afficher toutes les photos de l’utilisateur dans une galerie de 6 images par ligne,
Afficher une photo particulière sélectionnée dans la galerie,
Filtrer les photos qui ont un certain tag, avec un menu permettant de sélectionner un tag dans la liste des tous les tags utilisés dans la collection,
Modifier la description d’une photo et les tags qui lui sont associés
Ajouter une photo à la collection de l’utilisateur, en précisant sa description et ses tags
Modifier le nombre de photos affichées sur chaque ligne de la galerie
(optionel) Trier et filtrer les photos par dates
(optionel) Gérer la connexion et la déconnexion d’un utilisateur avec sa clef
(optionel) Gérer une mise à jour incrémentale de la collection en cas d’ajout de photo ou de modification, sans télécharger à nouveau toute la collection.

Description des photos

Chaque photo est représentée par un objet JSON composé des champs suivants :

_id : un objet contenant un unique champ $id permettant d’identifier uniquement une photo (dans toutes les collections)
name : le nom du fichier de la photo
desc : une description ou légende de la photo
albums : un tableaux de tags (un tag étant une chaîne de caractères)
image_height : la hauteur de la photo, ce champ est calculé par le serveur quand il reçoit l’image
image_width : la largeur de la photo, ce champ est calculé par le serveur quand il reçoit l’image
date : la date de prise de la photo, , ce champ est calculé par le serveur quand il reçoit l’image

Une collection de photo est simplement un tableau de photos, voir par exemple le tableau coll_ex ci-après.

const coll_ex = [
{"_id":{"$id":"58d55ad[Téléphone visible pour les membres Pro]b5ae"},"name":"0054.jpg","desc":"Composition studio #54","albums":["dpt","cable"]},
{"_id":{"$id":"58d55af[Téléphone visible pour les membres Pro]b5af"},"name":"0056.jpg","desc":"Composition studio #56","albums":["dpt","keyboard","licence"]},
{"_id":{"$id":"58d55b[Téléphone visible pour les membres Pro]b5b0"},"name":"0068.jpg","desc":"Composition studio #68","albums":["dpt","keyboard","licence"]},
{"_id":{"$id":"58d55b[Téléphone visible pour les membres Pro]b5b1"},"name":"0098.jpg","desc":"Composition studio #98","albums":["dpt","keyboard","licence","informatique"]},
{"_id":{"$id":"58d55b[Téléphone visible pour les membres Pro]b5b2"},"name":"0099.jpg","desc":"Composition studio #99","albums":["dpt","keyboard","licence","informatique"]},
{"_id":{"$id":"58d55b[Téléphone visible pour les membres Pro]b5b3"},"name":"0105.jpg","desc":"Composition studio #105","albums":["dpt","keyboard","licence","informatique","post-process"]}
];

Attention: toute votre application dépend de promesse de collection retournée par le serveur, votre code js sera donc essentiellement asynchrone et basé sur les promesses.

Quand la promesse retournée downloadPromise ou staticPromise est résolue il faut :

calculer le menu de gauche à partir des tags utilisés dans la collection
associer à chaque élément du menu une fonction qui permet de changer la galerie en cours
générer la galerie (par défaut, on affiche toutes les photos)
associer à chaque vignette de la galerie une fonction permet de changer la photo principalement affichée
afficher la première image de la galerie en photo principale
générer le menu d’édition de cette photo

La problématique est similaire quand on ajoute une nouvelle photo ou quand on en modifie une.