Added thematic toggle and preferences page #51

Icyviolet23 · 2023-12-08T14:06:18Z

Resolves #37

Major changes

Added Preferences Model
Added one to one relation between the Preferences Model and the Abstract User model. Each User will have their own preferences.
Added Preferences ModelForm which will be used to collect user preferences
Added view to handle Preferences Form POST request, create an instance of the Preferences model and save it in the DB
Created HTML Template for preferences page
Edited HTML template for navigation.html to add navigation to preferences page
Added dark/light mode button and corresponding light/dark mode toggle functionality

Refer to the following DEMO:
https://www.youtube.com/watch?v=0qfaXa9EYyA&ab_channel=TzeHngLoke

…tch preferences and display them according. Added model form to allow users to customize their own preferences dynamically

…rap documentation

…gle functionality yet

…t for text labels rather than svgs

…er preferences. The mode will be automatically set to the correpsonding preferred mode

codeclimate · 2023-12-08T14:07:12Z

Code Climate has analyzed commit 122e4fb and detected 41 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Duplication	2
Style	39

View more on Code Climate.

brylie

Overall, this is looking great! I've just added a few comments about internationalization tags so our app can be localized in different languages.

https://docs.djangoproject.com/en/5.0/topics/i18n/translation/#translation

brylie · 2023-12-08T18:27:06Z

preferences/templates/preferences.html

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


Remember to add template internationalization so we can translate this string into the user language.

brylie · 2023-12-08T18:27:28Z

preferences/templates/preferences.html

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


Please add i18n tag ´translate' here.

brylie · 2023-12-08T18:27:48Z

preferences/templates/preferences.html

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


Remember i18n ´translate'tag here.

brylie · 2023-12-08T18:28:00Z

preferences/templates/preferences.html

+                    {{form|crispy}}
+                </table>
+                {% csrf_token %}
+                <button class="btn btn-primary " id = "submit_preferences_button" type="submit">Submit</button>


I18n tag here

brylie · 2023-12-08T18:28:38Z

preferences/forms.py

+            'Language': forms.Select(attrs={'class': 'form-control'}),
+            'Mode': forms.Select(attrs={'class': 'form-control'}),
+        }
+        labels = {'Language': 'Preferred Language',


Remember i18n tag for these labels using gettext. E.g. _("Preferred Language")

preferences/models.py

templates/base.html

…lexibility

…me function

Changing body attribute data-bs-theme to directly change rather than using JS Co-authored-by: Brylie Christopher Oxley <[email protected]>

Directly changing color mode by accessing value in template makes script unnecessary Co-authored-by: Brylie Christopher Oxley <[email protected]>

…o owner

Using TextChoices enumeration for choices rather than lists Co-authored-by: Brylie Christopher Oxley <[email protected]>

…iving into theme-toggle

brylie · 2023-12-09T09:26:26Z

preferences/views.py

+        # 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


I think we only need to return a form instance pre-populated with the existing user preferences.Django takes care of everything else.

Suggested change

context['fields'] = fields

context['form'] = PreferencesForm(instance=request.user.preferences)

brylie · 2023-12-09T09:27:12Z

preferences/views.py

+        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]


This is probably unnecessary

Suggested change

fields = [(field.name, field.value_to_string(request.user.preferences)) for field in Preferences._meta.fields]

brylie · 2023-12-09T09:29:29Z

preferences/forms.py

+class PreferencesForm (ModelForm):
+    class Meta:
+        model = Preferences
+        fields = ('Language', 'Mode')


These fields should match the model fields

Suggested change

fields = ('Language', 'Mode')

fields = ('language', 'color_mode')

brylie · 2023-12-09T09:33:28Z

preferences/models.py

+from django.conf import settings
+
+# for user preferences
+class Preferences (models.Model):


I believe adding a ‘user = models.OneToOne(…)’ field on the ‘Preferences’ model will make the view.py code simpler.

brylie · 2023-12-09T09:35:53Z

accounts/models.py

@@ -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) 


Let’s define the recon the Preferences model rather than the user. Then, use a ‘reverse_name=“preferences”’ on the ‘user’ OneToOne field attached to the Preferences model. That way, we assign the user to the Preferences instance directly in view.py.

Suggested change

preferences = models.OneToOneField(Preferences, on_delete=models.CASCADE, blank=True, null=True)

brylie · 2023-12-09T09:40:44Z

preferences/views.py

+                Mode = form.cleaned_data['Mode'],
+                )
+
+    preferences.save ()


This can just be ‘form.save()’, so there is no need to create a temporary Preferences instance above

Suggested change

preferences.save ()

preferences = form.save()

brylie

It looks like there are some conflicts in settings.py. Let's resolve those conflicts so we can merge this PR soon. Overall, the PR is looking good.

Icyviolet23 and others added 7 commits November 28, 2023 21:52

Added model for preferences, tagged to to user mode, added view to fe…

251c3a5

…tch preferences and display them according. Added model form to allow users to customize their own preferences dynamically

added toggle

bda516b

added click functionality to toggle, switching dark and light mode

56baa4c

added dark/light mode toggle javascript functionality found in bootst…

784d1ca

…rap documentation

added dropdown with just text, but not integrated with javascript tog…

7327257

…gle functionality yet

added active mode status label on the dropdown, modified JS to accoun…

339e71c

…t for text labels rather than svgs

integrated Kyle's changes by toggling light and dark mode based on us…

69bd847

…er preferences. The mode will be automatically set to the correpsonding preferred mode

brylie requested changes Dec 8, 2023

View reviewed changes

kc12341 and others added 11 commits December 8, 2023 15:13

replaced bootstrap implementation with self implementation for more f…

56d1491

…lexibility

removed auto from dropdown since it was not necessary

fc2c5b8

saves theme to local storage and reduced code redundancy in toggleThe…

3b8d801

…me function

removed console logging statements

8a90eb2

Setting color mode directly without JS

50d55af

Changing body attribute data-bs-theme to directly change rather than using JS Co-authored-by: Brylie Christopher Oxley <[email protected]>

Removing script from base.html

c9ef6a2

Directly changing color mode by accessing value in template makes script unnecessary Co-authored-by: Brylie Christopher Oxley <[email protected]>

accepted suggestions to remove script from base.html

3ad8573

added suggested changes to remove script from base.html from code rep…

f4140e9

…o owner

Enumeration changes for language and color mode changes

003d993

Using TextChoices enumeration for choices rather than lists Co-authored-by: Brylie Christopher Oxley <[email protected]>

new tests for added toggle functionality

66c2035

Merge branch 'theme-toggle' of https://github.com/adrienneli104/careg…

122e4fb

…iving into theme-toggle

brylie reviewed Dec 9, 2023

View reviewed changes

brylie requested changes Dec 17, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added thematic toggle and preferences page #51

Added thematic toggle and preferences page #51

Icyviolet23 commented Dec 8, 2023 •

edited

Loading

codeclimate bot commented Dec 8, 2023 •

edited

Loading

brylie left a comment

brylie Dec 8, 2023

brylie Dec 8, 2023

brylie Dec 8, 2023

brylie Dec 8, 2023

brylie Dec 8, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie Dec 9, 2023

brylie left a comment

	context['fields'] = fields
	context['form'] = PreferencesForm(instance=request.user.preferences)

	fields = ('Language', 'Mode')
	fields = ('language', 'color_mode')

Added thematic toggle and preferences page #51

Are you sure you want to change the base?

Added thematic toggle and preferences page #51

Conversation

Icyviolet23 commented Dec 8, 2023 • edited Loading

codeclimate bot commented Dec 8, 2023 • edited Loading

brylie left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brylie left a comment

Choose a reason for hiding this comment

Icyviolet23 commented Dec 8, 2023 •

edited

Loading

codeclimate bot commented Dec 8, 2023 •

edited

Loading