Website tour (#336)

* 335: website tours setup * 335: fix bug with modal * 335: fix merge conflict * 335: improve some minor code --------- Co-authored-by: Atmos4 <[email protected]>
Atmos4 · Dec 11, 2024 · 1606206 · 1606206
1 parent 3b3e671
commit 1606206
Show file tree

Hide file tree

Showing 17 changed files with 566 additions and 63 deletions.
diff --git a/app/pages/events/edit/ActivityEditForm.php b/app/pages/events/edit/ActivityEditForm.php
@@ -108,7 +108,7 @@
         <article class="row">
             <?= $v->render_validation() ?>
             <?= $name->render() ?>
-            <div class="col-md-6">
+            <div class="col-md-6" data-intro="N'hésitez pas à changer le type d'événement !">
                 <?= $type->render() ?>
             </div>
             <div class="col-md-6">
@@ -120,8 +120,8 @@
             <div class="col-md-6">
                 <?= $location_url->render() ?>
             </div>
-            <?php if (!$event_id || $event?->type == EventType::Simple): ?>
-                <div class="col-md-6">
+            <?php if ($is_simple): ?>
+                <div class="col-md-6" data-intro="Au delà de la deadline, les utilisateurs ne peuvent plus s'inscrire">
                     <?= $deadline->render() ?>
                 </div>
             <?php endif ?>
@@ -130,7 +130,9 @@
                 <h2>Catégories</h2>
             </div>
             <div class="col-auto">
-                <button type="button" class="outline contrast" onclick="addCategory()"><i class="fa fa-plus"></i>
+                <button type="button" class="outline contrast" onclick="addCategory()"
+                    data-intro="Ajoutez des catégories selon vos besoin. H21 ou bien végétarien 😋"><i
+                        class="fa fa-plus"></i>
                     Ajouter</button>
             </div>
             <div id="categories" class="col-12">

diff --git a/app/pages/events/edit/EventEditForm.php b/app/pages/events/edit/EventEditForm.php
@@ -60,10 +60,13 @@
         <div class="col-sm-6 col-lg-4">
             <?= $end_date->render() ?>
         </div>
-        <div class="col-lg-4">
+        <div class="col-lg-4" data-intro="Au delà de la deadline, les utilisateurs ne peuvent plus s'inscrire">
             <?= $limit_date->render() ?>
         </div>
-        <?= $bulletin_url->render() ?>
-        <?= $description->attributes(["rows" => "8"])->render() ?>
+        <div data-intro="Vous pouvez ajouer un lien vers un bulletin en ligne"><?= $bulletin_url->render() ?></div>
+        <div
+            data-intro="Vous pouvez formatter le texte de la description en markdown. N'hésitez pas à aller voir <a href='https://www.markdownguide.org/' target='_blank'>cette ressource</a>">
+            <?= $description->attributes(["rows" => "8"])->render() ?>
+        </div>
     </article>
 </form>
diff --git a/app/pages/events/edit/event_edit.php b/app/pages/events/edit/event_edit.php
@@ -7,15 +7,18 @@
 
 $is_simple = $event?->type == EventType::Simple;
 
-page($event_id ? "{$event->name} : Modifier" : "Créer un événement");
+page($event_id ? "{$event->name} : Modifier" : "Créer un événement")->enableHelp();
 ?>
-<div class="row center">
+<div class="row center" data-intro="Vous pouvez créer deux types d'événement : <b>simple</b> ou <b>complexe</b>.">
     <label>
-        <b>Complexe</b>
+        <b
+            data-intro="Un événement complexe correspond à un événement sur plusieurs jours ou avec plusieurs activités.">Complexe</b>
         <input name="type" type="checkbox" role="switch"
             hx-get="/evenements<?= $event_id ? "/$event_id" : "" ?>/event_form" hx-target="#form-div"
-            hx-swap="innerHTML" hx-trigger="change" value="simple" <?= $is_simple ? "checked" : "" ?> />
-        <b>Simple</b>
+            hx-swap="innerHTML" hx-trigger="change" value="simple" <?= $is_simple ? "checked" : "" ?>
+            data-intro="Une fois créé, vous pouvez passer d'un événement simple à complexe mais pas l'inverse"
+            data-step="4" />
+        <b data-intro="Un événement simple est un événement avec une activité.">Simple</b>
     </label>
 </div>
 <div id="form-div"

diff --git a/app/pages/events/eventUtils.php b/app/pages/events/eventUtils.php
@@ -12,7 +12,8 @@ function RenderActivityEntry(?Activity $activity, bool $can_register = null)
     $activity_entry = $activity->entries[0];
     $extra_info = $activity_entry?->category || $activity_entry?->comment;
     [$open_tag, $close_tag] = $extra_info ? ["<header>", "</header>"] : ["<div class='horizontal'>", "</div>"] ?>
-    <article class="notice <?= $activity_entry?->present ? "valid" : "invalid" ?>">
+    <article class="notice <?= $activity_entry?->present ? "valid" : "invalid" ?>" <?php if ($can_register): ?>
+            data-intro="L'état de votre inscription est disponible ici" <?php endif ?>>
         <?= $open_tag ?>
         <b>
             <?= match (true) {
@@ -23,8 +24,9 @@ function RenderActivityEntry(?Activity $activity, bool $can_register = null)
             } ?>
         </b>
         <?php if ($can_register): ?>
-            <a href="/evenements/<?= $activity->event->id ?>/inscription_simple" class="outline contrast">
-                <i class="fas fa-pen-to-square"></i> <?= $activity_entry ? "Gérer l'inscription" : "S'inscrire" ?>
+            <a href="/evenements/<?= $activity->event->id ?>/inscription_simple" class="outline contrast"
+                data-intro="Cliquez ici pour " . <?= $activity_entry ? 'modifier votre inscription' : 'vous inscrire' ?>>
+                <i class=" fas fa-pen-to-square"></i> <?= $activity_entry ? "Gérer l'inscription" : "S'inscrire" ?>
             </a>
         <?php endif ?>
         <?= $close_tag ?>
@@ -54,7 +56,8 @@ function RenderEventEntry(?EventEntry $entry, Event $event, bool $can_edit)
 {
     $extra_info = $entry?->present || $entry?->comment;
     [$open_tag, $close_tag] = $extra_info ? ["<header>", "</header>"] : ["<div class='horizontal'>", "</div>"] ?>
-    <article class="notice <?= $entry?->present ? "valid" : "invalid" ?>">
+    <article class="notice <?= $entry?->present ? "valid" : "invalid" ?>"
+        data-intro="L'état de votre inscription est disponible ici">
         <?= $open_tag ?>
         <b>
             <?= match (true) {
@@ -65,7 +68,8 @@ function RenderEventEntry(?EventEntry $entry, Event $event, bool $can_edit)
             } ?>
         </b>
         <?php if (($event->open && $event->deadline >= date_create("today")) || $can_edit): ?>
-            <a href="/evenements/<?= $event->id ?>/inscription" class="outline contrast">
+            <a href="/evenements/<?= $event->id ?>/inscription" class="outline contrast" data-intro="Cliquez ici pour " .
+                <?= $entry ? 'modifier votre inscription' : 'vous inscrire' ?>>
                 <i class="fas fa-pen-to-square"></i> <?= $entry ? "Gérer l'inscription" : "S'inscrire" ?>
             </a>
         <?php endif ?>

diff --git a/app/pages/events/event_list/event_list.php b/app/pages/events/event_list/event_list.php
@@ -26,7 +26,8 @@
 
 page("Événements")->css("event_list.css")
     ->css("about.css") // preload to prevent FOUC
-    ->heading(false);
+    ->heading(false)
+    ->enableHelp();
 ?>
 
 <?php if ($birthday_users): ?>
@@ -43,7 +44,12 @@
 
 <h2 class="center main-heading">Événements</h2>
 
-<?= actions($can_edit)?->link("/evenements/nouveau", "Ajouter un événement", "fas fa-plus") ?>
+<?= actions($can_edit)?->link(
+    "/evenements/nouveau",
+    "Ajouter un événement",
+    "fas fa-plus",
+    ["data-intro" => 'Créez un événement']
+) ?>
 
 <?php if (!count($future_events) && !($can_edit && count($draft_events))): ?>
     <p class="center">Pas d'événement pour le moment 😴</p>
@@ -60,9 +66,11 @@
     <h6>Événements publiés</h6>
 <?php endif ?>
 
-<?php foreach ($future_events as $event): ?>
-    <?= render_events($event); ?>
-<?php endforeach ?>
+<div data-intro="Accédez aux événements">
+    <?php foreach ($future_events as $event): ?>
+        <?= render_events($event); ?>
+    <?php endforeach ?>
+</div>
 
 <div id="loadEvents">
     <button class="outline secondary" hx-get="/evenements/passes" hx-swap="outerHTML" hx-target="this">Charger

diff --git a/app/pages/events/view/event_view.php b/app/pages/events/view/event_view.php
@@ -17,8 +17,7 @@
 $totalEntryCount = EventService::getEntryCount($event->id);
 $is_simple = $event->type == EventType::Simple;
 
-page($event->name)->css("event_view.css")->css("entry_list.css");
-
+page($event->name)->css("event_view.css")->css("entry_list.css")->enableHelp();
 ?>
 
 <?= actions()
@@ -47,7 +46,8 @@
     </sl-tab>
     <sl-tab slot="nav" panel="entry-list" hx-trigger="load"
         hx-post="/evenements/<?= $event->id ?>/participants<?= $is_simple ? "?is_simple=true" : "" ?>"
-        hx-target="#entry-list" <?= ($tab == "participants") ? "active" : "" ?>>
+        hx-target="#entry-list" <?= ($tab == "participants") ? "active" : "" ?>
+        data-intro="Cliquez ici pour accéder aux licenciés déjà inscrits à l'événement">
         Participants
     </sl-tab>
     <?php if (Feature::Carpooling->on()): ?>
@@ -87,7 +87,8 @@ class="fa fa-paperclip"></i>
                         </div>
                     </div>
                 </header>
-                <section>
+                <section
+                    data-intro="Les activités sont le contenu d'un événement. Ce peut être des compétitions, des entraînements ou bien des barbeucs 🍴😉">
                     <?php if (count($event->activities)): ?>
                         <h3>Activités</h3>
                         <?php foreach ($event->activities as $i => $activity):
@@ -140,7 +141,8 @@ class="fa fa-paperclip"></i>
 
                     <?php if ($can_edit): ?>
                         <p>
-                            <a role=button class="secondary" href="/evenements/<?= $event->id ?>/activite/nouveau">
+                            <a role=button class="secondary" href="/evenements/<?= $event->id ?>/activite/nouveau"
+                                data-intro="Vous pouvez ajouter des activités à un événement complexe">
                                 <i class="fas fa-plus"></i> Ajouter une activité</a>
                         </p>
                     <?php endif ?>

diff --git a/app/pages/shared_documents/add_shared_document.php b/app/pages/shared_documents/add_shared_document.php
@@ -21,16 +21,19 @@
     }
 }
 
-page("Ajouter un document");
+page("Ajouter un document")->enableHelp();
 ?>
 <?= actions()->back("/documents") ?>
 <form method="post" enctype="multipart/form-data">
     <?= $v->render_validation() ?>
     <i>Formats autorisés: images, PDF, Word, Excel. S'il manque des formats <a href="/feedback">faites une
             suggestion!</a></i>
-    <?= $file_upload->render() ?>
-    <?= $permission->render() ?>
-    <?= $name->render() ?>
+    <div data-intro="Ajoutez des documents ici"><?= $file_upload->render() ?></div>
+    <div
+        data-intro="Vous pouvez décider de qui à accès aux documents. <b>Public</b> signifie tout le monde, <b>Admin</b> correspond aux coachs et à l'administration.">
+        <?= $permission->render() ?>
+    </div>
+    <div data-intro="En option, le nom d'affichage du fichier."><?= $name->render() ?></div>
     <button type=" submit" class="outline">
         Enregistrer
     </button>

diff --git a/app/pages/users/family_view.php b/app/pages/users/family_view.php
@@ -29,14 +29,14 @@
     ->orderBy('u.last_name')
     ->getQuery()->getArrayResult();
 
-page($family->name)->css("family_list.css") ?>
+page($family->name)->css("family_list.css")->enableHelp() ?>
 
 <?= actions(check_auth(Access::$EDIT_USERS))
     ->back("/familles")
     ->dropdown(fn($b) => $b->link("/famille/$family->id/supprimer", "Supprimer la famille", "fa fa-trash", ["class" => "destructive outline"])) ?>
 
 <section class="row">
-    <?php foreach ($family->members as $f_member): ?>
+    <?php foreach ($family->members as $key => $f_member): ?>
         <div class="col-sm-12 col-md-6">
             <article class="user-card">
                 <img src="<?= $f_member->getPicture() ?>">
@@ -45,14 +45,18 @@
                         <?= "$f_member->first_name $f_member->last_name" ?>
                     </a>
                     <br>
-                    <?= $f_member->family_leader ? "Parent" : "Enfant" ?>
+                    <div <?= $key == 0 ?
+                        "data-intro=\"Un membre de la famille peut être Parent ou Enfant\"" : "" ?>>
+                        <?= $f_member->family_leader ? "Parent" : "Enfant" ?>
+                    </div>
                 </div>
                 <nav>
                     <ul>
                         <li>
                             <?php if ($f_member != $user || check_auth(Access::$EDIT_USERS)): ?>
                                 <details class="dropdown" dir="rtl">
-                                    <summary aria-haspopup="listbox" class="contrast actions">
+                                    <summary aria-haspopup="listbox" class="contrast actions" <?= $key == 0 ?
+                                        "data-intro=\"Vous pouvez modifier ce rôle\"" : "" ?>>
                                         <i class="fa fa-ellipsis-vertical"></i>
                                     </summary>
                                     <ul dir="rtl">
@@ -79,7 +83,8 @@
     <form method="post">
         <h4>Ajouter un membre</h4>
         <details class="dropdown">
-            <summary aria-haspopup="listbox">Ajouter à la famille...</summary>
+            <summary aria-haspopup="listbox" data-intro="Ajoutez de nouveaux membres à la famille !">Ajouter à la
+                famille...</summary>
             <ul data-placement=top>
                 <?php foreach ($add_member_list as $add_member): ?>
                     <li>

diff --git a/app/pages/users/user_add.php b/app/pages/users/user_add.php
@@ -48,7 +48,7 @@
 
 
 
-page("Nouveau licencié")->css("settings.css");
+page("Nouveau licencié")->css("settings.css")->enableHelp();
 ?>
 <?= actions()->back("/licencies")->submit("Créer", attributes: ["form" => "add-user"]) ?>
 <form id="add-user" method="post" class="row">
@@ -63,7 +63,10 @@
 
     <div class="col-sm-12 col-md-6">
         <?= $real_email->render() ?>
-        <?= $permission->render() ?>
+        <div
+            data-intro="Les différents rôles : <ul><li>Utilisateur : rôle de base</li><li>Coach et Administration : peuvent créer des événements et des licenciés</li></ul>">
+            <?= $permission->render() ?>
+        </div>
     </div>
 
 </form>
diff --git a/app/pages/users/user_list.php b/app/pages/users/user_list.php
@@ -2,17 +2,27 @@
 restrict_access();
 $can_add_user = check_auth(Access::$EDIT_USERS);
 $users = UserService::getActiveUserList();
-page("Les licenciés") ?>
+page("Les licenciés")->enableHelp() ?>
 <?= actions($can_add_user)->link("/licencies/ajouter", "Ajouter un licencié", "fa-plus")
     ->dropdown(
         fn($b) => $b
-            ->link("/familles", "Familles", "fa-users")
-            ->link("/licencies/desactive", "Licenciés désactivés", "fa-bed"),
-        "Plus"
+            ->link(
+                "/familles",
+                "Familles",
+                "fa-users",
+            )
+            ->link(
+                "/licencies/desactive",
+                "Licenciés désactivés",
+                "fa-bed",
+            ),
+        "Plus",
+        ["data-intro" => "Visualisez les familles et les licenciés désactivés ici"]
     ) ?>
 <form method="get">
     <input type="search" id="search-users" name="search" placeholder="Rechercher..."
-        onkeyup="searchSection('search-users','users-list')">
+        onkeyup="searchSection('search-users','users-list')"
+        data-intro="Utilisez la barre de recherche pour chercher votre licencié préféré !">
 </form>
 
 <section class="row" id="users-list">