diff --git a/Documentation.md b/Documentation.md
new file mode 100644
index 0000000000000000000000000000000000000000..bb6f2881074e4cfebd0d8353baa5554dadf1c463
--- /dev/null
+++ b/Documentation.md
@@ -0,0 +1,103 @@
+# Gestion des utilisateurs
+
+La question des utilisateurs est géré par un service qui se charge de stocker les différents utilisateurs présent, afin de leur attribuer des tâches.
+Le service dispose des méthodes suivantes : addUser, getUsers, deleteUser, editUser, getUserByEmail, getUsersWithTask.
+Ce service est donc utilisé à deux reprises, une première fois pour inscrire les utilisateurs à la réunion, et une seconde fois pour leur attribuer des tâches.
+
+# Cartes diagnostic (inclusif-cards)
+
+## Le stockage des données
+
+Le fichier `navigation_data.json` contient une liste d'objets représentant des questions et des descriptions liées à l'inclusivité dans divers aspects d'un projet numérique. Chaque objet dans le tableau `data` représente une carte de diagnostic avec plusieurs propriétés.
+
+### Structure des objets
+
+Chaque objet dans le tableau `data` a les propriétés suivantes :
+
+- **numero** (type: `integer`): Le numéro de la carte de diagnostic.
+- **nom** (type: `string`): Le nom de la carte de diagnostic.
+- **question** (type: `string`): La question posée pour évaluer un aspect spécifique de l'inclusivité.
+- **description** (type: `string`): Une description détaillée expliquant l'importance de la question et fournissant des informations supplémentaires.
+- **categorie** (type: `string`): La catégorie à laquelle appartient la carte de diagnostic.
+- **imageurl** (type: `string`): L'URL de l'image associée à la carte de diagnostic.
+- **textcolor** (type: `string`): La couleur du texte associée à la carte de diagnostic, spécifiée en code hexadécimal.
+
+### Exemple d'objet
+
+Voici un exemple d'un objet dans le tableau `data` :
+
+```json
+{
+ "numero": 1,
+ "nom": "Cadrage et Planification",
+ "question": "L'inclusivité de votre service numérique est-il un objectif pour l'équipe ?",
+ "description": "Au même titre que la qualité, le délai de mise en oeuvre ou le coût d'un service numérique, son inclusivité, c'est-à-dire sa capacité à être inclusif et accessible, peut être un objectif majeur intégré aux différentes phases d'un projet.",
+ "categorie": "Gestion de projet",
+ "imageurl": "images/Cartes_Diagnostic/cadrage-et-planification.png",
+ "textcolor": "#ED6F3A"
+}
+```
+
+## Variables
+
+Les variables se reportant aux cartes diagnostic sont stockée dans le service "answer-storage.service.ts".
+Il contient :
+answers: { [key: number]: boolean } => un dictionnaire contenant la réponse à chaque carte
+etat_carte: {[key : number]: string} => un dictionnaire permettant de savoir si une carte a été répondue ou non
+remainingTime et continue, 2 variables utilisées pour la gestion du timer
+currentNumber at catSubject qui donnent l'id de la carte diagnostic affichée actuellement ainsi que sa catégorie.
+
+## Structure des components de inclusif-cards
+
+navigation-button : Ce composant est un bouton qui permet de naviguer entre les cartes diagnostic. Il met à jour currentNumber dans le service et transmet cet mise à jour aux autres composants.
+
+theme-indicator : Ce composant constitue la barre de progression que l'on retrouve en haut de l'écran. Essentiellement du HTML et CSS, il récupère seulement l'id de la carte actuelle et change en fonction de celle-ci.
+
+navigation-card : Ce composant gère chaque carte et ses boutons radio qui sont utilisés pour répondre "Oui" ou "Non" aux cartes. Chaque carte est initialisée avec le ngModel="Rien", qui va changer en fonction de la réponse mise dans la carte. L'affichage est également initialisée avec aucune sélection. La carte est également capable de se rappeler de sa sélection grâce au service qui retient si une carte a été répondue et la réponse que l'utilisateur avait donnée (géré par onCardChange(number)).
+
+inclusif-cards : Composant parent des 3 composants précédent et qui permet leur assemblage. Les variables issues du service y sont transmises.
+
+## Navigation dans les cartes diagnostic (et solution également)
+
+On souhaite éviter de changer de path à chaque changement de carte, on a donc utilisé les queryparams afin de modifier l'url pour qu'il contienne l'id de la carte affiché, en vérifiant à l'initialisation que cet id corresponde au numéro de carte actuel on peut utiliser l'id pour naviguer.
+
+# Cartes Solution
+
+## Le stockage des données
+
+Les données relatives au stockage de données sont stockées dans un JSON nommé awnsers_data.json sous la forme data:{[
+ {
+ "id": 16, // Ce numéro donne le numéro de la carte et est unique à chaque carte réponse
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Décryptage et analyse",
+ "titre": "Représentez vos utilisateurs",
+ "contenu": [
+ "Utilisez des outils tels que le persona pour représenter vos utilisateurs : vous pourrez ainsi concevoir autour de leurs objectifs. \n Un persona est un personnage fictif que l'on utilise afin de se représenter un groupe d'utilisateurs dans le but de mieux se mettre dans leur peau."
+ ], // le contenu est une liste, dans le cas où ele contient plusieurs éléments, ceux-ci seront précédés d'un bullet point grâce à un test dans le HTML
+
+ "source": {
+ "nom": "Figma community (en anglais)",
+ "description": "La communauté Figma recense de nombreux modèles de persona prêts à l'emploi."
+ }, // Cela contient les informations relative à la source, ce n'est plus utilisé dans la version la plus récente du jeu
+
+
+ "image": true, // Ce booléen dit si une image correspond à cette carte, les images sont nommées de façon normalisée solution_id.png
+ "image_comparaison": false, // Plus utilisé
+ "textcolor": "#24624C" // Contient la couleur d'affichage de la catégorie
+ }
+]}
+
+
+## Gestion de l'affichage
+
+Cette partie du site a pour but de présenter des solutions correspondant aux problèmes soulevés lors des réponses données à la première partie, On reçoit une liste de booléens indiquant quelles réponses sont négatives et il suffit alors d'afficher les cartes solutions correspondantes. Pour ce faire, on trie sur les données présentes dans le JSON, l'id des false nous permet d'obtenir les nom correspondant aux cartes où la réponse a été négative. Un autre JSON existe contenant toutes les informations des cartes réponses, notamment un attribut "sous-catégorie" qui correspond au nom dans le JSON des questions, en cherchant les noms qui coïncident on obtiens alors les cartes solutions à afficher
+
+## Assigner les tâches
+
+Une fois les cartes solutions affichées, on peut choisir, ou non, d'assigner une ou plusieurs personnes à la tâche par le biais d'un menu déroulant avec une option de recherche dans le cas où de nombreuses personnes seraient inscrites à la séance de jeu.
+
+Pour connaitre les personnes présentes dans la réunion, on importe alors le service "user-service" qui a été utilisé plus tôt afin d'inscrire les membre de la réunion. Dans ce même service, on utilise la classe task dont une itération est associé à chaque user afin d'enregistrer les tâches.
+
+## Indicateur de thème
+
+L'indicateur de théme a été réalisé dans le but de correspondre aux cartes questions qui sont nettement mois nombreuses que les cartes solution (environ 4 fois moins), afin de pouvoir le réutiliser on a donc fait le chemin inverse de l'affichage pour avoir l'id de la carte question correspondant à la sous-catégorie en cours de traitement, grâce à cela, l'indicateur de thème fonctionne aussi avec les cartes solutions.
diff --git a/angular.json b/angular.json
index 868983cfdc9f2ab6f7cee07667a0d826e5d78420..4774341b39fad8fe025dd721cd9e7f10e60274de 100644
--- a/angular.json
+++ b/angular.json
@@ -37,7 +37,7 @@
{
"type": "initial",
"maximumWarning": "500kB",
- "maximumError": "1MB"
+ "maximumError": "2MB"
},
{
"type": "anyComponentStyle",
diff --git a/package-lock.json b/package-lock.json
index 1b83624b5f5d647412fc891d750b86326e01e417..67fb600d5af23f720ec2906263bc9081496a0cb4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
"primeng": "^19.0.5",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
+ "xlsx": "^0.18.5",
"zone.js": "~0.15.0"
},
"devDependencies": {
@@ -479,24 +480,6 @@
}
}
},
- "node_modules/@angular/cdk": {
- "version": "19.1.5",
- "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.5.tgz",
- "integrity": "sha512-+g20LIvYHThKBD6oXTYWVL6+ecaOWtPJu08R5xIfGrwXoj0l/9prLwuSW8GlIATI3mDkSesyhQsomb9jAUzKwQ==",
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "tslib": "^2.3.0"
- },
- "optionalDependencies": {
- "parse5": "^7.1.2"
- },
- "peerDependencies": {
- "@angular/common": "^19.0.0 || ^20.0.0",
- "@angular/core": "^19.0.0 || ^20.0.0",
- "rxjs": "^6.5.3 || ^7.4.0"
- }
- },
"node_modules/@angular/cli": {
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.8.tgz",
@@ -1073,27 +1056,27 @@
}
},
"node_modules/@babel/helpers": {
- "version": "7.26.9",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
- "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+ "version": "7.27.0",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+ "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@babel/template": "^7.26.9",
- "@babel/types": "^7.26.9"
+ "@babel/template": "^7.27.0",
+ "@babel/types": "^7.27.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/parser": {
- "version": "7.26.9",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
- "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
+ "version": "7.27.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+ "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@babel/types": "^7.26.9"
+ "@babel/types": "^7.27.0"
},
"bin": {
"parser": "bin/babel-parser.js"
@@ -2239,15 +2222,15 @@
}
},
"node_modules/@babel/template": {
- "version": "7.26.9",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
- "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
+ "version": "7.27.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+ "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.26.2",
- "@babel/parser": "^7.26.9",
- "@babel/types": "^7.26.9"
+ "@babel/parser": "^7.27.0",
+ "@babel/types": "^7.27.0"
},
"engines": {
"node": ">=6.9.0"
@@ -2290,9 +2273,9 @@
}
},
"node_modules/@babel/types": {
- "version": "7.26.9",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
- "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+ "version": "7.27.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+ "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -5453,6 +5436,15 @@
"node": ">=8.9.0"
}
},
+ "node_modules/adler-32": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+ "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/agent-base": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -6197,6 +6189,19 @@
],
"license": "CC-BY-4.0"
},
+ "node_modules/cfb": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+ "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "adler-32": "~1.3.0",
+ "crc-32": "~1.2.0"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6439,6 +6444,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/codepage": {
+ "version": "1.15.0",
+ "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+ "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6736,6 +6750,18 @@
}
}
},
+ "node_modules/crc-32": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+ "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+ "license": "Apache-2.0",
+ "bin": {
+ "crc32": "bin/crc32.njs"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -7239,7 +7265,7 @@
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
- "devOptional": true,
+ "dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
@@ -7884,6 +7910,15 @@
"node": ">= 0.6"
}
},
+ "node_modules/frac": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+ "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -11220,7 +11255,7 @@
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
"integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
- "devOptional": true,
+ "dev": true,
"license": "MIT",
"dependencies": {
"entities": "^4.5.0"
@@ -12987,6 +13022,18 @@
"dev": true,
"license": "BSD-3-Clause"
},
+ "node_modules/ssf": {
+ "version": "0.11.2",
+ "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+ "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "frac": "~1.1.2"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/ssri": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
@@ -13748,109 +13795,6 @@
"node": ">= 0.8"
}
},
- "node_modules/vite": {
- "version": "6.1.1",
- "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.1.tgz",
- "integrity": "sha512-4GgM54XrwRfrOp297aIYspIti66k56v16ZnqHvrIM7mG+HjDlAwS7p+Srr7J6fGvEdOJ5JcQ/D9T7HhtdXDTzA==",
- "dev": true,
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "esbuild": "^0.24.2",
- "postcss": "^8.5.2",
- "rollup": "^4.30.1"
- },
- "bin": {
- "vite": "bin/vite.js"
- },
- "engines": {
- "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
- },
- "funding": {
- "url": "https://github.com/vitejs/vite?sponsor=1"
- },
- "optionalDependencies": {
- "fsevents": "~2.3.3"
- },
- "peerDependencies": {
- "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
- "jiti": ">=1.21.0",
- "less": "*",
- "lightningcss": "^1.21.0",
- "sass": "*",
- "sass-embedded": "*",
- "stylus": "*",
- "sugarss": "*",
- "terser": "^5.16.0",
- "tsx": "^4.8.1",
- "yaml": "^2.4.2"
- },
- "peerDependenciesMeta": {
- "@types/node": {
- "optional": true
- },
- "jiti": {
- "optional": true
- },
- "less": {
- "optional": true
- },
- "lightningcss": {
- "optional": true
- },
- "sass": {
- "optional": true
- },
- "sass-embedded": {
- "optional": true
- },
- "stylus": {
- "optional": true
- },
- "sugarss": {
- "optional": true
- },
- "terser": {
- "optional": true
- },
- "tsx": {
- "optional": true
- },
- "yaml": {
- "optional": true
- }
- }
- },
- "node_modules/vite/node_modules/postcss": {
- "version": "8.5.3",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
- "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
- "dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/postcss/"
- },
- {
- "type": "tidelift",
- "url": "https://tidelift.com/funding/github/npm/postcss"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/ai"
- }
- ],
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "nanoid": "^3.3.8",
- "picocolors": "^1.1.1",
- "source-map-js": "^1.2.1"
- },
- "engines": {
- "node": "^10 || ^12 || >=14"
- }
- },
"node_modules/void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
@@ -14300,6 +14244,24 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/wmf": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+ "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
+ "node_modules/word": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+ "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -14473,6 +14435,27 @@
}
}
},
+ "node_modules/xlsx": {
+ "version": "0.18.5",
+ "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+ "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "adler-32": "~1.3.0",
+ "cfb": "~1.2.1",
+ "codepage": "~1.15.0",
+ "crc-32": "~1.2.1",
+ "ssf": "~0.11.2",
+ "wmf": "~1.0.1",
+ "word": "~0.3.0"
+ },
+ "bin": {
+ "xlsx": "bin/xlsx.njs"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 0354bf5536e65e59c6e92f77f1f2f1aac9e993cd..ebe0c93af021cb3375e27cae1c83df4dc453afab 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"primeng": "^19.0.5",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
+ "xlsx": "^0.18.5",
"zone.js": "~0.15.0"
},
"devDependencies": {
diff --git a/public/images/solution_16.png b/public/images/solution_16.png
new file mode 100644
index 0000000000000000000000000000000000000000..35b520a960aeb318c566cdce1850b9d0215e4ba4
Binary files /dev/null and b/public/images/solution_16.png differ
diff --git a/public/images/solution_17.png b/public/images/solution_17.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebc71b1154eaa231d6aa3a965b1b68d5f995a68c
Binary files /dev/null and b/public/images/solution_17.png differ
diff --git a/public/images/solution_18.png b/public/images/solution_18.png
new file mode 100644
index 0000000000000000000000000000000000000000..43860efee3233f41748297a6e4fed0f715d12ef2
Binary files /dev/null and b/public/images/solution_18.png differ
diff --git a/public/images/solution_19.png b/public/images/solution_19.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6dd06b3a334b9d4a50033019a441836df3ec772
Binary files /dev/null and b/public/images/solution_19.png differ
diff --git a/public/images/solution_20.png b/public/images/solution_20.png
new file mode 100644
index 0000000000000000000000000000000000000000..25d2fd55355ad13c8e9d8eb6a229129de91a5095
Binary files /dev/null and b/public/images/solution_20.png differ
diff --git a/public/images/solution_21.png b/public/images/solution_21.png
new file mode 100644
index 0000000000000000000000000000000000000000..818fa6d8cb86779784bd6654bf823281ffdc5b48
Binary files /dev/null and b/public/images/solution_21.png differ
diff --git a/public/images/solution_22.png b/public/images/solution_22.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b0c59a7344aba2341d723a7d9f87e8abd88cb37
Binary files /dev/null and b/public/images/solution_22.png differ
diff --git a/public/images/solution_23.png b/public/images/solution_23.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d19fe49984902f5753a6d0101a1cbf4ef32a650
Binary files /dev/null and b/public/images/solution_23.png differ
diff --git a/public/images/solution_24.png b/public/images/solution_24.png
new file mode 100644
index 0000000000000000000000000000000000000000..3570aea1d817b598fedbf50948d5444bd66fc410
Binary files /dev/null and b/public/images/solution_24.png differ
diff --git a/public/images/solution_25.png b/public/images/solution_25.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4645188f0e0e5dac505225560f38f243fde0e5d
Binary files /dev/null and b/public/images/solution_25.png differ
diff --git a/public/images/solution_26.png b/public/images/solution_26.png
new file mode 100644
index 0000000000000000000000000000000000000000..714f6fe18d74b3b8052de963302e12c6bfb9ca4b
Binary files /dev/null and b/public/images/solution_26.png differ
diff --git a/public/images/solution_27.png b/public/images/solution_27.png
new file mode 100644
index 0000000000000000000000000000000000000000..43e49ff6f7b0c8465631d9d9f2b0db0ac7c7b8b5
Binary files /dev/null and b/public/images/solution_27.png differ
diff --git a/public/images/solution_28.png b/public/images/solution_28.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a4b14be6680dfba1249157a60f1172361677868
Binary files /dev/null and b/public/images/solution_28.png differ
diff --git a/public/images/solution_29.png b/public/images/solution_29.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d4d7396b5e3588ee72121d8a92d81c843794e80
Binary files /dev/null and b/public/images/solution_29.png differ
diff --git a/public/images/solution_30.png b/public/images/solution_30.png
new file mode 100644
index 0000000000000000000000000000000000000000..3adef0c5d7a4bb62fa95faa1fc5eab7bb5ac433a
Binary files /dev/null and b/public/images/solution_30.png differ
diff --git a/public/images/solution_31.png b/public/images/solution_31.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2548e93090104c94bb40bc42557f22d9569353b
Binary files /dev/null and b/public/images/solution_31.png differ
diff --git a/public/images/solution_32.png b/public/images/solution_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3a19b891f91625b0cca1f37775653bb4ae9e421
Binary files /dev/null and b/public/images/solution_32.png differ
diff --git a/public/images/solution_35.png b/public/images/solution_35.png
new file mode 100644
index 0000000000000000000000000000000000000000..27b1f10a3980e87401293f6911e2b56a64814d20
Binary files /dev/null and b/public/images/solution_35.png differ
diff --git a/public/images/solution_36.png b/public/images/solution_36.png
new file mode 100644
index 0000000000000000000000000000000000000000..31d12584f7eac0f0004ad62baaa5ec7e1fc19692
Binary files /dev/null and b/public/images/solution_36.png differ
diff --git a/public/images/solution_38.png b/public/images/solution_38.png
new file mode 100644
index 0000000000000000000000000000000000000000..42b593b2939b4b9ab036133cc56b66edf357fb75
Binary files /dev/null and b/public/images/solution_38.png differ
diff --git a/public/images/solution_39.png b/public/images/solution_39.png
new file mode 100644
index 0000000000000000000000000000000000000000..42caf68137824faef5d31d233215d834059010f5
Binary files /dev/null and b/public/images/solution_39.png differ
diff --git a/public/images/solution_40.png b/public/images/solution_40.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcf19c9e0edcc737bb185fa26611148a1ac82f4a
Binary files /dev/null and b/public/images/solution_40.png differ
diff --git a/public/images/solution_45.png b/public/images/solution_45.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cf3af2560d49387193ed6e9aec3e1aba0f338f9
Binary files /dev/null and b/public/images/solution_45.png differ
diff --git a/public/images/solution_46.png b/public/images/solution_46.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccc6a385c2fbb4bf09045e442a6bc71ab43cbf4a
Binary files /dev/null and b/public/images/solution_46.png differ
diff --git a/public/images/solution_48.png b/public/images/solution_48.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6043abcb3bc9d342e85aaf18604dddbacebfba6
Binary files /dev/null and b/public/images/solution_48.png differ
diff --git a/public/images/solution_49.png b/public/images/solution_49.png
new file mode 100644
index 0000000000000000000000000000000000000000..c01f2806d8192b2b6a8987242414cf42659ab92d
Binary files /dev/null and b/public/images/solution_49.png differ
diff --git a/src/app/answer-storage.service.ts b/src/app/answer-storage.service.ts
deleted file mode 100644
index 9c7717930f540b9a4cfc21cb52192cc7f3ccee42..0000000000000000000000000000000000000000
--- a/src/app/answer-storage.service.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Injectable } from '@angular/core';
-import { navigation_data } from './app.component';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
- providedIn: 'root'
-})
-export class AnswerStorageService {
-
- private answers: { [key: number]: boolean } = {}; // Store answers using card number as key
- private remainingTimeSubject: BehaviorSubject<number> = new BehaviorSubject<number>(2400); // Initial remaining time
- private currentNumberSubject: BehaviorSubject<number> = new BehaviorSubject<number>(0); // Initial current number
- private catSubject: BehaviorSubject<string> = new BehaviorSubject<string>(navigation_data.data[0]?.categorie ?? ''); // Initial category
- private continue: boolean = true;
-
- constructor() {
- navigation_data.data.forEach((item, index) => {
- this.answers[index] = false;
- });
- }
-
- // Save answer
- setAnswer(cardNumber: number, answer: boolean): void {
- this.answers[cardNumber] = answer;
- }
-
- // Retrieve answer
- getAnswer(cardNumber: number): boolean {
- return this.answers[cardNumber];
- }
-
- getAllAnswers(): { [key: number]: boolean } {
- return this.answers;
- }
-
- getRemainingTime() {
- return this.remainingTimeSubject.asObservable();
- }
-
- // Set remaining time
- setRemainingTime(time: number) {
- this.remainingTimeSubject.next(time);
- }
-
- // Get current number as an observable
- getCurrentNumber() {
- return this.currentNumberSubject.asObservable();
- }
-
- // Set current number
- setCurrentNumber(number: number) {
- this.currentNumberSubject.next(number);
- }
-
- // Get category as an observable
- getCat() {
- return this.catSubject.asObservable();
- }
-
- // Set category
- setCat(cat: string) {
- this.catSubject.next(cat);
- }
-
- // Start countdown timer
- startTimer() {
- this.continue = true;
- const interval = setInterval(() => {
- let currentTime = this.remainingTimeSubject.value;
- if (currentTime > 0 && this.continue) {
- this.setRemainingTime(currentTime - 1);
- } else {
- clearInterval(interval);
- // Handle timer end (e.g., move to the next card or show a message)
- }
- }, 1000);
- }
-
- stopTimer() {
- this.continue = false;
- this.setRemainingTime(2400);
- }
-}
-
-
-
-
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 34f4ffaba608e33cc8b1a10b8176cde28f0f497c..c5dd36f766481e0c3fe7d2499f56c21f9c375061 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,19 +1,24 @@
-/* Ensure the main container takes up the full height of the viewport */
-html, body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-.main-container {
+/* Conteneur principal */
+.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
+ height: 100%;
}
-.content {
- flex: 1;
- margin-bottom: 20px;
+/* Header */
+.header-div {
+ height: 66px;
+}
+
+/* Contenu principal */
+main {
+ flex:1;
+ display: flex;
+ flex-direction: column;
+ overflow: auto; /* Ajoute un défilement si le contenu est trop long */
+ height: 100%;
+ padding: 16px;
}
/* Footer */
@@ -50,6 +55,10 @@ footer a {
vertical-align: middle;
}
+footer a:hover{
+ text-decoration: underline;
+}
+
footer .right-section {
display: flex;
align-items: center;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cd5c5331d1f73e48ffc0c98f69011dde0074ddfe..9a5ecf5d7c3d10550b9f59063b0c5eafc0eb785c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,15 +1,23 @@
-<div class="main-container">
- <app-navbar></app-navbar>
- <div class="content">
+<div class="app-container">
+ <!-- Mise en place du header -->
+ <header>
+ <div class="header-div">
+ <app-header></app-header>
+ </div>
+ </header>
+
+ <main>
<router-outlet></router-outlet>
- </div>
+ </main>
+
+ <!-- Mise en place du footer -->
<footer>
<ul>
- <li><a href="https://resin.grandlyon.com/mentions-legales" target="_blank" rel="noopener noreferrer">Mentions légales ●</a></li>
- <li><a href="https://resin.grandlyon.com/newsletter" target="_blank" rel="noopener noreferrer">Newsletter ●</a></li>
- <li><a href="https://resin.grandlyon.com/contact" target="_blank" rel="noopener noreferrer">Contact ●</a></li>
- <li><a href="https://resin.grandlyon.com/page/qui-sommes-nous" target="_blank" rel="noopener noreferrer">Qui sommes-nous ? ●</a></li>
- <li><a href="/accessibilite" target="_blank" rel="noopener noreferrer">Accessibilité : Pas Testé</a></li>
+ <li><a href="https://resin.grandlyon.com/mentions-legales" target="_blank" rel="noopener noreferrer">Mentions légales</a></li>
+ <p>●</p>
+ <li><a href="https://resin.grandlyon.com/page/qui-sommes-nous" target="_blank" rel="noopener noreferrer">Qui sommes nous ?</a></li>
+ <p>●</p>
+ <li>Accessibilité : Non conforme</li>
</ul>
<div class="right-section">
<ul>
@@ -17,7 +25,8 @@
<a href="https://www.grandlyon.com/" target="_blank" rel="noopener noreferrer">
<img src="https://inclusivite-resin.grandlyon.com/app/themes/ausy-modular-theme/public/images/picto-plus.0a1d2b.png" alt="Logo">
<p>Un site de la Métropole de Lyon</p>
- </a></li>
+ </a>
+ </li>
</ul>
</div>
</footer>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 89c9f64583fb162513451c9d7c295f869b974cec..ca4cff38dbf4bc36479da173a0de64b740552246 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,8 @@
import { Component } from '@angular/core';
-import { NavbarComponent } from './shared/navbar/navbar.component';
+import { HeaderComponent } from './shared/header/header.component';
import { RouterOutlet } from '@angular/router';
-import * as donnees from './assets/navigation_data.json';
-import * as donnees2 from './assets/anwsers_data.json';
+import * as donnees from './shared/assets/navigation_data.json';
+import * as donnees2 from './shared/assets/anwsers_data.json';
@Component({
@@ -10,7 +10,7 @@ import * as donnees2 from './assets/anwsers_data.json';
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: [
- NavbarComponent,
+ HeaderComponent,
RouterOutlet,
]
})
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 1bd5cb000f9c4dfe98f6ddc5cca8dea8b107f308..537c775af9d86b3b4c8f8b5d82cc12c6074f5444 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -4,23 +4,21 @@ import { ContexteComponent } from './views/contexte/contexte.component';
import { RulesComponent } from './views/rules/rules.component';
import { RulesAnalysisComponent } from './views/rules-analysis/rules-analysis.component';
import { RulesConclusionComponent } from './views/rules-conclusion/rules-conclusion.component';
-import { RulesRepartitionComponent } from './views/rules-repartition/rules-repartition.component';
import { RulesSolutionsComponent } from './views/rules-solutions/rules-solutions.component';
import { UserManagerComponent } from './views/user-manager/user-manager.component';
import { InclusifCardsComponent } from './views/inclusif-cards/inclusif-cards.component';
import { NavigationCardComponent } from './views/inclusif-cards/navigation-card/navigation-card.component';
-
+import { SolutionsComponent } from './views/solutions/solutions.component';
export const routes: Routes = [
{path: 'accueil', component: HomepageComponent},
- {path: 'contexte', component: ContexteComponent},
+ {path: 'deroulement', component: ContexteComponent},
{path: 'regles_analyse', component: RulesAnalysisComponent},
{path: 'regles_conclusion', component: RulesConclusionComponent},
- {path: 'regles_repartition', component: RulesRepartitionComponent},
{path: 'regles_solutions', component: RulesSolutionsComponent},
{path: 'regles', component: RulesComponent},
{path: 'enregistrement_utilisateur', component: UserManagerComponent},
- {path: 'cartes_inclusif',
+ {path: 'solution', component:SolutionsComponent}, {path: 'cartes_inclusif',
component: InclusifCardsComponent,
children: [
{ path: '', redirectTo: 'carte', pathMatch: 'full' }, // Redirection vers carte avec query params
diff --git a/src/app/assets/anwsers_data.json b/src/app/assets/anwsers_data.json
deleted file mode 100644
index 1c52331d4aa1449d40d240c2e1f31d17e5830115..0000000000000000000000000000000000000000
--- a/src/app/assets/anwsers_data.json
+++ /dev/null
@@ -1,371 +0,0 @@
-{"data":[
- {
- "id": 1,
- "categorie": "Gestion de projet",
- "sous_categorie": "Cadrage et planification",
- "titre": "Mettez l’inclusivité au programme",
- "contenu": [
- "Proposez aux sponsors du projet que l’inclusivité soit un objectif concret du projet.",
- "Mettez l’inclusivité à l’ordre du jour des réunions de suivi.",
- "Déterminez un indicateur d’inclusivité ou d’accessibilité à suivre régulièrement.",
- "Pour vous aider, consultez le référentiel général d'amélioration de l'accéssibilité (RGAA) ou le site inclusive.microsoft.design (en anglais)."
- ]
- },
- {
- "id": 2,
- "categorie": "Gestion de projet",
- "sous_categorie": "Cadrage et planification",
- "titre": "Menez une veille sur l’inclusivité",
- "contenu": [
- "Identifiez des services numériques se présentant comme inclusifs pour vous en inspirer, par exemple les sites de refugies.info et de la SNCF.",
- "Abonnez-vous à des sources de référence pour rester informé des actualités du sujet, comme le site design.gouv ou le site inclusive.microsoft.design (en anglais).",
- "Inspirez-vous hors du champ numérique, par exemple avec l’électro-ménager (Groupe SEB) ou le bâtiment (accessibilité des bâtiments publics)."
- ],
- "source": {
- "nom": "Design.gouv",
- "description": "Sur design.gouv, trouvez des outils, formations et actualités liées à l’inclusivité numérique."
- }
- },
- {
- "id": 3,
- "categorie": "Gestion de projet",
- "sous_categorie": "Cadrage et planification",
- "titre": "Identifiez vos utilisateurs dès le début",
- "contenu": [
- "Identifiez les publics et contextes dont votre projet doit tenir compte, pour proposer un service utilisable par tous.",
- "Exemples de publics : personnes allophones, éloignées du numérique, jeunes, personnes âgées...",
- "Exemples de contextes : dans les transports, dans le bruit, dans le noir, en plein soleil..."
- ],
- "source": {
- "nom": "Microsoft Inclusive Design (en anglais)",
- "description": "Des sources d’inspiration utiles sont proposées par Microsoft pour identifier, dès le début d’un projet, vos différents utilisateurs et contextes d’utilisation de votre futur service.",
- "lien": "https://tstu.fr/designinclusif"
- }
- },
- {
- "id": 4,
- "categorie": "Gestion de projet",
- "sous_categorie": "Cadrage et planification",
- "titre": "Invitez des utilisateurs à challenger vos idées",
- "contenu": [
- "Prévoyez dès le début du projet des phases de challenge de vos idées, puis des maquettes et des fonctionnalités du service pour les publics concernés.",
- "Vous pouvez aussi inviter des professionnels, experts internes ou externes (utilisateurs, responsables d’associations d’usagers...).",
- "Exemples de canaux de mobilisation :\n - Dans le domaine de la santé : France Assos Santé\n - Dans le domaine public : jeparticipe.grandlyon.com"
- ],
- "source": {
- "nom": "Je participe Grand Lyon",
- "description": "Je Participe, site web de la Métropole de Lyon, est un exemple de plateforme de participation citoyenne."
- }
- },
- {
- "id": 5,
- "categorie": "Gestion de projet",
- "sous_categorie": "Équipe projet et partenariats",
- "titre": "Formez l'équipe sur ce thème",
- "contenu": [
- "Proposez des mini-formations à l'inclusivité aux membres de votre équipe",
- "Diffusez les MOOCs de design.gouv.fr",
- "Commencez par exemple par le thème du rédactionnel avec le MOOC dédié de la DITP(direction interministérielle de la transformation publique)."
- ],
- "source": {
- "nom": "MOOC de la DITP",
- "description": "Retrouvez sur le site de la DITP des webinaires dédiés à l'inclusivité et la simplifocation administrative. Par exemple, les 'jeudis de l'expérience usager'."
- }
- },
- {
- "id": 6,
- "categorie": "Gestion de projet",
- "sous_categorie": "Équipe projet et partenariats",
- "titre": "Désignez une personne référente",
- "contenu": [
- "Choisissez une personne qui vous semble être la plus pertinnente comme référence inclusivité dans votre projet",
- "Déterminez avec elle ses responsabilités et actions associées, sur la base des solutions retenues par l'équipe lors de cette session de jeu"
- ],
- "source": {
- }
- },
- {
- "id": 7,
- "categorie": "Gestion de projet",
- "sous_categorie": "Équipe projet et partenariats",
- "titre": "Vérifiez vos cahiers des charges et contrats",
- "contenu": [
- "Intégrez à vos cahiers des charges et contrats des prestations externes les exigences d'accessibilté et d'inclusivité pour les partenaires.",
- "Exigez un taux d'accessibilité minimum vire la réalisation de cette session de jeu dans votre cahier des charges.",
- "Commencez par exemple par le thème du rédactionnel avec le MOOC dédié de la DITP(direction interministérielle de la transformation publique)."
- ],
- "source": {
- }
- },
- {
- "id": 8,
- "categorie": "Gestion de projet",
- "sous_categorie": "Équipe projet et partenariats",
- "titre": "Intégrez des sachants",
- "contenu": [
- "Intégrez à l'équipe de projet des personnes expertes, internes ou externes: des designers, des services, des psychologues sociaux, des salariés, apprentis, stagiaires avec une sensibilité ou spécificité particulière... \n Par exemple, acceuillez un stagiaire en webdesign en situation de handicap (surdité...), issu de cursus de formations adaptés."
- ],
- "source": {
- }
- },
- {
- "id":9 ,
- "categorie": "Gestion de projet",
- "sous_categorie": "Équipe projet et partenariats",
- "titre": "Consultez des experts",
- "contenu": [
- "Associez au projet des parties prenantes externes, expertes de certains publics cibles et de leur besoins"
- ],
- "source": {
- "nom": "Association APF de France Handicap",
- "description": "Solicitez par exemple des intervenants de l'association APF France Handicap."
- }
- },
- {
- "id":10 ,
- "categorie": "Gestion de projet",
- "sous_categorie": "Évaluation et certification",
- "titre": "Faites auditer votre service numérique",
- "contenu": [
- "Soumettez votre service numérique à un audit RGAA (Référentiel Général d'Amélioration de l'Accessibilité) \n Pour cela, contactez votre référent accéssibilité numérique, s'il y en a un dans votre structure. Il pourra réaliser l'audit RGAA ou il fera appel à un prestataire spécialisé avec une expertise RGAA\n A l'issue de l'audit RGAA, vous obtiendrez le taux de conformité de votre service numérique. La liste des non conformités vous sera fournie, avec les préconisations de corrections."
- ],
- "source": {
-
- }
- },
- {
- "id":11 ,
- "categorie": "Gestion de projet",
- "sous_categorie": "Évaluation et certification",
- "titre": "Mettez en place les obligations de communication du RGAA",
- "contenu": [
- "Mettez en place une page Accessibilité à partir de la décalaration d'accessibilité issue de l'audit.",
- "Faites un lien vers le schéma pluriannuel de mise en accessibilité.",
- "Ajoutez la mention obligatoire d'accessibilité sur la page d'accueil (état de conformité)."
- ],
- "source": {
- "nom": "Accessibilité.numérique.gouv",
- "description": "Vous trouverez sur le site du gouvernement le référentiel général d'amélioration de l'accessibilité (RGAA)."
- }
- },
- {
- "id":12 ,
- "categorie": "Gestion de projet",
- "sous_categorie": "Évaluation et certification",
- "titre": "Suivez votre progression",
- "contenu": [
- "Estimez l'inclusivité de votre projet régulièrement après la réalisation de cette session",
- "Assurez-vous que les évolutions ultérieures de votre serviecs respectent les bonnes pratiques d'inclusivité. "
- ],
- "source": {
- "nom": "Support d'auto-évaluation sur le site Rés'in",
- "description": "Retrouvez le support d'autoévaluation d'inclusivité numérique sur le site dédié à ce jeu."
- }
- },
- {
- "id":13 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Immersion",
- "titre": "Identifiez vos différents utilisateurs",
- "contenu": [
- "Identifiez vos utilisateurs en prennant en compte leurs diffénrences telles que : handicaps, déficiences, codes socio-culturels, habitudes. \n Utilisez cette connainssance de vos utilisateurs pour concevoir votre services numériques dans une démarche centrée utilisateur."
- ],
- "source": {
- "nom": "Microsoft inclusif design (en anglais)",
- "description": "Microsoft propose de nombreuses ressources autours du desing inclusif."
- }
- },
- {
- "id":14 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Immersion",
- "titre": "Rencontrez vos utilisateurs",
- "contenu": [
- "Rencontrez et questionnez vos utilisateurs pour identifier et prioriser des axes de conception ou d'amélioration de votre service. \n Peu importe l'étape du projet, cela vous permettra de préciser les profils de vos utilisateurs et leurs besoins."
- ],
- "source": {
- "nom": "Design kit (en anglais)",
- "description": "De nombreuses méthodes pour interviewer et observer les profils de vos utilisateurs et leurs besoins sont disponibles sur le site Design Kit de l'agence IDEO."
- }
- },
- {
- "id":15 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Immersion",
- "titre": "Observez pour mieux comprendre",
- "contenu": [
- "Observez avec attention vos utilisateurs en situation réelle pour mieux comprendre leurs habitudes, pratiques, besoins et problématiques. \n Vous pourrez ainsi réduire les points d'exclusion ou de friction lors de la conception de votre service."
- ],
- "source": {
- "nom": "Design kit (en anglais)",
- "description": "De nombreuses méthodes pour interviewer et observer les profils de vos utilisateurs et leurs besoins sont disponibles sur le site Design Kit de l'agence IDEO."
- }
- },
- {
- "id":16 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Décryptage et analyse",
- "titre": "Représentez vos utilisateurs",
- "contenu": [
- "Utilisez des outils tels que le personna pour repésenter vos utilisateurs: vous porrez ainsi concevoir autours de leurs objectifs. \n Un personna est un personnage fictif que l'on utilise afin de se représenter un groupe d'utilisateurs dans le but de mieux se mettre dans leur peau."
- ],
- "source": {
- "nom": "Figma community (en anglais)",
- "description": "La communauté Figma recense de nombreux modèles de personna prêts à l'emploi."
- }
- },
- {
- "id":17 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Décryptage et analyse",
- "titre": "Analysez l'expérience éxistante",
- "contenu": [
- "Matérialisez et analysez l'expéreince éxistante de vos utilisateurs à travers un ou plusieurs parcous utilisateurs qui serviront de référence à toute l'équipe. \n Cela permet de synthétiser les problèmes rencontrés par vos utilisateurs."
- ],
- "source": {
- "nom": "Whimsical (en anglais)",
- "description": "Whimsical est un outil permettant la conception de parcours utilisateurs."
- }
- },
- {
- "id":18 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Idéalisation et conception",
- "titre": "Définissez l'expérience cible",
- "contenu": [
- "représentez pour votre service numérique et sous la forme de parcours utilisateur cibles l'expérience de vos futurs utilisateurs. \n cela permet de s'assurer que vous résolvez les points de frictions de vos utilisateurs."
- ],
- "source": {
- "nom": "Figjam",
- "description": "Figjam est un tableau blanc collaboratif en ligne qui permet la conception d'éléments rapides."
- }
- },
- {
- "id":19 ,
- "categorie": "Expérience utilisateur",
- "sous_categorie": "Idéalisation et conception",
- "titre": "Prototypez vos écrans",
- "contenu": [
- "Schématisez vos écrans en définissant les éléments les composants et en les structurants. \n Ces schémas s'appellent des wireframes. Ils doivent rester les plus simples et compréhensibles possible."
- ],
- "source": {
- "nom": "Wireframe.cc (en anglais)",
- "description": "Wireframe.cc est un outil permettant la conception instantanée et simplifiée de wireframes."
- }
- },
- {
- "id":20 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Respectez les codes chromatiques",
- "contenu": [
- "Évitez que l'information soit uniquement portée par la couleur.",
- "Faites attention à la sémantique des couleurs. Exemple: Le rouge = danger, le vert = succès.",
- "Évitez d'accumuler trop de teintes différentes."
- ],
- "source": {
- "nom": "Colors.co (en anglais)",
- "description": "Colors.co est un site proposant plusieurs outils afin de générer des gammes chromatiques."
- }
- },
- {
- "id":21 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Respectez les contrastes visuels",
- "contenu": [
- "Respecter les normes de contraste mise en place dans le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) permet à chacun de distinguer les éléments des écrans, peu importe ses déficiences ou les conditions d'utilisation du service.\n Il est recommandé de déoasser les normes de contraste lorsque cela est possible"
- ],
- "source": {
- }
- },
- {
- "id":22 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Appliquez les règles typographiques",
- "contenu": [
- "N'écrivez pas trop petit.",
- "Privilégiez les typographies simples.",
- "N'écrivez pas tout en majuscule.",
- "Limitez le nombre de typographie utilisée à 2 ou 3.",
- "N'utilisez pas de polices trop grasses."
- ],
- "source": {
- "nom": "Iconify Design (en anglais)",
- "description": "Iconify est un sit référançant de nombreuses ressources et bibliothèques d'icônes open sources."
- }
- },
- {
- "id":23 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Rendez vos pictogrammes inclusifs",
- "contenu": [
- "Favorisez la présence d'un élément textuel associé au pictogramme.",
- "Les pictogrammes ne doivent que rarement être présentés seuls",
- "Gardez une constance au niveau des tailles",
- "Utilisez un seul pictogramme pour une même information."
- ],
- "source": {
- "nom": "Iconify Design (en anglais)",
- "description": "Iconify est un sit référançant de nombreuses ressources et bibliothèques d'icônes open sources."
- }
- },
- {
- "id":24 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Rendez vos pictogrammes inclusifs",
- "contenu": [
- "Favorisez la présence d'un élément textuel associé au pictogramme.",
- "Les pictogrammes ne doivent que rarement être présentés seuls",
- "Gardez une constance au niveau des tailles",
- "Utilisez un seul pictogramme pour une même information."
- ],
- "source": {
- "nom": "Iconify Design (en anglais)",
- "description": "Iconify est un sit référançant de nombreuses ressources et bibliothèques d'icônes open sources."
- }
- },
- {
- "id":25 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Représentez la diversité",
- "contenu": [
- "Gardez les mêmes tailes de titre, marges, règles d'espacement et colonnes. \n Une structure cohérente s'appuie sur le sens de lecture (européen): de gauche à droite puis de haut en bas."
- ],
- "source": {
- "nom": "Beta.gouv",
- "description": "Beta.gouv est un exemple de site ayant unr mise en page simple et lisible."
- }
- },
- {
- "id":26 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Soignez vos mises en pages",
- "contenu": [
- "Les éléments intéractifs de vos écrans doivent être intuitifs et suggérer leur utilisation et leur fonction: c'est l'affordance. \n Travaillez sur les diffénrents états de ces éléments (survol, clic, sélection...) permet d'éviter la frustration ou les erreurs de manipualtion chez vos utilisateurs."
- ],
- "source": {
- }
- },
- {
- "id":27 ,
- "categorie": "Interface utilisateur",
- "sous_categorie": "Design visuel",
- "titre": "Rendez vos pictogrammes inclusifs",
- "contenu": [
- "Prévoyez vos interfaces pour les diffénrents terminaux sur lesquels ils seront utilisés. Cela peut implique de concevoir le service au format mobile, tablette ou encore ordinateur.",
- "Suivez une logique de points de rupture "
- ],
- "source": {
- "nom": "Iconify Design (en anglais)",
- "description": "Iconify est un sit référançant de nombreuses ressources et bibliothèques d'icônes open sources."
- }
- }
-
-]
-}
diff --git a/src/app/shared/action-bar/action-bar.component.css b/src/app/shared/action-bar/action-bar.component.css
deleted file mode 100644
index 89228791b63fbb8bd725354a24b1269c1469d984..0000000000000000000000000000000000000000
--- a/src/app/shared/action-bar/action-bar.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.action-bar {
- position: fixed;
- bottom: 0;
- width: 100%;
- display: flex;
- justify-content: center;
- padding: 20px;
- gap: 20px;
-}
-
-.action-btn {
- border: none;
- padding: 10px 20px;
- font-size: 16px;
- cursor: pointer;
- border-radius: 5px;
-}
\ No newline at end of file
diff --git a/src/app/shared/action-bar/action-bar.component.html b/src/app/shared/action-bar/action-bar.component.html
deleted file mode 100644
index 358df1b74998635a4249bf11cc541fb5ef335032..0000000000000000000000000000000000000000
--- a/src/app/shared/action-bar/action-bar.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="action-bar">
- @for(btn of buttons; track $index){
- <p-button (click)="btn.action()" [severity]="btn.severity" class="action-btn" >
- {{ btn.label }}
- </p-button>
- }
-</div>
\ No newline at end of file
diff --git a/src/app/shared/action-bar/action-bar.component.ts b/src/app/shared/action-bar/action-bar.component.ts
deleted file mode 100644
index c35dbadd412343b7dca4d9ec56c50f485478f5c3..0000000000000000000000000000000000000000
--- a/src/app/shared/action-bar/action-bar.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Button, ButtonModule } from 'primeng/button';
-
-@Component({
- selector: 'app-action-bar',
- imports: [ButtonModule],
- templateUrl: './action-bar.component.html',
- styleUrl: './action-bar.component.css'
-})
-export class ActionBarComponent {
-
- @Input() buttons: { label: string, action: () => void, severity? : "success" | "info" | "warn" | "danger" | "help" | "primary" | "secondary" | "contrast" | null | undefined}[] = [];
-
-}
diff --git a/src/app/shared/assets/anwsers_data.json b/src/app/shared/assets/anwsers_data.json
new file mode 100644
index 0000000000000000000000000000000000000000..779fdaf8d1c96d4433d5c9ec28d2d751ee711c80
--- /dev/null
+++ b/src/app/shared/assets/anwsers_data.json
@@ -0,0 +1,798 @@
+{
+ "data": [
+ {
+ "id": 1,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Cadrage et Planification",
+ "titre": "Mettez l’inclusivité au programme",
+ "contenu": [
+ "Proposez aux sponsors du projet que l’inclusivité soit un objectif concret du projet.",
+ "Mettez l’inclusivité à l’ordre du jour des réunions de suivi.",
+ "Déterminez un indicateur d’inclusivité ou d’accessibilité à suivre régulièrement.",
+ "Pour vous aider, consultez le référentiel général d'amélioration de l'accessibilité (RGAA) ou le site inclusive.microsoft.design (en anglais)."
+ ],
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 2,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Cadrage et Planification",
+ "titre": "Menez une veille sur l’inclusivité",
+ "contenu": [
+ "Identifiez des services numériques se présentant comme inclusifs pour vous en inspirer, par exemple les sites de refugies.info et de la SNCF.",
+ "Abonnez-vous à des sources de référence pour rester informé des actualités du sujet, comme le site design.gouv ou le site inclusive.microsoft.design (en anglais).",
+ "Inspirez-vous hors du champ numérique, par exemple avec l’électroménager (Groupe SEB) ou le bâtiment (accessibilité des bâtiments publics)."
+ ],
+ "source": {
+ "nom": "Design.gouv",
+ "description": "Sur design.gouv, trouvez des outils, formations et actualités liées à l’inclusivité numérique."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 3,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Cadrage et Planification",
+ "titre": "Identifiez vos utilisateurs dès le début",
+ "contenu": [
+ "Identifiez les publics et contextes dont votre projet doit tenir compte, pour proposer un service utilisable par tous.",
+ "Exemples de publics : personnes allophones, éloignées du numérique, jeunes, personnes âgées...",
+ "Exemples de contextes : dans les transports, dans le bruit, dans le noir, en plein soleil..."
+ ],
+ "source": {
+ "nom": "Microsoft Inclusive Design (en anglais)",
+ "description": "Des sources d’inspiration utiles sont proposées par Microsoft pour identifier, dès le début d’un projet, vos différents utilisateurs et contextes d’utilisation de votre futur service.",
+ "lien": "https://tstu.fr/designinclusif"
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 4,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Cadrage et Planification",
+ "titre": "Invitez des utilisateurs à challenger vos idées",
+ "contenu": [
+ "Prévoyez dès le début du projet des phases de challenge de vos idées, puis des maquettes et des fonctionnalités du service pour les publics concernés.",
+ "Vous pouvez aussi inviter des professionnels, experts internes ou externes (utilisateurs, responsables d’associations d’usagers...).",
+ "Exemples de canaux de mobilisation :\n - Dans le domaine de la santé : France Assos Santé\n - Dans le domaine public : jeparticipe.grandlyon.com"
+ ],
+ "source": {
+ "nom": "Je participe Grand Lyon",
+ "description": "Je Participe, site web de la Métropole de Lyon, est un exemple de plateforme de participation citoyenne."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 5,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Equipe projet et partenariats",
+ "titre": "Formez l'équipe sur ce thème",
+ "contenu": [
+ "Proposez des mini-formations à l'inclusivité aux membres de votre équipe",
+ "Diffusez les MOOCs de design.gouv.fr",
+ "Commencez par exemple par le thème du rédactionnel avec le MOOC dédié de la DITP (direction interministérielle de la transformation publique)."
+ ],
+ "source": {
+ "nom": "MOOC de la DITP",
+ "description": "Retrouvez sur le site de la DITP des webinaires dédiés à l'inclusivité et la simplification administrative. Par exemple, les 'jeudis de l'expérience usager'."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 6,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Equipe projet et partenariats",
+ "titre": "Désignez une personne référente",
+ "contenu": [
+ "Choisissez une personne qui vous semble être la plus pertinente comme référence inclusivité dans votre projet",
+ "Déterminez avec elle ses responsabilités et actions associées, sur la base des solutions retenues par l'équipe lors de cette session de jeu"
+ ],
+ "source": {},
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 7,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Equipe projet et partenariats",
+ "titre": "Vérifiez vos cahiers des charges et contrats",
+ "contenu": [
+ "Intégrez à vos cahiers des charges et contrats des prestations externes les exigences d'accessibilité et d'inclusivité pour les partenaires.",
+ "Exigez un taux d'accessibilité minimum via la réalisation de cette session de jeu dans votre cahier des charges.",
+ "Commencez par exemple par le thème du rédactionnel avec le MOOC dédié de la DITP (direction interministérielle de la transformation publique)."
+ ],
+ "source": {},
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 8,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Equipe projet et partenariats",
+ "titre": "Intégrez des sachants",
+ "contenu": [
+ "Intégrez à l'équipe de projet des personnes expertes, internes ou externes : des designers, des services, des psychologues sociaux, des salariés, apprentis, stagiaires avec une sensibilité ou spécificité particulière... \n Par exemple, accueillez un stagiaire en webdesign en situation de handicap (surdité...), issu de cursus de formations adaptés."
+ ],
+ "source": {},
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 9,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Equipe projet et partenariats",
+ "titre": "Consultez des experts",
+ "contenu": [
+ "Associez au projet des parties prenantes externes, expertes de certains publics cibles et de leurs besoins"
+ ],
+ "source": {
+ "nom": "Association APF de France Handicap",
+ "description": "Sollicitez par exemple des intervenants de l'association APF France Handicap."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 10,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Evaluation et certification du projet",
+ "titre": "Faites auditer votre service numérique",
+ "contenu": [
+ "Soumettez votre service numérique à un audit RGAA (Référentiel Général d'Amélioration de l'Accessibilité) \n Pour cela, contactez votre référent accessibilité numérique, s'il y en a un dans votre structure. Il pourra réaliser l'audit RGAA ou il fera appel à un prestataire spécialisé avec une expertise RGAA\n A l'issue de l'audit RGAA, vous obtiendrez le taux de conformité de votre service numérique. La liste des non-conformités vous sera fournie, avec les préconisations de corrections."
+ ],
+ "source": {},
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 11,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Evaluation et certification du projet",
+ "titre": "Mettez en place les obligations de communication du RGAA",
+ "contenu": [
+ "Mettez en place une page Accessibilité à partir de la déclaration d'accessibilité issue de l'audit.",
+ "Faites un lien vers le schéma pluriannuel de mise en accessibilité.",
+ "Ajoutez la mention obligatoire d'accessibilité sur la page d'accueil (état de conformité)."
+ ],
+ "source": {
+ "nom": "Accessibilité.numérique.gouv",
+ "description": "Vous trouverez sur le site du gouvernement le référentiel général d'amélioration de l'accessibilité (RGAA)."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 12,
+ "categorie": "Gestion de projet",
+ "sous_categorie": "Evaluation et certification du projet",
+ "titre": "Suivez votre progression",
+ "contenu": [
+ "Estimez l'inclusivité de votre projet régulièrement après la réalisation de cette session",
+ "Assurez-vous que les évolutions ultérieures de votre service respectent les bonnes pratiques d'inclusivité."
+ ],
+ "source": {
+ "nom": "Support d'auto-évaluation sur le site Rés'in",
+ "description": "Retrouvez le support d'autoévaluation d'inclusivité numérique sur le site dédié à ce jeu."
+ },
+ "image": false,
+ "textcolor": "#ED6F3A"
+ },
+ {
+ "id": 13,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Immersion",
+ "titre": "Identifiez vos différents utilisateurs",
+ "contenu": [
+ "Identifiez vos utilisateurs en prenant en compte leurs différences telles que : handicaps, déficiences, codes socio-culturels, habitudes. \n Utilisez cette connaissance de vos utilisateurs pour concevoir votre service numérique dans une démarche centrée utilisateur."
+ ],
+ "source": {
+ "nom": "Microsoft inclusive design (en anglais)",
+ "description": "Microsoft propose de nombreuses ressources autour du design inclusif."
+ },
+ "image": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 14,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Immersion",
+ "titre": "Rencontrez vos utilisateurs",
+ "contenu": [
+ "Rencontrez et questionnez vos utilisateurs pour identifier et prioriser des axes de conception ou d'amélioration de votre service. \n Peu importe l'étape du projet, cela vous permettra de préciser les profils de vos utilisateurs et leurs besoins."
+ ],
+ "source": {
+ "nom": "Design kit (en anglais)",
+ "description": "De nombreuses méthodes pour interviewer et observer les profils de vos utilisateurs et leurs besoins sont disponibles sur le site Design Kit de l'agence IDEO."
+ },
+ "image": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 15,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Immersion",
+ "titre": "Observez pour mieux comprendre",
+ "contenu": [
+ "Observez avec attention vos utilisateurs en situation réelle pour mieux comprendre leurs habitudes, pratiques, besoins et problématiques. \n Vous pourrez ainsi réduire les points d'exclusion ou de friction lors de la conception de votre service."
+ ],
+ "source": {
+ "nom": "Design kit (en anglais)",
+ "description": "De nombreuses méthodes pour interviewer et observer les profils de vos utilisateurs et leurs besoins sont disponibles sur le site Design Kit de l'agence IDEO."
+ },
+ "image": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 16,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Décryptage et analyse",
+ "titre": "Représentez vos utilisateurs",
+ "contenu": [
+ "Utilisez des outils tels que le persona pour représenter vos utilisateurs : vous pourrez ainsi concevoir autour de leurs objectifs. \n Un persona est un personnage fictif que l'on utilise afin de se représenter un groupe d'utilisateurs dans le but de mieux se mettre dans leur peau."
+ ],
+ "source": {
+ "nom": "Figma community (en anglais)",
+ "description": "La communauté Figma recense de nombreux modèles de persona prêts à l'emploi."
+ },
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 17,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Décryptage et analyse",
+ "titre": "Analysez l'expérience existante",
+ "contenu": [
+ "Matérialisez et analysez l'expérience existante de vos utilisateurs à travers un ou plusieurs parcours utilisateurs qui serviront de référence à toute l'équipe. \n Cela permet de synthétiser les problèmes rencontrés par vos utilisateurs."
+ ],
+ "source": {
+ "nom": "Whimsical (en anglais)",
+ "description": "Whimsical est un outil permettant la conception de parcours utilisateurs."
+ },
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 18,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Idéation et conception",
+ "titre": "Définissez l'expérience cible",
+ "contenu": [
+ "Représentez pour votre service numérique et sous la forme de parcours utilisateur cibles l'expérience de vos futurs utilisateurs. \n Cela permet de s'assurer que vous résolvez les points de frictions de vos utilisateurs."
+ ],
+ "source": {
+ "nom": "Figjam",
+ "description": "Figjam est un tableau blanc collaboratif en ligne qui permet la conception d'éléments rapides."
+ },
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 19,
+ "categorie": "Expérience utilisateur",
+ "sous_categorie": "Idéation et conception",
+ "titre": "Prototypez vos écrans",
+ "contenu": [
+ "Schématisez vos écrans en définissant les éléments les composant et en les structurant. \n Ces schémas s'appellent des wireframes. Ils doivent rester les plus simples et compréhensibles possible."
+ ],
+ "source": {
+ "nom": "Wireframe.cc (en anglais)",
+ "description": "Wireframe.cc est un outil permettant la conception instantanée et simplifiée de wireframes."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#24624C"
+ },
+ {
+ "id": 20,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Respectez les codes chromatiques",
+ "contenu": [
+ "Évitez que l'information soit uniquement portée par la couleur.",
+ "Faites attention à la sémantique des couleurs. Exemple : Le rouge = danger, le vert = succès.",
+ "Évitez d'accumuler trop de teintes différentes."
+ ],
+ "source": {
+ "nom": "Colors.co (en anglais)",
+ "description": "Colors.co est un site proposant plusieurs outils afin de générer des gammes chromatiques."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 21,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Respectez les contrastes visuels",
+ "contenu": [
+ "Respecter les normes de contraste mises en place dans le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) permet à chacun de distinguer les éléments des écrans, peu importe ses déficiences ou les conditions d'utilisation du service.\n Il est recommandé de dépasser les normes de contraste lorsque cela est possible"
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 22,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Appliquez les règles typographiques",
+ "contenu": [
+ "N'écrivez pas trop petit.",
+ "Privilégiez les typographies simples.",
+ "N'écrivez pas tout en majuscule.",
+ "Limitez le nombre de typographies utilisées à 2 ou 3.",
+ "N'utilisez pas de polices trop grasses."
+ ],
+ "source": {
+ "nom": "Iconify Design (en anglais)",
+ "description": "Iconify est un site référençant de nombreuses ressources et bibliothèques d'icônes open sources."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 23,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Rendez vos pictogrammes inclusifs",
+ "contenu": [
+ "Favorisez la présence d'un élément textuel associé au pictogramme.",
+ "Les pictogrammes ne doivent que rarement être présentés seuls",
+ "Gardez une constance au niveau des tailles",
+ "Utilisez un seul pictogramme pour une même information."
+ ],
+ "source": {
+ "nom": "Iconify Design (en anglais)",
+ "description": "Iconify est un site référençant de nombreuses ressources et bibliothèques d'icônes open sources."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 24,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Rendez vos pictogrammes inclusifs",
+ "contenu": [
+ "Favorisez la présence d'un élément textuel associé au pictogramme.",
+ "Les pictogrammes ne doivent que rarement être présentés seuls",
+ "Gardez une constance au niveau des tailles",
+ "Utilisez un seul pictogramme pour une même information."
+ ],
+ "source": {
+ "nom": "Iconify Design (en anglais)",
+ "description": "Iconify est un site référençant de nombreuses ressources et bibliothèques d'icônes open sources."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 25,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Représentez la diversité",
+ "contenu": [
+ "Gardez les mêmes tailles de titre, marges, règles d'espacement et colonnes. \n Une structure cohérente s'appuie sur le sens de lecture (européen): de gauche à droite puis de haut en bas."
+ ],
+ "source": {
+ "nom": "Beta.gouv",
+ "description": "Beta.gouv est un exemple de site ayant une mise en page simple et lisible."
+ },
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 26,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Soignez vos mises en pages",
+ "contenu": [
+ "Les éléments interactifs de vos écrans doivent être intuitifs et suggérer leur utilisation et leur fonction: c'est l'affordance. \n Travaillez sur les différents états de ces éléments (survol, clic, sélection...) permet d'éviter la frustration ou les erreurs de manipulation chez vos utilisateurs."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 27,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Rendez vos pictogrammes inclusifs",
+ "contenu": [
+ "Prévoyez vos interfaces pour les différents terminaux sur lesquels ils seront utilisés. Cela peut impliquer de concevoir le service au format mobile, tablette ou encore ordinateur.",
+ "Suivez une logique de points de rupture"
+ ],
+ "source": {
+ "nom": "Système et design de l'état",
+ "description": "Le site de recensement de l'état recense de nombreuses bonnes pratiques ainsi que des cas concrets."
+ },
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 28,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Design visuel",
+ "titre": "Espacez et hiérarchisez",
+ "contenu": [
+ "Des espaces cohérents et suffisamment importants permettent de hiérarchiser la structure d'un écran tout en évitant les erreurs de manipulation.\n\n Gardez une logique pour les espacements au niveau d'un service. Il existe plusieurs systèmes de grilles et d'espacement tels que le système de 8. Cela revient à baser la taille des composants ainsi que des éléments de la grille sur des multiples de 8"
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 29,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Interactions",
+ "titre": "Explicitez vos champs de saisie",
+ "contenu": [
+ "Les champs de saisie sont des éléments essentiels de certains écrans de saisie et doivent toujours être accompagnés d'un libellé \n\nExplicitez à l'utilisateur les attentes en terme de saisie. Il est aussi intéressant de les accompagner d'une phrase descriptive si nécessaire."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 30,
+ "categorie": "Interface utilisateur",
+ "sous_categorie": "Interactions",
+ "titre": "Structurez vos formulaires",
+ "contenu": [
+ "Structurez vos formulaires sous la forme d'une seule colonne.",
+ "Donnez un retour direct aux actions de l'utilisateur pour le rassurer et éviter les erreurs de saisie.",
+ "Veillez à ne pas surcharger vos formulaires:\n découpez les en différentes étapes si le formulaire est trop complexe, ou si un même écran nécessite trop d'interactions."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#FBEF7D"
+ },
+ {
+ "id": 31,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Mettez une langue par défaut",
+ "contenu": [
+ "L'attribut HTML permet de définir la langue du texte utilisée sur la page web. Il faut toujours indiquer la langue par défaut sur cet attribut. \n\n En effet, le lecteur d'écran doit savoir quelle langue utiliser pour chaque page. Un texte en français (<html lang='fr'>) sera ainsi lu par une voix française."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 32,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Ajoutez un titre de page",
+ "contenu": [
+ "Chaque page de web doit avoir un titre de page (attribut HTML title).\n\n Un titre de page permet à l'utilisateur de mieux comprendre le contexte de sa navigation.\n\n C'est également mieux pour le référencement dans les moteurs de recherche."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 33,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Développez des scripts accessibles",
+ "contenu": [
+ "Les scripts doivent être contrôlables par l'utilisateur, au clavier et par tout dispositif de pointage.\n\n Un script est un ensemble de lignes de commandes inséré dans une page web pour la rendre dynamique et interactive. Exemples : un carrousel, un menu déroulant, une fenêtre modale, une barre de recherche dépliante.\n\n Le langage des scripts le plus connu est le JavaScript."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 34,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Rendez les tableaux accessibles",
+ "contenu": [
+ "La lecture d'une ligne de tableau doit être compréhensible avec les technologies d'assistance. C'est pourquoi chaque cellule doit être associée à ses en-têtes (colonnes et lignes)."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 35,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Contrôlez les éléments multimédias",
+ "contenu": [
+ "L'utilisateur doit pouvoir contrôler le déclenchement de tout son ou toute vidéo.\n\n Ainsi, le player audio ou vidéo utilisé doit avoir des boutons Lecture et Pause."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 36,
+ "categorie": "Développement",
+ "sous_categorie": "Code",
+ "titre": "Restez lisible",
+ "contenu": [
+ "Le texte doit rester lisible lorsque la taille des caractères est augmentée jusqu'à 200%."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 37,
+ "categorie": "Développement",
+ "sous_categorie": "Navigation",
+ "titre": "Restez lisible",
+ "contenu": [
+ "Le texte doit rester lisible lorsque la taille des caractères est augmentée jusqu'à 200%."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 38,
+ "categorie": "Développement",
+ "sous_categorie": "Navigation",
+ "titre": "Laissez le focus visible",
+ "contenu": [
+ "La prise de focus doit être visible pour chaque élément recevant le focus."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 39,
+ "categorie": "Développement",
+ "sous_categorie": "Navigation",
+ "titre": "Utilisez des titres",
+ "contenu": [
+ "L'information doit être structurée par l'utilisation de titres: H1, H2, H3, etc. Les titres doivent respecter une hiérarchie: le H1 contient des H2 qui contiennent des H3, etc. \n\n Il est plus simple, quand on utilise uniquement un clavier, de naviguer de titre en titre sans devoir lire la totalité de la page: cela équivaut à un sommaire. \n\n C'est également mieux pour le référencement dans les moteurs de recherche."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 40,
+ "categorie": "Développement",
+ "sous_categorie": "Navigation",
+ "titre": "Structurez vos listes",
+ "contenu": [
+ "Les listes doivent être structurées.\n\n Ainsi, pour les listes non ordonnées, il faut utiliser les balises HTML <ul> et <li>. Pour les listes ordonnées, il faut utiliser les balises HTML <ol> et <li>."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 41,
+ "categorie": "Développement",
+ "sous_categorie": "Navigation",
+ "titre": "Facilitez la navigation",
+ "contenu": [
+ "Le site ou service numérique doit contenir au moins 2 systèmes de navigation:",
+ "Menu de navigation",
+ "Plan du site",
+ "Moteur de recherche"
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#695897"
+ },
+ {
+ "id": 42,
+ "categorie": "Editorial",
+ "sous_categorie": "Rédaction textuelle",
+ "titre": "Adoptez le langage clair",
+ "contenu": [
+ "Le langage clair vise à rendre l'information plus facile, plus simple et plus rapide à lire",
+ "Utilisez des mots courts",
+ "Rédigez des phrases et des paragraphes courts",
+ "Évitez tout jargon",
+ "Évitez les abréviations et expliquez chaque acronyme ou terme spécifique",
+ "Utilisez la voix active",
+ "Exemple : \"Les documents doivent être envoyés rapidement.\" devient \"Vous devez envoyer ces documents rapidement.\""
+ ],
+ "source": {
+ "nom": "",
+ "description": "La norme ISO 24495-1 publiée en 2023 établit les principes directeurs et les lignes directrices pour concevoir un document, papier ou numérique, qui soit réellement clair, simple et fonctionnel pour le public cible auquel il s'adresse."
+ },
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 43,
+ "categorie": "Editorial",
+ "sous_categorie": "Rédaction textuelle",
+ "titre": "Pensez au langage inclusif",
+ "contenu": [
+ "Le langage inclusif désigne différentes règles et pratiques qui cherchent à éviter toute discrimination sexiste par le langage ou l'écriture. \n Plusieurs formulations sont possibles :",
+ "Utilisez des formules englobantes ou des tournures épicènes lorsque c'est possible, c'est-à-dire des noms qui ont la même forme aux deux genres. Exemples : \"adulte\", \"élève\", \"scientifique\", \"personne\", \"public\"",
+ "Écrivez les deux formes à la suite. Exemples : Les directeurs et directrices d'établissement",
+ "Utilisez le point médian. Exemples : étudiant-es, technicien-ne, médiateur-ice. Attention, il est conseillé d'utiliser cette forme avec prudence pour des questions de lisibilité."
+ ],
+ "source": {
+ "nom": "Jeudi de l'expérience usagers: simplifier les documents et le langage administratifs",
+ "description": "Webinaire de la Direction interministérielle de la transformation publique (DITP)."
+ },
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 44,
+ "categorie": "Editorial",
+ "sous_categorie": "Rédaction textuelle",
+ "titre": "Ayez des textes en FALC (Facile A lire et A Comprendre)",
+ "contenu": [
+ "Le Facile A Lire et à Comprendre (FALC) est une méthode qui permet de rendre l'information plus simple et plus claire, notamment aux personnes en situation de handicap, dyslexiques, âgées ou encore maîtrisant mal la langue française. \n Le FALC répond à une norme définie par l'association Inclusion Europe. \n Faites rédiger certains contenus en FALC si cela est pertinent pour vos publics cibles. \n Attention: une application stricte du FALC à certains contenus complexes peut être contre-productive."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 45,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Traitez vos images",
+ "contenu": [
+ "Distinguez les images décoratives des images porteuses d'information.",
+ "Renseignez le texte alternatif des images porteuses d'information.",
+ "Cela permet aux personnes déficientes visuelles de pouvoir accéder à tous les contenus visuels utiles."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 46,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Structurez vos contenus",
+ "contenu": [
+ "Gagnez en lisibilité en structurant vos contenus : ",
+ "Une hiérarchie des titres cohérente.",
+ "Des listes pour faciliter le déplacement d'un item à l'autre",
+ "Ne détournez pas les balises à des fins de présentation"
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 47,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Construisez des tableaux accessibles",
+ "contenu": [
+ "Un tableau doit être utilisé à bon escient, il doit être compréhensible et précis : ",
+ "Donnez un titre aux tableaux",
+ "Déclarez les en-têtes de colonnes et/ou des lignes",
+ "Une cellule doit pouvoir être associée à sa colonne, à sa ligne."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 48,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Spécifiez les liens",
+ "contenu": [
+ "Les liens doivent être contextualisés.",
+ "Rendez les liens explicites (par leur intitulé, par le titre du lien, par le contexte).",
+ "Prévenez lorsqu'un lien s'ouvre dans une nouvelle fenêtre."
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 49,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Informez sur les documents en téléchargement",
+ "contenu": [
+ "Informez sur le poids et le format du document à télécharger.",
+ "Donnez le contexte"
+ ],
+ "source": {},
+ "image": true,
+ "image_comparaison": true,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 50,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Proposez du multimédia accessible",
+ "contenu": [
+ "Pour les vidéos : ",
+ "Identifiez les vidéos par un titre ou un texte descriptif",
+ "Ajoutez une transcription textuelle structurée et des sous-titres.",
+ "Ajoutez une audio-description si nécessaire.",
+ "Ajoutez une traduction en Langue des Signes Française incrustée dans la vidéo.",
+ "Pour les audios : ",
+ "Ajoutez une transcription textuelle"
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 51,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Soyez accessible sur les réseaux sociaux",
+ "contenu": [
+ "Pour les hashtags, mettez la première lettre de chaque mot en majuscule. Exemple: #OnRecrute",
+ "N'abusez pas des emojis.",
+ "Référez-vous aux cartes solutions dédiées à la rédaction textuelle."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ },
+ {
+ "id": 52,
+ "categorie": "Editorial",
+ "sous_categorie": "Contenus",
+ "titre": "Créez des documents bureautiques accessibles",
+ "contenu": [
+ "Définissez les propriétés du document : ",
+ "Indiquez la langue.",
+ "Complétez les métadonnées du document (titre, auteur, etc.).",
+ "Faites attention à la navigation.",
+ "L'ordre de tabulation doit être cohérent : les contenus doivent s'enchaîner dans un ordre logique."
+ ],
+ "source": {},
+ "image": false,
+ "image_comparaison": false,
+ "textcolor": "#738CC7"
+ }
+ ]
+}
diff --git a/src/app/assets/navigation_data.json b/src/app/shared/assets/navigation_data.json
similarity index 98%
rename from src/app/assets/navigation_data.json
rename to src/app/shared/assets/navigation_data.json
index 8c42274f266e07fa0e7e156b58f5dab0b3ac544a..d97ad4b2873ef5be04b0626c916550d6ae9a4866 100644
--- a/src/app/assets/navigation_data.json
+++ b/src/app/shared/assets/navigation_data.json
@@ -75,7 +75,7 @@
},
{
"numero": 9,
- "nom": "Développements",
+ "nom": "Code",
"question": "Votre code est-il inclusif ?",
"description":"Le code est le langage de programmation utilisé pour faire fonctionner les services numériques. \n Il doit se conformer aux critères techniques du RGAA.",
"categorie":"Développement",
@@ -84,7 +84,7 @@
},
{
"numero": 10,
- "nom": "Développements",
+ "nom": "Navigation",
"question": "Votre navigation est-elle inclusive ?",
"description":"La navigation consiste à rechercher et consulter un service numérique. Elle doit être possible quel que soit le moyen utilisé. \n Pour naviguer, beaucoup de personnes en situation de handicap utilisent uniquement le clavier ou un dispositif de pointage. Des technologies d'assistance, comme les lecteurs d'écran, sont également utilisées.",
"categorie":"Développement",
diff --git a/src/app/shared/navbar/navbar.component.css b/src/app/shared/header/header.component.css
similarity index 70%
rename from src/app/shared/navbar/navbar.component.css
rename to src/app/shared/header/header.component.css
index 21d5d87fec7113c08f4019d112eec12a254586fe..55d506282cfd6cae33e1c7216f31cd0cf1628bdd 100644
--- a/src/app/shared/navbar/navbar.component.css
+++ b/src/app/shared/header/header.component.css
@@ -12,16 +12,21 @@
font-weight: normal;
text-overflow: ellipsis;
white-space: nowrap;
- padding: 16px;
- font-size: 15px;
+ padding: 2px;
+ font-size: 16px;
color: var(--p-gray-700);
}
-a {
+.intlogo {
text-decoration: none;
+ margin: 1px 1px 0px 53px;
}
-.intlogo{
- padding: 1px 30px 0px 53px;
+.title-link {
+ text-decoration: none;
+}
+
+.logo{
+ width: 105px;
color: #696969;
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/navbar/navbar.component.html b/src/app/shared/header/header.component.html
similarity index 64%
rename from src/app/shared/navbar/navbar.component.html
rename to src/app/shared/header/header.component.html
index d8e2edef2d89661da2843c080b124b7dae413358..82ab7fa9ee80f749f98f1abe56d191e52526862e 100644
--- a/src/app/shared/navbar/navbar.component.html
+++ b/src/app/shared/header/header.component.html
@@ -1,15 +1,15 @@
<a href="https://inclusivite-resin.grandlyon.com/" target="_blank" rel="noopener noreferrer" class="intlogo">
<p-image
src="images/resin.svg"
- alt="Image de présentation du quiz"
+ alt="Image du site principal Rés'in"
class="logo"
- [width] = "'120px'"
+ [width] = "'116px'"
/>
</a>
-<div class="navbar-divider">
+<div class="header-divider">
<p-divider layout="vertical" />
</div>
-<a href="quiz/accueil">
+<a href="jeu/accueil" class="title-link">
<h1 class="title">Inclusif, le jeu</h1>
-</a>
\ No newline at end of file
+</a>
diff --git a/src/app/shared/navbar/navbar.component.ts b/src/app/shared/header/header.component.ts
similarity index 59%
rename from src/app/shared/navbar/navbar.component.ts
rename to src/app/shared/header/header.component.ts
index d672fbc0c5733678152ca0a23883189830000fb9..e52de8164e48aee6be26957af7f0652232e1ca35 100644
--- a/src/app/shared/navbar/navbar.component.ts
+++ b/src/app/shared/header/header.component.ts
@@ -3,11 +3,11 @@ import { DividerModule } from 'primeng/divider';
import { ImageModule } from 'primeng/image';
@Component({
- selector: 'app-navbar',
+ selector: 'app-header',
imports: [ImageModule, DividerModule],
- templateUrl: './navbar.component.html',
- styleUrl: './navbar.component.css'
+ templateUrl: './header.component.html',
+ styleUrl: './header.component.css'
})
-export class NavbarComponent {
+export class HeaderComponent {
}
\ No newline at end of file
diff --git a/src/app/shared/services/answer-storage.service.ts b/src/app/shared/services/answer-storage.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d822272783a9df3d356b7a38679dac5535a2ff20
--- /dev/null
+++ b/src/app/shared/services/answer-storage.service.ts
@@ -0,0 +1,154 @@
+import { Injectable } from '@angular/core';
+import { navigation_data } from '../../app.component';
+import { BehaviorSubject } from 'rxjs';
+
+/* Service englobant le component "inclusif-cards" permettant de stocker les réponses des cartes, le temps restant, le numéro actuel et la catégorie actuelle.
+Il permet également de démarrer et d'arrêter le compte à rebours. */
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AnswerStorageService {
+
+ private answers: { [key: number]: boolean } = {}; // Stocke les réponses en utilisant le numéro de la carte comme clé
+ private etat_carte: {[key : number]: string} = {}; // Connait si une carte a déjà été visitée
+ private remainingTimeSubject: BehaviorSubject<number> = new BehaviorSubject<number>(1800); // Temps restant initial
+ public currentNumberSubject: BehaviorSubject<number> = new BehaviorSubject<number>(0); // Numéro actuel initial
+ private catSubject: BehaviorSubject<string> = new BehaviorSubject<string>(navigation_data.data[0]?.categorie ?? ''); // Catégorie initiale
+ private continue: boolean = true; // Indicateur pour continuer le compte à rebours
+ private categories: string[] = []; // Liste des catégories
+
+ constructor() {
+ // Initialise les réponses pour chaque carte à false
+ navigation_data.data.forEach((item, index) => {
+ this.answers[index] = false;
+ this.etat_carte[index] = 'non_repondu';
+ });
+ }
+
+ // Enregistre la réponse
+ setAnswer(cardNumber: number, answer: boolean): void {
+ this.answers[cardNumber] = answer;
+ }
+
+ // Récupère la réponse d'une carte
+ getAnswer(cardNumber: number): boolean {
+ return this.answers[cardNumber];
+ }
+
+ setRepondu(cardNumber: number): void {
+ this.etat_carte[cardNumber] = 'est_repondu'; // Marque la carte comme répondue
+ }
+
+ getEtat(cardNumber: number): string {
+ return this.etat_carte[cardNumber]; // Récupère si la carte a déjà été visitée
+ }
+
+ setCategories(): string[] {
+ /* Fonction permettant de récupérer toutes les catégories des cartes.
+ Si la liste des catégories est vide, elle est remplie en parcourant toutes les cartes.
+ Sinon, elle renvoie la liste des catégories. */
+ if (this.categories.length > 0) {
+ return this.categories;
+ } else {
+ navigation_data.data.forEach(item => {
+ if (!this.categories.includes(item.categorie)) {
+ this.categories.push(item.categorie);
+ }
+ });
+ return this.categories;
+ }
+ }
+
+ // Fonction permettant de récupérer la catégorie d'une carte en fonction de son numéro.
+ getCategorie(cardNumber: number): string {
+ return navigation_data.data[cardNumber].categorie;
+ }
+
+ // Récupère toutes les catégories
+ getCategories(): string[] {
+ return this.categories;
+ }
+
+
+
+ getPercentage(cardNumber: number): number {
+ /* Fonction permettant de calculer le pourcentage de progression pour une catégorie donnée.
+ Parcours toutes les cartes pour compter le nombre de cartes de la même catégorie que la carte actuelle.
+ Puis, calcule la position de la carte actuelle dans la liste des cartes de la même catégorie.
+ Enfin, retourne le pourcentage de progression. */
+ this.setCategories();
+ let compteur = 0;
+ let place = 0;
+ navigation_data.data.forEach(item => {
+ if (item.categorie === navigation_data.data[cardNumber].categorie) {
+ compteur++;
+ if (item.numero === cardNumber) {
+ place = compteur;
+ }
+ }
+ });
+ return (place / compteur) * 100;
+ }
+
+ // Récupère toutes les réponses
+ getAllAnswers(): { [key: number]: boolean } {
+ return this.answers;
+ }
+
+ // Récupère le temps restant en tant qu'observable
+ getRemainingTime() {
+ return this.remainingTimeSubject.asObservable();
+ }
+
+ // Définit le temps restant
+ setRemainingTime(time: number) {
+ this.remainingTimeSubject.next(time);
+ }
+
+ // Récupère le numéro actuel en tant qu'observable
+ getCurrentNumber() {
+ return this.currentNumberSubject.asObservable();
+ }
+
+ // Définit le numéro actuel
+ setCurrentNumber(number: number) {
+ this.currentNumberSubject.next(number);
+ }
+
+ // Récupère la catégorie en tant qu'observable
+ getCat() {
+ return this.catSubject.asObservable();
+ }
+
+ // Définit la catégorie
+ setCat(cat: string) {
+ this.catSubject.next(cat);
+ }
+
+
+ startTimer() {
+ /* Fonction permettant de démarrer le compte à rebours.
+ Utilise un intervalle pour décrémenter le temps restant toutes les secondes.
+ Lorsque le temps restant atteint 0, l'intervalle est effacé et une action est effectuée. */
+ this.continue = true;
+ const interval = setInterval(() => {
+ let currentTime = this.remainingTimeSubject.value;
+ if (this.continue) {
+ this.setRemainingTime(currentTime - 1);
+ } else {
+ clearInterval(interval);
+ }
+ }, 1000);
+ }
+
+ // Arrête le compte à rebours
+ stopTimer() {
+ this.continue = false;
+ this.setRemainingTime(1800);
+ }
+}
+
+
+
+
diff --git a/src/app/shared/user-service.ts b/src/app/shared/services/user-service.ts
similarity index 62%
rename from src/app/shared/user-service.ts
rename to src/app/shared/services/user-service.ts
index bd3e63c555cd1a7630ea187c15f6954531d8dfc7..8ccc14748a0d537774b06234af0fb97c54c9f0ac 100644
--- a/src/app/shared/user-service.ts
+++ b/src/app/shared/services/user-service.ts
@@ -13,13 +13,19 @@ class User {
addTask(task:Task){
this.tasks.push(task)
}
- removeTaskById(id:number){
- this.tasks.filter((e, i) => e.getId() !== id);
+ removeTaskById(id: number) {
+ this.tasks = this.tasks.filter((e) => e.getId() !== id);
+ }
+ hasTask(taskId: number): boolean {
+ return this.tasks.some(task => task.getId() === taskId);
+ }
+ getTask() : Task[]{
+ return this.tasks
}
}
-class Task{
+export class Task{
private id;
constructor(id:number){
this.id = id;
@@ -39,7 +45,6 @@ export class UserService {
private users : User[];
constructor() {
- console.log("init");
this.users = [];
}
@@ -59,6 +64,11 @@ export class UserService {
user.name = name;
user.email = email;
}
-
+ getUserByEmail(email: string): User | undefined {
+ return this.users.find(user => user.email === email);
+ }
+ getUsersWithTask(taskId: number): User[] {
+ return this.users.filter(user => user.hasTask(taskId)); // Filtrer les utilisateurs qui ont cette tâche
+ }
}
\ No newline at end of file
diff --git a/src/app/views/contexte/contexte.component.css b/src/app/views/contexte/contexte.component.css
index bff6ff769ce9e31453f41aab64b9d735bcc7fe58..e33dd01bedce965685528221aaaff1c1a24bb675 100644
--- a/src/app/views/contexte/contexte.component.css
+++ b/src/app/views/contexte/contexte.component.css
@@ -1,33 +1,66 @@
-.context{
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
-}
-
- .context h1 {
- font-size: 40px;
- font-weight: 400;
- }
-
- .context h3 {
- font-size: 30px;
- font-weight: 400;
- }
-
- .container{
- width: 600px;
- align-self: anchor-center;
- text-align: left;
- }
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.container{
+ width: 600px;
+ align-self: anchor-center;
+ text-align: left;
+}
+
+.container h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.container h3 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.container p{
- font-size: 20px;
- font-weight: 400;
+ font-size: 16px;
padding: 5px;
}
-.btn{
- justify-content: center;
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+::ng-deep .avance-button button {
+ width: 150px; /* Force the width */
+ height: 40px; /* Force the height */
+}
+
+.avance{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/contexte/contexte.component.html b/src/app/views/contexte/contexte.component.html
index 575e31a93342309518ca6ec81dd3f54e8ed2a5ed..7a872dcb8b53861cbbc34ca1ec65d24f14c975af 100644
--- a/src/app/views/contexte/contexte.component.html
+++ b/src/app/views/contexte/contexte.component.html
@@ -1,14 +1,27 @@
-<div class="context">
- <div class="container">
+<div class="container">
<h1>Inclusif, le jeu</h1>
- <h3>Contexte du jeu</h3>
- <p>L'inclusion numérique est une composante majeure de toute politique ou stratégie numérique.</p>
- <p>Elle permet de prendre en compte la diversité et les besoins des utilisateurs et utilisatrices des services numériques: sites web, applications mobiles, logiciels professionnels...</p>
- <p>Un des leviers de l'inclusion numérique est de rendre inclusifs les services numériques, c'est à dire accessibles et utilisables par toutes et tous.</p>
- <p>La Métropole de Lyon, dans sa volonté d'améliorer l'inclusivité de ses services numériques, a conçu ce jeu pour les équipes conceptrices, gestionnaires de contenus et en charge de la communication.</p>
- <p>Remarque: Les ressources ou exemples cités dans ce jeu n'engagent pas la Métropole de Lyon et n'impliquent pas son soutien envers les structures citées. Ces ressources ou exemples sont accessibles librement et ne servent qu'à illustrer les bonnes pratiques proposées.</p>
+ <h3>Déroulement du jeu</h3>
+
+ <p>Vous avez rassemblé une majorité des profils de l'équipe en charge du service, et avez 1h30 à 2 heures devant vous ? Parfait !<br>
+ <p>Voici les différentes étapes d’Inclusif, le jeu. </p>
+ <p>Avant de commencer : inscription des joueurs pour faciliter l'attribution des actions</p>
+ <p>1. Échauffement, grâce au Quiz en ligne - 5 à 10 minutes</p>
+ <p>2. Analyse globale de l'inclusivité de votre service numérique - 30 minutes</p>
+ <p>3. Découverte, sélection et attribution des solutions à mettre en œuvre - 40 minutes</p>
+
+</div>
+
+<div class="lower-section">
+ <p-divider/>
+
+ <!-- Bouton pour démarrer le jeu -->
+ <div class = "avance-button">
+ <p-button
+ class = "avance"
+ (click)="continuer()"
+ label = "Continuer"
+ severity="primary">
+ </p-button>
</div>
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
</div>
+
\ No newline at end of file
diff --git a/src/app/views/contexte/contexte.component.ts b/src/app/views/contexte/contexte.component.ts
index e5255a77ee2734cbf5219742b05da588a79e91d8..bdd69da699185b5151f122672768fa72d813f7b7 100644
--- a/src/app/views/contexte/contexte.component.ts
+++ b/src/app/views/contexte/contexte.component.ts
@@ -1,17 +1,17 @@
import { Component } from '@angular/core';
-import {Router } from '@angular/router';
+import { Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
+import { DividerModule } from 'primeng/divider';
@Component({
selector: 'app-contexte',
templateUrl: './contexte.component.html',
styleUrl: './contexte.component.css',
- imports: [ButtonModule]
+ imports: [ButtonModule, DividerModule]
})
export class ContexteComponent {
constructor(private router:Router) {}
continuer(){
- this.router.navigate(['./regles'])
+ this.router.navigate(['./enregistrement_utilisateur'])
}
}
diff --git a/src/app/views/homepage/homepage.component.css b/src/app/views/homepage/homepage.component.css
index f1e3ceccd23380e2d8b80054aac9b49736145a51..eeccb4456a5a562da30ee3337a325d9aaa34ad94 100644
--- a/src/app/views/homepage/homepage.component.css
+++ b/src/app/views/homepage/homepage.component.css
@@ -1,30 +1,65 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
.presentation-section {
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
- }
-
- .presentation-section h1 {
- font-size: 4em;
- font-weight: normal;
- }
- .presentation-section h2 {
- font-size: 2em;
- font-weight: normal;
- }
- .presentation-section p-image {
- margin: auto;
- }
-
- .presentation-section p {
- font-size: 1.5em;
- font-weight: normal;
- }
-
- .container{
- width: 600px;
- align-self: anchor-center;
- }
\ No newline at end of file
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ height: 100%;
+}
+
+.presentation-section h1 {
+ font-size: 28px;
+ font-weight: normal;
+}
+.presentation-section h2 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-bottom: 50px;
+}
+
+.presentation-section p {
+ font-size: 16px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+::ng-deep .start-button button {
+ width: 150px; /* Force the width */
+ height: 40px; /* Force the height */
+}
+
+.start{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+
+p, span {
+ line-height: 25px;
+}
\ No newline at end of file
diff --git a/src/app/views/homepage/homepage.component.html b/src/app/views/homepage/homepage.component.html
index d52304e86c179b37d195af4453b4cb4c002bdf79..c497167e8672bd71e9ed41f5d38ac4be96f8d82a 100644
--- a/src/app/views/homepage/homepage.component.html
+++ b/src/app/views/homepage/homepage.component.html
@@ -1,20 +1,29 @@
<div class="presentation-section">
- <div class="container">
- <h1>Inclusif, le jeu</h1>
- <h2>Concevons nos services numériques pour tout le monde !</h2>
- </div>
- <p-image
- src="images/banner.png"
- alt="Image de présentation du jeu"
- [imageStyle]="{ objectFit: 'contain' }"
- width="80%"
- />
- <div class="container">
- <p>Bienvenue sur Inclusif, le jeu.</p>
- <p>Ce jeu vous permet d’aborder de manière ludique les problèmes liés à l’inclusivité</p>
- </div>
- <p-button (click)="commencer()" severity="primary" >
- {{"Passer à l'action"}}
- </p-button>
+ <h1>Inclusif, le jeu</h1>
+ <h2>Concevons nos services numériques pour tout le monde !</h2>
+ <p-image
+ src="images/banner.png"
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="80%"
+ />
+ <p>
+ Bienvenue sur Inclusif, le jeu.
+ <br>
+ Ce jeu vous permet d’aborder de manière ludique les problèmes liés à l’inclusivité
+ </p>
+</div>
+
+<div class="lower-section">
+ <p-divider/>
+
+ <!-- Bouton pour démarrer le jeu -->
+ <div class = "start-button">
+ <p-button
+ class = "start"
+ (click)="commencer()"
+ label = "C'est parti !"
+ severity="primary">
+ </p-button>
</div>
+</div>
diff --git a/src/app/views/homepage/homepage.component.ts b/src/app/views/homepage/homepage.component.ts
index 95f0c5f5130dfd6d7de59660022ec04f9804dc77..e7663eefa512db8ea76fc9e5d714a56c42376a42 100644
--- a/src/app/views/homepage/homepage.component.ts
+++ b/src/app/views/homepage/homepage.component.ts
@@ -1,21 +1,23 @@
import { Component } from '@angular/core';
-import {Router } from '@angular/router';
+import { Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
import { ImageModule } from 'primeng/image';
+import { DividerModule } from 'primeng/divider';
+/* Composant permettant de gérer la page d'accueil.
+Il permet de rediriger l'utilisateur vers la page de contexte. */
@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrl: './homepage.component.css',
- imports: [ButtonModule, ImageModule]
+ imports: [ButtonModule, ImageModule, DividerModule]
})
export class HomepageComponent {
constructor(private router:Router) {}
commencer(){
- this.router.navigate(['./contexte'])
+ this.router.navigate(['./deroulement'])
}
}
diff --git a/src/app/views/inclusif-cards/inclusif-cards.component.css b/src/app/views/inclusif-cards/inclusif-cards.component.css
index c64a730e8e78b178c840db9f9299821d69e56e74..4f8796cc1ae108302636f335cd2878aeeb8b2a63 100644
--- a/src/app/views/inclusif-cards/inclusif-cards.component.css
+++ b/src/app/views/inclusif-cards/inclusif-cards.component.css
@@ -1,38 +1,48 @@
-/* General Container for the Navigation */
-.navigation-container {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 10px; /* Adds space between elements */
- }
-
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
- .theme-indicator {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: 20px;
- }
- .action-bar {
- display: flex;
- justify-content: center;
- margin: 20px 0;
- }
+.card-display {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+}
- .card-display {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- margin: 20px 0;
- }
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+ margin-top: 25px;
+ height:auto;
+}
- .divider{
- padding-bottom: 20px;
- }
-
-
\ No newline at end of file
+.avance-button {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+p, span {
+ line-height: 25px;
+}
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/inclusif-cards.component.html b/src/app/views/inclusif-cards/inclusif-cards.component.html
index b7e9cbd94efd98a223c1699daef2415e309a71e2..a64b132e4f0aa60016e2ccfb8a4ef5ac06ab9237 100644
--- a/src/app/views/inclusif-cards/inclusif-cards.component.html
+++ b/src/app/views/inclusif-cards/inclusif-cards.component.html
@@ -1,35 +1,35 @@
-<!-- <div class="theme-indicator">
- <app-theme-indicator [cat]="cat"></app-theme-indicator>
-</div>
--->
+<!-- Indicateur de progression des thèmes -->
+
+<div> 2. Analyse de l'inclusivité de votre service numérique - 30 minutes</div>
+<app-theme-indicator [id]="currentNumber"></app-theme-indicator>
<!-- Carte -->
<div class="card-display">
+ <!-- Composant de la carte de navigation avec solutions -->
<app-navigation-card-solutions
*ngIf="showCard"
[card_number]="currentNumber"
[card_answer]="currentAnswer"
- (answerChange)="currentAnswer = $event">
+ (answerChange)="onAnswerChange($event)">
</app-navigation-card-solutions>
</div>
-
-<p-divider class="divider" />
-
<!-- Barre d'action -->
-<div class="action-bar">
- <!-- Bouton de retour -->
- <div class="button-container" id="back-button">
- <app-navigation-button
- [carte_suivante]="false"
- (cardChange)="onCardChange($event)">
- </app-navigation-button>
- </div>
+<div class="lower-section">
+ <p-divider/>
+ <div class="avance-button">
+ <!-- Bouton de retour -->
+ <div class="button-container" id="back-button">
+ <app-navigation-button
+ [carte_suivante]="false">
+ </app-navigation-button>
+ </div>
+
+ <!-- Bouton suivant -->
+ <div class="button-container" id="next-button">
+ <app-navigation-button
+ [carte_suivante]="true"
+ [disabled]="answerStorage.getEtat(currentNumber) !== 'est_repondu'">
+ </app-navigation-button>
+ </div>
+ </div>
- <!-- Bouton suivant -->
- <div class="button-container" id="next-button">
- <app-navigation-button
- [carte_suivante]="true"
- (cardChange)="onCardChange($event)">
- </app-navigation-button>
- </div>
-</div>
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/inclusif-cards.component.ts b/src/app/views/inclusif-cards/inclusif-cards.component.ts
index af89f64304a2d7595eb01adb5096fc60d4c4b88b..13f7ca92bbb70a5ee449904f3e9aa461ccecc6dc 100644
--- a/src/app/views/inclusif-cards/inclusif-cards.component.ts
+++ b/src/app/views/inclusif-cards/inclusif-cards.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef, SimpleChanges} from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavigationButtonComponent } from './navigation-button/navigation-button.component';
import { ThemeIndicatorComponent } from './theme-indicator/theme-indicator.component';
@@ -6,13 +6,17 @@ import { ActivatedRoute, Router } from '@angular/router';
import { navigation_data } from '../../app.component';
import { NavigationCardComponent } from "./navigation-card/navigation-card.component";
import { Subscription } from 'rxjs';
-import { AnswerStorageService } from '../../answer-storage.service';
-import {DividerModule } from 'primeng/divider';
+import { AnswerStorageService } from '../../shared/services/answer-storage.service';
+import { DividerModule } from 'primeng/divider';
+/* Composant permettant de gérer intégralement les cartes diagnostic.
+Il permet de sélectionner une réponse pour chaque carte, et de naviguer entre les cartes.
+Il gère également l'affichage des images et du texte pour les questions ainsi que de la barre de progression
+Les réponses sont alors enregistrées dans un service : answer-storage.service */
@Component({
selector: 'app-inclusif-cards',
standalone: true,
- imports: [CommonModule, NavigationButtonComponent, NavigationCardComponent, DividerModule],
+ imports: [CommonModule, NavigationButtonComponent, NavigationCardComponent, DividerModule, ThemeIndicatorComponent],
templateUrl: './inclusif-cards.component.html',
styleUrls: ['./inclusif-cards.component.css'],
})
@@ -32,8 +36,7 @@ export class InclusifCardsComponent implements OnInit, OnDestroy {
constructor(
private router: Router,
private route: ActivatedRoute,
- private answerStorage: AnswerStorageService,
- private cdRef: ChangeDetectorRef
+ public answerStorage: AnswerStorageService,
) {}
ngOnInit(): void {
@@ -42,10 +45,13 @@ export class InclusifCardsComponent implements OnInit, OnDestroy {
const id = +params['id']; // Récupérer 'id' depuis les query params
if (id && id !== this.currentNumber && id >= 0 && id < navigation_data.data.length) {
+ console.log(id);
this.answerStorage.setCurrentNumber(id); // Mise à jour de currentNumber si le query param 'id' est valide
this.answerStorage.setCat(navigation_data.data[id]?.categorie ?? ''); // Mettre à jour la catégorie
this.currentNumber = id;
+ console.log(this.cat)
this.cat = navigation_data.data[id]?.categorie ?? '';
+ console.log(this.cat)
this.currentAnswer = this.answerStorage.getAnswer(id); // Mise à jour de la réponse associée à la carte
}
});
@@ -87,14 +93,9 @@ export class InclusifCardsComponent implements OnInit, OnDestroy {
this.answerStorage.stopTimer();
}
- onCardChange(newCardNumber: number): void {
- this.showCard = false;
- this.cdRef.detectChanges(); // Forcer la détection des changements
- setTimeout(() => {
- this.currentNumber = newCardNumber;
- this.currentAnswer = this.answerStorage.getAnswer(newCardNumber);
- this.showCard = true;
- this.cdRef.detectChanges(); // Forcer la détection des changements
- }, 0);
+ //Mise à jour du bouton suivant si une réponse est sélectionnée
+ onAnswerChange(answer: boolean): void {
+ this.answerStorage.setRepondu(this.currentNumber);
+
}
}
diff --git a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.css b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.css
index 11005321ac3e29a6a2040fa817d649b5e283304f..97c27a5182f92132c87a6743198244a3d9522399 100644
--- a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.css
+++ b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.css
@@ -2,7 +2,8 @@
.navigation-button{
border: none;
- padding: 10px 20px;
+ padding-left: 10px;
+ padding-right: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
@@ -43,4 +44,20 @@
::ng-deep .p-button:not(.p-button-secondary):active {
background-color: #ff5d5c;
border-color: #ff5d5c;
+}
+
+/* Désactivation du style du bouton lorsque désactivé */
+::ng-deep p-button > button:disabled {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
+}
+
+::ng-deep p-button > button:disabled:hover {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
+}
+
+::ng-deep p-button > button:disabled:active {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
}
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.html b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.html
index b79558793fda13e01daa5f57d00e37f104a15e5d..9700c46da2c3b4e83c1eaa678bfe5ab6a29da141 100644
--- a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.html
+++ b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.html
@@ -1,4 +1,5 @@
-
-<p-button (click)="changecard()" class="navigation-button" [severity]="carte_suivante ? null : 'secondary'">
+<!-- Bouton de navigation -->
+<p-button (click)="changecard()" class="navigation-button" [severity]="carte_suivante ? null : 'secondary'" [disabled]="disabled">
+ <!-- Affiche "Suivant" si carte_suivante est vrai, sinon affiche "Retour" -->
{{ carte_suivante ? 'Suivant' : 'Retour' }}
</p-button>
diff --git a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.ts b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.ts
index c9ad21a5e494fb0670f06e328696e1d30c9f3676..3ad6ebae04cecbdb107f9e98c27246c26f0a5d05 100644
--- a/src/app/views/inclusif-cards/navigation-button/navigation-button.component.ts
+++ b/src/app/views/inclusif-cards/navigation-button/navigation-button.component.ts
@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { navigation_data } from '../../../app.component';
-import { AnswerStorageService } from '../../../answer-storage.service';
+import { AnswerStorageService } from '../../../shared/services/answer-storage.service';
import { ChangeDetectorRef } from '@angular/core';
import { ButtonModule } from 'primeng/button';
+// Composant permettant de gérer les boutons de navigation entre les cartes inclusives.
@Component({
selector: 'app-navigation-button',
standalone: true,
@@ -18,12 +19,13 @@ export class NavigationButtonComponent {
@Input() currentNumber: number = 0;
@Input() cat!: string;
@Input() currentAnswer!: boolean;
+ @Input() disabled:boolean = false;
@Output() cardChange = new EventEmitter<number>();
@Output() catChange = new EventEmitter<string>();
@Output() answerChange = new EventEmitter<boolean>();
- constructor(private router: Router, private answerStorage: AnswerStorageService, private cdRef: ChangeDetectorRef) {
+ constructor(private router: Router, public answerStorage: AnswerStorageService, private cdRef: ChangeDetectorRef) {
this.answerStorage.getCurrentNumber().subscribe(number => {
this.currentNumber = number;
});
@@ -31,9 +33,15 @@ export class NavigationButtonComponent {
this.cat = cat;
});
}
-
- // Change de carte
- changecard() {
+
+
+ changecard()
+ /*
+ Fonction permettant de passer d'une carte diagnostic à une autre. Elle est reliée au bouton dans le html.
+ Met à jour la variable currentNumber, et l'incrémente ou la décrémente, et va mettre à jour la carte affichée. L'url est également
+ mise à jour pour refléter la nouvelle carte affichée.
+ Dans les cas limites (premiere ou derniere carte), redirige vers les pages correspondantes (régles pour solutions et analyse)
+ */ {
if (this.carte_suivante && this.currentNumber < navigation_data.data.length - 1) {
this.currentNumber += 1;
} else if (!this.carte_suivante && this.currentNumber > 0) {
@@ -46,7 +54,7 @@ export class NavigationButtonComponent {
return;
}
- //Mise à jour des valeurs
+ //Mise à jour des valeurs, envoyé vers le composant parent "inclusif cards".
this.cardChange.emit(this.currentNumber);
this.catChange.emit(this.cat);
this.answerChange.emit(this.currentAnswer);
@@ -54,7 +62,7 @@ export class NavigationButtonComponent {
this.answerStorage.setCurrentNumber(this.currentNumber);
this.answerStorage.setCat(this.cat);
- //Navigation à la carte suivante
+ //Navigation à la carte suivante lorsque la variable currentNumber est modifiée.
this.router.navigate(['cartes_inclusif', 'carte'], {
queryParams: { id: this.currentNumber }
});
diff --git a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.css b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.css
index 677784ed944bfa69ed540d19b37c8db45c88a257..a5b25ef78ec54666f5539b3884ae300c4e39b233 100644
--- a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.css
+++ b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.css
@@ -1,56 +1,44 @@
-
.card-container {
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
- padding: 20px;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.rounded-border {
+ border: 2px solid; /* La couleur sera définie dynamiquement via Angular */
+ border-radius: 15px; /* Rend la bordure arrondie */
+ padding: 10px; /* Ajoute de l'espace entre le texte et la bordure */
+ display: inline-block; /* S'assure que l'encadré s'adapte au contenu */
+ text-align: center; /* Centre le texte à l'intérieur */
+ white-space: nowrap;
+ margin-left: 10px;
}
.title-container {
display: flex;
align-items: center;
+ flex-direction: row;
justify-content: space-between;
+ height: 100%;
width: 100%;
- margin-top: 10px;
+ margin: auto;
}
.question-title {
font-size: 16px;
font-weight: bold;
- color: #0b4c31;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ text-align: center;
+ overflow: visible; /* Permet à l'encadré de s'adapter au texte */
+ text-overflow: clip; /* Supprime les ellipses si le texte dépasse */
+ white-space: nowrap; /* Empêche le texte de passer à la ligne */
font-family: 'Lato', sans-serif;
- width: 100%;
- padding-left: 10px;
-}
-
-.info-button {
- margin-left: 10px;
- margin-right: 20px;
- width: 32px;
- height: 32px;
- margin-bottom: 18px;
- transform: scale(0.75)
+ padding: 3px; /* Supprime tout padding supplémentaire */
}
-::ng-deep .p-button.p-button-info {
- background-color: #333333;
- border-color:#333333;
-}
-
-::ng-deep .p-button.p-button-info:hover{
- background-color: #4c4d53;
- border-color:#4c4d53 ;
-}
-
-::ng-deep .p-button.p-button-info:active{
- background-color: #696969;
- border-color:#696969 ;
-}
.card-image {
display: block;
@@ -62,7 +50,7 @@
/* Question Text Styling */
.question-text {
font-size: 24px;
- color: #0b4c31;
+ color: #333333;
text-align: left;
overflow: hidden;
word-wrap: break-word;
@@ -71,7 +59,6 @@
margin-bottom: 20px;
max-width: 100%;
height: auto;
- line-height: 1.3em;
padding: 0 10px;
font-weight: bold;
font-family: 'Lato', sans-serif;
@@ -98,7 +85,6 @@
margin-bottom: 20px;
max-width: 100%;
height: auto;
- line-height: 1.3em;
padding: 0 10px;
font-family: 'Lato', sans-serif;
}
@@ -134,6 +120,21 @@
box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
}
+.nothing {
+ display: flex;
+ align-content: center;
+ width: 600px;
+ height: 40px;
+ border: 1px solid #696969;
+ border-radius: 8px;
+ padding: 4px;
+ margin: 0 auto;
+ align-items: center;
+ word-wrap: break-word;
+ color: #333333;
+ margin-bottom: 16px;
+}
+
.not-clickable .radio {
pointer-events: none;
--p-radiobutton-icon-checked-color: #333333 !important;
@@ -164,6 +165,7 @@
.radioButton:hover {
border: 1px solid #333333;
box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
+ cursor: pointer;
}
.choice-text {
@@ -181,4 +183,14 @@
border-radius: 10px;
padding: 5px 10px;
color: #333333;
+ white-space:nowrap;
+ margin-right: 10px;
+}
+
+.red-timer {
+ color: red;
+}
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.html b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.html
index e40b5e6c510f3aa90d2909d9b63ca9b0f4a7ec68..b5c35d8b0462112cedfcd9f6a3c33bce9088c431 100644
--- a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.html
+++ b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.html
@@ -1,59 +1,63 @@
<div class="card-container">
+ <!-- Vérifie si les données de navigation existent pour le numéro de carte actuel -->
@if (Navdata['data'][card_number]) {
@let card = Navdata['data'][card_number];
<div class="title-container">
- <h3 class="question-title" [style.color]="card.textcolor">{{ card.nom }}</h3>
- <span class="remaining-time rounded-rectangle">{{formatTime(remainingTime)}}</span>
- <p-button class="info-button" icon="pi pi-info" [rounded]="true" severity="info" (click)="showDialog()"></p-button>
+ <!-- Affiche le titre de la question avec la couleur de texte spécifiée -->
+ <h3 class="question-title rounded-border"
+ [style.color]="card.textcolor"
+ [style.borderColor]="card.textcolor">
+ {{ card.nom }}
+ </h3>
+ <!-- Affiche le temps restant dans un rectangle arrondi -->
+ <span class="remaining-time rounded-rectangle" [ngClass] = "{'red-timer': remainingTime <=0}">{{formatTime(remainingTime)}}</span>
+
</div>
- <p-image src={{card.imageurl}} alt="{{ card.nom }}" [imageStyle]="{ objectFit: 'contain' }" class="card-image" width="600px" height="125px"></p-image>
+ <!-- Affiche l'image de la carte -->
+ <p-image src={{card.imageurl}} [imageStyle]="{ objectFit: 'contain' }" class="card-image" width="600px" height="125px"></p-image>
<div class="desc-button-container">
<div class="desc-container">
+ <!-- Affiche la question et la description de la carte -->
<p class="question-text">{{ card.question }}</p>
<p class="question-desc">{{ card.description }}</p>
</div>
- <label [ngClass]="{'radioButton': true, 'not-clickable': ngModel === 'Oui', 'clickable': ngModel !== 'Oui'}">
-
+ <!-- Bouton radio pour la réponse "Oui" -->
+ <label [ngClass]="{'radioButton': true, 'not-clickable': ngModel === 'Oui', 'clickable': ngModel !== 'Oui', 'nothing': ngModel !== 'Rien'}">
<p-radiobutton class="radio"
type="radio"
name="OuiNon"
value="Oui"
[(ngModel)]="ngModel"
- (click)="onAnswer(true)"
- >
+ (click)="onAnswer(true)">
</p-radiobutton>
-
<p class="choice-text">Oui</p>
-
</label>
- <label [ngClass]="{'radioButton': true, 'not-clickable': ngModel === 'Non', 'clickable': ngModel !== 'Non'}">
-
- <p-radiobutton class="radio"
+ <!-- Bouton radio pour la réponse "Non" -->
+ <label [ngClass]="{'radioButton': true, 'not-clickable': ngModel === 'Non', 'clickable': ngModel !== 'Non', 'nothing': ngModel !== 'Rien' }">
+ <p-radiobutton class="radio"
type="radio"
name="OuiNon"
value="Non"
[(ngModel)]="ngModel"
- (click)="onAnswer(false)"
- >
+ (click)="onAnswer(false)">
</p-radiobutton>
-
- <p class="choice-text">Non</p>
-
+ <p class="choice-text">Non (ou ne sait pas)</p>
</label>
</div>
}
</div>
-<p-dialog header="Règles du jeu" [(visible)]="displayDialog" [modal]="true" [closable]="false">
- <p>Ceci est un exemple</p>
- <div class="dialog-footer">
- <p-button label="Ok" icon="pi pi-check" (click)="hideDialog()"></p-button>
- </div>
-</p-dialog>
+<!-- Dialogue pour afficher le message lorsque le temps est écoulé -->
+<p-dialog header="Temps écoulé" [(visible)]="timeExpiredDialog" [modal]="true" [closable]="false">
+ <p>Le temps est écoulé, essayez de vous dépêcher pour passer à la suite.</p>
+ <div class="dialog-footer">
+ <p-button label="Ok" icon="pi pi-check" (click)="hideTimeExpiredDialog()"></p-button>
+ </div>
+</p-dialog>
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.ts b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.ts
index d38b581d7f581cd49cf9031a2766de57a693f721..8f599439683872755d1ea37861ca30bb4e486c28 100644
--- a/src/app/views/inclusif-cards/navigation-card/navigation-card.component.ts
+++ b/src/app/views/inclusif-cards/navigation-card/navigation-card.component.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy, SimpleChanges} from '@angular/core';
import { Router } from '@angular/router';
-import { AnswerStorageService } from '../../../answer-storage.service';
+import { AnswerStorageService } from '../../../shared/services/answer-storage.service';
import { ChangeDetectorRef } from '@angular/core';
import { navigation_data } from '../../../app.component';
import { RadioButtonModule } from 'primeng/radiobutton';
@@ -11,6 +11,9 @@ import { ButtonModule } from 'primeng/button';
import { DialogModule } from 'primeng/dialog';
import { Subscription } from 'rxjs';
+/* Composant permettant de gérer les cartes inclusives.
+Il permet de sélectionner une réponse pour chaque carte, et de naviguer entre les cartes.
+Il gère également l'affichage des images et du texte pour les questions */
@Component({
selector: 'app-navigation-card-solutions',
standalone: true,
@@ -22,25 +25,29 @@ export class NavigationCardComponent implements OnInit, OnDestroy {
@Input() card_number!: number; // Numéro de la carte
@Input() card_answer!: boolean; // Réponse de la carte
@Output() answerChange = new EventEmitter<boolean>();
-
+
allAnswers: { [key: number]: boolean } = {}; // Contient la réponse de chaque carte
Navdata = navigation_data; //Récupération des données des cartes
- ngModel = 'Non'; // Valeur par défaut pour le bouton radio
+ ngModel = 'Rien'; // Valeur par défaut pour les bouton radio
+
+ displayDialog = false; // Booléen pour afficher ou non la boîte de dialogue d'information "i"
+ timeExpiredDialog = false; // Booléen pour afficher ou non la boîte de dialogue lorsque le temps est écoulé
+
- displayDialog = false;
remainingTime: number = 0; // Temps restant
private timerSubscription: Subscription | undefined = undefined;
constructor(private router: Router, private answerStorage: AnswerStorageService, private cdRef: ChangeDetectorRef) {}
ngOnInit(): void {
- // Définir la valeur initiale de ngModel en fonction de card_answer
- this.ngModel = this.card_answer ? 'Oui' : 'Non';
// S'abonner au temps restant depuis le service
this.timerSubscription = this.answerStorage.getRemainingTime().subscribe(time => {
this.remainingTime = time;
+ if (this.remainingTime === 0) {
+ this.showTimeExpiredDialog();
+ }
});
console.log('NavigationCardComponent créé');
@@ -53,8 +60,38 @@ export class NavigationCardComponent implements OnInit, OnDestroy {
}
console.log('NavigationCardComponent détruit');
}
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['card_number']) {
+ const change = changes['card_number'];
+ const previousCardNumber = change.previousValue;
+ if (previousCardNumber !== change.currentValue) {
+ // Appel pour mettre à jour les dropdowns en fonction de la nouvelle carte
+ this.onCardChange(this.card_number);
+ }
+ }
+
+ }
+
+ onCardChange(newCardNumber: number): void {
+ //Met à jour la réponse dans les radiobuttons lorsqu'il y a un changement de carte
+ this.card_number = newCardNumber;
+ if (this.answerStorage.getEtat(this.card_number)=='est_repondu') {
+ this.ngModel = this.answerStorage.getAnswer(newCardNumber) ? 'Oui' : 'Non';
+ }
+ else {
+ this.ngModel = 'Rien'
+ }
+ }
+
onAnswer(answer: boolean): void {
+ /*
+ Fonction activée lorsqu'un radiobutton est sélectionné ("Oui" ou "Non").
+ Met à jour la réponse de la carte dans le service de stockage des réponses, et
+ émet un événement pour mettre à jour la réponse dans le parent.
+ */
+
this.card_answer = answer;
this.answerStorage.setAnswer(this.card_number, answer);
this.answerChange.emit(this.card_answer);
@@ -62,19 +99,52 @@ export class NavigationCardComponent implements OnInit, OnDestroy {
// Mettre à jour les valeurs de ngModel en fonction de la réponse sélectionnée
this.ngModel = answer ? 'Oui' : 'Non';
+
+ if (this.answerStorage.getEtat(this.card_number) == 'non_visite') {
+ this.answerStorage.setRepondu(this.card_number); // Marque la carte comme répondue
}
+}
showDialog(): void {
+ /*
+ Fonction activée lorsqu'on clique sur le bouton d'information "i".
+ Affiche la boîte de dialogue d'information.
+ */
this.displayDialog = true;
}
hideDialog(): void {
+ /* Fonction activée lorsqu'on clique sur le bouton "Fermer" de la boîte de dialogue d'information.
+ Cache la boîte de dialogue d'information.
+ */
this.displayDialog = false;
}
+ showTimeExpiredDialog(): void {
+ /*
+ Fonction activée lorsque le temps est écoulé.
+ Affiche la boîte de dialogue de temps écoulé.
+ */
+ this.timeExpiredDialog = true;
+ }
+
+ hideTimeExpiredDialog(): void {
+ /* Fonction activée lorsqu'on clique sur le bouton "Fermer" de la boîte de dialogue de temps écoulé.
+ Cache la boîte de dialogue de temps écoulé.
+ */
+ this.timeExpiredDialog = false;
+ }
+
formatTime(seconds: number): string {
+ /*
+ Fonction pour formater le temps restant en minutes et secondes.
+ */
+ const isNegative = seconds < 0;
+ seconds = Math.abs(seconds);
+
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
- return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+
+ return `${isNegative ? '-' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}
}
diff --git a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.css b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.css
index 17138fe4b71229332e1d7b0ffdf338ddebdb4ad4..90a07f958eafe2c05fb06e8d5f532bfd203e59c3 100644
--- a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.css
+++ b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.css
@@ -1,58 +1,163 @@
.theme-indicator-container {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
+ justify-content: center;
width: 100%;
+ margin-top: 25px;
}
-.progress-bar-container {
- position: relative;
+.ProgressBar {
+ display: flex;
+ flex-direction: row;
+ align-items: top;
width: 80%;
- margin-bottom: 10px;
- height: 20px;
- background-color: #ccc;
- border-radius: 10px;
}
-.progress-bar {
- height: 100%;
- background-color: #007bff;
- border-radius: 10px;
+.ProgressBar li {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ width: 100%;
+}
+
+.ProgressBar-wellFill {
+ border-radius: 10%;
+ background-color: #BDBDBD;
+ display: block;
+ height: 5px;
+ position: relative;
+ width: 100%;
+ top: -12px;
+ left: 50%;
+}
+
+.ProgressBar-icon {
+ width: 20px;
+ height: 20px;
+ background-color: #ffffff;
+ border-radius: 50%;
+ border: 4px solid #BDBDBD;
+ max-width: 100%;
+ z-index: 10;
+ position: relative;
+ transition: all .25s ease-out;
+ left: 45%;
}
-.dots {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- height: 0;
+.ProgressBar-span {
display: flex;
- justify-content: space-between;
- pointer-events: none;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background-color: #E9E9E9;
+ width: fit-content;
+ height: fit-content;
+ border-radius: 4px;
+ margin: auto;
+ padding: 2px 5px 2px 5px;
}
-.dot {
- width: 10px;
- height: 10px;
- background-color: #c70714;
+.ProgressBar-stepLabel {
+ font-size: 15px;
+ color: #696969;
+ width: 100%;
+ transition: all .25s ease-out;
+}
+
+.ProgressBar-wellFill-now{
+ border-radius: 10%;
+ background-color: #DA3635;
+ height: 5px;
+}
+
+.ProgressBar-icon-now {
+ width: 20px;
+ height: 20px;
+ background-color: #ffffff;
border-radius: 50%;
- position: absolute;
- transform: translateX(-50%) translateY(-50%);
+ border: 4px solid #DA3635;
+ max-width: 100%;
+ z-index: 10;
+ position: relative;
+ transition: all .25s ease-out;
+ left: 45%;
}
-.dot.active {
- background-color: #007bff;
+.ProgressBar-span-now {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background-color: #FFE5E4;
+ width: fit-content;
+ height: fit-content;
+ border-radius: 4px;
+ margin: auto;
+ padding: 2px 5px 2px 5px;
}
-.category-labels {
+.ProgressBar-stepLabel-now {
+ font-size: 15px;
+ color: #DA3635;
+ width: 100%;
+ transition: all .25s ease-out;
+}
+
+.ProgressBar-wellFill-before{
+ border-radius: 10%;
+ background-color: #1D8844;
+ display: block;
+ height: 5px;
+ position: relative;
+ width: 100%;
+ top: -12px;
+ left: 50%;
+}
+
+.ProgressBar-icon-before {
+ width: 20px;
+ height: 20px;
+ background-color: #1D8844;
+ border-radius: 50%;
+ max-width: 100%;
+ z-index: 10;
+ position: relative;
+ transition: all .25s ease-out;
+ left: 45%;
+}
+
+.ProgressBar-span-before {
display: flex;
- justify-content: space-between;
- width: 80%;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background-color: #EEFFE4;
+ width: fit-content;
+ height: fit-content;
+ border-radius: 4px;
+ margin: auto;
+ padding: 2px 5px 2px 5px;
}
-.category-label {
- flex: 1;
- text-align: center;
- font-size: 14px;
- font-weight: bold;
+
+.ProgressBar-stepLabel-before {
+ font-size: 15px;
+ color: #1D8844;
+ width: 100%;
+ transition: all .25s ease-out;
+}
+
+.ProgressBar-wellFill-void{
+ border-radius: 10%;
+ background-color: #ffffff;
+ display: block;
+ height: 5px;
+ position: relative;
+ width: 100%;
+ top: -35px;
+ left: 50%;
}
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.html b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.html
index 1b3150b249a6eac095b5503a47b443d9084e5678..bd36554d19326c521417e4bfbdc50b26adf9641e 100644
--- a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.html
+++ b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.html
@@ -1,15 +1,64 @@
<div class="theme-indicator-container">
- <div class="progress-bar-container">
- <div class="progress-bar" [style.width.%]="progressValue"></div>
- <div class="dots">
- <div *ngFor="let category of categories; let i = index"
- class="dot"
- [class.active]="cat === category"
- [style.left.%]="(i / (categories.length - 1)) * 100">
+ <ol class="ProgressBar">
+ <!-- Boucle sur chaque catégorie pour afficher les étapes de progression -->
+ @for (categorie of categories; track $index) {
+ <!-- Vérifie si la catégorie actuelle correspond à la catégorie de la carte -->
+ @if (cat === categorie) {
+ <li class="ProgressBar">
+ <!-- Icône de progression actuelle -->
+ <svg class="ProgressBar-icon-now"><use xlink:href="#checkmark-bold"/></svg>
+ <div class="ProgressBar-wellFill">
+ <!-- Barre de progression pour la catégorie actuelle -->
+ <div class="ProgressBar-wellFill-now" [style.width.%]="percentage">
+ <span class="void"></span>
+ </div>
+ </div>
+ <div class="ProgressBar-span-now">
+ <!-- Affiche le nom de la catégorie actuelle -->
+ <span class="ProgressBar-stepLabel-now">{{categories[$index]}}</span>
+ </div>
+ </li>
+ }
+ <!-- Vérifie si l'index de la catégorie est inférieur à l'index de la catégorie actuelle -->
+ @else if ($index < index_cat) {
+ <li class="ProgressBar">
+ <!-- Icône de progression précédente -->
+ <svg class="ProgressBar-icon-before"><use xlink:href="#checkmark-bold"/></svg>
+ <div class="ProgressBar-wellFill-before">
+ <span class="void"></span>
+ </div>
+ <div class="ProgressBar-span-before">
+ <!-- Affiche le nom de la catégorie précédente -->
+ <span class="ProgressBar-stepLabel-before">{{categories[$index]}}</span>
+ </div>
+ </li>
+ }
+ <!-- Pour toutes les autres catégories -->
+ @else {
+ <li class="ProgressBar">
+ <!-- Icône de progression future -->
+ <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
+ <div class="ProgressBar-wellFill">
+ <span class="void"></span>
+ </div>
+ <div class="ProgressBar-span">
+ <!-- Affiche le nom de la catégorie future -->
+ <span class="ProgressBar-stepLabel">{{categories[$index]}}</span>
+ </div>
+ </li>
+ }
+ }
+
+ <!-- Dernière étape de la progression -->
+ <li class="ProgressBar">
+ <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
+ <div class="ProgressBar-wellFill-void">
+ <span class="void"></span>
+ </div>
+ <div class="ProgressBar-span">
+ <!-- Affiche "Fin" pour indiquer la fin de la progression -->
+ <span class="ProgressBar-stepLabel"> Fin </span>
</div>
- </div>
- </div>
- <div class="category-labels">
- <span *ngFor="let category of categories" class="category-label">{{ category }}</span>
- </div>
+ </li>
+ </ol>
</div>
\ No newline at end of file
diff --git a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.ts b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.ts
index c504c5f9b1058d898b0dd81d9275319b25bc0ee1..fd443048b7dc06f108d9d3a437038291315b2e28 100644
--- a/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.ts
+++ b/src/app/views/inclusif-cards/theme-indicator/theme-indicator.component.ts
@@ -1,6 +1,9 @@
import { CommonModule } from '@angular/common';
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
+import { AnswerStorageService } from '../../../shared/services/answer-storage.service';
+/* Composant permettant de gérer l'indicateur de progression des catégories.
+Il permet d'afficher la progression de l'utilisateur pour chaque catégorie de manière dynamique. */
@Component({
selector: 'app-theme-indicator',
standalone: true,
@@ -9,31 +12,31 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
styleUrls: ['./theme-indicator.component.css']
})
export class ThemeIndicatorComponent implements OnChanges {
- @Input() cat!: string;
+ @Input() id: number = 0; // Identifiant de la carte actuelle
+ answerStorageService: AnswerStorageService = inject(AnswerStorageService); // Injection du service
+ index_cat: number = 0; // Index de la catégorie actuelle
+ percentage: number = 0; // Pourcentage de progression
+ cat: string = this.answerStorageService.getCategorie(this.id); // Catégorie actuelle
+ categories: string[] = this.answerStorageService.getCategories(); // Liste des catégories
- categories: string[] = [
- 'Gestion de projet',
- 'Expérience utilisateur',
- 'Interface utilisateur',
- 'Développement',
- 'Editorial'
- ];
-
- progressValue: number = 0;
+ ngOnInit(): void {
+ this.updateProgress(); // Met à jour la progression lors de l'initialisation du composant
+ }
ngOnChanges(changes: SimpleChanges): void {
- if (changes['cat']) {
- this.updateProgress();
+ if (changes['id']) {
+ this.updateProgress(); // Met à jour la progression lorsque la carte change
}
}
updateProgress(): void {
- const index = this.categories.indexOf(this.cat);
- if (index !== -1) {
- this.progressValue = (index / (this.categories.length - 1)) * 100;
- } else {
- this.progressValue = 0;
- }
-}
+ /* Fonction permettant de mettre à jour la barre de progression en fonction de la catégorie de la carte.
+ Récupère la catégorie de la carte, puis récupère l'index de cette catégorie dans le tableau des catégories.
+ Enfin, récupère le pourcentage de progression pour cette
+ catégorie et l'affiche dans la barre de progression. */
+ this.cat = this.answerStorageService.getCategorie(this.id);
+ this.index_cat = this.categories.indexOf(this.cat);
+ this.percentage = this.answerStorageService.getPercentage(this.id);
+ }
}
\ No newline at end of file
diff --git a/src/app/views/rules-analysis/rules-analysis.component.css b/src/app/views/rules-analysis/rules-analysis.component.css
index decc1c6df0519a8e5009ceb3d09c1dbef878fff4..1fed93dc867df5b6e7c6be153e912025ebcdb3e2 100644
--- a/src/app/views/rules-analysis/rules-analysis.component.css
+++ b/src/app/views/rules-analysis/rules-analysis.component.css
@@ -1,31 +1,69 @@
-.rules-analysis{
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
-}
-
- .rules-analysis h1 {
- font-size: 40px;
- font-weight: 400;
- }
-
- .rules-analysis h3 {
- font-size: 30px;
- font-weight: 400;
- padding-top: 5px;
- padding-bottom: 10px;
- }
-
- .rules-analysis .container{
- width: 600px;
- align-self: anchor-center;
- text-align: left;
- }
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.container{
+ width: 600px;
+ align-self: anchor-center;
+ text-align: left;
+}
+
+.container h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.container h3 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.container p{
- font-size: 20px;
- font-weight: 400;
+ font-size: 16px;
padding: 5px;
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ position: relative;
+ bottom:0em;
+ width: 100%;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+
+/* Commenté car nouveau label ne rentre pas
+::ng-deep .avance-button button {
+ width: 150px;
+ height: 40px;
+}
+*/
+.avance{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/rules-analysis/rules-analysis.component.html b/src/app/views/rules-analysis/rules-analysis.component.html
index 4c487817bdb9a10c9d7ea1e864e0e5dde6e6f45c..0257259629230815a0b65a9ffbc95cdc1b2a67ce 100644
--- a/src/app/views/rules-analysis/rules-analysis.component.html
+++ b/src/app/views/rules-analysis/rules-analysis.component.html
@@ -1,15 +1,23 @@
-<div class="rules-analysis">
- <div class="container">
+<div class="container">
<h1>Inclusif, le jeu</h1>
- <h3>Étape d'analyse</h3>
- <p>Le but de l'étape d'analyse est de vous permettre d'évaluer l'inclusivité globale de votre projet ou service numérique.</p>
- <p>Pour ce faire, les questions seront réparties en 5 grands thèmes et 12 catégories d'analyse.</p>
- <p>Votre objectif, à cette étape, est de définir si, pour chacune des 12 catégories d'analyse, votre projet ou service numérique respecte les grands principes d'inclusivité.</p>
- <p>Dans le cas où la question ne vous évoque rien, répondez non.</p>
- <p>À la fin de cette étape, vous aurez une vision d'ensemble sur l'inclusivité de votre projet ou service.</p>
- </div>
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
+ <h3>2. Analyse de l'inclusivite de votre service numérique</h3>
+
+ <p>Le but de cette étape est de vous permettre d’analyser l’inclusivité globale actuelle de votre service numérique.</p>
+ <p>Pour cela, vous allez répondre à une dizaine de questions portant sur différents domaines d’application de l’inclusivité numérique. <br>
+ À la fin de cette étape, vous aurez une vision d’ensemble sur l’inclusivité de votre service.</p>
+ <p> <strong>A savoir</strong> : un outil d’évaluation détaillée est disponible dans la <a target ="_blank" href="https://inclusivite-resin.grandlyon.com/ressources/" target="_blank">ressourcerie du jeu</a>, pour évaluer plus finement votre service après l’application des bonnes pratiques</p>
</div>
+<div class="lower-section">
+ <p-divider/>
+
+ <!-- Bouton pour démarrer le jeu -->
+ <div class = "avance-button">
+ <p-button
+ class = "avance"
+ (click)="continuer()"
+ label = "Commencer l'analyse"
+ severity="primary">
+ </p-button>
+ </div>
+</div>
diff --git a/src/app/views/rules-analysis/rules-analysis.component.ts b/src/app/views/rules-analysis/rules-analysis.component.ts
index 32cfc845738e823b4003ffaea196d1c96bf148c1..bf8be629179448bb8872d6d25594dd10f7a7dded 100644
--- a/src/app/views/rules-analysis/rules-analysis.component.ts
+++ b/src/app/views/rules-analysis/rules-analysis.component.ts
@@ -1,11 +1,13 @@
import { Component } from '@angular/core';
import {Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
+import { DividerModule } from 'primeng/divider';
+/* Composant permettant de gérer la page des règles pour les cartes diagnostic
+Il permet de rediriger l'utilisateur vers la page des cartes diagnostic. */
@Component({
selector: 'app-rules-analysis',
- imports: [ButtonModule],
+ imports: [ButtonModule, DividerModule],
templateUrl: './rules-analysis.component.html',
styleUrl: './rules-analysis.component.css'
})
diff --git a/src/app/views/rules-conclusion/rules-conclusion.component.css b/src/app/views/rules-conclusion/rules-conclusion.component.css
index 71306f716423e4e894ea584bd5825389c5dbf6a3..ca09d0b34df648d3d5c04010d54a6c11bd36e8fa 100644
--- a/src/app/views/rules-conclusion/rules-conclusion.component.css
+++ b/src/app/views/rules-conclusion/rules-conclusion.component.css
@@ -1,31 +1,86 @@
-.rules-conclusion{
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
-}
-
- .rules-conclusion h1 {
- font-size: 40px;
- font-weight: 400;
- }
-
- .rules-conclusion h3 {
- font-size: 30px;
- font-weight: 400;
- padding-top: 5px;
- padding-bottom: 10px;
- }
-
- .rules-conclusion .container{
- width: 600px;
- align-self: anchor-center;
- text-align: left;
- }
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.container{
+ width: 600px;
+ align-self: anchor-center;
+ text-align: left;
+}
+
+.container h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.container h3 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.container p{
- font-size: 20px;
- font-weight: 400;
+ font-size: 16px;
padding: 5px;
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+.button-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin: auto;
+ gap: 20px;
+}
+::ng-deep .button-container button {
+ width: 300px; /* Force the width */
+ height: 40px; /* Force the height */
+}
+
+.avance{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+::ng-deep .p-button.p-button-secondary {
+ background-color: #FFFFFF ;
+ color: #333333;
+ border: 1px solid #333333 !important;
+
+}
+
+::ng-deep .p-button.p-button-secondary:hover {
+ background-color: #e9e9e9 ;
+}
+
+::ng-deep .p-button.p-button-secondary:active {
+ background-color: #f4f4f4 ;
+}
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/rules-conclusion/rules-conclusion.component.html b/src/app/views/rules-conclusion/rules-conclusion.component.html
index 7569aef1c2e2c2d6fbf0cd3bf5325229e1a59cbb..814292caf7f6991109a54640662b4834936fbcc2 100644
--- a/src/app/views/rules-conclusion/rules-conclusion.component.html
+++ b/src/app/views/rules-conclusion/rules-conclusion.component.html
@@ -1,13 +1,62 @@
-<div class="rules-conclusion">
- <div class="container">
+<div class="container">
<h1>Inclusif, le jeu</h1>
<h3>Conclusion</h3>
- <p>Vous voilà à la fin de la session.</p>
- <p>Le chef de projet peut maintenant aller sur la fiche liste d'actions, cocher les actions que chaque participant devra mettre en place.</p>
- <p>Tous les participants peuvent répondre au questionnaire de satisfaction sur le site.</p>
- </div>
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
+
+ <p>Vous voilà à la fin de la session.</p>
+ <p>Le chef de projet peut maintenant aller sur la fiche liste d'actions, cocher les actions que chaque participant devra mettre en place.</p>
+ <p>Tous les participants peuvent répondre au <a target ="_blank" href="https://services.formulaireextranet.grandlyon.com/dinsi/inclusif-le-jeu-questionnaire-de-satisfaction/">questionnaire de satisfaction</a> sur le site.</p>
</div>
+<div>
+ <table id="excel-table" [hidden]="true">
+ <thead>
+ <tr>
+ <th>Nom</th>
+ <th>Email</th>
+ <!-- Ajoute les colonnes de tâches dynamiquement -->
+ <th *ngFor="let taskIndex of maxTaskIndexes">Tâche {{taskIndex + 1}}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let user of users">
+ <td>{{user.name}}</td>
+ <td>{{user.email}}</td>
+ <!-- Ajoute les données des tâches dynamiquement-->
+ <td *ngFor="let task of user.getTask(); let i = index">
+ {{task.id}}
+ </td>
+ <!-- Remplir les colonnes vides si il a moins de tâches que le nombre maxi parmi les utilisateurs -->
+ <td *ngFor="let empty of emptyColumns(user.getTask().length)"></td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="lower-section">
+ <p-divider/>
+
+ <div class = "button-container">
+ <!-- Bouton pour remplir le questionnaire -->
+ <a target="_blank" href="https://services.formulaireextranet.grandlyon.com/dinsi/inclusif-le-jeu/">
+ <p-button
+ severity="secondary"
+ label="Remplir le questionnaire de fin de session" >
+ </p-button>
+ </a>
+
+ <!-- Bouton pour obtenir le récap -->
+ <p-button
+ label="Obtenir le récap"
+ severity="primary"
+ (click)="exportexcel()">
+ </p-button>
+
+ <!-- Bouton pour aller à la ressourcerie -->
+ <a target ="_blank" href="https://inclusivite-resin.grandlyon.com/ressources/">
+ <p-button
+ label="Aller à la ressourcerie"
+ severity="secondary" >
+ </p-button>
+ </a>
+ </div>
+</div>
diff --git a/src/app/views/rules-conclusion/rules-conclusion.component.ts b/src/app/views/rules-conclusion/rules-conclusion.component.ts
index ca0e49e848ebb0418a918de3b43b7748cd5f5ad9..60ae4ce0bb6b5d660a0a81b3bcc746c59f416b80 100644
--- a/src/app/views/rules-conclusion/rules-conclusion.component.ts
+++ b/src/app/views/rules-conclusion/rules-conclusion.component.ts
@@ -1,17 +1,65 @@
import { Component } from '@angular/core';
import {Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
+import { DividerModule } from 'primeng/divider';
+import * as XLSX from 'xlsx';
+import { CommonModule } from '@angular/common';
+import { UserService } from '../../shared/services/user-service';
+import { navigation_data_solutions } from "../../app.component";
@Component({
selector: 'app-rules-conclusion',
- imports: [ButtonModule],
+ imports: [ButtonModule, DividerModule, CommonModule],
templateUrl: './rules-conclusion.component.html',
styleUrl: './rules-conclusion.component.css'
})
export class RulesConclusionComponent {
- constructor(private router:Router) {}
- continuer(){
- this.router.navigate(['./accueil'])
- }
+ users: any;
+ maxTaskIndexes: number[] = [];
+ constructor(private router:Router, private service: UserService) {}
+
+ ngOnInit(): void {
+ // Récupération de tous les utilisateurs
+ this.users = this.service.getUsers();
+
+ // Chargement du JSON
+ const answersData = navigation_data_solutions.data;
+
+ // Remplacement des IDs des tâches par les noms des catégories et des tâches, pour meilleur affichage dans l'excel
+ this.users.forEach((user: any) => {
+ if (user.getTask) {
+ const tasks = user.getTask();
+ tasks.forEach((task: any) => {
+ const taskData = answersData.find((data: any) => data.id === task.getId());
+ if (taskData) {
+ task.id = `${taskData.categorie} - ${taskData.titre}`;
+ }
+ });
+ }
+ });
+
+ // Calcul du nombre maximum de tâches parmi tous les utilisateurs
+ const maxTasks = Math.max(...this.users.map((user: any) => user.getTask().length));
+ this.maxTaskIndexes = Array.from({ length: maxTasks }, (_, i) => i);
+ }
+
+ /* Fonction pour ajouter des colonnes vides pour les utilisateurs qui n'ont pas de tâches */
+ emptyColumns(taskCount: number): number[] {
+ const maxTasks = this.maxTaskIndexes.length;
+ return Array.from({ length: maxTasks - taskCount });
+ }
+
+ /* Fonction pour exporter les données au format Excel */
+ exportexcel(): void {
+ let element = document.getElementById('excel-table');
+ const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
+
+ const wb: XLSX.WorkBook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+
+ // Nom du fichier
+ XLSX.writeFile(wb, 'Resultats_JEU.xlsx');
+ }
+
+
}
diff --git a/src/app/views/rules-repartition/rules-repartition.component.css b/src/app/views/rules-repartition/rules-repartition.component.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/views/rules-repartition/rules-repartition.component.html b/src/app/views/rules-repartition/rules-repartition.component.html
deleted file mode 100644
index b620bc104c302e76f761bec673581199776f8e2f..0000000000000000000000000000000000000000
--- a/src/app/views/rules-repartition/rules-repartition.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<p>Vous avez désormais une liste de solutions à mettre en place. Vous pouvez les attribuer aux membres de l'équipe.<br>
- Chaque participant choisit un jeton pour le représenter.<br>
- Revenez sur chaque solution et décidez ensemble quel membre de votre équipe devra la mettre en place. Sur chaque carte solution, placez le jeton représentant le membre de l'équipe qui doit la réaliser.<br>
- À la fin de cette étape, vous obtenez une liste de choses à faire pour chaque membre de votre équipe.<br>
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
diff --git a/src/app/views/rules-repartition/rules-repartition.component.ts b/src/app/views/rules-repartition/rules-repartition.component.ts
deleted file mode 100644
index 1b2c0f1e2105abb38935a4ad26dfc9c86271752d..0000000000000000000000000000000000000000
--- a/src/app/views/rules-repartition/rules-repartition.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import {Router } from '@angular/router';
-import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
-
-@Component({
- selector: 'app-rules-repartition',
- imports: [ButtonModule],
- templateUrl: './rules-repartition.component.html',
- styleUrl: './rules-repartition.component.css'
-})
-export class RulesRepartitionComponent {
- constructor(private router:Router) {}
- continuer(){
- this.router.navigate(['./MODIFIER_POUR_LE_BON'])
- }
-}
diff --git a/src/app/views/rules-solutions/rules-solutions.component.css b/src/app/views/rules-solutions/rules-solutions.component.css
index dc401d054076b8a1298087dcf8c50865266515d6..86859f0d1158c79e90a960e55bce7373fe63afc3 100644
--- a/src/app/views/rules-solutions/rules-solutions.component.css
+++ b/src/app/views/rules-solutions/rules-solutions.component.css
@@ -1,31 +1,65 @@
-.rules-solutions{
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
-}
-
- .rules-solutions h1 {
- font-size: 40px;
- font-weight: 400;
- }
-
- .rules-solutions h3 {
- font-size: 30px;
- font-weight: 400;
- padding-top: 5px;
- padding-bottom: 10px;
- }
-
- .rules-solutions .container{
- width: 600px;
- align-self: anchor-center;
- text-align: left;
- }
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.container{
+ width: 600px;
+ align-self: anchor-center;
+ text-align: left;
+}
+
+.container h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.container h3 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.container p{
- font-size: 20px;
- font-weight: 400;
+ font-size: 16px;
padding: 5px;
-}
\ No newline at end of file
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+::ng-deep .avance-button button {
+ width: 350px; /* Force the width */
+ height: 40px; /* Force the height */
+}
+
+.avance{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+p, span {
+ line-height: 25px;
+}
diff --git a/src/app/views/rules-solutions/rules-solutions.component.html b/src/app/views/rules-solutions/rules-solutions.component.html
index 00f70c3aeba24091be5b6fb8aca9d003dabf3366..65e65177f48db81efcf95aa7f99bd070eca04640 100644
--- a/src/app/views/rules-solutions/rules-solutions.component.html
+++ b/src/app/views/rules-solutions/rules-solutions.component.html
@@ -1,14 +1,24 @@
-<div class="rules-solutions">
- <div class="container">
+<div class="container">
<h1>Inclusif, le jeu</h1>
- <h3>Solutions</h3>
- <p>Vous avez réalisé une première évaluation de votre projet ou service numérique: à présent, choisissez les solutions concrètes à mettre en place pour chaque catégorie d'analyse jugée peu ou pas inclusive.</p>
- <p>Cliquez sur les catégories pour lesquelles il y a eu des réponses négatives et regardez les cartes solutions correspondantes. Chaque carte présente une solution concrète à mettre en œuvre.</p>
- <p>Lisez attentivement les cartes, et sélectionnez celles que vous choisissez de mettre en œuvre.</p>
- <p>Faites la même chose pour chaque catégorie du plateau. À la fin de cette étape, vous obtenez une liste de solutions concrètes à mettre en œuvre pour rendre votre projet ou service numérique plus inclusif.</p>
+ <h3>3. Découverte et sélection des solutions à mettre en oeuvre</h3>
+
+ <p>Vous avez réalisé un premier diagnostic de votre service numérique : bravo ! <br> A présent, identifiez les solutionsà mettre en place pour chaque action que vous avez peu ou pas réalisée.</p>
+ <p>Pour chaque catégorie déclarée comme insuffisamment prise en compte précédemment (réponse « non (ou ne sait pas) »), lisez attentivement les cartes, et sélectionnez celles que vous choisissez de mettre en place en dessous de la pièce de catégorie correspondante.</p>
+ <p>À la fin de cette étape, vous obtiendrez une liste de solutions concrètes à mettre en place pour rendre votre service numérique plus inclusif.</p>
+</div>
+
+
+<div class="lower-section">
+ <p-divider/>
+
+ <!-- Bouton pour démarrer le jeu -->
+ <div class = "avance-button">
+ <p-button
+ class = "avance"
+ (click)="continuer()"
+ label = "Commencer la découverte des solutions"
+ severity="primary">
+ </p-button>
</div>
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
</div>
diff --git a/src/app/views/rules-solutions/rules-solutions.component.ts b/src/app/views/rules-solutions/rules-solutions.component.ts
index 3a7d3cab8de6b963ac96e1d149849eb964be9251..c7187cfe8cff80ab9eedeebc39bd8a14ddc43245 100644
--- a/src/app/views/rules-solutions/rules-solutions.component.ts
+++ b/src/app/views/rules-solutions/rules-solutions.component.ts
@@ -1,16 +1,45 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import {Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from '../../shared/action-bar/action-bar.component';
+import { navigation_data_solutions } from "../../app.component";
+import { navigation_data } from '../../app.component';
+import { AnswerStorageService } from '../../shared/services/answer-storage.service';
+import { DividerModule } from 'primeng/divider';
@Component({
selector: 'app-rules-solutions',
- imports: [ButtonModule],
+ imports: [ButtonModule, DividerModule],
templateUrl: './rules-solutions.component.html',
styleUrl: './rules-solutions.component.css'
})
-export class RulesSolutionsComponent {
- constructor(private router:Router) {}
+
+export class RulesSolutionsComponent implements OnInit {
+ matchingIds: number[] = [];
+ theme_currentNumber = 0;
+ ngOnInit(): void {
+ // Récupérer les query params lors de l'initialisation du composant
+ const answers: { [key: number]: boolean } = this.awnser_service.getAllAnswers();
+ const result2 = Object.keys(answers).filter(key => !answers[+key]);
+ // Liste pour stocker les IDs correspondants dans navigation_data_solutions
+
+ // Trouver les noms associés aux IDs trouvés dans navigation_data
+ const correspondingNames = result2.map(id => navigation_data.data[+id]?.nom).filter(nom => nom !== undefined);
+
+ // Parcourir navigation_data_solutions pour trouver les IDs qui correspondent aux sous_catégories
+ this.matchingIds = navigation_data_solutions.data
+ .filter(item => correspondingNames.includes(item.sous_categorie))
+ .map(item => item.id);
+ }
+ constructor(private router:Router,public awnser_service:AnswerStorageService) {}
continuer(){
- this.router.navigate(['./regles_conclusion'])
+ this.router.navigate(['./solution'], {
+ queryParams: { numero: this.matchingIds[0]},
+ queryParamsHandling: 'merge', // Merge avec les paramètres existants
+ skipLocationChange: false // Mettre à jour l'URL dans la barre d'adresse
+ })
+ this.router.navigate(['./solution'], {
+ queryParams: { numero: this.matchingIds[0]},
+ queryParamsHandling: 'merge', // Merge avec les paramètres existants
+ skipLocationChange: false // Mettre à jour l'URL dans la barre d'adresse
+ })
}
}
diff --git a/src/app/views/rules/rules.component.css b/src/app/views/rules/rules.component.css
index 9ed6e943b4529250fb51d967987555687cefcadb..0a93c1eeb3b13343cbe2cc386650b0ee41f216c7 100644
--- a/src/app/views/rules/rules.component.css
+++ b/src/app/views/rules/rules.component.css
@@ -1,31 +1,89 @@
-.rules{
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding-top: 4%;
- height: 100%;
- text-align: center;
-}
-
- .rules h1 {
- font-size: 40px;
- font-weight: 400;
- }
-
- .rules h3 {
- font-size: 30px;
- font-weight: 400;
- padding-top: 5px;
- padding-bottom: 10px;
- }
-
- .rules .container{
- width: 600px;
- align-self: anchor-center;
- text-align: left;
- }
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.container{
+ width: 600px;
+ align-self: anchor-center;
+ text-align: left;
+}
+
+.container h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.container h3 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.container p{
- font-size: 20px;
- font-weight: 400;
+ font-size: 16px;
padding: 5px;
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ position: relative;
+ bottom:0em;
+ width: 100%;
+}
+
+.start-div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+.faire-quiz{
+ margin-left: 16px;
+ margin-right: 16px;
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+.passer-quiz{
+ margin-left: 16px;
+ margin-right: 16px;
+ --p-button-primary-active-background: #f4f4f4;
+ --p-button-primary-hover-background: #e9e9e9;
+}
+
+/* Commenté car ne fait pas rentrer le nouveau label */
+/*
+::ng-deep .faire-quiz button {
+ width: 150px;
+}
+
+::ng-deep .passer-quiz button {
+ width: 150px;
+}
+*/
+
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/rules/rules.component.html b/src/app/views/rules/rules.component.html
index 550bfe2bac3d848706ad90477f196d00c3af9165..70541a42d4a41dd53828dcee0f2d5ab3d45933ce 100644
--- a/src/app/views/rules/rules.component.html
+++ b/src/app/views/rules/rules.component.html
@@ -1,15 +1,29 @@
-<div class="rules">
- <div class="container">
+<div class="container">
<h1>Inclusif, le jeu</h1>
- <h3>Quiz</h3>
- <p>Pour commencer, découvrez le sujet de l'inclusivité numérique en répondant à un quiz.</p>
- <p>Cet échauffement vous permet d'évaluer les connaissances du groupe sur l'inclusion numérique et d'identifier la répartition des savoirs entre les participants.</p>
- <p>Si vous en ressentez le besoin après cet échauffement, vous pouvez consulter l'annexe de ce site pour en savoir plus sur l'inclusion et l'accessibilité numérique.</p>
+ <h3>1. Échauffement : Quiz ! </h3>
+
+ <p>Pour commencer, découvrez le sujet de l'inclusivité numérique en répondant à un quiz.</p>
+ <p>Cet échauffement vous permet d'évaluer les connaissances du groupe sur l'inclusion numérique et d'identifier la répartition des savoirs entre les participants.</p>
+ <p>Si vous en ressentez le besoin après cet échauffement, vous pouvez consulter l'annexe de ce site pour en savoir plus sur l'inclusion et l'accessibilité numérique.</p>
+</div>
+
+<div class="lower-section">
+ <p-divider/>
+
+ <div class="start-div">
+ <p-button
+ class = "passer-quiz"
+ (click)="continuer()"
+ severity="secondary"
+ variant="outlined">
+ Ne pas faire le quiz
+ </p-button>
+ <a href="https://inclusivite-resin.grandlyon.com/quiz/accueil" target="_blank" rel="noopener noreferrer">
+ <p-button
+ class = "faire-quiz"
+ severity="primary">
+ Commencer le quiz
+ </p-button>
+ </a>
</div>
- <p-button (click)="continuer()" severity="secondary" >
- {{"Passer le quiz"}}
- </p-button>
- <p-button (click)="continuer()" severity="primary" >
- {{"En avant !"}}
- </p-button>
</div>
\ No newline at end of file
diff --git a/src/app/views/rules/rules.component.ts b/src/app/views/rules/rules.component.ts
index ff7ca1848ef742ef67f58b3b7db5f1062aa45f2c..63ff0e189451e80b47adda43271aea099611387e 100644
--- a/src/app/views/rules/rules.component.ts
+++ b/src/app/views/rules/rules.component.ts
@@ -1,24 +1,23 @@
import { Component } from '@angular/core';
import {Router } from '@angular/router';
import { ButtonModule } from 'primeng/button';
-import { ActionBarComponent } from "../../shared/action-bar/action-bar.component";
+import { DividerModule } from 'primeng/divider';
@Component({
selector: 'app-rules',
- imports: [ButtonModule],
+ imports: [ButtonModule, DividerModule],
templateUrl: './rules.component.html',
styleUrl: './rules.component.css'
})
+
+/* Composant permettant de gérer la page des règles.
+Il permet de rediriger l'utilisateur vers la page d'enregistrement ou vers le quiz. */
+
export class RulesComponent {
constructor(private router:Router) {}
continuer(){
- this.router.navigate(['./enregistrement_utilisateur']);
+ this.router.navigate(['./regles_analyse']);
}
- startQuiz(){
-
- this.router.navigate(['./cartes_inclusif']);
- console.log("Quiz started");
- }
}
diff --git a/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.css b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe25d8d9e1c36ed1579c8c635400266dd69713f3
--- /dev/null
+++ b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.css
@@ -0,0 +1,44 @@
+.navigation-button{
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+::ng-deep p-button > button {
+ width: 150px ;
+ height: 40px ;
+}
+
+/* Pour le bouton retour*/
+::ng-deep .p-button.p-button-secondary {
+ background-color: #FFFFFF ;
+ color: #333333;
+ border: 1px solid #333333 !important;
+
+}
+
+::ng-deep .p-button.p-button-secondary:hover {
+ background-color: #e9e9e9 ;
+}
+
+::ng-deep .p-button.p-button-secondary:active {
+ background-color: #f4f4f4 ;
+}
+
+
+/*Style bouton suivant */
+::ng-deep .p-button:not(.p-button-secondary):hover {
+ background-color: #cd2524;
+ border-color: #cd2524;
+}
+
+
+::ng-deep .p-button:not(.p-button-secondary):active {
+ background-color: #ff5d5c;
+ border-color: #ff5d5c;
+}
\ No newline at end of file
diff --git a/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.html b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..38a43615d8594337a7c8e949dd774475e551c0f9
--- /dev/null
+++ b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.html
@@ -0,0 +1,4 @@
+
+<p-button (click)="changeCard()" class="navigation-button" [severity]="avance ? null : 'secondary'">
+ {{ avance ? 'Suivant' : 'Retour' }}
+</p-button>
\ No newline at end of file
diff --git a/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.ts b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25062d6237a55b4d6d7ce9963072d0204fbdeed2
--- /dev/null
+++ b/src/app/views/solutions/navigation-button-solutions/navigation-button-solutions.component.ts
@@ -0,0 +1,109 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { navigation_data_solutions } from '../../../app.component';
+import {ActivatedRoute, Router } from '@angular/router';
+import { AnswerStorageService } from '../../../shared/services/answer-storage.service';
+import { navigation_data } from '../../../app.component';
+import { Subscription } from 'rxjs';
+import { ButtonModule } from 'primeng/button';
+@Component({
+ selector: 'app-navigation-button-solutions',
+ standalone: true,
+ imports: [CommonModule, ButtonModule],
+ templateUrl: './navigation-button-solutions.component.html',
+ styleUrls: ['./navigation-button-solutions.component.css']
+})
+export class NavigationButtonSolutionsComponent implements OnInit{
+ constructor(private router:Router,private awnser_service:AnswerStorageService,private route: ActivatedRoute) {}
+ private routeSubscription: Subscription | undefined = undefined;
+ applyFilters(): void {
+ this.router.navigate(['/solutions'], { queryParams: { numero: '0', awnsered: 'false' } });
+ }
+ @Input() indice_reponse: number=0;
+ Navdata = navigation_data_solutions;
+ @Input() avance!: boolean;
+
+ @Input() cat!: string
+ matchingIds: number[] = [];
+ @Output() cardChange = new EventEmitter<number>();
+ @Output() catChange = new EventEmitter<string>();
+ @Output() themeChange = new EventEmitter<number>();
+ theme_currentNumber: number = 0;
+ currentNumber: number = 0;
+ ngOnInit(){
+ this.routeSubscription = this.route.queryParams.subscribe(params => {
+ const id = +params['numero']; // Récupérer 'id' depuis les query params
+ if (id && id !== this.currentNumber && id >= 0 && id < navigation_data_solutions.data.length) {
+ this.currentNumber = id; // Mise à jour de currentNumber si le query param 'id' est valide
+ this.cat = navigation_data_solutions.data[this.currentNumber]?.categorie; // Mettre à jour la catégorie
+ }
+
+ this.router.navigate([], {
+ queryParams: { numero: ''+this.currentNumber},
+ queryParamsHandling: 'merge', // Merge avec les paramètres existants
+ skipLocationChange: false // Mettre à jour l'URL dans la barre d'adresse
+ });
+ });
+ const answers: { [key: number]: boolean } = this.awnser_service.getAllAnswers();
+ const result2 = Object.keys(answers).filter(key => !answers[+key]);
+ this.matchingIds = [];
+
+ // Trouver les noms associés aux IDs trouvés dans navigation_data
+ const correspondingNames = result2.map(id => navigation_data.data[+id]?.nom).filter(nom => nom !== undefined);
+
+ // Parcourir navigation_data_solutions pour trouver les IDs qui correspondent aux sous_catégories
+ this.matchingIds = navigation_data_solutions.data
+ .filter(item => correspondingNames.includes(item.sous_categorie))
+ .map(item => item.id);
+
+ // Convert users data to options in the required format
+ this.indice_reponse= this.matchingIds.indexOf(this.currentNumber );
+ this.cat = navigation_data_solutions.data[this.currentNumber]?.categorie;
+ this.catChange.emit(this.cat);
+ const sous_categorie = navigation_data_solutions.data[this.currentNumber-1]?.sous_categorie;
+ this.theme_currentNumber = navigation_data.data.find(item => item.nom === sous_categorie)?.numero ?? 0;
+ this.themeChange.emit(this.theme_currentNumber-1);
+ }
+ updateQueryParams(): void {
+ this.router.navigate([], {
+ queryParams: { numero: ''+this.currentNumber},
+ queryParamsHandling: 'merge', // Merge avec les paramètres existants
+ skipLocationChange: false // Mettre à jour l'URL dans la barre d'adresse
+ });
+ }
+
+ // Changement de carte
+ changeCard() {
+
+ this.indice_reponse=this.matchingIds.indexOf(this.currentNumber);
+ if (this.avance && this.indice_reponse<this.matchingIds.length-1) {
+ this.indice_reponse =this.indice_reponse+1;
+ this.currentNumber= this.matchingIds[this.indice_reponse];
+ this.cat = navigation_data_solutions.data[this.currentNumber]?.categorie;
+
+ // Trouver l'ID dans navigation_data qui correspond à cette catégorie
+
+ this.updateQueryParams();
+ }else if(this.avance && this.indice_reponse==this.matchingIds.length-1){
+ this.router.navigate(['regles_conclusion'])
+ }else if (!this.avance && this.indice_reponse > 0 ) {
+ this.indice_reponse = this.indice_reponse-1;
+ this.currentNumber= this.matchingIds[this.indice_reponse];
+ this.cat = navigation_data_solutions.data[this.currentNumber]?.categorie;
+ this.updateQueryParams();
+ }
+ else if(!this.avance){
+ this.router.navigate(['regles_solutions'])
+ }
+ else{
+ this.cat = navigation_data_solutions.data[this.indice_reponse]?.categorie;
+ }
+
+ this.cardChange.emit(this.indice_reponse); //Mise a jour des paramètres
+ this.catChange.emit(this.cat);
+ const sous_categorie = navigation_data_solutions.data[this.currentNumber-1]?.sous_categorie;
+ this.theme_currentNumber = navigation_data.data.find(item => item.nom === sous_categorie)?.numero ?? 0;
+ this.themeChange.emit(this.theme_currentNumber-1);
+ }
+
+}
diff --git a/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.css b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..1148efafec972c9667b1b3e9477d1a7ad56793da
--- /dev/null
+++ b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.css
@@ -0,0 +1,219 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f7f7f7;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ align-self: flex-start; /* Place la carte en haut de son conteneur */
+ width: 300px;
+}
+
+.card-container {
+ background: none; /* Supprime le fond blanc */
+ width: auto; /* Ajuste la largeur selon le contenu */
+ padding: 0; /* Supprime l'espace intérieur */
+ border-radius: 0; /* Supprime les coins arrondis */
+ box-shadow: none; /* Supprime l'ombre */
+ border: none; /* Supprime la bordure supérieure */
+ position: static; /* Réinitialise la position */
+ text-align: left;
+ align-items: center;
+ width: 600px;
+
+}
+
+
+.tags {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ margin-bottom: 15px;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.tag {
+ font-size: 12px;
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-weight: bold;
+}
+
+
+.planning {
+ color: #eb6539;
+ font-size: 16px;
+}
+
+h2 {
+ font-size: 20px;
+ margin-bottom: 30px;
+}
+
+.content {
+ list-style-type: none;
+ padding: 0;
+}
+
+.content li {
+ margin-bottom: 30px;
+ font-size: 14px;
+}
+
+.highlight {
+ border-color: #0073E9;
+ border-width: 2px;
+ border-style: solid;
+ padding: 10px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ text-align:center;
+ margin-top: 15px;
+ color: #0073E9;
+ margin-bottom: 5px;
+}
+.image {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ max-height: 150px; /* Maximum height */
+ width: auto; /* Maintain aspect ratio */
+ align-items: center;
+ text-align: center;
+ margin-left:12%;
+ margin-right:12%;
+}
+
+.highlight-logo img {
+ width: 40px;
+ height: 40px;
+ border-radius: 5px;
+ margin-right: 10px;
+}
+
+.highlight-text {
+ font-size: 13px;
+}
+
+.dropdown-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+}
+
+.remove-button {
+ position: absolute;
+ right: -30px; /* Adjust this value as needed */
+ background: none;
+ border: none;
+ color: red;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.custom-dropdown {
+ flex: 1;
+}
+
+/* Other existing styles */
+.button-container {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+}
+
+button {
+ flex: 1;
+ padding: 10px;
+ border: none;
+ font-size: 16px;
+ font-weight: bold;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: 0.3s ease-in-out;
+}
+
+/* Style du menu déroulant */
+.dropdown {
+ background-color: #4caf50; /* Même couleur que le bouton Oui */
+ color: white;
+ border: none;
+ padding: 10px;
+ font-size: 16px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-bottom: 500px;
+}
+
+/* Changement de couleur au survol */
+.dropdown:hover {
+ background-color: #45a049;
+}
+
+.page-number {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #f47342;
+ color: white;
+ width: 25px;
+ height: 25px;
+ text-align: center;
+ line-height: 25px;
+ font-size: 14px;
+ font-weight: bold;
+ border-radius: 50%;
+}
+.comparison-container {
+ display: flex;
+ justify-content: space-between;
+ width: 200px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.comparison-label {
+ font-size: 14px;
+ font-weight: bold;
+ padding: 5px 15px;
+ border-radius: 5px;
+}
+
+.bad {
+ margin-left:120px ;
+ color: red;
+ background-color: rgba(255, 0, 0, 0.1);
+ align-self: flex-start;
+}
+
+.good {
+ margin-left: 125px;
+ color: green;
+ background-color: rgba(0, 255, 0, 0.1);
+}
+
+.rounded-rectangle {
+ border: 2px solid #ccc;
+ border-radius: 10px;
+ padding: 5px 10px;
+ color: #333333;
+ white-space:nowrap;
+ justify-content: space-between;
+}
+
+.contenu{
+ line-height: 30px;
+}
+.espace{
+ margin-top: 20px;
+}
+.rounded-rectangle2 {
+ border: 2px solid #ccc;
+ border-radius: 10px;
+ padding: 5px 10px;
+ white-space:nowrap
+}
\ No newline at end of file
diff --git a/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.html b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..84a279dbddc4fe4b4786c007b495bbe97aedc3cf
--- /dev/null
+++ b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.html
@@ -0,0 +1,54 @@
+<div class="card-container">
+
+ @if (Navdata['data'][card_number-1]) {
+ @let card = Navdata['data'][card_number-1];
+ <div class="tags">
+ <div class="rounded-rectangle2" [style.borderColor]="card.textcolor"><span class="tag planning" [style.color]="card.textcolor">{{ card.sous_categorie }}</span></div>
+ <span class="remaining-time rounded-rectangle" [ngClass] = "{'red-timer': remainingTime <=0}">{{formatTime(remainingTime)}}</span>
+ </div>
+
+ <h2 class="category-title">{{ card.titre }} </h2>
+ <div class="contenu">
+ @if(card.contenu.length > 1){<ul>
+ @for( item of card.contenu; track $index){
+ <li >{{ item }}</li>}
+ </ul>}
+ @if(card.contenu.length == 1){
+ <p>{{ card.contenu[0] }}</p>}</div>
+ <div class="imagewrapper">
+ @if(card.image){
+ @if('images/solution_' + card.id + '.png'){
+ <img class="image" [src]="'images/solution_' + card.id + '.png'">}
+ @if(card.image_comparaison){
+
+ }
+
+ }
+ </div>
+ <!--@if(card.source?.nom){<div class="highlight">
+ <div class="highlight-text">
+ <strong>{{ card.source?.nom }}</strong><br>
+ {{ card.source?.description }}
+ </div>
+ </div>}-->
+
+ <label for="dropdown"><div class="espace">Qui s'en occupe?</div></label>
+ @for(dropdown of dropdowns; track $index){
+ <div class="dropdown-wrapper">
+ <p-dropdown
+ [options]="getFilteredOptions($index)"
+ [(ngModel)]="dropdown.selectedOption"
+ placeholder="Choisissez une option"
+ (onChange)="onDropdownChange($index)"
+ class="custom-dropdown"
+ [filter]="true"
+ [showClear]="true"
+ [scrollHeight]="'150px'">
+ </p-dropdown>
+ @if ($index>0){
+ <button (click)="removeDropdown($index)" class="remove-button">X</button>}
+ </div>}
+ @if(dropdowns[dropdowns.length - 1].selectedOption && hasRemainingOptions()){
+ <button (click)="addDropdown()">Ajouter un autre</button>}
+}
+</div>
\ No newline at end of file
diff --git a/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.spec.ts b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbd25ce87c22a94d08b694bde7028bd300b119fa
--- /dev/null
+++ b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationCardSolutionsComponent } from './navigation-card-solutions.component';
+
+describe('NavigationCardSolutionsComponent', () => {
+ let component: NavigationCardSolutionsComponent;
+ let fixture: ComponentFixture<NavigationCardSolutionsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavigationCardSolutionsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(NavigationCardSolutionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.ts b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7dda478149fd0eab925da56e6370049f729005c
--- /dev/null
+++ b/src/app/views/solutions/navigation-card-solutions/navigation-card-solutions.component.ts
@@ -0,0 +1,213 @@
+import { Component, EventEmitter, Input, Output, OnInit, SimpleChanges, OnChanges, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { DropdownModule } from 'primeng/dropdown';
+import { UserService } from '../../../shared/services/user-service';
+import { navigation_data_solutions } from '../../../app.component';
+import { Task } from '../../../shared/services/user-service';
+import { CommonModule } from '@angular/common';
+import { AnswerStorageService } from '../../../shared/services/answer-storage.service';
+import { Subscription } from 'rxjs';
+@Component({
+ selector: 'app-navigation-card-solutions',
+ standalone: true,
+ imports: [DropdownModule, FormsModule, CommonModule],
+ templateUrl: './navigation-card-solutions.component.html',
+ styleUrls: ['./navigation-card-solutions.component.css'],
+})
+export class NavigationCardSolutionsComponent implements OnInit, OnChanges, OnDestroy {
+ @Input() card_number!: number;
+ @Output() answer = new EventEmitter<string>();
+ previousCardNumber: number | null = null;
+ previousDropdownValues: string[] = [];
+ Navdata = navigation_data_solutions;
+ options: { label: string, value: string }[] = [];
+ dropdowns: { selectedOption: string }[] = [{ selectedOption: '' }];
+ timeExpiredDialog = false; // Booléen pour afficher ou non la boîte de dialogue lorsque le temps est écoulé
+
+
+ remainingTime: number = 0; // Temps restant
+ private timerSubscription: Subscription | undefined = undefined;
+
+ constructor(private router: Router, public service: UserService, private answerStorage: AnswerStorageService) {}
+
+ ngOnInit(): void {
+ // Charger les utilisateurs dans les options du dropdown
+ this.options = this.service.getUsers().map(user => ({
+ label: user.name, // User's name as label
+ value: user.email // User's email as value
+ }));
+ this.timerSubscription = this.answerStorage.getRemainingTime().subscribe(time => {
+ this.remainingTime = time;
+ if (this.remainingTime === 0) {
+ this.showTimeExpiredDialog();
+ }
+ });
+ // S'abonner au temps restant depuis le service
+ this.timerSubscription = this.answerStorage.getRemainingTime().subscribe(time => {
+ this.remainingTime = time;
+ });
+
+
+ // Démarrer le compte à rebours
+ this.answerStorage.startTimer();
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['card_number']) {
+ const change = changes['card_number'];
+ this.previousCardNumber = change.previousValue;
+ if (this.previousCardNumber !== change.currentValue) {
+ // Appel pour mettre à jour les dropdowns en fonction de la nouvelle carte
+ this.updateDropdownsForNewCard();
+ }
+ }
+ }
+ ngOnDestroy(): void {
+ // Éviter les fuites de mémoire
+ if (this.timerSubscription) {
+ this.timerSubscription.unsubscribe();
+ }
+ console.log('NavigationCardComponent détruit');
+ }
+
+ updateDropdownsForNewCard(): void {
+ const cardId = this.Navdata['data'][this.card_number - 1]?.id;
+
+ if (cardId !== undefined) {
+ const assignedUsers = this.service.getUsersWithTask(cardId);
+
+ if (assignedUsers.length > 0) {
+ // Si des utilisateurs ont la tâche, remplir les dropdowns avec leurs emails
+ this.dropdowns = assignedUsers.map(user => ({ selectedOption: user.email }));
+ } else {
+ // Sinon, réinitialiser les dropdowns
+ this.dropdowns = [{ selectedOption: '' }];
+ }
+ } else {
+ // Réinitialiser les dropdowns si l'ID de la carte est introuvable
+ this.dropdowns = [{ selectedOption: '' }];
+ }
+ }
+
+ onDropdownChange(index: number): void {
+ const currentSelectedEmail = this.dropdowns[index]?.selectedOption;
+ const previousSelectedEmail = this.previousDropdownValues[index];
+ this.previousDropdownValues[index] = currentSelectedEmail;
+ // Si la sélection actuelle est vide et que l'ancienne sélection n'est pas vide, on retire la tâche
+ if (!currentSelectedEmail && previousSelectedEmail) {
+ this.removeTaskFromUser(index, previousSelectedEmail); // Retirer la tâche de l'utilisateur précédent
+ }
+
+ // Si l'utilisateur actuel est sélectionné, on lui assigne la tâche
+ if (currentSelectedEmail) {
+ this.assignTaskToUser(index);
+ }
+ }
+
+ assignTaskToUser(index: number): void {
+ const selectedEmail = this.dropdowns[index]?.selectedOption;
+
+ if (!selectedEmail) {
+ return;
+ }
+
+ const user = this.service.getUserByEmail(selectedEmail);
+ const cardId = this.Navdata['data'][this.card_number - 1]?.id;
+
+ if (user && cardId !== undefined) {
+ if (!user.hasTask(cardId)) {
+ // Si l'utilisateur n'a pas encore la tâche, on l'ajoute.
+ user.addTask(new Task(cardId));
+ } else {
+ }
+ } else {
+ }
+ }
+ showTimeExpiredDialog(): void {
+ /*
+ Fonction activée lorsque le temps est écoulé.
+ Affiche la boîte de dialogue de temps écoulé.
+ */
+ this.timeExpiredDialog = true;
+ }
+
+ addDropdown(): void {
+ this.dropdowns.push({ selectedOption: '' });
+ }
+
+ removeDropdown(index: number): void {
+ const previousSelectedEmail = this.previousDropdownValues[index];
+ this.removeTaskFromUser(index,previousSelectedEmail);
+ this.dropdowns.splice(index, 1);
+ }
+ removeTaskFromUser(index: number, email: string): void {
+ const user = this.service.getUserByEmail(email);
+
+ // Vérifier si l'utilisateur existe
+ if (!user) {
+ return;
+ }
+
+ // Récupérer l'ID de la carte actuelle
+ const cardId = this.Navdata['data'][this.card_number - 1]?.id;
+ if (cardId === undefined) {
+ return;
+ }
+
+ // Supprimer la tâche si l'utilisateur l'a
+ if (user.hasTask(cardId)) {
+ user.removeTaskById(cardId);
+ } else {
+ }
+ }
+
+ getFilteredOptions(index: number): { label: string, value: string }[] {
+ // Récupère toutes les options possibles
+ let availableOptions = [...this.options];
+
+ // Récupère toutes les valeurs sélectionnées sauf pour le dropdown actuel
+ const selectedValues = this.dropdowns
+ .filter((_, i) => i !== index)
+ .map(d => d.selectedOption)
+ .filter(val => val !== ''); // Évite de filtrer les valeurs vides
+
+ // Retourne uniquement les options qui ne sont pas encore sélectionnées
+ return availableOptions.filter(option => !selectedValues.includes(option.value));
+ }
+
+ updateQueryParams(): void {
+ // Update query parameters with card_answer
+ this.router.navigate([], {
+ queryParamsHandling: 'merge',
+ skipLocationChange: false,
+ });
+ }
+
+ handleMissingImage(event: any): void {
+ event.target.style.display = 'none'; // Cache l'image si elle n'existe pas (pas utilisé car avec l'implémentation de error, il trouve l'image si elle existe mais ne l'affiche pas ¯\_(ツ)_/¯ )
+ }
+
+ hasRemainingOptions(): boolean {
+ const selectedOptions = this.dropdowns.map(dropdown => dropdown.selectedOption);
+ return this.options.some(option => !selectedOptions.includes(option.value));
+ }
+ hideTimeExpiredDialog(): void {
+ /* Fonction activée lorsqu'on clique sur le bouton "Fermer" de la boîte de dialogue de temps écoulé.
+ Cache la boîte de dialogue de temps écoulé.
+ */
+ this.timeExpiredDialog = false;
+ }
+ formatTime(seconds: number): string {
+ /*
+ Fonction pour formater le temps restant en minutes et secondes.
+ */
+ const isNegative = seconds < 0;
+ seconds = Math.abs(seconds);
+
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+
+ return `${isNegative ? '-' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+ }
+}
diff --git a/src/app/views/solutions/solutions.component.css b/src/app/views/solutions/solutions.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..5691c9179e34b52bdf8fe06cfd5be7b9cbf9cfe0
--- /dev/null
+++ b/src/app/views/solutions/solutions.component.css
@@ -0,0 +1,89 @@
+:host{
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ align-items: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+}
+
+.upper-div-solution {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ height: auto;
+}
+/* Card Display Area Styling */
+.card-display {
+ margin-top: 9px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+ box-sizing: border-box;
+ text-align: center;
+ width: 100%;
+}
+
+app-theme-indicator {
+ margin-bottom: 10px; /* Adds spacing between the first element and the row */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 120%;
+ height: auto;
+ padding: 0px;
+}
+
+/* Additional styling for card content */
+.card-display app-navigcard {
+ margin-top: 20px; /* Ajuste la marge haute pour éviter un trop grand espace */
+ align-self: flex-start; /* Place la carte en haut de son conteneur */
+ display: block;
+ font-size: 14px;
+ color: #333;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.lower-div-solution {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+ margin-top: 25px;
+ height:auto;
+}
+
+/* Theme Indicator Styling */
+.theme-indicator {
+ margin-bottom: 10px; /* Adds spacing between the first element and the row */
+}
+
+/* Styling for Button Containers */
+.button-container {
+ margin: 0 10px; /* Adjust for consistent spacing */
+}
+
+.action-bar {
+ display: flex;
+ justify-content: center;
+ margin: 0px 0;
+ bottom:0px;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+.titre{
+ text-align:center;
+}
\ No newline at end of file
diff --git a/src/app/views/solutions/solutions.component.html b/src/app/views/solutions/solutions.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2c5a7e16834014fbed320a1988b55e567fb8827
--- /dev/null
+++ b/src/app/views/solutions/solutions.component.html
@@ -0,0 +1,40 @@
+<div class ="upper-div-solution">
+ <div class="titre">3. Découverte et sélection des solutions - 40 minutes</div>
+ <!-- Theme Indicator -->
+ <app-theme-indicator [id]="theme_currentNumber"></app-theme-indicator>
+ <!-- Card Number Display -->
+ <div class="card-display">
+ <app-navigation-card-solutions [card_number]="currentNumber"></app-navigation-card-solutions>
+ </div>
+</div>
+
+<div class="lower-div-solution">
+ <p-divider/>
+
+ <!-- Barre d'action -->
+ <div class="action-bar">
+ <!-- Bouton de retour -->
+ <div class="button-container" id="back-button">
+ <app-navigation-button-solutions
+ [avance]="false"
+ (cardChange)="currentNumber = $event"
+ (catChange)="cat = $event"
+ (themeChange)="theme_currentNumber = $event">
+ </app-navigation-button-solutions>
+ </div>
+
+ <!-- Bouton suivant -->
+ <div class="button-container" id="next-button">
+ <app-navigation-button-solutions
+ [avance]="true"
+ (cardChange)="currentNumber = $event"
+ (catChange)="cat = $event"
+ (themeChange)="theme_currentNumber = $event">
+ </app-navigation-button-solutions>
+ </div>
+</div>
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/views/solutions/solutions.component.ts b/src/app/views/solutions/solutions.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c577a2bf6010c22ccafb597ec9a228c7c059027
--- /dev/null
+++ b/src/app/views/solutions/solutions.component.ts
@@ -0,0 +1,71 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationButtonSolutionsComponent } from "./navigation-button-solutions/navigation-button-solutions.component";
+import { ThemeIndicatorComponent } from '../inclusif-cards/theme-indicator/theme-indicator.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AnswerStorageService } from '../../shared/services/answer-storage.service';
+import { navigation_data_solutions } from "../../app.component";
+import { navigation_data } from '../../app.component';
+import { NavigationCardSolutionsComponent } from "./navigation-card-solutions/navigation-card-solutions.component";
+import { Subscription } from 'rxjs';
+import { DividerModule } from 'primeng/divider';
+
+@Component({
+ selector: 'app-solutions',
+ standalone: true,
+ imports: [NavigationButtonSolutionsComponent, ThemeIndicatorComponent, NavigationCardSolutionsComponent, DividerModule],
+ templateUrl: './solutions.component.html',
+ styleUrl: './solutions.component.css'
+})
+export class SolutionsComponent implements OnInit, OnDestroy {
+ constructor(private router:Router,private route: ActivatedRoute,public awnser_service:AnswerStorageService) {}
+ currentNumber = 0;
+ @Input() theme_currentNumber=0;
+ cat = navigation_data_solutions.data[0]?.categorie;
+ suivant = false;
+ applyFilters(): void {
+ this.router.navigate(['/solutions'], { queryParams: { numero: '0', awnsered: 'false' } });
+ }
+ private routeSubscription: Subscription | undefined = undefined;
+ ngOnInit(): void {
+ // Récupérer les query params lors de l'initialisation du composant
+ const answers: { [key: number]: boolean } = this.awnser_service.getAllAnswers();
+ const result2 = Object.keys(answers).filter(key => !answers[+key]);
+ // Liste pour stocker les IDs correspondants dans navigation_data_solutions
+ let matchingIds: number[] = [];
+
+ // Trouver les noms associés aux IDs trouvés dans navigation_data
+ const correspondingNames = result2.map(id => navigation_data.data[+id]?.nom).filter(nom => nom !== undefined);
+
+ // Parcourir navigation_data_solutions pour trouver les IDs qui correspondent aux sous_catégories
+ matchingIds = navigation_data_solutions.data
+ .filter(item => correspondingNames.includes(item.sous_categorie))
+ .map(item => item.id);
+ if (matchingIds[0]){
+ this.currentNumber=matchingIds[0];}
+ else{
+ this.router.navigate(['regles_solutions'])
+ }
+ this.routeSubscription = this.route.queryParams.subscribe(params => {
+ const id = +params['numero']; // Récupérer 'id' depuis les query params
+ if (id && id !== this.currentNumber && id >= 0 && id < navigation_data_solutions.data.length) {
+ this.currentNumber = id; // Mise à jour de currentNumber si le query param 'id' est valide
+ this.cat = navigation_data_solutions.data[this.currentNumber]?.categorie; // Mettre à jour la catégorie
+ }
+
+ this.router.navigate([], {
+ queryParams: { numero: ''+this.currentNumber},
+ queryParamsHandling: 'merge', // Merge avec les paramètres existants
+ skipLocationChange: false // Mettre à jour l'URL dans la barre d'adresse
+ });
+ });
+
+
+ }
+ ngOnDestroy(): void {
+ // Eviter les memory leaks
+ if (this.routeSubscription) {
+ this.routeSubscription.unsubscribe();
+ }
+ }
+}
+
diff --git a/src/app/views/user-manager/user-manager.component.css b/src/app/views/user-manager/user-manager.component.css
index 1ec0a095677283865bf6dde7734b54ef179bf491..2d66f43091689dd730b1a54ef896a0449c6a0dc5 100644
--- a/src/app/views/user-manager/user-manager.component.css
+++ b/src/app/views/user-manager/user-manager.component.css
@@ -1,3 +1,12 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
.error {
color: red;
font-size: 0.9em;
@@ -48,10 +57,6 @@
height: 15px;
}
-.blue{
- background-color: blue;
-}
-
.padding{
padding: 10px;
}
@@ -67,4 +72,42 @@
.transparent-bg{
background-color: transparent;
+}
+
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ position: relative;
+ bottom:0em;
+ width: 100%;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+/*
+::ng-deep .avance-button button {
+ Commenté car ne fait pas rentrer le nouveau label */
+ /*width: 150px;
+ height: 40px;
+}
+*/
+
+.avance{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/user-manager/user-manager.component.html b/src/app/views/user-manager/user-manager.component.html
index 12c43c6aeca6e3bbcddef34920b05655140d3b62..2712a02f36f09ea97cf3fdf92f94ba42e732ce93 100644
--- a/src/app/views/user-manager/user-manager.component.html
+++ b/src/app/views/user-manager/user-manager.component.html
@@ -8,7 +8,7 @@
@if (is_editing_user && user == user_to_edit){
<form [formGroup]="editUserForm">
<p-floatlabel variant="on">
- <input class="input margin-3" pInputText formControlName="name" placeholder="Nom du participant">
+ <input class="input margin-3" pInputText formControlName="name" placeholder="Prénom du participant">
</p-floatlabel>
<p-floatlabel variant="on">
<input class="input margin-3" pInputText formControlName="email" placeholder="Adresse email du participant">
@@ -62,7 +62,19 @@
<p-button icon="pi pi-plus" variant="outlined" severity="contrast" (click)="addUser()"/>
</div>
}
- <p-button (click)="continuer()" severity="primary" >
- {{"Continuer"}}
- </p-button>
+</div>
+
+
+<div class="lower-section">
+ <p-divider/>
+
+ <!-- Bouton pour démarrer le jeu -->
+ <div class = "avance-button">
+ <p-button
+ class = "avance"
+ (click)="continuer()"
+ label = "Commencer le jeu"
+ severity="primary">
+ </p-button>
+ </div>
</div>
\ No newline at end of file
diff --git a/src/app/views/user-manager/user-manager.component.ts b/src/app/views/user-manager/user-manager.component.ts
index 3a01a1b6cb0db775e5c8aa4dfc376ef4cb149a66..2e09dfb2f2d00a525a6e90e0b4863f2fce5cee52 100644
--- a/src/app/views/user-manager/user-manager.component.ts
+++ b/src/app/views/user-manager/user-manager.component.ts
@@ -1,17 +1,19 @@
import { Component } from '@angular/core';
-import { UserService } from '../../shared/user-service';
+import { UserService } from '../../shared/services/user-service';
import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { InputTextModule } from 'primeng/inputtext';
import { FloatLabelModule } from 'primeng/floatlabel';
import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
-
+/* Composant permettant de gérer la page de gestion des utilisateurs.
+Il permet d'ajouter, de modifier et de supprimer des utilisateurs. */
@Component({
selector: 'app-user-manager',
templateUrl: './user-manager.component.html',
styleUrls: ['./user-manager.component.css'],
- imports: [ReactiveFormsModule, FloatLabelModule, InputTextModule, ButtonModule],
+ imports: [ReactiveFormsModule, FloatLabelModule, InputTextModule, ButtonModule, DividerModule],
})
export class UserManagerComponent {
addUserForm: FormGroup;
@@ -34,7 +36,7 @@ export class UserManagerComponent {
}
continuer(){
- this.router.navigate(['./regles_analyse'])
+ this.router.navigate(['./regles'])
}
addUser() {
diff --git a/src/index.html b/src/index.html
index d548e0b8b2c21ee89fa0004fcaaa08431e859c78..2a6952b5989bb21c99779071cbd77872d8c5888e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,14 @@
<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Jeu</title>
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
-</head>
-<body>
- <app-root></app-root>
-</body>
+ <head>
+ <meta charset="utf-8">
+ <title>Jeu</title>
+ <base href="/">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
+ </head>
+ <!-- Mise en place de la zone de travail globale -->
+ <body>
+ <app-root></app-root>
+ </body>
</html>
diff --git a/src/styles.css b/src/styles.css
index af95ab367444742695f19748d8e255c7e2f0b746..46a5fd2e34355b752d2bcafa26b2e0814f5dd7c2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -10,16 +10,26 @@
margin: 0;
padding: 0;
box-sizing: border-box;
- font-family: Lato, Helvetica, sans-serif;
}
html,
body,
my-app {
height: 100%;
- height: 100vh;
+ color: #333333;
}
+ html {
+ font-family: 'Lato', sans-serif;
+ padding: 0;
+ margin: 0;
+ }
+
+ body {
+ display: flex;
+ flex-direction: column;
+ }
+
.subtext {
color: var(--text-secondary-color);
}