Ayuda para integrar código escrito en EditText a Discourse

[Plabforum]

Creé este temporizador usando el siguiente código, funciona localmente pero tengo problemas para integrarlo en mi foro. ¿Alguien puede ayudarme?

<!-- HTML (Añadir esto a la sección Header) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* Establecer el ancho deseado para todos los botones */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* Verde más oscuro para una mejor visibilidad en fondo oscuro */
  }

  #enterRoomButton {
    background: #DAA520; /* Amarillo más oscuro */
  }

  #pauseButton {
    background: #A0522D; /* Naranja más oscuro */
  }

  #stopButton {
    background: #FF0000; /* Rojo más oscuro */
  }
</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)">Leer Tarea</button>
    <button id="enterRoomButton" onclick="startTimer(480)">Entrar Habitación</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()">Detener</button>
  </div>
</div>

<!-- JavaScript (Añadir esto a la sección 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 ? 'Reanudar' : '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); // Iniciar el temporizador más largo automáticamente después del temporizador inicial
      } else {
        isShortTimer = true;
        startTimer(90); // Iniciar el temporizador inicial automáticamente después del temporizador más largo
      }
    }

    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]

Hola,

¡Querrás insertar el JS en Head en lugar de hacerlo funcionar!
Además, ten cuidado con el CSS del button, deberías crear un selector específico para evitar sobrescribir el CSS predeterminado.

Idealmente, querrás crear un componente temático y usar un outlet para manejar HTML/lógica. ¡Te lo mostraré más tarde!

[Plabforum]

Muchas gracias por responder.

Intenté eso. Creé un nuevo componente de tema y luego, usando la opción de editar CSS/HTML, inserté ese código en la sección común > encabezado. Puedo ver el temporizador en el sitio web, pero el problema es que el temporizador no se reproduce. Tiene botones de reproducción y parada, localmente funciona bien, pero en el sitio web solo muestra el temporizador pero no funciona.

También revisé la consola, usando inspeccionar y este es el error que muestra.

[Arkshine]

Sí, tu código está siendo bloqueado por CSP. (ver configuración de seguridad)
Podrías agregar unsafe-inline a la lista blanca en la configuración, pero eso no parece una buena idea.
En tu caso, para que tu código funcione con CSP habilitado, creo que necesitas manejar el clic de manera diferente.

---

Por cierto, aquí tienes un componente de tema que utiliza tu código: https://github.com/Arkshine/discourse-timer-component.
Siéntete libre de hacer un fork e instalarlo en tu Discourse.

Espero que mi código no sea demasiado horrible, pero esta sería la forma preferida en lugar de agregar JavaScript plano en este contexto.
Debería funcionar igual con reactividad adicional, configuraciones y localización.

Puede ser abrumador, ¡pero es una excelente oportunidad para profundizar en el desarrollo de componentes de temas! No dudes en preguntar si no entiendes algo.

Recomiendo encarecidamente usar la Discourse Theme CLI si quieres trabajar con ella localmente. ¡Es muy útil!

[Plabforum]

No puedo agradecerte lo suficiente por ayudarme con esto. ¡¡Esto es asombroso!!
Me has inspirado a aprender esto.

Tengo algunos cambios y preguntas sobre el temporizador. ¿Puedo compartirlos contigo?

[Plabforum]

Consultas:

1. ¿Cuál es el propósito del botón de espera?

Cambios críticos inmediatos:

1. Es un temporizador continuo, primero comienza con 1:30 segundos, luego cambia a 8:00 minutos, luego cambia a 1:30 y así sucesivamente, nunca termina.

2. Cuando el temporizador se está ejecutando, los usuarios deben tener la capacidad de omitir directamente a los 8:00 minutos haciendo clic en el botón “entrar a la sala” o cambiar al temporizador de 1:30 minutos haciendo clic en el temporizador de lectura de tareas. por lo tanto, deshabilitar el botón de pausa y detener cuando el temporizador no se está ejecutando tiene sentido, pero cuando el temporizador se está ejecutando y deshabilitar el botón de lectura de tareas y entrar a la sala impedirá a los usuarios omitir el temporizador.

Cambios futuros:

1. Añadir una nota de voz al inicio del temporizador de 1:30 segundos, al inicio del temporizador de 8:00 minutos, a los 2:00 minutos restantes del temporizador de 8:00 minutos y finalmente al final del temporizador de 8:00 minutos, que es básicamente el inicio del temporizador de 1:30 segundos. Así que en total tres notas de voz.
2. Añadir una alerta emergente para cada nota de voz, que aparece y desaparece, no debe ocupar toda la pantalla, sino el área donde se encuentra el temporizador.

[Arkshine]

Definitivamente no entendí todo en tu código; parecería

@Plabforum

1. ¿Cuál es el propósito del botón de espera?

No tiene sentido poder hacer clic en esos botones de pausa/parada si no ha comenzado un temporizador. Lo mismo que mostrar “pausa” o “reanudar”, por lo que es como si en espera tuvieras un temporizador activo. De hecho, ocultaría el botón en su lugar. Pero supongo que está bien usar la etiqueta “pausa” por defecto.

@Plabforum

Es un temporizador continuo, primero comienza con 1:30 segundos, luego cambia a 8:00 minutos, luego cambia a 1:30 y así sucesivamente, nunca termina.

Alterna entre ambos, de acuerdo. Pensé que era un bucle con uno de esos temporizadores.
No estoy seguro de entender el contexto, me parece bastante extraño, puedo cambiarlo.

@Plabforum

Cuando el temporizador está en marcha…

Ya veo.

Déjame arreglar eso antes de hacer cualquier otra cosa.

[Plabforum]

Hola,

Me parece increíble ver este temporizador cobrar vida. Eres increíble e inspirador.

Este es un temporizador para un examen administrado por médicos, yo también soy médico y trato de ayudar a otros médicos.

El examen consta de 16 salas, que contienen 16 pacientes diferentes que debemos diagnosticar y tratar. Antes de entrar en cualquier sala, hay una tarea que puedes leer en 1 minuto y 30 segundos y luego entras en la sala, tienes 8 minutos para realizar la tarea y tratar a los pacientes, el ciclo continúa para otras 16 salas. eso lleva un total de 3 horas para completarlo.

Desafortunadamente, reprobé este examen, debido a información errónea y desinformación relacionada con esto, lo que me inspiró a crear este foro para ayudar a guiar a otros médicos.

Espero que esto dé contexto.

[Arkshine]

He lanzado una actualización. Debería repetir el temporizador corto/largo, y ahora puedes cambiar a cualquier temporizador. También he eliminado el uso de “esperando…”. Hazme saber si funciona mejor.

¡Gracias por explicar el contexto, ahora lo entiendo!

[Plabforum]

Encontré un error, si hago clic en el botón “read task” el temporizador pasa de 1:30 min a 8:00 min y luego sigue en bucle en 1:30 min. Si hago clic en el botón “enter room”, el temporizador pasa de 8:00 a 1:30 y luego sigue en bucle en el temporizador de 8:00 min.

[Arkshine]

Lo siento. Ya está arreglado. Solo revisé el primer bucle porque tenía prisa y no me di cuenta de que el cambio no ocurrió después.

[Plabforum]

¡Está bien!

También empezaré a aprender del material que compartiste antes. Me pondré en contacto contigo si tengo alguna pregunta.

[Plabforum]

Ahora, el problema es que al hacer clic en el botón “Read Task”, el temporizador comienza en 1:30 y se repite en 8:00.

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

Si haces clic en el botón “Enter Room”, el temporizador comienza en 8:00 y se repite en 1:30.

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

Idealmente, debería haber un bucle continuo y fluido que alterne entre 1:30 y 8:00, con el punto de partida determinado por el botón que se haga clic primero.

Por ejemplo, si haces clic en el botón “Read Task”, el temporizador debería comenzar en 1:30 y luego continuar en un bucle alterno entre 8:00 y 1:30:

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

Si haces clic en el botón “Enter Room”, el temporizador debería comenzar en 8:00 y seguir un bucle alterno entre 1:30 y 8:00:

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

[Arkshine]

¿Estás seguro de que actualizaste y refrescaste la página? Describes el error antes de la corrección, y ahora no puedo reproducirlo. Volví a probar y funciona como se esperaba.

[Plabforum]

Lo acabo de comprobar, funciona como se esperaba.

[Plabforum]

Creo que ahora me gustaría aprender cómo puedo hacer yo mismo cambios en el temporizador. Así, dejaré de molestarte.

Quiero darme una pequeña tarea, con este proyecto existente del temporizador, que me ayudará a aprender.

La tarea es agregar un nombre “PLAB 2 Timer” justo encima del temporizador actual, así:

¿Puedes guiarme por dónde debo empezar?

[Arkshine]

El primer paso es instalar Discourse para el desarrollo. Será más fácil de probar.

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…

Luego, puedes hacer un fork de mi componente, clonarlo en algún lugar y usar Discourse Theme CLI.

@Plabforum

La tarea es añadir un nombre “PLAB 2 Timer” justo encima del temporizador actual, así:

Mira el código <template>... </template>. Puedes añadir tu texto allí.
La CSS se encuentra en el archivo common/common.scss.

Puedes localizar tu texto añadiendo una entrada en locales/en.yml – luego puedes usar {{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…