up calculs

ordre-du-jour/odj2/src/app/app.component.html

@@ -19,58 +19,24 @@
           <strong> {{s.id}}) {{ s.title }}</strong>
 
           <p class="is-small">
-            {{ s.duration }} min, par {{ s.author }}. Reste: {{ resteTopicMinutes(s) }}.
+            {{ s.duration }} min, par {{ s.author }}.
+            <br>
+            Reste: {{ resteTopicMinutes(s) }}.
+            <br>
             Passé: {{ round(s.spentSeconds) }}.
           </p>
           <p *ngIf="s.finished">🎉</p>
-          <p class="is-info" *ngIf="isNowTimeBetweenTwoDates(subjects[currentSubjectId].startDate, subjects[currentSubjectId].startDate)">
+          <p class="is-info"
+             *ngIf="isNowTimeBetweenTwoDates(subjects[currentSubjectId].startDate, subjects[currentSubjectId].startDate)">
             sujet actuel dans les temps impartis
           </p>
-          <p class="is-warning time-over" *ngIf="isNowTimeBetweenTwoDates(subjects[currentSubjectId].endDate , subjects[currentSubjectId].startDate)">
+          <p class="is-warning time-over"
+             *ngIf="isNowTimeBetweenTwoDates(subjects[currentSubjectId].endDate , subjects[currentSubjectId].startDate)">
             temps écoulé, sujet suivant.
           </p>
         </li>
       </ul>
-<div class="debug_time_proxy" *ngIf="debug_proxy_time">
-Débug du proxy de temps.
-  On utilise pas directement l'heure actuelle pour comparer les durées afin de rendre le tout testable.
 
-
-
-  Heure proxy:
-  {{timeProxy.hour}} :
-  {{timeProxy.min}}
-  Heure réelle:
-  {{now.getHours()}} :
-  {{timeProxy.min}}
-</div>
-      <div class="pad">
-
-        <h2>
-          notes
-        </h2>
-        <textarea name="note" id="note" cols="30" rows="10" [(ngModel)]="subjects[currentSubjectId].notes"></textarea>
-        <h2>
-          Texte du pad
-        </h2>
-        <textarea name="note" id="pasteland" cols="30" rows="10" class="textarea mx-2 is-full" [(ngModel)]="pasteLand"
-                  id="pasteland"
-                  (ngModelChange)="parseTheListOfTopicsInPasteLand()"></textarea>
-        <h2>
-          Compte rendu du {{ (today) | date:'yyyy-MM-dd'}}
-        </h2>
-        <pre>
-{{buildCompteRendu()}}
-        </pre>
-        <button class="btn is-primary" (click)="copyCompteRenduToClipboard()">
-          copier
-        </button>
-        <button class="btn is-primary" (click)="downloadCompteRendu()">
-          télécharger le compte rendu
-        </button>
-
-
-      </div>
       <div class="liens">
 
         <h2>Liens</h2>
@@ -94,14 +60,6 @@ Débug du proxy de temps.
           </p>
         </div>
 
-
-        <div class="debug" *ngIf="showDebug">
-          debug:
-          <pre>
-            {{ subjects|json }}
-          </pre>
-        </div>
-
       </div>
       <p>
         {{ (hints) }}
@@ -146,30 +104,36 @@ Débug du proxy de temps.
           <h1 class="subject active">
             {{ subjects[currentSubjectId].title }}
           </h1>
+          <div class="frise-temps-subject">
+            Sujet: {{percentDoneOfTopic(subjects[currentSubjectId])}} %
+            <div class="rectangle-time-container">
+              <div class="rectangle-time-done-part" [style.width]="percentDoneOfTopic(subjects[currentSubjectId])+'%'">
+              </div>
+            </div>
+          </div>
           <p>{{ subjects[currentSubjectId].duration }} min, par {{ subjects[currentSubjectId].author }}</p>
           <!--          <p>Reste: {{ countRemainingMinutes(subjects[currentSubjectId]) }} min</p>-->
           <div class="actions">
-
-
             <p>Début: {{ startTime }}, Fin: {{ endTime }}.
               Durée: {{round(getMinutesBetweenTwoDates(startDate, endDate))}}</p>
 
             <button class="btn btn-primary" (click)="previousSubject()">
-              précédent
+              ⏮️ précédent
             </button>
             <button class="btn is-primary" (click)="nextSubject()">
-              suivant
+              ⏭️ suivant
             </button>
             <button class="btn is-success" (click)="finishTopic(currentSubjectId)">
-              fini
+              🎉 fini
             </button>
-            <button class="btn btn-primary" (click)="updateTopicChangeDate()">
+            <button class="btn btn-warning pull-right"
-              up temps
+                    (click)="clearInterval(interval)">
+              🌸 fin de réunion
             </button>
             <br>
             <br>
             <br>
-            <div class="timeseries">
+            <div class="timeseries" *ngIf="debug_proxy_time">
               topic duration:<br> {{subjects[currentSubjectId].duration}} min
               topic start:<br>
               {{subjects[currentSubjectId].startDate| date: 'HH:mm'}}
@@ -195,6 +159,76 @@ Débug du proxy de temps.
 
 
           <p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>
+          <p>
+            proxy date of now: {{getProxyDateOfNow() | date:'YYYY-MM-dd HH:mm:ss':'Europe/Paris'  }}
+          </p>
+<!--          <p>avancement: {{ getPercentProgressTotal() }} %</p>-->
+
+          <h2>Représentation graphique du déroulé ({{progressTotalPercent}} %)</h2>
+
+
+
+          <div class="frise-temps-total">
+            <div class="rectangle-time-container">
+            <div class="rectangle-time-done-part" [style.width]="progressTotalPercent+'%'">
+            </div>
+            </div>
+          </div>
+
+          <div class="debug_time_proxy" *ngIf="debug_proxy_time">
+            <h2>
+
+              Débug du proxy de temps.
+            </h2>
+            On utilise pas directement l'heure actuelle pour comparer les durées afin de rendre le tout testable.
+
+
+            <br>
+            Heure proxy:
+            <br>
+            <input type="number" [(ngModel)]="timeProxy.hour"> h
+            <input type="number" [(ngModel)]="timeProxy.min"> min
+            <br>
+            {{timeProxy.hour}} :
+            {{timeProxy.min}}
+            <br>
+            Heure réelle:
+            {{now.getHours()}} :
+            {{now.getMinutes()}}
+            <hr>
+            Temps passé depuis le début:
+            {{now.getHours() - timeProxy.hour}} h
+            {{now.getMinutes() - timeProxy.min}}
+
+          </div>
+          <div class="pad">
+
+            <h2>
+              notes
+            </h2>
+            <textarea name="note" id="note" cols="30" rows="10" [(ngModel)]="subjects[currentSubjectId].notes"></textarea>
+            <h2>
+              Texte du pad
+            </h2>
+            <textarea name="note" id="pasteland" cols="30" rows="10" class="textarea mx-2 is-full" [(ngModel)]="pasteLand"
+                      id="pasteland"
+                      (ngModelChange)="parseTheListOfTopicsInPasteLand()"></textarea>
+            <h2>
+              Compte rendu du {{ (today) | date:'yyyy-MM-dd'}}
+            </h2>
+            <pre>
+{{buildCompteRendu()}}
+        </pre>
+            <button class="btn is-primary" (click)="copyCompteRenduToClipboard()">
+              copier
+            </button>
+            <button class="btn is-primary" (click)="downloadCompteRendu()">
+              télécharger le compte rendu
+            </button>
+
+
+          </div>
+
         </div>
 
       </div>

ordre-du-jour/odj2/src/app/app.component.scss

@@ -216,6 +216,26 @@ pre {
   padding-left: 5rem;
   box-sizing: border-box;
 }
+.rectangle-time-container{
+  background: grey;
+  height: 1em;
+  border-radius: 0.25em;
+  padding: 0.25rem;
+  overflow: hidden;
+  .frise-temps-subject & {
+    height: 0.5em;
+  }
+}
+.rectangle-time-done-part{
+  box-sizing: border-box;
+  height: 1em;
+  background: chartreuse;
+  text-align: right;
+  padding: 0.25rem 0;
+  .frise-temps-subject & {
+    height: 0.5em;
+  }
+}
 
 @media screen and (max-width: 650px) {
   .content {

ordre-du-jour/odj2/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
+
 interface Topic {
   id: number, // numéro du sujet
   title: string, // titre du sujet à aborder
@@ -28,9 +29,14 @@ export class AppComponent implements OnInit, OnDestroy {
   now: Date = new Date();
 
   timeProxy: any = {
-    hour: 10,
+    hour: 21,
-    min: 30,
+    min: 0,
+    secondsFromStart : 1,
+    secondsFromEnd : 1,
   }
+  cursorNowLeft:number =  0;
+  progressTotalPercent:number =  30;
+
   today: Date = new Date();
   // champs habituels pour le compte rendu:
   scribe: string = 'tykayn';
@@ -46,21 +52,16 @@ export class AppComponent implements OnInit, OnDestroy {
   statsExplication: string = ''
 
   hints: string = "";
-  Math:Math = Math
+  Math: Math = Math
 
-  showDebug: boolean = true;
   startDate: Date = new Date();
   endDate: Date = new Date();
   private topicChangeDate: Date = new Date();
 
 
   updateTopicChangeDate(): void {
-    const currentTime = new Date();
+    const currentTime:Date = new Date();
-    const timeDifferenceInMilliseconds = this.topicChangeDate.getTime() - currentTime.getTime();
-    const timeDifferenceInSeconds = Math.abs(timeDifferenceInMilliseconds / 1000);
 
-    console.log(`Spent ${timeDifferenceInSeconds} seconds`);
-    this.subjects[this.currentSubjectId].spentSeconds += timeDifferenceInSeconds;
     this.topicChangeDate = currentTime;
     this.makeStatisticsOnTopicsSpentSeconds()
   }
@@ -112,7 +113,7 @@ export class AppComponent implements OnInit, OnDestroy {
    * @param {string} [minute='00'] - A string representation of the minute (00-59).
    * @returns {Date} A new Date object set to the specified time.
    */
-  makeDateFromHourToday(hourInput: string){
+  makeDateFromHourToday(hourInput: string) {
     let [hour, minute] = hourInput.split(":");
     let date = new Date();
     if (!minute) {
@@ -131,7 +132,7 @@ export class AppComponent implements OnInit, OnDestroy {
    */
   computeResteTopicMinutes(topic: Topic): number {
     let currentSubjectDuration = topic.duration; // The duration of the current subject, in minutes
-    let currentSubjectStartTime = new Date(this.startTime); // The start time of the current subject
+    let currentSubjectStartTime = this.getProxyDateOfNow(); // The start time of the current subject
     let currentSubjectEndTime = new Date(currentSubjectStartTime.getTime() + currentSubjectDuration * 60000); // The end time of the current subject
 
     return currentSubjectEndTime.getTime() - new Date().getTime(); // The remaining time, in milliseconds
@@ -149,7 +150,18 @@ export class AppComponent implements OnInit, OnDestroy {
     let self = this;
     this.interval = setInterval(() => {
       self.now = new Date()
-      // self.updateTopicChangeDate()
+      this.subjects[this.currentSubjectId].spentSeconds += 1
+      this.progressTotalPercent = this.getPercentProgressTotal()
+      // ajouter une minute au temps proxy à chaque passage à 0 secondes.
+
+      if(self.now.getSeconds() == 0){
+        this.timeProxy.min++
+      }
+      if(this.timeProxy.min == 60){
+        this.timeProxy.min = 0
+        this.timeProxy.hour++
+      }
+
     }, 1000)
 
   }
@@ -190,14 +202,21 @@ export class AppComponent implements OnInit, OnDestroy {
 
   countRemainingMinutes(topic: Topic) {
     let now = new Date();
-    return Math.floor((topic.endDate.getTime() - now.getTime()) / 60000);
+    return Math.floor((topic.endDate.getTime() - this.getProxyDateOfNow().getTime()) / 60000);
   }
 
   getPercentProgressTimeForTopic(topic: Topic) {
-    let now = new Date();
+    let currentSubject: Topic = this.subjects[this.currentSubjectId];
-    // console.log('topic démarré', topic.startDate.getTime())
+
-    // console.log('topic va se finir', topic.endDate.getTime(), topic.endDate.getTime() - topic.startDate.getTime())
+    return Math.floor((
-    return Math.floor((now.getTime() - topic.startDate.getTime()) / (topic.endDate.getTime() - topic.startDate.getTime()) * 100);
+      Math.floor(
+        this.getSecondsBetweenTwoDates(
+          null,
+          currentSubject.endDate
+        )
+        - currentSubject.spentSeconds
+      )
+    ) / (currentSubject.duration * 60));
   }
 
   /**
@@ -218,7 +237,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   resteTopicMinutes(topic: Topic) {
-    return this.round(topic.spentSeconds / topic.duration * 60)
+    return this.round(topic.spentSeconds / (topic.duration * 60))
   }
 
 
@@ -282,8 +301,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   compteRendu: string = ''
-  // now:Date = new Date();
+  debug_proxy_time: boolean = false;
-  debug_proxy_time: boolean = true;
 
   formatDateYMD(date: Date) {
     const year = date.getFullYear();
@@ -381,9 +399,36 @@ export class AppComponent implements OnInit, OnDestroy {
 
   isNowTimeBetweenTwoDates(date1: Date, date2: Date) {
 
-    let min = Math.min(date1.getTime(),date2.getTime());
+    let min = Math.min(date1.getTime(), date2.getTime());
-    let max = Math.max(date1.getTime(),date2.getTime());
+    let max = Math.max(date1.getTime(), date2.getTime());
     let now = new Date().getTime();
     return min < now && max > now;
   }
+
+
+  getProxyDateOfNow():Date{
+    let stringdate = this.now.getFullYear() + '-' + (this.now.getMonth()+1) + '-' + this.now.getDate() +' '+ this.timeProxy.hour+':' +this.timeProxy.min+':00'
+
+    return new Date(stringdate)
+  }
+
+  getPercentProgressTotal() {
+    let percent = 1;
+    percent =  100-(( this.endDate.getTime() / 60000)  - (this.getProxyDateOfNow().getTime() / 60000))
+
+    return Math.round(percent)
+  }
+
+  percentDoneOfTopic(topic: Topic):number {
+    let rounded :number = Math.round(   100 * topic.spentSeconds / (topic.duration * 60) )
+
+    if(rounded>100){
+      rounded = 100
+    }
+
+    console.log('rounded', (topic.duration * 60), topic.spentSeconds, rounded)
+    return rounded;
+  }
+
+  protected readonly clearInterval = clearInterval;
 }