Aiuto nell'integrazione del codice scritto su EditText in Discourse

[Plabforum]

Ho creato questo timer usando il seguente codice, funziona localmente ma ho problemi a integrarlo nel mio forum. Qualcuno può per favore aiutarmi?

<!-- HTML (Aggiungere alla sezione Header) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* Imposta la larghezza desiderata per tutti i pulsanti */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* Verde più scuro per una migliore visibilità su sfondo scuro */
  }

  #enterRoomButton {
    background: #DAA520; /* Giallo più scuro */
  }

  #pauseButton {
    background: #A0522D; /* Arancione più scuro */
  }

  #stopButton {
    background: #FF0000; /* Rosso più scuro */
  }
</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)">Leggi Task</button>
    <button id="enterRoomButton" onclick="startTimer(480)">Entra nella Stanza</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()">Pausa</button>
    <button id="stopButton" onclick="stopTimer()">Stop</button>
  </div>
</div>

<!-- JavaScript (Aggiungere alla sezione 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 ? 'Riprendi' : 'Pausa';
  }

  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); // Avvia il timer più lungo automaticamente dopo il timer iniziale
      } else {
        isShortTimer = true;
        startTimer(90); // Avvia il timer iniziale automaticamente dopo il timer più lungo
      }
    }

    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]

Ciao,

Dovresti inserire il JS nell’Head per farlo funzionare!
Inoltre, fai attenzione al CSS del button: dovresti creare un selettore specifico per evitare di sovrascrivere il CSS predefinito.

Idealmente, dovresti creare un componente tema e utilizzare un outlet per gestire HTML/logica. Posso mostrartelo più tardi!

[Plabforum]

Grazie mille per aver risposto.

Ci ho provato. Ho creato un nuovo componente tema e poi, utilizzando l’opzione Modifica CSS/HTML, ho inserito quel codice nella sezione comune > header. Riesco a vedere il timer sul sito web, ma il problema è che il timer non funziona. Ha un pulsante play e stop, localmente funziona bene ma sul sito web mostra solo il timer ma non funziona.

Ho anche controllato la console, usando ispeziona e questo è l’errore che mostra.

[Arkshine]

Sì, il tuo codice è bloccato da CSP. (vedi impostazioni di sicurezza)
Potresti aggiungere unsafe-inline alle impostazioni, ma non sembra una buona idea.
Nel tuo caso, per far funzionare il tuo codice con CSP abilitato, credo che tu debba gestire il click in modo diverso.

---

A parte questo, ecco un componente tema che utilizza il tuo codice: https://github.com/Arkshine/discourse-timer-component.
Sentiti libero di effettuare un fork e installarlo sul tuo Discourse.

Spero che il mio codice non sia troppo terribile, ma questo sarebbe il modo preferito rispetto all’aggiunta di JavaScript semplice in questo contesto.
Dovrebbe funzionare allo stesso modo con funzionalità reattive aggiuntive, impostazioni e localizzazione.

Potrebbe essere travolgente, ma è un’ottima opportunità per approfondire lo sviluppo di componenti tema! Non esitare a chiedere se non capisci qualcosa.

Consiglio vivamente di utilizzare la Discourse Theme CLI se vuoi lavorarci localmente. È molto utile!

[Plabforum]

Non posso ringraziarti abbastanza per il tuo aiuto. È fantastico!! Mi hai ispirato ad imparare questo. Ho alcune modifiche e domande riguardo al timer. Posso condividerle con te?

[Plabforum]

Query:\n1. Qual è lo scopo del pulsante di attesa?\n\nModifiche critiche immediate:\n1. È un timer continuo, prima inizia con 1:30 secondi poi passa a 8:00 minuti poi passa a 1:30 e così via, non finisce mai.\n\n2. Quando il timer è in riproduzione, gli utenti devono avere la possibilità di passare direttamente a 8:00 minuti cliccando sul pulsante “entra nella stanza” o passare al timer di 1:30 minuti cliccando sul timer di lettura del compito. Pertanto, disabilitare i pulsanti di pausa e arresto quando il timer non è in riproduzione ha senso, ma quando il timer è in riproduzione e disabilitare il pulsante di lettura del compito e di entrata nella stanza impedirà agli utenti di aggirare il timer.\n\nModifiche future:\n1. Aggiunta di una nota vocale all’inizio del timer di 1:30 minuti, all’inizio del timer di 8:00 minuti, a 2:00 minuti rimanenti del timer di 8:00 minuti e infine alla fine del timer di 8:00 minuti, che è fondamentalmente l’inizio del timer di 1:30 minuti. Quindi in totale tre note vocali,\n2. Aggiunta di un avviso pop-up per ogni nota vocale, che appare e scompare, non dovrebbe occupare l’intero schermo, bensì l’area in cui si trova il timer.

[Arkshine]

Non ho capito tutto nel tuo codice; a quanto pare

@Plabforum

1. Qual è lo scopo del pulsante di attesa?

Non ha senso poter fare clic su quei pulsanti di pausa/arresto se un timer non è iniziato. Lo stesso vale per la visualizzazione di “pausa” o “riprendi”, quindi è come se in attesa avessi un timer attivo. In realtà, nasconderei il pulsante. Ma immagino che vada bene usare l’etichetta “pausa” come predefinita.

@Plabforum

È un timer continuo, prima inizia con 1:30 secondi poi passa a 8:00 minuti poi passa a 1:30 e così via, non finisce mai.

Alterna tra entrambi, va bene. Pensavo fosse un ciclo con uno di quei timer.
Non sono sicuro di capire il contesto, mi sembra piuttosto strano, posso cambiarlo.

@Plabforum

Quando il timer è in riproduzione..

Capisco.

Lascia che lo corregga prima di fare qualsiasi altra cosa.

[Plabforum]

Ehi,

Per me è incredibile vedere questo timer prendere vita. Sei fantastico e d’ispirazione.

Questo è un timer per un esame tenuto da medici, anch’io sono un medico e cerco di aiutare altri medici.

L’esame consiste in 16 stanze, contenenti 16 pazienti diversi che dobbiamo diagnosticare e gestire. Prima di entrare in qualsiasi stanza, c’è un compito all’esterno che puoi leggere in 1 minuto e 30 secondi, poi entri nella stanza, hai 8 minuti per svolgere il compito e gestire i pazienti, il ciclo continua per altre 16 stanze. Questo richiede in totale 3 ore per essere completato.

Purtroppo ho fallito questo esame, a causa di disinformazione e cattiva guida ad esso correlate, il che mi ha ispirato a creare questo forum per aiutare a guidare altri medici.

Spero che questo dia il contesto.

[Arkshine]

Ho rilasciato un aggiornamento. Dovrebbe ciclare il timer breve/lungo e ora puoi passare a qualsiasi timer. Ho anche rimosso l’uso di “in attesa…”. Fammi sapere se funziona meglio.

Grazie per aver spiegato il contesto, ora capisco!

[Plabforum]

Ho trovato un bug, se clicco sul pulsante “leggi attività” il timer passa da 1:30 min a 8:00 min e poi continua a ciclare su 1:30 min. Se clicco sul pulsante “entra nella stanza”, il timer passa da 8:00 a 1:30 e poi continua a ciclare sul timer da 8:00 min.

[Arkshine]

Colpa mia. È stato sistemato. Ho controllato solo il primo ciclo perché ero di fretta e non ho notato che l’interruttore non era scattato dopo.

[Plabforum]

Va bene!

Inizierò anche ad imparare dal materiale che hai condiviso in precedenza. Ti contatterò se avrò domande.

[Plabforum]

Ora, il problema è che quando si fa clic sul pulsante “Read Task”, il timer parte da 1:30 e si ripete su 8:00.

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

Se si fa clic sul pulsante “Enter Room”, il timer parte da 8:00 e si ripete su 1:30.

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

Idealmente, dovrebbe esserci un ciclo continuo e fluido che alterna tra 1:30 e 8:00, con il punto di partenza determinato dal pulsante cliccato per primo.

Ad esempio, se si fa clic sul pulsante “Read Task”, il timer dovrebbe partire da 1:30 e poi procedere in un ciclo alternato tra 8:00 e 1:30:

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

Se si fa clic sul pulsante “Enter Room”, il timer dovrebbe partire da 8:00 e seguire un ciclo alternato tra 1:30 e 8:00:

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

[Arkshine]

Sei sicuro di aver aggiornato e aggiornato la pagina? Descrivi il bug prima della correzione e ora non riesco a riprodurlo. Ho testato di nuovo e funziona come previsto.

[Plabforum]

Ho appena controllato, funziona come previsto.

[Plabforum]

Penso che ora vorrei imparare come posso apportare modifiche al timer da solo. Così, smetterò di disturbarti.

Voglio darmi un piccolo compito, con questo progetto esistente del timer, che mi aiuterà a imparare.

Il compito è aggiungere un nome “PLAB 2 Timer” appena sopra il timer effettivo, così:

Puoi guidarmi da dove dovrei iniziare?

[Arkshine]

Il primo passo è installare Discourse per lo sviluppo. Sarà più facile testare.

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…

Quindi, puoi fare il fork del mio componente, clonarlo da qualche parte e usare Discourse Theme CLI.

@Plabforum

Il compito è aggiungere un nome “PLAB 2 Timer” appena sopra il timer effettivo, così:

Guarda il codice <template>... </template>. Puoi aggiungere il tuo testo lì.
Il CSS si trova nel file common/common.scss.

Puoi localizzare il tuo testo aggiungendo una voce in locales/en.yml – quindi puoi usare {{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…