أحتاج مساعدة في دمج الكود المكتوب في EditText إلى Discourse

مطور
1

لقد أنشأت هذا المؤقت باستخدام الكود التالي، إنه يعمل محليًا ولكني أواجه مشكلة في دمجه على منتداي. هل يمكن لأحد أن يساعدني؟

<!-- HTML (Add this to the Header section) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* Set the desired width for all buttons */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* Darker green for better visibility on dark background */
  }

  #enterRoomButton {
    background: #DAA520; /* Darker yellow */
  }

  #pauseButton {
    background: #A0522D; /* Darker orange */
  }

  #stopButton {
    background: #FF0000; /* Darker red */
  }
</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)">Read Task</button>
    <button id="enterRoomButton" onclick="startTimer(480)">Enter Room</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()">Stop</button>
  </div>
</div>

<!-- JavaScript (Add this to the Footer section) -->
<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 ? 'Resume' : '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); // Start the longer timer automatically after the initial timer
      } else {
        isShortTimer = true;
        startTimer(90); // Start the initial timer automatically after the longer timer
      }
    }

    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>
2

مرحباً،

ستحتاج إلى إدراج كود جافاسكريبت في قسم Head لكي يعمل!
أيضاً، كن حذراً مع تنسيق CSS الخاص بـ button – يجب عليك إنشاء محدد خاص لتجنب الكتابة فوق تنسيق CSS الافتراضي.

من الناحية المثالية، تريد إنشاء مكون سمة، واستخدام منفذ للتعامل مع HTML/المنطق. يمكنني أن أريك لاحقاً!

إعجابَين (2)
3

شكراً جزيلاً على الرد.

لقد جربت ذلك. لقد أنشأت مكون سمة جديدًا ثم باستخدام خيار تحرير CSS/HTML، قمت بإدراج هذا الرمز في قسم الرأس المشترك. يمكنني رؤية المؤقت على الموقع الإلكتروني ولكن المشكلة هي أن المؤقت لا يعمل. يحتوي على زر تشغيل وإيقاف، ويعمل محليًا بشكل جيد ولكن على الموقع الإلكتروني يعرض المؤقت فقط ولكن لا يعمل.

Screenshot 2023-11-12 at 9.08.51 AM
Screenshot 2023-11-12 at 9.08.51 AM2242×1424 280 KB

Screenshot 2023-11-12 at 9.09.24 AM
Screenshot 2023-11-12 at 9.09.24 AM1016×522 21.7 KB

لقد تحققت أيضًا من وحدة التحكم، باستخدام الفحص وهذا هو الخطأ الذي يظهر.

Screenshot 2023-11-12 at 9.10.39 AM
Screenshot 2023-11-12 at 9.10.39 AM1686×674 114 KB

4

نعم، يتم حظر الكود الخاص بك بواسطة CSP. (راجع إعدادات الأمان)
يمكنك إضافة unsafe-inline إلى القائمة البيضاء في الإعدادات، ولكن هذا لا يبدو فكرة جيدة.
في حالتك، لجعل الكود الخاص بك يعمل مع تمكين CSP، أعتقد أنك بحاجة إلى معالجة النقرة بشكل مختلف.

على صعيد آخر، إليك مكون سمة يستخدم الكود الخاص بك: https://github.com/Arkshine/discourse-timer-component.
لا تتردد في إنشاء نسخة منه و تثبيته على Discourse الخاص بك.

نأمل ألا يكون الكود الخاص بي سيئًا للغاية، ولكن هذه ستكون الطريقة المفضلة بدلاً من إضافة JavaScript عادي في هذا السياق.
يجب أن يعمل بنفس الطريقة مع أشياء تفاعلية إضافية وإعدادات ولغة.

قد يكون الأمر مربكًا، ولكنه فرصة ممتازة للتعمق في تطوير مكونات السمات! لا تتردد في السؤال إذا لم تفهم شيئًا. :slight_smile:

أوصي بشدة باستخدام Discourse Theme CLI إذا كنت ترغب في العمل معه محليًا. إنه مفيد!

إعجابَين (2)
5

لا أستطيع أن أشكرك بما فيه الكفاية على مساعدتي في هذا. هذا مذهل!!
لقد ألهمتني لتعلم هذا. :heart:

لدي بعض التغييرات والاستفسارات بخصوص المؤقت. هل يمكنني مشاركتها معك؟

6

الاستعلامات:

  1. ما الغرض من زر الانتظار؟

التغييرات الفورية الحاسمة:

  1. إنه مؤقت مستمر، يبدأ أولاً بـ 1:30 ثانية ثم ينتقل إلى 8:00 دقائق ثم ينتقل إلى 1:30 وهكذا، ولا ينتهي أبدًا.

  2. عندما يكون المؤقت قيد التشغيل، يحتاج المستخدمون إلى القدرة على التجاوز مباشرة إلى 8:00 دقائق بالنقر على زر الدخول إلى الغرفة أو الانتقال إلى مؤقت 1:30 بالنقر على مؤقت قراءة المهمة. لذلك فإن تعطيل زر الإيقاف المؤقت والإيقاف عندما لا يكون المؤقت قيد التشغيل منطقي، ولكن عندما يكون المؤقت قيد التشغيل وتعطيل زر قراءة المهمة وزر الدخول إلى الغرفة سيمنع المستخدمين من تجاوز المؤقت.

التغييرات المستقبلية:

  1. إضافة مذكرة صوتية عند بدء مؤقت 1:30 ثانية، وبدء مؤقت 8:00 دقائق، وعند الدقيقتين المتبقيتين من مؤقت 8:00 دقائق وأخيرًا نهاية مؤقت 8:00 دقائق، وهو في الأساس بداية مؤقت 1:30 ثانية. لذا في المجموع ثلاث مذكرات صوتية،
  2. إضافة تنبيه منبثق لكل مذكرة صوتية، يظهر ويختفي، ولا يجب أن يشغل الشاشة بأكملها، بل المنطقة التي يوجد بها المؤقت.
7

لم أفهم كل شيء في الكود الخاص بك بالتأكيد؛ يبدو الأمر كذلك :smile:

ليس من المنطقي أن تتمكن من النقر على أزرار الإيقاف المؤقت/الإيقاف هذه إذا لم يبدأ المؤقت. نفس الشيء بالنسبة لإظهار “إيقاف مؤقت” أو “استئناف”، لذا فهو مثل الانتظار لديك مؤقت نشط. في الواقع، سأخفي الزر بدلاً من ذلك. لكنني أعتقد أنه لا بأس في استخدام تسمية “إيقاف مؤقت” كافتراضي.

يتناوب بين كليهما، حسناً. اعتقدت أنها حلقة مع أحد هذين المؤقتين.
لست متأكداً من فهم السياق، يبدو غريباً جداً بالنسبة لي، يمكنني تغييره. :smile:

أفهم.

دعني أصلح ذلك قبل القيام بأي شيء آخر. :slight_smile:

8

أهلاً،

من المدهش بالنسبة لي رؤية هذا المؤقت يتحقق. أنت مدهش وملهم.

هذا مؤقت لامتحان يجريه الأطباء، وأنا طبيب أيضًا أحاول مساعدة الأطباء الآخرين.

يتكون الامتحان من 16 غرفة، تحتوي على 16 مريضًا مختلفًا نحتاج إلى تشخيصهم وإدارتهم. قبل دخول أي غرفة، توجد مهمة بالخارج يمكنك قراءتها في دقيقة و 30 ثانية ثم تدخل الغرفة، لديك 8 دقائق لأداء المهمة وإدارة المرضى، وتستمر الدورة لـ 16 غرفة أخرى. يستغرق هذا ما مجموعه 3 ساعات لإكماله.

للأسف رسبت في هذا الامتحان، بسبب معلومات مضللة وتوجيهات خاطئة تتعلق بهذا الأمر، مما ألهمي لإنشاء هذا المنتدى لمساعدة الأطباء الآخرين.

آمل أن يعطي هذا السياق. :innocent:

إعجاب واحد (1)
9

لقد دفعت تحديثًا. يجب أن يكرر المؤقت القصير/الطويل، ويمكنك التبديل إلى أي مؤقت الآن. لقد أزلت أيضًا استخدام “waiting..”. أخبرني إذا كان يعمل بشكل أفضل.

شكرًا لك على شرح السياق، أفهم الآن! :+1:

إعجابَين (2)
10

لقد وجدت خطأ، إذا نقرت على زر “قراءة المهمة” (read task)، فإن المؤقت ينتقل من 1:30 دقيقة إلى 8:00 دقائق ثم يستمر في التكرار عند 1:30 دقيقة. إذا نقرت على زر “الدخول إلى الغرفة” (enter room)، فإن المؤقت ينتقل من 8:00 إلى 1:30 ثم يستمر في التكرار عند مؤقت 8:00 دقائق.

11

عذراً. لقد تم إصلاحه. لقد تحققت من الحلقة الأولى فقط لأنني كنت في عجلة من أمري، ولم ألاحظ أن التبديل لم يحدث بعد. :smile:

إعجابَين (2)
12

لا بأس!
سأبدأ أيضًا في التعلم من المواد التي شاركتها سابقًا. سأعود إليك إذا كانت لدي أي استفسارات.

13

الآن، المشكلة هي أنه عند النقر على زر “قراءة المهمة” (Read Task)، يبدأ المؤقت عند 1:30 ويتكرر عند 8:00.

1:30 > 8:00 > 8:00 > 8:00 ..

إذا نقرت على زر “الدخول إلى الغرفة” (Enter Room)، يبدأ المؤقت عند 8:00 ويتكرر عند 1:30.

8:00 > 1:30 > 1:30 > 1:30 ..

من الناحية المثالية، يجب أن يكون هناك تكرار سلس ومستمر يتناوب بين 1:30 و 8:00، مع تحديد نقطة البداية بواسطة الزر الذي تنقر عليه أولاً.

على سبيل المثال، إذا نقرت على زر “قراءة المهمة” (Read Task)، يجب أن يبدأ المؤقت عند 1:30 ثم يستمر في تكرار متناوب بين 8:00 و 1:30:

1:30 > 8:00 > 1:30 > 8:00..

إذا نقرت على زر “الدخول إلى الغرفة” (Enter Room)، يجب أن يبدأ المؤقت من 8:00 ويتبع تكرارًا متناوبًا بين 1:30 و 8:00:

8:00 > 1:30 > 8:00 > 1:30..

14

هل أنت متأكد من أنك قمت بالتحديث وتحديث الصفحة؟ أنت تصف الخطأ قبل الإصلاح، ولا يمكنني تكراره الآن. لقد اختبرت مرة أخرى، وهو يعمل كما هو متوقع.

إعجاب واحد (1)
15

لقد تحققت للتو، إنه يعمل كما هو متوقع. :innocent::heart:

16

أعتقد الآن أود أن أتعلم كيف يمكنني إجراء تغييرات على المؤقت بنفسي. لذا، سأتوقف عن إزعاجك. :joy:

أريد أن أمنح نفسي مهمة صغيرة، مع مشروع المؤقت الحالي هذا، والتي ستساعدني على التعلم.

المهمة هي إضافة اسم “PLAB 2 Timer” فوق المؤقت الفعلي مباشرة، هكذا:

IMG_3646
IMG_36461284×328 37.4 KB

هل يمكنك إرشادي من أين يجب أن أبدأ؟

17

الخطوة الأولى هي تثبيت Discourse للتطوير. سيكون من الأسهل الاختبار.

بعد ذلك، يمكنك عمل fork لمكوني، واستنساخه في مكان ما، واستخدام Discourse Theme CLI.

انظر إلى الكود <template>... </template>. يمكنك إضافة النص الخاص بك هناك.
يقع CSS في ملف common/common.scss.

يمكنك ترجمة النص الخاص بك عن طريق إضافة إدخال في locales/en.yml – ثم يمكنك استخدام {{I18n.t(themePrefix("my_translation_key"))}}

إعجابَين (2)