betagouv / eva Goto Github PK

Pour les tests, on va avoir besoin d'identifier qui a fait quoi. Avec les sessions actuelles, difficile de le savoir.

Il faut qu'on demande une information tel que son nom a l'utilisateur-trice pour ensuite l'incorporer dans les événements.

Comme contrainte il faut aussi pouvoir distinguer les différents essai de situation (et garder donc le session_id il me semble).

• Ajouter le bouton rejouer la consigne qui rejoue la consigne
  Journaliser l'événement lorsque l'utilisateur rejoue la consigne
  ajoute les labels à côté des boutons consigne et stop dans la barre de contrôle
  Rejouer la consigne accessible avant de cliquer sur GO
  ajouter le player

Le nom des situations n'est pas uniforme, on a "Stock de boissons" et "Situation Contrôle".

Dans #73 (comment), Étienne proposait de renommer "Situation Contrôle" en "Contrôle de la fabrication".

La mise en situation prévoit 60 biscuits qui apparaissent dans un ordre défini avec des défauts fixes.
La séquence totale décrite dans ce fichier : https://docs.google.com/spreadsheets/d/1NzAtWAvsEzax-P_bWA83PpveAVGA_sS1Elkgad0PYrI/edit#gid=362726602

• affichait les pieces dans l'ordre dit
• avoir le bon délai d'apparition pour chaque piece

L'évalué·e doit pouvoir accéder à la situation « Contrôle » à l'URL /controle.html

(Note : D'un point de vue technique, cela sous-entend qu'on sépare ce nouveau code de celui de la situation « Inventaire », en insérant situations/inventaire dans l'arborescence du source pour la situation « Inventaire », puis de placer le code de la situation « Contrôle » dans src/situations/controle.)

Les noms des contenus dans le formulaire doivent pouvoir être associés à leur représentation graphique respective.

Dans un premier temps : remanier le code pour que la fiche référence s'affiche dynamiquement (et non sous forme d'une image)

Ensuite : utiliser cet affichage dynamique pour la vue du formulaire.

Afin de démarrer le jeu, le joueur doit cliquer sur un bouton GO se trouvant au milieu de l'écran.

Tant qu'il ou elle n'a pas cliqué sur ce bouton, rien d'autre n'est cliquable.

Le bouton doit apparaitre après la lecture de la consigne audio initiale (voir issue #44)

En bas de chaque situation, on retrouve une « sous-barre » contenant toujours les mêmes boutons « stop » et « rejouer la consigne » et aussi certains messages utilisateur.

• Mettre en place la barre de contrôle
• Mettre les nouvelles icônes

Nous journalisons déjà les ouvertures de contenant. Il faudrait aussi journaliser les informations suivantes :

• démarrage du test
• appui sur stop
• ouverture de la fiche saisie inventaire : journaliser la date
• validation de la fiche saisie inventaire : journaliser la date, les quantités saisies et le succès/ko
• ouverture d'un contenant : journaliser l'id du contenant plutôt que toute l'information du contenu

Les classes actuellement nommées magasin, stock et dépôt méritent d'être définies de manières moins ambiguë, en ayant plus en tête une séparation des couches présentation / modèle / accès au données.

Proposition de solution cible, vue lors d'une session de conception collective :

Remarques :

• la notion centrale devient celle de « mise en situation », et dans le cas de l'évaluation de saisie d'inventaire, on fait émerger une « situation Inventaire »
• init.js a vocation à devenir situationInventaire.js. C'est ce fichier qui se retrouve à instancier les divers objets de la grappe.
• DepotSituationInventaire se construit à partir d'un fichier JSON, sait retourner une liste de contenants (jusqu'ici produitsEnStock) et un InventaireDeReference, chargé de valider l'inventaire saisi.
• FormulaireSaisieInventaire est construit à partir d'un InventaireDeReference
• VueSituationInventaire est construite à partir d'un FormulaireSaisieInventaire et une liste de contenants

Remarque supplémentaire :

• Dans le futur, on s'attend à ce qu'émerge un modèle SituationInventaire qui se construira à partir d'un DepotSituationInventaire, et qui aura pour responsabilité de maintenir comme état une configuration d'inventaire particulière et de fournir les contenants et l'inventaire de référence associés.

Intégration des nouveaux styles de boutons

• intégration du bouton démarrer la consigne
• intégration du symbol "consigne en cours"
• intégration du bouton Go
• intégration des consignes textuelles

Chaque bouton est associé à un texte dans le bandeau en bas de l'écran.

Voir les illustrations sur le disque partagé dans le répertoire …/Interface/Thibaut/190313

• mettre le fond
• mettre le tapis roulant
• positionner les bacs

Pour faire suite à #86 je ne suis pas satisfait de la manière d'intégrer font-awesome.
Je pense qu'on peut l'intégrer avec npm mais je n'ai pas réussi à le faire à cause des fonts.

De manière a éviter que les réponses entrées par un·e évalué·e précédent·e ne soit proposées il faut désactiver l'auto complétion dans le formulaire de réponse.

Actuellement, l'utilisateur·trice n'a pas d'avertissement lorsqu'elle·il quitte la page. Du coup on n'aura pas non plus d'événement stop.

Écouter l'événement beforeunload permettra de fixer cela.

Aprés confirmation de Thibaut voici le bon design:

Quand une pièce disparaît, on veut pouvoir détecter si elle a été posée dans le bon bac, et indiquer au journal quel élément enregistrer.

Proposition de solution :

• VueSituation maintient la liste des Bac instanciés
• à chaque création d'une Piece, VueSituation s'abonne à cette pièce
• lorsque la pièce disparaît, elle notifie ses abonnés
• lorsque VueSituation est notifiée de la disparition d'une pièce, elle appelle chaque Bac et lui demande de déterminer s'il contient la pièce en question, et s'il est le bon bac pour cette pièce
• si un Bac répond « oui » aux deux questions, alors VueSituation demande à Journal d'enregistrer un EvenementPieceBienPlacee – et un EvenementPieceMalPlacee dans le cas contraire

Pour cela il faut :

• Faire en sorte que VueSituation se rappelle la liste des Bac instanciés
• Abonner VueSituation à chaque création d'une nouvelle pièce
• Notifier les abonnés à chaque disparition d'une pièce
• Faire en sorte que Piece connaisse ses dimensions
• Implémenter Bac#contient(piece)
• Implémenter Bac#estDeLaBonneCategoriePour(piece)
• Ajouter EvenementPieceBienPlacee
• Ajouter EvenementPieceMalPlacee
• Implémenter VueSituation#verifiePieceBienPlacee(piece)

Actuellement, la vue d'un contenu s'affiche au centre du navigateur. Cela rend difficile de se rappeler à quelle contenant la vue fait référence.

Deux actions de corrections sont proposées :

• Ajouter une animation zoom pour faire partir la vue depuis l'étiquette sur le contenant
• Positionner la vue du contenu à proximité du contenant en question

Actuellement, les données du stock prennent la forme d'une liste de contenants, chacun contenant un et un seul produit comme contenu. Il est opportun de faire émerger une structure Contenant (entité) – Contient (relation) – Produit (entité)

… Avec les propriétés suivantes :

• Contenant connaît ses caractéristiques (boîte ou baril, taille, etc.) et sa position
• Produit connait son nom, son type (vrac ou unitaire)
• Contient connaît un contenant, un produit, et la quantité de ce produit dans ce contenant

Remarques :

• Cette structure permet de simplifier la structure interne de InventaireDeReference (map identifiant produit --> quantité cumulée) tout en assurant la correspondance entre ces identifiants produits et ceux des champs input dans le formulaire de saisie.
• Il est probable que cette structure implique à plus ou moins long terme qu'on ne saisisse plus le json à la main dans un fichier à plat, mais au travers d'un builder de « situation Inventaire » (couche modèle), que le dépôt (adaptateur du service de persistence) pourrait sérialiser de manière adéquate. Un tel builder permettra de vérifier un certain nombre de contraintes d'intégrité (typiquement : chaque baril contient un et un seul produit de type « vrac », chaque contenant « non-baril » ne contient que des produits de type « unitaire », etc.)

On veut pouvoir saisir la quantité de chaque item du stock dans une fiche.

Pour cela, il faut :

• Créer un modèle magasin pour pouvoir extraire les différents items et calculer combien de quantité de chaque item (FAIT)
• Afficher un formulaire quand on clique sur un bouton (FAIT)
• Effacer le formulaire quand on clique ailleurs (FAIT)
• Afficher la liste des items dans le formulaire (FAIT)
• Permettre la saisie des quantités pour chaque item (FAIT)
• Pouvoir demander une validation de la saisie (FAIT)
• Afficher un message variant suivant que la saisie est correcte ou pas (FAIT)

Dans le but de pouvoir faire la restitution de la mise en situation d'une personne, nous journalisons l'ouverture des contenants.

Chaque ouverture est inscrite au journal avec la date d'ouverture, le type d'action: visualiser-contenu et le contenu en question.

Le journal est consultable dans le local storage du navigateur.

À faire :

• intégrer le bouton de saisie
• intégrer le formulaire de saisie

L'évalué·e doit pouvoir jouer la situation « Contrôle ». Pour cela, il faut pouvoir :

• afficher une pièce et la glisser/déposer
• afficher une séquence de pièces selon un scénario pré-établi
• afficher les deux bacs
• détecter dans quel bac la pièce a été déposée (cf. #105)
• jouer la consigne associée à la situation
• détecter la fin
• Jouer le son de fond

• création d'un environnement bac à sable pour la validation
• permettre sur cet environnement de pouvoir sauter la consigne de démarrage

Le bénéfice lié à l'utilisation de jQuery n'apparaît pas de manière flagrante. En parallèle, le manque de cohérence dans l'implémentation de notre code se fait de plus en plus sentir.

Nous avons choisi d'utiliser l'API native JavaScript pour manipuler le DOM.

Il convient de supprimer la dépendance à jQuery.

Lors du succès ou de l'échec de la vérification, l'utilisateur entend soit un message de félicitation soit un message d'encouragement.

Créer un appel API à l'enregistrement de l'événement

Si on déplace (ou renomme) un fichier source A en fichier source B, le fait de continuer à importer A depuis un autre fichier devrait générer une erreur lors de la phase de build webpack. Actuellement, ce n'est pas le cas (possiblement pour des raisons de cache).

Voir à ce sujet par exemple le commit 9193f5.

Une piste possible de résolution : utiliser le plugin clean-webpack-plugin (pour plus d'info, cf. https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder)

Deux étapes prévues :

• mettre en route une IC sans test
• demander à l'IC de lancer les tests

comme discuté dans ce commentaire de #90, la zone de jeu peut dépasser.

Ce n'est pas lié au navigateur mais à la configuration de la taille de police par défaut. En effet la taille de la zone est définie en rem en prenant l'hypothèse que la taille par défaut est 16px, mais la config utilisateur peut être différente.

Une solution pourrait être de définir la taille de police par défaut dans body à 16px ?

Actuellement on un certain nombre de classes qui ne sont pas exporté avec export default. Ce serait bien de le faire lorsqu'il y a une seule classe dans le fichier.

Faire la demande pour le nom de domaine pour l'application avec la redirection vers notre machine

Ce bouton doit permettre de quitter la situation à tout moment pour dire que “j'en ai marre” j'arrête. Ce bouton ramène vers la page d'accueil de l'application.

Le bouton est placé en haut à droite.

Au démarrage de la situation, la consigne audio démarre instantanément.

On ne peut cliquer sur rien tant que la consigne est en cours.

De manière à s'assurer que le linter est toujours lancé avant chaque push il serait pratique d'avoir un hook git pour ça.

Dans le but de simplifier à la fois le développement et l'expérience utilisateur, on veut ré-intégrer les barres des étagères, qui se trouve dans un avant plan, dans l'image de fond.

-> Les barres ne seront donc plus un obstacle au clique pour ouvrir une boite. Si on clique sur la barre, cela ouvre la boite qui se trouve derrière s'il y en a une.

• remplacer l'image d'étagère déjà en place
• convertir la liste des divs de contenants en une liste de <paths> dans un tag <svg>
• attacher les événements d'ouverture aux <paths>
• prendre en compte les nouveaux graphiques des boites ouvertes
• prendre en compte les nouveaux graphiques des produits
• Nouvelle fiche produit
• espacer les barils qui se trouve à bas à droite

Remanier la vue cadre pour qu'elle crée la structure DOM suivante :

<cadre>
  <scene></scene>
  <actions></actions>
</cadre>

à la place de la structure actuelle :

<conteneur>
  <cadre></cadre>
  <actions></actions>
</conteneur>

La vue cadre aura donc la responsabilité d'intégrer la scène (anciennement ce qu'il avait dans cadre) et les actions (Stop, Lecture consigne, bouton Go). l'élément du DOM <cadre> sera le point d'insertion principale d'une situation et sera créer par cette vue.

Taches :

• refactoring de la vue Go pour passer le point d'insertion à la méthode affiche.
• refactoring de la vue Consigne pour passer le point d'insertion à la méthode affiche.
• intégrer la VueAction dans la VueCadre.
• intégrer la vue Go et Consigne dans la VueCadre.
• donne à VueCadre la responsabilité de créer le point d'insertion le plus haut (class="conteneur"), directement sous <body>

Quand l'utilisateur saisit un inventaire erronné et appuie sur le bouton de validation, le formulaire doit indiquer quelles quantités sont en erreur.

Typiquement on a des imports genre

import { VuePiece } from 'controle/vues/piece.js';

Qu'il faudrait changer en:

import { VuePiece } from 'controle/vues/piece';

Il me semble que nous n'avons pas encore indiqué sous quelle licence est publiée le code du projet.

Il y a cette page du wiki beta.gouv qui en parle :
https://github.com/betagouv/beta.gouv.fr/wiki/Licences

Il faut donc, il me semble :

• choisir une licence
• ajouter un fichier à la racine du projet avec le contenu de la licence
• modifier package.json pour mentionner la licence.

On veut pouvoir faire l'inventaire du stock.

Pour cela, il faut pouvoir :

• voir l'écran avec toutes les étagères, les bidons, les cartons et les caisses (FAIT)
• cliquer sur un contenant pour l'ouvrir (FAIT)
• cliquer n'importe où (y compris sur le contenant) pour fermer le contenant (FAIT)
• voir le contenu d'un contenant si c'est un carton ou une caisse (FAIT)
• voir l'étiquette d'un bidon pour y lire le volume contenu (FAIT)