TFE / DATUM — chapitre 4: code
Hello, on se retrouve après presque un mois sans nouvelles, il y a eu pas mal d’évolution depuis !
Je me rends d’ailleurs seulement compte que j’ai totalement fait abstraction du timesheet, on va donc se rattraper maintenant pour la partie développement du projet, ayant des horaires fixes depuis le début du projet je pense que je n’aurai pas de difficulté à me mettre à jour, nous verrons cela à la fin de l’article.
Le commencement du code
Cinq semaines complètes pour développer ma webApp, c’est le défi qui m’attend. Un défi dans lequel je devrais être assidu !
J’ai d’abord commencé par la homepage, avec pas mal de CSS. Ma première fonctionnalité fut celle de ma navigation entre les différents onglets, j’ai pour cela utilisé des SVG avec une classe active.
J’ai ensuite enchainé par la mise en place de ma fonctionnalité de l’emptyState, cette section devra se cacher lorsque mes éléments seront créés comme sur le deuxième screen.
Ma troisième fonctionnalité était celle de la création du set de dates, parmi celle-ci plusieurs tâches à effectuer, la possibilité de choisir une couleur (j’ai donc dû utiliser une classe active), un formulaire pour entrer le nom et la description. J’ai bien entendu penser au cas où la personne n’entrerait et donc remplacer ces cas par des valeurs par défaut. J’en profite d’ailleurs pour faire une petite parenthèse et dire qu’actuellement au cours du développement je me rends compte que je n’avais pas pensé à certains cas de figure, ce qui ralentit donc le calendrier que je m’étais assigné pour le développement.
LocalStorage
Comme l’année dernière j’ai décidé de m’orienter vers l’utilisation du localStorage afin de sauvegarder ce que l’utilisateur avait entré sans devoir passer par une création de compte. Contrairement à l’année dernière j’ai décidé de l’implémenter directement au sein de mon code et je peux déjà dire que se fût une bonne idée car j’ai eu beaucoup moins de difficulté cette année.
C’est en voyant ce bout de code que je pense d’ailleurs à un “problème” que je rencontre actuellement qui est celui du nom des classes, en effet ayant énormément de chose à nommer je me retrouve parfois avec des noms farfelus, d’ailleurs il n’est pas évident d’utiliser la méthode BEM en ayant beaucoup de div imbriqué les unes dans les autres.
La création de dates
Nous voici à une des étapes les plus importantes de mon projet, la création de dates, je sais d’avance que cela ne sera pas une mince affaire.
Ma première fonctionnalité fut de récupérer la couleur que j’ai utilisée pour mon set et de la réafficher dans le header. Une fois cela fait j’ai réutilisé ma fonction empty state pour détecter si oui ou non le set contenait des dates, comme on peut le voir avec le set d’exemple qui en contient l’affichage est différent.
On retrouve donc la flèche de retour en arrière, le bouton pour supprimer qui al’avenir changera au profil d’une icône de suppression. Une fois les dates entrées on pourra retrouver la description entrée lors de la création du set et un bouton pour ajouter d’autres dates. À noter que l’affichage des dates créées est en cours de développement et n’est donc pas repris dans cet article.
Une fonctionnalité dont j’ai oublié de parler: la suppression, en effet on peut supprimer un set de date, ce ne fut pas évident à réaliser car il a fallu lords de la suppression d’un élément récupérer le tableau du local, le parcourir et réassigner les ID sur chaque élément.
Ma prochaine étape était de réaliser le formulaire de création de date, car dans un premier temps pour tester je ne faisais que des push du même tableau. Ce ne fut cependant pas compliqué de récupérer les valeurs et de les assigner à un tableau constructeur qui se réinitialise à chaque itération.
Le formulaire propose également un mode avancé dans lequel on peut venir sélectionner un pictogramme ou raconter une anecdote qui nous aidera à mieux retenir la date.
Concernant la création de mes dates, il me reste encore deux choses à réaliser la première et l’affichage de celle-ci par le biais de cartes que l’on pourra retourner et dans lesquelles on pourra slider, et la deuxième la réalisation d’une barre de recherche pour se retrouver plus facilement si l’on a un set de date qui en comporte énormément.
Conclusion
Pour conclure je dirais qu’il me reste encore beaucoup de boulot, je vais bientôt arriver à la moitié de la période que je me suis réservé pour le développement et je pense être pour le moment dans les temps, en espérant ne pas rencontrer de bug au cours du futur développement et de mes futurs tests (qui sont d’ailleurs nombreux).
Pour le moment, Datum c’est donc près de 350 lignes d’HTML, 900 de CSS, et 815 de JavaScript et cela continuera encore de s’agrandir.
Vous pouvez retrouver ma time sheet ici
Merci de m’avoir lu et à dans deux semaines, pour je l’espère ma webApp presque achevée !
