scripts/ordre-du-jour/odj/src/app/app.component.html

<style>
</style>

<main class="main container-flex">
  <div class="content columns">
    <div class="left-side column is-4">
      <img
        src="https://www.openstreetmap.fr/wp-content/uploads/2020/06/cropped-OpenStreepMap-france-logo-seul-transparent-2.png"
        alt="logo osm">

      <strong>
        Sujets
      </strong>
      <ul>
        <li class="subject is-clickable is-hoverable hover:has-background-blue"
            (click)="setSubject(i)"
            *ngFor="let s of subjects; index as i"
            [ngClass]="{ active: (currentSubjectId === i) }">
          <strong> {{s.id}}) {{ s.title }}</strong>

          <p class="is-small">
            {{ s.duration }} min, par {{ s.author }}. Reste: {{ resteTopicMinutes(s) }}.
            Passé: {{ round(s.spentSeconds) }}.
          </p>
          <p *ngIf="s.finished">🎉</p>
          <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)">
            temps écoulé, sujet suivant.
          </p>
        </li>
      </ul>

      <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>
        <div>
          <ul>
            <li><a href="https://annuel.framapad.org/p/N_IDAQXYLHswlpU2s3oE">pad de notes de réunion</a></li>
            <li><a href="https://t.me/SOTM2023-Marseille">canal spécial pour le SOTM fr sur telegram</a></li>
            <li><a href="https://t.me/osm-fr">canal général sur telegram</a></li>
            <li><a href="https://app.element.io/#/room/%23osmfr:matrix.org">espace de canaux sur matrix</a></li>
            <li><a href="https://forum.openstreetmap.fr/c/openstreetmap-france/ca/53">forum section CA</a></li>
            <li><a href="https://github.com/osm-fr/">github osm-france</a></li>
            <li><a href="https://osmvideo.cloud68.co/user/fre-aux-yuh">réunions mensuelles du CA</a></li>
            <li><a href="https://nextcloud.openstreetmap.fr">nextcloud osm</a></li>
            <li><a href="https://stats.uptimerobot.com/mQX5Vi5YW2">status des services en ligne</a></li>
            <li>source: <a href="https://forge.chapril.org/tykayn/scripts">ordre du jour par Tykayn</a></li>
          </ul>
        </div>
        <div class="explications">
          <p>
            {{statsExplication}}
          </p>
        </div>


        <div class="debug" *ngIf="showDebug">
          debug:
          <pre>
            {{ subjects|json }}
          </pre>
        </div>

      </div>
      <p>
        {{ (hints) }}
      </p>


      <hr>
      <div class="bottom">

        <div class="stats">
          <h2>
            statistiques:
          </h2>
          {{statsExplication}}
        </div>
        <hr>
        <div class="compte-rendu-infos">
          <label for="scribe">scribe</label>
          <input type="text" id="scribe" [(ngModel)]="scribe">
          <br>
          <label for="presents">{{countLinesInPresent()}}présents</label>
          <textarea name="presents" id="note" cols="30" rows="10" id="presents" [(ngModel)]="presents"></textarea>
          <br>
          <label for="début">Début</label>
          <input name="presents" id="début" [(ngModel)]="startTime"/>
          <br>
          <label for="fin">Fin</label>
          <input name="presents" id="fin" [(ngModel)]="endTime"/>
        </div>

      </div>

    </div>
    <div class="right-side column is-8">
      <div class="pill-group"
           [ngClass]="{
      'topic-is-finished': subjects[currentSubjectId].finished || ! isTopicRunning(subjects[currentSubjectId])
      }">

        <div class="content-current-subject">

          <h1 class="subject active">
            {{ subjects[currentSubjectId].title }}
          </h1>
          <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
            </button>
            <button class="btn is-primary" (click)="nextSubject()">
              suivant
            </button>
            <button class="btn is-success" (click)="finishTopic(currentSubjectId)">
              fini
            </button>
            <button class="btn btn-primary" (click)="updateTopicChangeDate()">
              up temps
            </button>
            <br>
            <br>
            <br>
            <div class="timeseries">
              topic duration:<br> {{subjects[currentSubjectId].duration}} min
              topic start:<br>
              {{subjects[currentSubjectId].startDate| date: 'HH:mm'}}
              <br>
              topic end:<br>
              {{subjects[currentSubjectId].endDate| date: 'HH:mm'}}
              <br>
              temps passé:
              {{round(subjects[currentSubjectId].spentSeconds)}}
              <br>
              secondes max:
              {{
              Math.floor(
                getSecondsBetweenTwoDates(
                  null,
                  subjects[currentSubjectId].endDate
                  )
              - subjects[currentSubjectId].spentSeconds
              )
              }}
            </div>
          </div>


          <!--          <p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>-->
        </div>

      </div>

    </div>

  </div>


</main>


<router-outlet></router-outlet>