Added thematic toggle and preferences page

accounts/migrations/0003_user_preferences.py

@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2023-11-29 02:51
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("preferences", "__first__"),
+        ("accounts", "0002_alter_user_table"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="preferences",
+            field=models.OneToOneField(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="preferences.preferences",
+            ),
+        ),
+    ]

accounts/models.py

@@ -1,6 +1,7 @@
 from django.contrib.auth.models import AbstractUser
 from django.utils.translation import gettext_lazy as _
-
+from django.db import models
+from preferences.models import Preferences
 
 class User(AbstractUser):
     class Meta:
@@ -10,3 +11,8 @@ class Meta:
 
     def __str__(self):
         return self.username
+
+    #store user preferences in a one to one mapping
+    preferences = models.OneToOneField(Preferences, on_delete=models.CASCADE, blank=True, null=True) 
+
+

core/settings.py

@@ -49,6 +49,7 @@
     "homes",
     "residents",
     "work",
+    "preferences"
 ]
 
 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"

core/urls.py

@@ -47,5 +47,9 @@
         "work/",
         include("work.urls"),
     ),
+    path(
+        "preferences/",
+        include("preferences.urls"),
+    ),
     path("", TemplateView.as_view(template_name="home.html"), name="home"),
 ]

manage.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env python
+#!/usr/bin/env python3
 """Django's command-line utility for administrative tasks."""
 import os
 import sys

preferences/forms.py

@@ -0,0 +1,14 @@
+from django import forms
+from django.forms import ModelForm
+from preferences.models import Preferences
+
+class PreferencesForm (ModelForm):
+    class Meta:
+        model = Preferences
+        fields = ('Language', 'Mode')
+        widgets = {
+            'Language': forms.Select(attrs={'class': 'form-control'}),
+            'Mode': forms.Select(attrs={'class': 'form-control'}),
+        }
+        labels = {'Language': 'Preferred Language',
+                  'Mode': 'Preferred Mode'}

preferences/models.py

@@ -0,0 +1,17 @@
+from django.db import models
+
+from django.utils.translation import gettext_lazy as _
+from django.conf import settings
+
+# for user preferences
+class Preferences (models.Model):
+    class LanguageTextChoices(TextChoices):
+        ENGLISH = "english", _("English")
+        SUOMI = "suomi", _("Suomi")
+
+    class ColorModeTextChoices(TextChoices):
+        DARK = "dark", _("Dark")
+        LIGHT = "light", _("Light")
+
+    language = models.CharField (max_length = 30, blank=True, choices=LanguageTextChoices)
+    color_mode = models.CharField (max_length = 30, blank=True, choices=ColorModeTextChoices)

preferences/templates/preferences.html

@@ -0,0 +1,46 @@
+{% extends 'base.html' %}
+
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block content %}
+    <div class="card-body py-5 px-md-5">
+        <div class="row d-flex justify-content-center ">
+        <div class="col-lg-8">
+            <h2 class="fw-bold " id = "set-preference-message">Set Preferences</h2>
+            <div class="container">
+            <div class="col-sm-20 " style="text-align: left">
+                <form action = "{% url 'preferences-view' %}" id = "preferences_form" method="post">
+                <table>
+                    {{form|crispy}}
+                </table>
+                {% csrf_token %}
+                <button class="btn btn-primary " id = "submit_preferences_button" type="submit">Submit</button>
+                </form>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+    <div class="card-body py-5 px-md-5">
+        <div class="row d-flex justify-content-center ">
+        <div class="col-lg-8">
+            <h2 class="fw-bold" id = "current-preferences">Your Current Preferences</h2>
+            <div class="col-lg-15">
+                {% if not request.user.preferences %}
+                <h3 class="fw" id = "no-preferences">No current preferences. Set some!</h3>
+                {% else %}
+                    {% for name, value in fields %}
+                        {% if name != "id" %}
+                            <h3 class="fw">{{ name }} : {{ value }}</h3>
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}
+

preferences/urls.py

@@ -0,0 +1,10 @@
+from django.urls import path
+from .views import setPreferences
+
+urlpatterns = [
+    path(
+        "",
+        setPreferences,
+        name="preferences-view",
+    ),
+]

preferences/views.py

@@ -0,0 +1,43 @@
+from django.shortcuts import render, redirect, reverse
+from django.contrib.auth.decorators import login_required
+from preferences.forms import PreferencesForm
+from preferences.models import Preferences
+from django.core import serializers
+
+# this function creates a blank preference model form on GET request
+# and returns a context with the form and the fields from the preference
+# object tagged to the current user
+# on non GET request we update the database to save the new preferences
+@login_required
+def setPreferences (request):
+    context = {}
+    if request.method == 'GET':
+        context['form'] = PreferencesForm ()
+        # null check for preferences field
+        if request.user.preferences:
+            fields = [(field.name, field.value_to_string(request.user.preferences)) for field in Preferences._meta.fields]
+            context['fields'] = fields
+        return render(request, '../templates/preferences.html', context)
+
+    # for any other request type that is not GET
+    form = PreferencesForm(request.POST)
+    context['form'] = form
+
+    if not form.is_valid():
+        return render(request, '../templates/preferences.html', context)
+
+    preferences = Preferences(
+                Language = form.cleaned_data['Language'], 
+                Mode = form.cleaned_data['Mode'],
+                )
+
+    preferences.save ()
+
+    request.user.preferences = preferences
+    request.user.save ()
+
+    # extract the fields to be displayed from the preferences
+    fields = [(field.name, field.value_to_string(request.user.preferences)) for field in Preferences._meta.fields]
+    context['fields'] = fields
+
+    return render(request, '../templates/preferences.html', context)

templates/base.html

@@ -11,7 +11,7 @@
     <!-- extra CSS to load after primary CSS -->
         {% block extra_css %}{% endblock extra_css %}
     </head>
-    <body>
+    <body data-bs-theme="{{ request.user.preferences.Mode }}">
         {% include "navigation.html" %}
 
         <div class="container">
@@ -24,3 +24,4 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     </body>
 </html>
+

templates/navigation.html

@@ -40,6 +40,12 @@
                         {% translate "Residents" %}
                     </a>
                 </li>
+
+                <li class="nav-item">
+                    <a href="{% url 'preferences-view' %}" class="nav-link">
+                        {% translate "Preferences" %}
+                    </a>
+                </li>
             </ul>
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                 {% include "i18n.html" %}
@@ -56,6 +62,28 @@
                         <a class="nav-link" href="{% url 'signup' %}">{% translate "Sign up" %}</a>
                     </li>
                 {% endif %}
+
+                <li class="nav-item dropdown">
+                    <!-- can refer to i18n.html for dropdown here-->
+                    <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (dark)">
+                        <a id="theme-label">Dark</a>
+                        <span class="d-lg-none ms-2" id="bd-theme-text">Toggle Theme</span>
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
+                        <li>
+                            <button type="button" id="light-dropdown" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="true">
+                                Light
+                            </button>
+                        </li>
+
+                        <li>
+                            <button type="button" id="dark-dropdown" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark" aria-pressed="false">
+                                Dark
+                            </button>
+                        </li>
+                    </ul>
+                </li>
+
             </ul>
         </div>
     </div>
@@ -88,3 +116,39 @@ <h2 class="modal-title" id="addWorkModalLabel">
         </div>
     </div>
 </div>
+
+<script>
+
+function toggleTheme(theme) {
+    const currTheme = document.documentElement.getAttribute('data-bs-theme');
+    if (currTheme === theme) return; 
+
+    // changes the attribute of the root element and saves to local storage
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    localStorage.setItem('theme', theme);
+
+      // changes active label on dropdown
+    const btn = document.getElementById('theme-label');
+    btn.innerHTML = theme.charAt(0).toUpperCase() + theme.slice(1);
+}
+
+// changes the first parameter's class to active, and the second to not active
+function changeActiveStatus(dropdown1, dropdown2) {
+    dropdown1.setAttribute('class', dropdown1.getAttribute('class') + ' active');
+    dropdown2.setAttribute('class', dropdown2.getAttribute('class').replace(' active', ''));
+}
+
+let lightMode = document.getElementById('light-dropdown');
+let darkMode = document.getElementById('dark-dropdown');
+
+lightMode.addEventListener('click', function() {
+    toggleTheme('light');
+    changeActiveStatus(lightMode, darkMode);
+});
+
+darkMode.addEventListener('click', function() {
+    toggleTheme('dark');
+    changeActiveStatus(darkMode, lightMode);
+});
+
+</script>

templates/tests/toggle_tests.js

@@ -0,0 +1,61 @@
+
+/*
+To run these tests, do the following, add testToggle() to the eventListeners
+for the dropdown so that this function runs every time a user uses the toggle.
+If the console raises errors, then the tests do not pass.
+*/
+
+function testToggle() {
+    const currTheme = document.documentElement.getAttribute('data-bs-theme');
+
+    // SCENARIO 1: dark mode should change to light mode
+    if (currTheme === 'dark') {
+        // check if data-bs-theme attribute actually changes to dark mode
+        toggleTheme('light');
+        assert(document.documentElement.getAttribute('data-bs-theme') === 'light');
+
+        // check if the text label correctly switches
+        assert(document.getElementById('theme-label').innerHTML === 'Light')
+
+        // check if the correct option is highlighted in the dropdown
+        changeActiveStatus(lightMode, darkMode);
+        assert('active' in document.getElementById('light-dropdown').getAttribute('class'))
+        assert(!('active' in document.getElementById('dark-dropdown').getAttribute('class')))
+    }
+
+    // SCENARIO 2: dark mode should remain if "dark" is selected
+    if (currTheme === 'dark') {
+        toggleTheme('dark');
+        assert(document.documentElement.getAttribute('data-bs-theme') === 'dark');
+
+        assert(document.getElementById('theme-label').innerHTML === 'Dark')
+
+        changeActiveStatus(lightMode, darkMode);
+        assert(!('active' in document.getElementById('light-dropdown').getAttribute('class')))
+        assert('active' in document.getElementById('dark-dropdown').getAttribute('class'))
+    }
+
+        // SCENARIO 3: light mode should change to dark mode
+    if (currTheme === 'light') {
+        toggleTheme('dark');
+        assert(document.documentElement.getAttribute('data-bs-theme') === 'dark');
+
+        assert(document.getElementById('theme-label').innerHTML === 'Dark')
+
+        changeActiveStatus(darkMode, lightMode);
+        assert('active' in document.getElementById('dark-dropdown').getAttribute('class'))
+        assert(!('active' in document.getElementById('light-dropdown').getAttribute('class')))
+    }
+
+    // SCENARIO 4: light mode should remain if "light" is selected
+    if (currTheme === 'light') {
+        toggleTheme('light');
+        assert(document.documentElement.getAttribute('data-bs-theme') === 'light');
+
+        assert(document.getElementById('theme-label').innerHTML === 'Light')
+
+        changeActiveStatus(lightMode, lightMode);
+        assert('active' in document.getElementById('light-dropdown').getAttribute('class'))
+        assert(!('active' in document.getElementById('dark-dropdown').getAttribute('class')))
+    }
+}