add timer

timer/models.py

+from django.core.validators import (
+    MaxValueValidator,
+    MinLengthValidator,
+    MinValueValidator,
+)
+from django.db import models
+
+# Create your models here.
+
+
+class OngoingTimer(models.Model):
+    name = models.CharField(
+        max_length=64,
+        verbose_name="Název",
+        validators=[MinLengthValidator(limit_value=1)],
+    )
+
+    hours = models.IntegerField(
+        verbose_name="Hodiny", validators=[MinValueValidator(limit_value=0)]
+    )
+
+    minutes = models.IntegerField(
+        verbose_name="Minuty",
+        validators=[
+            MinValueValidator(limit_value=0),
+            MaxValueValidator(limit_value=60),
+        ],
+    )
+
+    seconds = models.IntegerField(
+        verbose_name="Minuty",
+        validators=[
+            MinValueValidator(limit_value=0),
+            MaxValueValidator(limit_value=60),
+        ],
+    )

timer/routing.py

+from django.urls import path
+
+from . import consumers
+
+websocket_urlpatterns = [
+    path("ws/timer/", consumers.TimerConsumer.as_asgi()),
+]

timer/templates/timer/create.html

+{% extends "shared/base.html" %}
+
+{% load render_bundle from webpack_loader %}
+
+{% block title %}Nový časovač{% endblock %}
+{% block header_name %}Časovače{% endblock %}
+{% block description %}{% endblock %}
+
+{% block head %}
+    <link
+        rel="stylesheet"
+        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+    >
+{% endblock %}
+
+{% block content %}
+    <main>
+        <h1 class="text-6xl font-bebas mb-5">Nový časovač</h1>
+
+        <form
+            class="
+                flex flex-col gap-1
+                [&_label]:w-24
+                [&_input]:bg-gray-100 [&_input]:border [&_input]:border-gray-100 [&_input]:px-1.5 [&_input]:py-0.5
+            "
+            method="post"
+        >
+            {% csrf_token %}
+
+            {{ form.as_div }}
+
+            <button class="btn">
+                <div class="btn__body">Vytvořit</div>
+            </button>
+        </form>
+    </main>
+{% endblock %}

timer/templates/timer/edit_timer.html

+{% extends "shared/base.html" %}
+
+{% load render_bundle from webpack_loader %}
+
+{% block title %}Časovače{% endblock %}
+{% block header_name %}Časovače{% endblock %}
+{% block description %}{% endblock %}
+
+{% block head %}
+    <link
+        rel="stylesheet"
+        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+    >
+    {% render_bundle "timer" %}
+{% endblock %}
+
+{% 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>
+
+        <div>
+            <div id="timer">
+                <div class="timer-values">{{ timer.hours }}:{{ timer.minutes }}:{{ timer.seconds }}</div>
+            </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
+            <div>
+                <input
+                    type="checkbox"
+                    id="is_counting"
+                    name="is_counting"
+                    autocomplete="off"
+                    value="false"
+                >
+                <label
+                    for="is_counting"
+                >Odpočet spuštěný</label>
+            </div>
+            <div class="flex gap-2">
+                <input
+                    type="number"
+                    id="hours"
+                    name="hours"
+                    placeholder="Hodiny"
+                    autocomplete="off"
+                >
+                <input
+                    type="number"
+                    id="minutes"
+                    name="minutes"
+                    placeholder="Minuty"
+                    autocomplete="off"
+                >
+                <input
+                    type="number"
+                    id="seconds"
+                    name="seconds"
+                    placeholder="Sekundy"
+                    autocomplete="off"
+                >
+                <button
+                    id="update-time"
+                >Aktualizovat čas</button>
+            </div>
+        </div>
+    </main>
+{% endblock %}

timer/templates/timer/index.html

+{% extends "shared/base.html" %}
+
+{% load render_bundle from webpack_loader %}
+
+{% block title %}Časovače{% endblock %}
+{% block header_name %}Časovače{% endblock %}
+{% block description %}{% endblock %}
+
+{% block head %}
+    <link
+        rel="stylesheet"
+        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+    >
+{% endblock %}
+
+{% block content %}
+    <main>
+        <h1 class="text-6xl font-bebas mb">Časovače</h1>
+        <h2 class="text-3xl font-bebas mb-5">Seznam aktivních časovačů</h2>
+
+        <div class="prose max-w-none mb-8">
+            <ul>
+                {% for timer in ongoing_timers %}
+                    <li>
+                        <a
+                            href="{% url 'timer:view_timer' timer.id %}"
+                        >{{ timer.name }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+
+        <a class="btn btn--icon" href="{% url 'timer:create' %}">
+            <div class="btn__body-wrap">
+                <div class="btn__body">Nový časovač</div>
+                <div class="btn__icon">
+                    <i class="ico--chevron-right"></i>
+                </div>
+            </div>
+        </a>
+    </main>
+{% endblock %}

timer/templates/timer/view_timer.html

+{% extends "shared/base.html" %}
+
+{% load render_bundle from webpack_loader %}
+
+{% block title %}Časovače{% endblock %}
+{% block header_name %}Časovače{% endblock %}
+{% block description %}{% endblock %}
+
+{% block head %}
+    <link
+        rel="stylesheet"
+        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+    >
+    {% render_bundle "timer" %}
+{% endblock %}
+
+{% block nav %}{% endblock %}
+
+{% block content %}
+    <script>
+        window.startingTime = {
+            hours: {{ timer.hours }},
+            minutes: {{ timer.minutes }},
+            seconds: {{ timer.seconds }},
+        }
+    </script>
+
+    <main>
+        <h1 class="text-6xl font-bebas mb">{{ timer.name }}</h1>
+
+        <div
+            class="my-5"
+            style="font-size:15rem" {% comment %}TODO{% endcomment %}
+        >
+            <div id="timer">
+                <div class="timer-values">{{ timer.hours }}:{{ timer.minutes }}:{{ timer.seconds }}</div>
+            </div>
+        </div>
+
+        <a
+            class="text-gray-400"
+            href="{% url 'timer:edit_timer' timer.id %}"
+        >Upravit</a>
+    </main>
+{% endblock %}
+
+{% block footer %}{% endblock %}

timer/tests.py

+from django.test import TestCase
+
+# Create your tests here.

timer/urls.py

+from django.urls import path
+
+from . import views
+
+app_name = "timer"
+urlpatterns = [
+    path("", views.index, name="index"),
+    path("novy", views.create, name="create"),
+    path("<int:id>", views.view_timer, name="view_timer"),
+    path("<int:id>/uprava", views.edit_timer, name="edit_timer"),
+]

timer/views.py

+from django.shortcuts import get_object_or_404, redirect, render
+
+from .forms import NewTimerForm, TimeOnlyForm
+from .models import OngoingTimer
+
+
+def index(request):
+    return render(
+        request,
+        "timer/index.html",
+        {
+            "ongoing_timers": OngoingTimer.objects.all(),
+        },
+    )
+
+
+def create(request):
+    if request.method == "POST":
+        form = NewTimerForm(request.POST)
+
+        if form.is_valid():
+            timer = OngoingTimer(
+                hours=form.cleaned_data["hours"],
+                minutes=form.cleaned_data["minutes"],
+                seconds=form.cleaned_data["seconds"],
+                name=form.cleaned_data["name"],
+            )
+            timer.save()
+
+            return redirect("timer:view_timer", id=timer.id)
+    else:
+        form = NewTimerForm()
+
+    return render(request, "timer/create.html", {"form": form})
+
+
+def view_timer(request, id: int):
+    timer = get_object_or_404(OngoingTimer, id=id)
+
+    return render(request, "timer/view_timer.html", {"timer": timer})
+
+
+def edit_timer(request, id: int):
+    timer = get_object_or_404(OngoingTimer, id=id)
+
+    return render(request, "timer/edit_timer.html", {"timer": timer})

webpack.config.js

@@ -21,6 +21,10 @@ module.exports = {
       import: path.resolve("static_src", "mail_signature.js"),
       dependOn: "shared",
     },
+    timer: {
+      import: path.resolve("static_src", "timer.js"),
+      dependOn: "shared",
+    },
     asset_server_resize: {
       import: path.resolve("static_src", "asset_server_resize.js"),
       dependOn: "shared",