#52 : Debut gestion astrologie

module/rdd-astrologie-editeur.js

@@ -0,0 +1,45 @@
+import { Misc } from "./misc.js";
+
+/**
+ * Extend the base Dialog entity by defining a custom window to perform roll.
+ * @extends {Dialog}
+ */
+export class RdDAstrologieEditeur extends Dialog {
+
+  /* -------------------------------------------- */
+  constructor(html, calendrier, calendrierData) {
+
+    let myButtons = {
+        saveButton: { label: "Enregistrer", callback: html => this.fillData() }
+      };
+
+    // Common conf
+    let dialogConf = { content: html, title: "Editeur d'Astrologie", buttons: myButtons, default: "saveButton" };
+    let dialogOptions = { classes: ["rdddialog"], width: 800, height: 300, 'z-index': 99999 }  
+    super(dialogConf, dialogOptions)
+    
+    this.calendrier = calendrier;
+    this.updateData( calendrierData );
+  }
+
+  /* -------------------------------------------- */
+  fillData( ) {
+  }
+
+  /* -------------------------------------------- */
+  updateData( calendrierData ) {
+    this.calendrierData = duplicate(calendrierData);
+  }
+
+  /* -------------------------------------------- */
+  activateListeners(html) {
+    super.activateListeners(html);
+    
+    let astrologieData = this.astrologieData;
+
+    $(function () {
+    });
+
+  }
+
+}

module/rdd-calendrier.js

@@ -1,5 +1,6 @@
 /* -------------------------------------------- */
 import { RdDCalendrierEditeur } from "./rdd-calendrier-editeur.js";
+import { RdDAstrologieEditeur } from "./rdd-astrologie-editeur.js";
 
 /* -------------------------------------------- */
 const heuresList = [ "vaisseau", "sirene", "faucon", "couronne", "dragon", "epees", "lyre", "serpent", "poissonacrobate", "araignee", "roseau", "chateaudormant" ];
@@ -69,6 +70,13 @@ export class RdDCalendrier extends Application {
     return options;
   }
 
+  /* -------------------------------------------- */
+  getDateFromIndex( index ) {
+    let month = Math.ceil(index / 28);
+    let day = index - (month*28);
+    return day+"/"+heuresList[month];
+  }
+
   /* -------------------------------------------- */
   getCurrentDayIndex( ) {
     return (this.calendrier.moisRdD * 28) + this.calendrier.jour;
@@ -241,7 +249,7 @@ export class RdDCalendrier extends Application {
   }
   
   /* -------------------------------------------- */
-  async showCalendarEditor() {
+  async showCalendarEditor() {    
     let calendrierData = duplicate( this.fillCalendrierData(  ) );
     if ( this.editeur == undefined ) {
       calendrierData.jourMoisOptions = Array(28).fill().map((item, index) => 1 + index);
@@ -254,6 +262,22 @@ export class RdDCalendrier extends Application {
     this.editeur.render(true);
   }
 
+  /* -------------------------------------------- */
+  async showAstrologieEditor() {
+    let calendrierData = duplicate( this.fillCalendrierData(  ) );
+    calendrierData.astrologieData = duplicate( this.listeNombreAstral );
+    for (let index in calendrierData.astrologieData ) {
+      let astralData = calendrierData.astrologieData[index];      
+      astralData.humanDate = this.getDateFromIndex( index );
+    }
+    if ( this.astrologieEditeur == undefined ) {
+      let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData );
+      this.astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData )
+    }
+    this.astrologieEditeur.updateData( calendrierData );
+    this.astrologieEditeur.render(true);
+  }
+  
   /* -------------------------------------------- */
   /** @override */
 	activateListeners(html) {
@@ -305,6 +329,10 @@ export class RdDCalendrier extends Application {
       ev.preventDefault();
       this.showCalendarEditor();
     });
+    html.find('#astrologie-btn-edit').click(ev => {
+      ev.preventDefault();
+      this.showAstrologieEditor();
+    });
 
     html.find('#calendar--move-handle').mousedown(ev => {
       ev.preventDefault();

styles/simple.css

@@ -978,12 +978,14 @@ ul, li {
 	margin: 2px;
 	grid-row-gap: 3px;
 }
+#astrologie-btn-edit,
 #calendar-btn-edit{
 	grid-row: 1;
 	grid-column: 1;
 	margin: auto;
 	color: rgba(0, 0, 0, 0.5);
 }
+#astrologie-btn-edit:hover,
 #calendar-btn-edit:hover {
   color: #FFF;
 	border: 0px solid #000;

templates/calendar-astrologie-template.html

@@ -0,0 +1,22 @@
+<form class="{{cssClass}}" autocomplete="off">
+  <header class="sheet-header">
+      <div class="header-fields">
+          <h1 class="charname">Astrologie</h1>
+      </div>
+  </header>
+  
+  {{!-- Sheet Body --}}
+  <section class="sheet-body">
+    <div class="form-group">
+      <label for="astralList">Nombres Astraux</label>
+      <table>
+        <tr>
+          {{#each astrologieData as |nombreData key|}}
+          <td>{{nombreData.humanDate}} - {{nombreData.nombreAstral}}</td>
+          {{/each}}
+        </tr>
+        </table>        
+    </div>
+  </section>
+  
+</form>

templates/calendar-template.html

@@ -1,6 +1,7 @@
 <div id="calendar-time-container">
 	<div id="calendar">
     <i id="calendar-btn-edit" class="fas fa-cog" title="Editer"></i>
+    <i id="astrologie-btn-edit" class="fas fa-cog" title="Astrologie"></i>
 		<div id="calendar-hdr">
 	  		<p id="calendar--move-handle" class="calendar-date-rdd" title="Deplacer">Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})</p>
     </div>