nicer UI, ignore hours

shared/templates/shared/base.html

@@ -66,9 +66,11 @@
                 </ui-app>
             </nav>
         {% endblock %}
-        <div class="container container--default py-8 lg:py-24">
-            {% block content %}{% endblock %}
-        </div>
+        {% block raw_content %}
+            <div class="container container--default py-8 lg:py-24">
+                {% block content %}{% endblock %}
+            </div>
+        {% endblock %}
         {% block footer %}
             <footer class="footer bg-grey-700 text-white __js-root hidden lg:block">
                 <ui-app inline-template>

shared/templates/shared/index.html

@@ -77,6 +77,26 @@
                     </div>
                 </li>
 
+                <li class="card">
+                    <a href="{% url "timer:index" %}">
+                        <img
+                            src="{% static "shared/timer.webp" %}"
+                            alt="Časovač pro řečníky"
+                            class="w-full h-48 object-cover"
+                        >
+                    </a>
+                    <div class="p-4">
+                        <h2 class="mb-2 text-xl font-bold">
+                            <a href="{% url "timer:index" %}">
+                                Časovač pro řečníky
+                            </a>
+                        </h2>
+                        <div class="font-light text-sm break-words">
+                            Vzdáleně ovladatelný časovač pro omezení doby projevu řečníků.
+                        </div>
+                    </div>
+                </li>
+
                 <li class="card">
                     <a href="{% url "asset_server_resize:index" %}">
                         <img

static_src/member_group_size_calc.js

-import $ from "jquery";
+    import $ from "jquery";
 
 $(window).ready(
     () => {

static_src/timer.js

@@ -5,7 +5,7 @@ const assignEventListeners = (timer) => {
     timer.addEventListener(
         'secondsUpdated',
         (event) => {
-            $('#timer .timer-values').html(timer.getTimeValues().toString())
+            $('#timer .timer-values').html(timer.getTimeValues().toString(['minutes', 'seconds']))
         }
     )
 
@@ -17,7 +17,7 @@ const assignEventListeners = (timer) => {
         }
     )
 
-    $('#timer .timer-values').html(timer.getTimeValues().toString())
+    $('#timer .timer-values').html(timer.getTimeValues().toString(['minutes', 'seconds']))
 }
 
 $(window).ready(
@@ -27,14 +27,16 @@ $(window).ready(
         let timer = new Timer({
             countdown: true,
             startValues: {
-                hours: window.startingTime.hours,
                 minutes: window.startingTime.minutes,
                 seconds: window.startingTime.seconds,
             }
         })
 
         const timerSocket = new WebSocket(
-            "wss://"
+            (
+                (window.location.protocol === "https:") ?
+                "wss://" : "ws://"
+            )
             + window.location.host
             + "/ws/timer/"
         )
@@ -45,11 +47,12 @@ $(window).ready(
             if ("status" in data) {
                 if (data["status"] === "playing") {
                     // Reset if we are playing again.
-                    if (!timer.isRunning()) {
+                    const remainingTime = timer.getTimeValues()
+
+                    if (remainingTime.seconds === 0 && remainingTime.minutes === 0) {
                         timer = new Timer({
                             countdown: true,
                             startValues: {
-                                hours: window.startingTime.hours,
                                 minutes: window.startingTime.minutes,
                                 seconds: window.startingTime.seconds,
                             }
@@ -66,7 +69,6 @@ $(window).ready(
                 timer.pause()
 
                 window.startingTime = {
-                    hours: data["time"]["hours"],
                     minutes: data["time"]["minutes"],
                     seconds: data["time"]["seconds"]
                 }
@@ -74,7 +76,6 @@ $(window).ready(
                 timer = new Timer({
                     countdown: true,
                     startValues: {
-                        hours: window.startingTime.hours,
                         minutes: window.startingTime.minutes,
                         seconds: window.startingTime.seconds,
                     }
@@ -90,14 +91,25 @@ $(window).ready(
 
         // --- BEGIN Controls ---
 
+        $("#pause_play").on(
+            "click",
+            (event) => {
+                $("#is_counting").click()
+            }
+        )
+
         $("#is_counting").on(
             "change",
             (event) => {
                 if (event.target.checked) {
+                    $("#pause_play > .btn__body").html("⏸︎")
+
                     timerSocket.send(JSON.stringify({
                         "status": "playing"
                     }))
                 } else {
+                    $("#pause_play > .btn__body").html("⏵︎")
+
                     timerSocket.send(JSON.stringify({
                         "status": "paused"
                     }))
@@ -110,7 +122,6 @@ $(window).ready(
             (event) => {
                 timerSocket.send(JSON.stringify({
                     "time": {
-                        "hours": Number($("#hours").val()),
                         "minutes": Number($("#minutes").val()),
                         "seconds": Number($("#seconds").val())
                     }

timer/consumers.py

@@ -27,7 +27,6 @@ class TimerConsumer(WebsocketConsumer):
         if "time" in json_data:
             response = {
                 "time": {
-                    "hours": json_data["time"]["hours"],
                     "minutes": json_data["time"]["minutes"],
                     "seconds": json_data["time"]["seconds"],
                 }

timer/forms.py

@@ -7,10 +7,6 @@ from django.core.validators import (
 
 
 class TimeOnlyForm(forms.Form):
-    hours = forms.IntegerField(
-        label="Hodiny", validators=[MinValueValidator(limit_value=0)]
-    )
-
     minutes = forms.IntegerField(
         label="Minuty",
         validators=[

timer/migrations/0002_alter_ongoingtimer_name.py

+# Generated by Django 4.1.5 on 2023-08-25 11:53
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("timer", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="ongoingtimer",
+            name="name",
+            field=models.CharField(
+                max_length=64,
+                validators=[django.core.validators.MinLengthValidator(limit_value=1)],
+                verbose_name="Název",
+            ),
+        ),
+    ]

timer/migrations/0003_remove_ongoingtimer_hours.py

+# Generated by Django 4.1.5 on 2023-08-25 16:47
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("timer", "0002_alter_ongoingtimer_name"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="ongoingtimer",
+            name="hours",
+        ),
+    ]

timer/models.py

@@ -15,10 +15,6 @@ class OngoingTimer(models.Model):
         validators=[MinLengthValidator(limit_value=1)],
     )
 
-    hours = models.IntegerField(
-        verbose_name="Hodiny", validators=[MinValueValidator(limit_value=0)]
-    )
-
     minutes = models.IntegerField(
         verbose_name="Minuty",
         validators=[

timer/templates/timer/edit_timer.html

@@ -17,43 +17,45 @@
 {% block content %}
     <script>
         window.startingTime = {
-            hours: {{ timer.hours }},
             minutes: {{ timer.minutes }},
             seconds: {{ timer.seconds }},
         }
     </script>
 
     <main>
-        <h1 class="text-6xl font-bebas mb">Úprava časovače {{ timer.name }}</h1>
+        <h1 class="text-6xl font-bebas">Úprava časovače {{ timer.name }}</h1>
 
-        <div>
+        <hr>
+
+        <div class="text-xl">
             <div id="timer">
-                <div class="timer-values">{{ timer.hours }}:{{ timer.minutes }}:{{ timer.seconds }}</div>
+                <div class="timer-values"></div>
             </div>
         </div>
 
-        <div class="flex flex-col gap-2">
+        <hr>
+
+        <div class="flex flex-col gap-5">
             <div>
-                <input
-                    type="checkbox"
-                    id="is_counting"
-                    name="is_counting"
-                    autocomplete="off"
-                    value="false"
+                <div class="hidden">
+                    <input
+                        type="checkbox"
+                        id="is_counting"
+                        name="is_counting"
+                        autocomplete="off"
+                        value="false"
+                    >
+                </div>
+                <button
+                    id="pause_play"
+                    class="btn w-64 text-xl"
                 >
-                <label
-                    for="is_counting"
-                >Odpočet spuštěný</label>
+                    <div class="btn__body">⏵︎</div>
+                </button>
             </div>
-            <div class="flex gap-2">
-                <input
-                    type="number"
-                    id="hours"
-                    name="hours"
-                    placeholder="Hodiny"
-                    autocomplete="off"
-                >
+            <div class="flex flex-col gap-2">
                 <input
+                    class="w-64 text-lg"
                     type="number"
                     id="minutes"
                     name="minutes"
@@ -61,6 +63,7 @@
                     autocomplete="off"
                 >
                 <input
+                    class="w-64 text-lg"
                     type="number"
                     id="seconds"
                     name="seconds"
@@ -69,7 +72,10 @@
                 >
                 <button
                     id="update-time"
-                >Aktualizovat čas</button>
+                    class="btn w-64"
+                >
+                    <div class="btn__body">Aktualizovat čas</div>
+                </button>
             </div>
         </div>
     </main>

timer/templates/timer/view_timer.html

@@ -16,16 +16,15 @@
 
 {% block nav %}{% endblock %}
 
-{% block content %}
+{% block raw_content %}
     <script>
         window.startingTime = {
-            hours: {{ timer.hours }},
             minutes: {{ timer.minutes }},
             seconds: {{ timer.seconds }},
         }
     </script>
 
-    <main>
+    <main class="text-center bg-black text-white h-screen flex flex-col justify-between py-5">
         <h1 class="text-6xl font-bebas mb">{{ timer.name }}</h1>
 
         <div
@@ -38,7 +37,7 @@
         </div>
 
         <a
-            class="text-gray-400"
+            class="text-white opacity-25 text-sm"
             href="{% url 'timer:edit_timer' timer.id %}"
         >Upravit</a>
     </main>