From 474e2b5bff477e6779990ae745524ed4c6b4ccef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Thu, 4 Jul 2024 05:36:30 +0200
Subject: [PATCH] Add /games page and add checkboxes for subscribing to games

---
 .vscode/settings.json               |  1 +
 core/templates/games.html           | 29 +++++++++++++++++++++++++++++
 core/templates/index.html           | 13 ++++++++++++-
 core/templates/partials/header.html |  3 +++
 core/urls.py                        |  5 +++++
 core/views.py                       |  8 ++++++++
 pyproject.toml                      |  1 +
 static/css/style.css                | 13 +++++++++++++
 8 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 core/templates/games.html

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 11d6358..46c826d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,7 @@
         "allauth",
         "appendonly",
         "asgiref",
+        "forloop",
         "logdir",
         "memlock",
         "networkidle",
diff --git a/core/templates/games.html b/core/templates/games.html
new file mode 100644
index 0000000..d01d075
--- /dev/null
+++ b/core/templates/games.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block content %}
+    <div class="container mt-4">
+        <div class="row">
+            {% for game in games %}
+                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-4">
+                    <div class="card h-100 shadow-sm">
+                        <img src="{{ game.image_url }}"
+                             class="card-img-top"
+                             alt="{{ game.display_name }}">
+                        <div class="card-body d-flex flex-column">
+                            <h5 class="card-title">{{ game.display_name }}</h5>
+                            <div class="mt-auto">
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="new">
+                                    <label class="form-check-label" for="new">Notify when new</label>
+                                </div>
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="live">
+                                    <label class="form-check-label" for="live">Notify when farmable</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock content %}
diff --git a/core/templates/index.html b/core/templates/index.html
index 0cd2198..6405562 100644
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -18,7 +18,6 @@
                     </div>
                 </div>
             </div>
-            <!-- Games Column -->
             <div class="col-lg-9">
                 {% for game in games %}
                     <div class="card mb-4 shadow-sm" id="game-{{ game.game_id }}">
@@ -36,6 +35,18 @@
                                     <h2 class="card-title h5">
                                         <a href="{{ game.twitch_url }}" class="text-decoration-none">{{ game.display_name }}</a>
                                     </h2>
+                                    <div class="mt-auto">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input" type="checkbox" role="switch" id="new">
+                                            <label class="form-check-label" for="new">
+                                                Notify when new drop is found on <a href="https://www.twitch.tv/drops/campaigns">Twitch</a>
+                                            </label>
+                                        </div>
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input" type="checkbox" role="switch" id="live">
+                                            <label class="form-check-label" for="live">Notify when a drop starts</label>
+                                        </div>
+                                    </div>
                                     {% for campaign in game.campaigns %}
                                         {% if not forloop.first %}<br>{% endif %}
                                         <div class="mt-3">
diff --git a/core/templates/partials/header.html b/core/templates/partials/header.html
index 9ac39bf..a88f857 100644
--- a/core/templates/partials/header.html
+++ b/core/templates/partials/header.html
@@ -5,6 +5,9 @@
     </h1>
     <nav>
         <ul class="nav">
+            <li class="nav-item">
+                <a class="nav-link" href='{% url "core:games" %}'>Games</a>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" href='{% url "api-1.0.0:openapi-view" %}'>API</a>
             </li>
diff --git a/core/urls.py b/core/urls.py
index b90131c..7017280 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -25,4 +25,9 @@ urlpatterns: list[URLPattern | URLResolver] = [
         view=views.subscription_create,
         name="subscription_create",
     ),
+    path(
+        route="games/",
+        view=views.GameView.as_view(),
+        name="games",
+    ),
 ]
diff --git a/core/views.py b/core/views.py
index 0892d09..c1ca027 100644
--- a/core/views.py
+++ b/core/views.py
@@ -12,6 +12,7 @@ from django.http import (
 )
 from django.shortcuts import redirect, render
 from django.template.response import TemplateResponse
+from django.views.generic import ListView
 
 from core.discord import send
 from core.models import DiscordSetting
@@ -279,3 +280,10 @@ def subscription_create(request: HttpRequest) -> HttpResponse:
 
     messages.error(request, "Failed to create subscription")
     return redirect("core:index")
+
+
+class GameView(ListView):
+    model = Game
+    template_name: str = "games.html"
+    context_object_name: str = "games"
+    paginate_by = 100
diff --git a/pyproject.toml b/pyproject.toml
index 48c889d..7025ab6 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -37,6 +37,7 @@ lint.ignore = [
 [tool.djlint]
 profile = "django"
 format_attribute_template_tags = true
+ignore="H006" # Img tag should have height and width attributes.
 
 [tool.pytest.ini_options]
 DJANGO_SETTINGS_MODULE = "config.settings"
diff --git a/static/css/style.css b/static/css/style.css
index 1272f88..c25f865 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -60,3 +60,16 @@ a:hover {
 .toc {
     top: 1rem;
 }
+
+/* Checkboxes for subscribing to notifications */
+/* Checked */
+.form-check-input:checked {
+    background-color: #af1548;
+    border-color: #111111;
+}
+
+/* Unchecked */
+.form-check-input {
+    background-color: #0c0c0c;
+    border-color: #111111;
+}