:implement help page

package.json

@@ -14,7 +14,6 @@
     "fuse.js": "^6.4.6",
     "jc-timeline": "git+http://gitlab.jaquin.fr/clovis/jc-timeline.git",
     "lodash": "^4.17.21",
-    "postcss": "^8.2.13",
     "uuid": "^8.3.2",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
@@ -27,10 +26,10 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-plugin-router": "~4.5.13",
+    "@vue/cli-plugin-typescript": "~4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
@@ -38,6 +37,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
     "node-sass": "^5.0.0",
+    "postcss": "^8.3.0",
     "prettier": "^2.2.1",
     "sass": "^1.32.8",
     "sass-loader": "^10.1.1",

src/components/SelectChipInput.vue

@@ -111,6 +111,7 @@ export default defineComponent({
     },
     toggle(idx: number, e: MouseEvent): void {
       e.stopPropagation();
+      e.preventDefault();
       this.items[idx].isChecked = !this.items[idx].isChecked;
       this.emitValue();
       this.focus();

src/router/main.ts

@@ -4,6 +4,7 @@ import Planning from "@/views/Planning.vue";
 import CompetenceManager from "@/views/CompetenceManager.vue";
 import BenevoleManager from "@/views/BenevoleManager.vue";
 import PlanningPersonnel from "@/views/PlanningPersonnel.vue";
+import Help from "@/views/Help.vue";
 import Home from "@/views/Home.vue";
 
 const routes: Array<RouteRecordRaw> = [
@@ -37,6 +38,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "planningIndividuel",
     component: PlanningPersonnel,
   },
+  {
+    path: "/planner/docs",
+    name: "docs",
+    component: Help,
+  },
 ];
 
 const router = createRouter({

src/views/Evenement.vue

@@ -15,6 +15,19 @@
         <button class="btn success" @click="$emit('solve')">
           <i class="material-icons">play_arrow</i> Résoudre la plannification
         </button>
+        <div
+          class="tooltiped tooltiped--medium"
+          style="
+            cursor: pointer;
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 8px;
+            color: var(--color-accent-400);
+          "
+          aria-tooltip="Comment ça marche"
+        >
+          <i class="material-icons" @click="$router.push('docs')">info</i>
+        </div>
       </div>
       <div class="actions" style="margin-top: 8px">
         <button class="btn primary small" @click="$emit('save')">

src/views/Help.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="doc">
+    <h2>Documentation</h2>
+    <div>
+      L'outil prend en entrée les données suivantes:
+      <ul>
+        <li>
+          Les contraintes (Compétences, aprenable ou non ainsi que les préférences) entièrement
+          personalisable.
+        </li>
+        <li>
+          Les créneaux bénévoles à effectué avec leur effectif minimum et les contraintes associés,
+        </li>
+        <li>Les créneaux repas disponibles avec leurs effectif maximum</li>
+        <li>
+          Les bénévoles disponibles avec les compétences et préférences qu'il peuvent avoir
+          communiqué aux responsable bénévoles
+        </li>
+      </ul>
+    </div>
+    <p>
+      Lorsque vous cliquez sur le bouton "Résoudre la plannification" le système va utilisé ces
+      données pour associer les bénévoles aux créneaux en essayant des respecter les contraintes
+      suivantes. Ces contraintes sont classées en 3 groupes Dur / Moyenne / Molle. Le système fait
+      en sorte de minimisé le score total en prenant en compte en priorité les contraintes plus
+      "dures".
+    </p>
+    <h3>Les contraintes</h3>
+    <div>
+      Les contraintes considérées par le système sont les suivantes:
+      <h4>Contraintes Dures</h4>
+      <ul>
+        <li>
+          Tout les créneaux doivent avoir le minimum de bénévoles requis (-1 point dur pour chaque
+          bénévoles manquant)
+        </li>
+        <li>
+          Tout les bénévoles doivent avoir un créneau repas (on peut au besoin adapter ce nombre)
+        </li>
+        <li>
+          Un bénévole ne peut pas être présent à deux créneaux en même temps (-1 point dur pour
+          chaque chevauchement) (valable pour les créneaux et les créneaux repas)
+        </li>
+        <li>
+          Un bénévoles doit avoir toutes les compétences non apprenables requises pour chaque
+          créneau supporter (-1 point dur pour chaque compétence manquante par créneau)
+        </li>
+        <li>
+          Chaque créneau repas ne peut pas accepter plus de bénévoles que sa limite maximum (-n²
+          point par bénévole au dessus de la limite max)
+        </li>
+      </ul>
+      <h4>Contraintes Moyennes</h4>
+      <ul>
+        <li>
+          Un bénévole doit avoir 15 minutes de repos entre 2 créneaux (-1 point pour chaque
+          chevauchement)
+        </li>
+      </ul>
+      <h4>Contraintes Molles</h4>
+      <ul>
+        <li>
+          Chaque Bénévole doit avoir les préférences ou compétences apprenables associées à un
+          créneau (-1 point mou pour chaque contrainte manquante)
+        </li>
+        <li>
+          La répartition des créneaux doit être juste (-(nombre de créneau)² pour chaque bénévoles)
+        </li>
+      </ul>
+    </div>
+    <p>
+      Une fois le planning rempli automatiquement, le système indique le score associé à ce
+      planning, vous pouvez relancer une session de résolution pour essayer d'améliorer le score
+      finale de la solution. L'application explique aussi les raisons qui donne un score dur négatif
+      pour que vous puissiez résoudre manuellement les problèmes sous jacent.
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  data() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.doc {
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+}
+</style>

src/views/Planning.vue

@@ -1,60 +1,54 @@
 <template>
-  <div style="display: flex">
-    <div class="timeline">
-      <div class="timelime-control">
-        <h1>Planning global de l'événement</h1>
-        <div class="actions">
-          <button
-            class="btn small secondary"
-            @click="createCreneau"
-            :disabled="creneauGroupList.length == 0"
-          >
-            <i class="material-icons">create</i>Creneau
-          </button>
-          <button class="btn small secondary" @click="createRessource">
-            <i class="material-icons">create</i>Ligne
-          </button>
-          <button class="btn icon small primary tooltiped" aria-tooltip="Zoomer" @click="zoom(1)">
-            <i class="material-icons">zoom_in</i>
-          </button>
-          <button
-            class="btn icon small primary tooltiped"
-            aria-tooltip="Dezoomer"
-            @click="zoom(-1)"
-          >
-            <i class="material-icons">zoom_out</i>
-          </button>
-        </div>
+  <div class="timeline">
+    <div class="timelime-control">
+      <h1>Planning global de l'événement</h1>
+      <div class="actions">
+        <button
+          class="btn small secondary"
+          @click="createCreneau"
+          :disabled="creneauGroupList.length == 0"
+        >
+          <i class="material-icons">create</i>Creneau
+        </button>
+        <button class="btn small secondary" @click="createRessource">
+          <i class="material-icons">create</i>Ligne
+        </button>
+        <button class="btn icon small primary tooltiped" aria-tooltip="Zoomer" @click="zoom(1)">
+          <i class="material-icons">zoom_in</i>
+        </button>
+        <button class="btn icon small primary tooltiped" aria-tooltip="Dezoomer" @click="zoom(-1)">
+          <i class="material-icons">zoom_out</i>
+        </button>
       </div>
-      <jc-timeline
-        ref="timeline"
-        :slotduration="slotduration"
-        :legendspan="legendspan"
-        :slotwidth="slotwidth"
-        :start="start.toDate().toISOString()"
-        :end="end.toDate().toISOString()"
-        @event-change="eventChangeHandler"
-        @item-selected="selectionChangeHandler"
-        @reorder-ressource="ressourceChangeHandler"
-      ></jc-timeline>
     </div>
-
-    <editeur-creneau
-      v-if="currentCreneau"
-      :creneau="currentCreneau"
-      @create="createCreneau"
-      @delete="deleteCreneau"
-      @duplicate="duplicateCreneau"
-      @edit="updateCreneau"
-    ></editeur-creneau>
-    <editeur-ligne
-      v-else
-      :creneauGroupId="currentCreneauGroupId"
-      @create="createRessource"
-      @delete="deleteRessource"
-      @edit="updateCreneauGroup"
-    ></editeur-ligne>
+    <jc-timeline
+      ref="timeline"
+      :slotduration="slotduration"
+      :legendspan="legendspan"
+      :slotwidth="slotwidth"
+      :start="start.toDate().toISOString()"
+      :end="end.toDate().toISOString()"
+      @event-change="eventChangeHandler"
+      @item-selected="selectionChangeHandler"
+      @reorder-ressource="ressourceChangeHandler"
+    ></jc-timeline>
   </div>
+
+  <editeur-creneau
+    v-if="currentCreneau"
+    :creneau="currentCreneau"
+    @create="createCreneau"
+    @delete="deleteCreneau"
+    @duplicate="duplicateCreneau"
+    @edit="updateCreneau"
+  ></editeur-creneau>
+  <editeur-ligne
+    v-else
+    :creneauGroupId="currentCreneauGroupId"
+    @create="createRessource"
+    @delete="deleteRessource"
+    @edit="updateCreneauGroup"
+  ></editeur-ligne>
 </template>
 
 <script lang="ts">
@@ -335,16 +329,21 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.container {
+.planning-container {
   display: flex;
   justify-content: center;
 }
 .timeline {
   margin: 0px 16px;
+  width: calc(100% - 400px);
+}
+@media (min-width: 600px) {
+  .timeline {
+    width: calc(95% - 400px);
+  }
 }
 jc-timeline {
   margin-top: 8px;
-  max-width: 1000px;
   display: block;
 }
 .actions {