up calculs

2024-05-22 23:56:24 +02:00 · 2024-05-22 23:56:24 +02:00 · a7e8b4cdbe
parent 32aff9701e
commit a7e8b4cdbe
3 changed files with 180 additions and 81 deletions
--- a/ordre-du-jour/odj2/src/app/app.component.html
+++ b/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()">
-              up temps
+            <button class="btn btn-warning pull-right"
+                    (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'}}
@ -194,7 +158,77 @@ Débug du proxy de temps.
          </div>


-                    <p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>
+          <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>
--- a/ordre-du-jour/odj2/src/app/app.component.scss
+++ b/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 {
--- a/ordre-du-jour/odj2/src/app/app.component.ts
+++ b/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,
-    min: 30,
+    hour: 21,
+    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 timeDifferenceInMilliseconds = this.topicChangeDate.getTime() - currentTime.getTime();
-    const timeDifferenceInSeconds = Math.abs(timeDifferenceInMilliseconds / 1000);
+    const currentTime:Date = new Date();

-    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();
-    // 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((now.getTime() - topic.startDate.getTime()) / (topic.endDate.getTime() - topic.startDate.getTime()) * 100);
+    let currentSubject: Topic = this.subjects[this.currentSubjectId];
+
+    return Math.floor((
+      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 = true;
+  debug_proxy_time: boolean = false;

  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 max = Math.max(date1.getTime(),date2.getTime());
+    let min = Math.min(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;
 }