Chronologie +/-

Quand le journal est sélectionné, la fenêtre de chronologie s'ouvre avec
les informations présaisies masquées.

Le bouton + permet de les afficher. Le bouton - de les masquer.

module/dialog-chronologie.js

@@ -1,5 +1,6 @@
 import { SYSTEM_RDD } from "./constants.js";
 import { Grammar } from "./grammar.js";
+import { HtmlUtility } from "./html-utility.js";
 import { RdDTimestamp } from "./rdd-timestamp.js";
 
 
@@ -27,27 +28,10 @@ export class DialogChronologie extends Dialog {
       dateReel: DialogChronologie.getCurrentDateTime()
     };
     const html = await renderTemplate("systems/foundryvtt-reve-de-dragon/templates/dialog-chronologie.html", dialogData);
-    const dialog = new DialogChronologie(html);
+    const dialog = new DialogChronologie(html, dialogData);
     dialog.render(true);
   }
 
-  constructor(html) {
-    const options = {
-      classes: ["DialogChronologie"],
-      width: 500,
-      height: 'fit-content',
-      'z-index': 99999
-    };
-    const conf = {
-      title: "Chronologie",
-      content: html,
-      buttons: {
-        ajout: { label: "Ajouter", callback: it => this.ajouter() },
-      }
-    };
-    super(conf, options);
-  }
-
   static getCurrentDateTime() {
     return new Date().toLocaleString("sv-SE", {
       year: "numeric",
@@ -58,9 +42,38 @@ export class DialogChronologie extends Dialog {
     }).replace(" ", "T");
   }
 
+  constructor(html, dialogData) {
+    const options = {
+      classes: ["DialogChronologie"],
+      width: 500,
+      height: 'fit-content',
+      'z-index': 99999
+    };
+    const timeData = dialogData.timestamp.toCalendrier()
+    const conf = {
+      title: `Chronologie - ${timeData.jourDuMois} ${timeData.mois.label} - Heure  ${timeData.heure.label}`,
+      content: html,
+      buttons: {
+        ajout: { label: "Ajouter", callback: it => this.ajouter() },
+      }
+    };
+    super(conf, options);
+    this.dialogData = dialogData;
+  }
+
   activateListeners(html) {
-    super.activateListeners(html);
     this.html = html;
+    super.activateListeners(html);
+    this.showChronologiePreset(!game.journal.get(this.dialogData.journalId).canUserModify(game.user))
+
+    this.html.find("a.chronologie-preset-show").click(event => this.showChronologiePreset(true));
+    this.html.find("a.chronologie-preset-hide").click(event => this.showChronologiePreset(false));
+  }
+
+  showChronologiePreset(showPreset) {
+    HtmlUtility.showControlWhen(this.html.find(".chronologie-preset-show"), !showPreset);
+    HtmlUtility.showControlWhen(this.html.find(".chronologie-preset-hide"), showPreset);
+    HtmlUtility.showControlWhen(this.html.find(".chronologie-preset"), showPreset);
   }
 
   async ajouter() {
@@ -68,7 +81,6 @@ export class DialogChronologie extends Dialog {
     const { journalId, journalEntry } = this.findJournal();
     // ajouter à la page ou créer une page
     this.addContentToJournal(journalEntry, await this.prepareChronologieEntry());
-
     this.storeLatestUsedJournalEntry(journalId);
   }
 

templates/dialog-chronologie.html

@@ -1,23 +1,23 @@
 <form class="rdddialogchrono">
   <div class="flexcol">
     <div class="form-group">
-      <label for="auteur">Auteur</label>
+      <label class="flex-shrink" for="auteur">Auteur</label>
       <input type="text" name="auteur" value="{{auteur}}" data-dtype="String" {{#unless isGM}}disabled{{/unless}}/>
     </div>
-    <div class="form-group">
+    <div class="form-group chronologie-preset">
       {{>"systems/foundryvtt-reve-de-dragon/templates/common/timestamp.hbs" 
-      (timestamp-extract timestamp)
-      path='chronologie'
-      label='Date en jeu'
+        (timestamp-extract timestamp)
+        path='chronologie'
+        label='Date en jeu'
         disabled=''
       }}
     </div>
-    <div class="form-group">
-      <label for="dateReel">Date réelle</label>
+    <div class="form-group chronologie-preset">
+      <label class="flex-shrink" for="dateReel">Date réelle</label>
       <input type="datetime-local" name="dateReel" value="{{dateReel}}" data-dtype="String" />
     </div>
-    <div class="form-group">
-      <label for="journalId">Journal</label>
+    <div class="form-group chronologie-preset">
+      <label class="flex-shrink" for="journalId">Journal</label>
       <select type="text" name="journalId" value="{{journalId}}" data-dtype="String">
         {{#select journalId}}
         <option value=""></option>
@@ -35,8 +35,14 @@
         {{/select}}
       </select>
     </div>
+    <div class="form-group chronologie-preset">
+      <hr>
+    </div>
     <div class="form-group">
-      <label for="information">Information</label>
+      <label class="flex-shrink" for="information">Information
+        <a class="chronologie-preset-show"><i class="fas fa-plus-square"></i></a>
+        <a class="chronologie-preset-hide"><i class="fas fa-minus-square"></i></a>
+      </label>
       <textarea autocomplete="off" title="Information" name="information" autofocus>{{information}}</textarea>
     </div>
   </div>