Besoin d'aide pour intégrer le code écrit sur Edittext à Discourse

[Plabforum]

J’ai créé ce minuteur en utilisant le code suivant. Il fonctionne localement, mais j’ai du mal à l’intégrer sur mon forum. Quelqu’un peut-il m’aider ?

<!-- HTML (Ajouter dans la section Header) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* Définir la largeur souhaitée pour tous les boutons */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* Vert plus foncé pour une meilleure visibilité sur fond sombre */
  }

  #enterRoomButton {
    background: #DAA520; /* Jaune plus foncé */
  }

  #pauseButton {
    background: #A0522D; /* Orange plus foncé */
  }

  #stopButton {
    background: #FF0000; /* Rouge plus foncé */
  }
</style>

<div style="display: flex; align-items: center; justify-content: center;">
  <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
    <button id="readTaskButton" onclick="startTimer(90)">Lire la tâche</button>
    <button id="enterRoomButton" onclick="startTimer(480)">Entrer dans la pièce</button>
  </div>
  <div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
  <div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
    <button id="pauseButton" onclick="togglePauseResume()">Pause</button>
    <button id="stopButton" onclick="stopTimer()">Arrêter</button>
  </div>
</div>

<!-- JavaScript (Ajouter dans la section Footer) -->
<script>
  let timer;
  let totalSeconds;
  let isShortTimer = true;
  let isPaused = false;

  function startTimer(duration) {
    resetTimer();
    totalSeconds = duration;
    timer = setInterval(updateTimer, 1000);
  }

  function togglePauseResume() {
    if (isPaused) {
      resumeTimer();
    } else {
      pauseTimer();
    }
    updateButtonLabel();
  }

  function updateButtonLabel() {
    const button = document.getElementById('pauseButton');
    button.innerText = isPaused ? 'Reprendre' : 'Pause';
  }

  function pauseTimer() {
    clearInterval(timer);
    isPaused = true;
  }

  function resumeTimer() {
    isPaused = false;
    timer = setInterval(updateTimer, 1000);
  }

  function stopTimer() {
    resetTimer();
    updateButtonLabel();
  }

  function updateTimer() {
    if (totalSeconds <= 0) {
      if (isShortTimer) {
        isShortTimer = false;
        startTimer(480); // Démarrer le minuteur plus long automatiquement après le minuteur initial
      } else {
        isShortTimer = true;
        startTimer(90); // Démarrer le minuteur initial automatiquement après le minuteur plus long
      }
    }

    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`;
    document.getElementById('timer').innerText = formattedTime;

    totalSeconds--;
  }

  function formatTime(time) {
    return time < 10 ? '0' + time : time;
  }

  function resetTimer() {
    clearInterval(timer);
    document.getElementById('timer').innerText = '00:00';
  }
</script>

[Arkshine]

Salut,

Vous voudriez insérer le JS dans la section Head pour que cela fonctionne !
Faites également attention au CSS du button – vous devriez créer un sélecteur spécifique pour éviter d’écraser le CSS par défaut.

Idéalement, vous voulez créer un composant de thème, et utiliser un outlet pour gérer le HTML/la logique. Je peux vous montrer plus tard !

[Plabforum]

Merci beaucoup de votre réponse.

J’ai essayé cela. J’ai créé un nouveau composant de thème, puis en utilisant l’option Modifier CSS/HTML, j’ai inséré ce code dans la section commune > en-tête. Je peux voir le minuteur sur le site Web, mais le problème est que le minuteur ne fonctionne pas. Il a un bouton lecture et arrêt, localement cela fonctionne bien mais sur le site Web, il affiche seulement le minuteur mais sans fonctionnalité.

J’ai également vérifié la console, en utilisant inspecter et voici l’erreur qu’elle affiche.

[Arkshine]

Oui, votre code est bloqué par la CSP. (voir les paramètres de sécurité)
Vous pourriez ajouter unsafe-inline à la liste blanche dans les paramètres, mais cela ne semble pas être une bonne idée.
Dans votre cas, pour que votre code fonctionne avec la CSP activée, je pense que vous devez gérer le clic différemment.

---

Par ailleurs, voici un composant de thème utilisant votre code : https://github.com/Arkshine/discourse-timer-component.
N’hésitez pas à le forker et à l’installer sur votre Discourse.

J’espère que mon code n’est pas trop horrible, mais ce serait la manière préférée par opposition à l’ajout de JavaScript brut dans ce contexte.
Il devrait fonctionner de la même manière avec des éléments de réactivité supplémentaires, des paramètres et la locale.

Cela peut être écrasant, mais c’est une excellente occasion de vous plonger dans le développement de composants de thème ! N’hésitez pas à demander si vous ne comprenez pas quelque chose.

Je recommande vivement d’utiliser le Discourse Theme CLI si vous souhaitez travailler avec localement. C’est pratique !

[Plabforum]

Je ne vous remercierai jamais assez de m’avoir aidé avec ça. C’est incroyable !!
Vous m’avez inspiré à apprendre cela.

J’ai quelques changements et questions concernant le minuteur. Puis-je vous les partager ?

[Plabforum]

Requêtes :

1. Quel est le but du bouton d’attente ?

Changements immédiats critiques :

1. Il s’agit d’un chronomètre continu, qui commence d’abord par 1:30 min, puis passe à 8:00 min, puis à 1:30 min et ainsi de suite, sans jamais se terminer.

2. Lorsque le chronomètre est en cours, les utilisateurs doivent pouvoir passer directement à 8:00 min en cliquant sur le bouton “entrer dans la pièce” ou passer au chronomètre de 1:30 min en cliquant sur le chronomètre de lecture de la tâche. Par conséquent, désactiver les boutons de pause et d’arrêt lorsque le chronomètre n’est pas en cours a du sens, mais lorsque le chronomètre est en cours et que les boutons de lecture de la tâche et d’entrée dans la pièce sont désactivés, les utilisateurs ne pourront pas contourner le chronomètre.

Changements futurs :

1. Ajouter une note vocale au début du chronomètre de 1:30 min, au début du chronomètre de 8:00 min, à 2:00 min restantes du chronomètre de 8:00 min et enfin à la fin du chronomètre de 8:00 min, qui est essentiellement le début du chronomètre de 1:30 min. Donc, au total, trois notes vocales.
2. Ajouter une alerte contextuelle pour chaque note vocale, qui apparaît et disparaît, ne doit pas occuper tout l’écran, mais plutôt la zone où se trouve le chronomètre.

[Arkshine]

Je n’ai définitivement pas tout compris dans votre code ; il semblerait

@Plabforum

1. Quel est le but du bouton d’attente ?

Il n’est pas logique de pouvoir cliquer sur ces boutons de pause/arrêt si une minuterie n’a pas démarré. De même que l’affichage de “pause” ou “reprendre”, c’est donc comme si, en attente, vous aviez une minuterie active. En fait, je cacherais plutôt le bouton. Mais je suppose qu’il est acceptable d’utiliser l’étiquette “pause” par défaut.

@Plabforum

C’est une minuterie continue, qui commence d’abord par 1:30 sec puis passe à 8:00 min puis à 1:30 et ainsi de suite, sans jamais se terminer.

Elle alterne entre les deux, d’accord. Je pensais que c’était une boucle avec l’une de ces minuteries.
Je ne suis pas sûr de comprendre le contexte, cela me semble assez étrange, je peux changer ça.

@Plabforum

Quand la minuterie est en cours d’exécution…

Je vois.

Laissez-moi régler ça avant de faire quoi que ce soit d’autre.

[Plabforum]

Salut,

Pour moi, c’est incroyable de voir ce minuteur prendre vie. Tu es incroyable et inspirant.

Ceci est un minuteur pour un examen donné par des médecins, je suis moi-même médecin et j’essaie d’aider d’autres médecins.

L’examen se compose de 16 salles, contenant 16 patients différents que nous devons diagnostiquer et gérer. Avant d’entrer dans une salle, une tâche est placée à l’extérieur que vous pouvez lire en 1 minute et 30 secondes, puis vous entrez dans la salle, vous avez 8 minutes pour effectuer la tâche et gérer les patients, le cycle continue pour 16 autres salles. cela prend au total 3 heures pour être complété.

J’ai malheureusement échoué à cet examen, en raison de désinformation et de mauvais conseils à ce sujet, ce qui m’a inspiré à créer ce forum pour aider à guider d’autres médecins.

J’espère que cela donne le contexte.

[Arkshine]

J’ai poussé une mise à jour. Elle devrait faire boucler le minuteur court/long, et vous pouvez passer à n’importe quel minuteur maintenant. J’ai également supprimé l’utilisation de « en attente ». Faites-moi savoir si cela fonctionne mieux.

Merci pour l’explication du contexte, je comprends maintenant !

[Plabforum]

J’ai trouvé un bug, si je clique sur le bouton « read task » le minuteur passe de 1:30 min à 8:00 min puis continue de boucler sur 1:30 min. Si je clique sur le bouton « enter room », le minuteur passe de 8:00 à 1:30 puis continue de boucler sur le minuteur de 8:00 min.

[Arkshine]

Désolé. C’est corrigé. J’ai seulement vérifié la première boucle parce que j’étais pressé, et je n’ai pas remarqué que le changement ne s’était pas produit après.

[Plabforum]

Ce n’est pas grave !

Je vais également commencer à apprendre à partir du matériel que vous avez partagé précédemment. Je reviendrai vers vous si j’ai des questions.

[Plabforum]

Maintenant, le problème est que lorsque vous cliquez sur le bouton « Lire la tâche », le chronomètre démarre à 1:30 et boucle sur 8:00.

1:30 > 8:00 > 8:00 > 8:00…

Si vous cliquez sur le bouton « Entrer dans la pièce », le chronomètre démarre à 8:00 et boucle sur 1:30.

8:00 > 1:30 > 1:30 > 1:30…

Idéalement, il devrait y avoir une boucle continue et fluide alternant entre 1:30 et 8:00, le point de départ étant déterminé par le bouton sur lequel vous cliquez en premier.

Par exemple, si vous cliquez sur le bouton « Lire la tâche », le chronomètre devrait démarrer à 1:30, puis continuer dans une boucle alternée entre 8:00 et 1:30 :

1:30 > 8:00 > 1:30 > 8:00…

Si vous cliquez sur le bouton « Entrer dans la pièce », le chronomètre devrait démarrer à 8:00 et suivre une boucle alternée entre 1:30 et 8:00 :

8:00 > 1:30 > 8:00 > 1:30…

[Arkshine]

Êtes-vous sûr d’avoir bien mis à jour et actualisé la page ? Vous décrivez le bug avant la correction, et je ne peux pas le reproduire maintenant. J’ai testé à nouveau, et cela boucle comme prévu.

[Plabforum]

Je viens de vérifier, cela fonctionne comme prévu.

[Plabforum]

Je pense que j’aimerais maintenant apprendre à modifier le minuteur moi-même. Comme ça, je ne vous dérangerai plus.

Je veux me donner une petite tâche, avec ce projet de minuteur existant, qui m’aidera à apprendre.

La tâche consiste à ajouter un nom « PLAB 2 Timer » juste au-dessus du minuteur actuel, comme ceci :

Pouvez-vous me guider par où je devrais commencer ?

[Arkshine]

La première étape consiste à installer Discourse pour le développement. Ce sera plus facile à tester.

Install Discourse on macOS for development

This guide covers installation instructions for a macOS development environment, for production guides see: Install Discourse in production with the official supported instructions So you want to set up Discourse on macOS to hack on and develop with? We’ll assume that you don’t have Ruby/Rails/Postgres/Redis installed on your Mac. Let’s begin ! Install Discourse Dependencies You will need the following packages on your system: Git rbenv or asdf ruby-build Ruby (latest s…

Install Discourse on Ubuntu or Debian for Development

This guide covers installation instructions in a development environment. For a production guide see: Install Discourse in production with the official supported instructions So you want to set up Discourse on Ubuntu or Debian to hack on and develop with? We’ll assume that you work locally and don’t have Ruby/Rails/Postgres/Redis installed on your Ubuntu or Debian system. Let’s begin! Requirements We suggest having at least 4 GB RAM and 2 CPU cores. Current compatibility: O…

Install Discourse on Windows for development

This tutorial has been tested on Windows 10 and 11. To set up a development environment for Discourse on Windows, you can do it using Windows Subsystem for Linux feature. This setup requires the WSL 2 installation. It is only available in Windows 10 builds 18917 or higher. We’ll assume that you already installed Windows Subsystem for Linux 2 (Ubuntu) on your Windows 10 system. WARNING: Install Ubuntu 18.04, and not 20.04 since some installations will fail on 20.04. For m…

Ensuite, vous pouvez forker mon composant, le cloner quelque part et utiliser le Discourse Theme CLI.

@Plabforum

La tâche consiste à ajouter un nom « PLAB 2 Timer » juste au-dessus du minuteur actuel, comme ceci :

Regardez le code <template>... </template>. Vous pouvez y ajouter votre texte.
Le CSS se trouve dans le fichier common/common.scss.

Vous pouvez localiser votre texte en ajoutant une entrée dans locales/en.yml – puis vous pouvez utiliser {{I18n.t(themePrefix("my_translation_key"))}}

Theme Developer Quick Reference Guide

As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #howto / #themes, but if you just need something to jog your memory, this guide may help. General Resources Beginner’s guide Designer’s guide Developer’s guide Theme Creator Theme CLI Theme Directory Component Directory Theme Modifiers Themeable site…