From f02439c65c32eb6170662d84cc8fcc8445339073 Mon Sep 17 00:00:00 2001
From: Nathan Chapman <contact@nathanjchapman.com>
Date: Thu, 4 Feb 2021 22:00:48 -0700
Subject: [PATCH] Add more styles to student page

---
 accounts/templates/accounts/account_form.html |  9 +--
 .../templates/attendance/_student_code.html   | 21 ++++++
 .../attendance/_student_periods.html          | 29 +++++++++
 .../attendance_overview_student.html          | 64 ++++---------------
 attendance/views.py                           |  2 -
 static/scss/_forms.scss                       |  3 +
 static/scss/_students.scss                    |  8 ++-
 .../registration/password_change_form.html    |  4 +-
 8 files changed, 80 insertions(+), 60 deletions(-)
 create mode 100644 attendance/templates/attendance/_student_code.html
 create mode 100644 attendance/templates/attendance/_student_periods.html

diff --git a/accounts/templates/accounts/account_form.html b/accounts/templates/accounts/account_form.html
index 083ffd0..6b3918a 100644
--- a/accounts/templates/accounts/account_form.html
+++ b/accounts/templates/accounts/account_form.html
@@ -1,19 +1,20 @@
 {% extends 'application.html' %}
 
 {% block content %}
-<h1>Update User</h1>
+<section class="panel test">
+    <h1>Update User</h1>
 
-<section>
     <h3>{{ user.first_name }} {{ user.last_name }}</h3>
     {% if user.student %}
         <p>Student ID: {{user.student.student_number}}</p>
     {% endif %}
+    <p><a href="{% url 'password_change' %}">Change password</a></p>
     <form method="post" action="{% url 'account-update' user.id %}">
         {% csrf_token %}
         {{ form.as_p }}
 
-        <input type="submit" value="Save changes" />
+        <input type="submit" value="Save changes"> or
+        <a href="{% url 'account-detail' user.id %}">Cancel</a>
     </form>
-    <p><a href="{% url 'password_change' %}">Change password</a></p>
 </section>
 {% endblock %}
diff --git a/attendance/templates/attendance/_student_code.html b/attendance/templates/attendance/_student_code.html
new file mode 100644
index 0000000..5d0259e
--- /dev/null
+++ b/attendance/templates/attendance/_student_code.html
@@ -0,0 +1,21 @@
+{% if user.student.code_set.last %}
+    <p class="student__code code">
+        <a class="code__button action-button" href="{% url 'code-update' user.student.code_set.last.id %}">
+            {% if clocked_in %}
+                Clock out →
+            {% else %}
+                Clock in →
+            {% endif %}
+        </a>
+    </p>
+{% else %}
+    <p class="student__code code">
+        <a class="action-button" href="{% url 'code-create' %}">
+            {% if clocked_in %}
+                Clock out →
+            {% else %}
+                Clock in →
+            {% endif %}
+        </a>
+    </p>
+{% endif %}
diff --git a/attendance/templates/attendance/_student_periods.html b/attendance/templates/attendance/_student_periods.html
new file mode 100644
index 0000000..d46eff2
--- /dev/null
+++ b/attendance/templates/attendance/_student_periods.html
@@ -0,0 +1,29 @@
+<table class="attendance__log">
+    <caption class="attendance__month">{% now "F Y" %}</caption>
+    <thead>
+        <tr>
+            <th>Station</th>
+            <th>Clocked in</th>
+            <th>Clocked out</th>
+            <th>Duration</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for period in period_list %}
+            {% if period.clocked_out %}
+                <tr>
+                    <td>{{ period.station_number }}</td>
+                    <td>{{ period.clocked_in }}</td>
+                    {% if period.clocked_out %}
+                        <td>{{ period.clocked_out }}</td>
+                        <td>{{ period.clocked_in|timesince:period.clocked_out }}</td>
+                    {% else %}
+                        <td colspan="2">Current sesson: {{ period.clocked_in|timesince }}</td>
+                    {% endif %}
+                </tr>
+            {% endif %}
+        {% empty %}
+            <tr><td colspan="2">No periods yet.</td></tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/attendance/templates/attendance/attendance_overview_student.html b/attendance/templates/attendance/attendance_overview_student.html
index bf49ee3..b371c6d 100644
--- a/attendance/templates/attendance/attendance_overview_student.html
+++ b/attendance/templates/attendance/attendance_overview_student.html
@@ -1,62 +1,22 @@
 <section class="student panel">
     <h1 class="student__department">{{ user.student.department.name }}</h1>
-    {% if user.student.is_clocked_in and user.student.code_set.last %}
-        <p><span class="student__clocked-in">You are currently clocked in.</span><br>
-        Clocked in at: <strong>{{ current_period.clocked_in|date:"P" }}</strong><br>
-        Current sesson: <strong>{{ current_period.clocked_in|timesince }}</strong></p>
-        <p>
-            <a class="action-button" href="{% url 'code-update' user.student.code_set.last.id %}">Clock out →</a>
-        </p>
-    {% elif user.student.is_clocked_in and not user.student.code_set.last %}
-        <p><span class="student__clocked-in">You are currently clocked in.</span><br>
-        Clocked in at: {{ current_period.clocked_in }}<br>
-        Current sesson: <strong>{{ current_period.clocked_in|timesince }}</strong></p>
-        <p>
-            <a class="action-button" href="{% url 'code-create' %}">Clock out →</a>
-        </p>
-    {% elif user.student.code_set.last %}
-        <p>You are not clocked in.</p>
-        <p>
-            <a class="action-button" href="{% url 'code-update' user.student.code_set.last.id %}">Clock in →</a>
-        </p>
+    {% if user.student.is_clocked_in %}
+        <div class="student__statusbar status">
+            <p><span class="status__clocked--clocked-in">You are currently clocked in.</span></p>
+            <p>
+                Clocked in at: <strong>{{ current_period.clocked_in|date:"P" }}</strong><br>
+                Current sesson: <strong>{{ current_period.clocked_in|timesince }}</strong>
+            </p>
+        </div>
+        {% include 'attendance/_student_code.html' with clocked_in=True %}
     {% else %}
-        <p>You are not clocked in.</p>
-        <p>
-            <a class="action-button" href="{% url 'code-create' %}">Clock in →</a>
-        </p>
+        <div class="status__clocked"></div>You are not clocked in.</p>
+        {% include 'attendance/_student_code.html' with clocked_in=False %}
     {% endif %}
 </section>
 <section class="attendance">
     <h2 class="attendance__title">Attendance log</h2>
     <p class="attendance__total">Total hours for the month: <strong>{{period_total}}</strong><br>
     <small>(Does not include current session.)</small></p>
-    <table class="attendance__log">
-        <caption class="attendance__month">{% now "F Y" %}</caption>
-        <thead>
-            <tr>
-                <th>Station</th>
-                <th>Clocked in</th>
-                <th>Clocked out</th>
-                <th>Duration</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for period in period_list %}
-                {% if period.clocked_out %}
-                    <tr>
-                        <td>{{ period.station_number }}</td>
-                        <td>{{ period.clocked_in }}</td>
-                        {% if period.clocked_out %}
-                            <td>{{ period.clocked_out }}</td>
-                            <td>{{ period.clocked_in|timesince:period.clocked_out }}</td>
-                        {% else %}
-                            <td colspan="2">Current sesson: {{ period.clocked_in|timesince }}</td>
-                        {% endif %}
-                    </tr>
-                {% endif %}
-            {% empty %}
-                <tr><td colspan="2">No periods yet.</td></tr>
-            {% endfor %}
-        </tbody>
-    </table>
+    {% include 'attendance/_student_periods.html' %}
 </section>
diff --git a/attendance/views.py b/attendance/views.py
index d79d950..1973ba5 100644
--- a/attendance/views.py
+++ b/attendance/views.py
@@ -44,8 +44,6 @@ class AttendanceOverview(LoginRequiredMixin, TemplateView):
                     clocked_in__month=timezone.now().month
                 ).aggregate(total_duration=Sum('duration'))
 
-            print(periods_duration_sum)
-            print(timezone.now().month)
             hours = 0
             # Convert to hours floating point
             if periods_duration_sum['total_duration'] != None:
diff --git a/static/scss/_forms.scss b/static/scss/_forms.scss
index 788da3d..64d6852 100644
--- a/static/scss/_forms.scss
+++ b/static/scss/_forms.scss
@@ -14,6 +14,8 @@ input {
     outline: 0;
 }
 
+
+
 label {
     text-align: left;
     font-weight: 700;
@@ -32,6 +34,7 @@ input[type=number],
 input[type=password],
 select[multiple=multiple],
 textarea {
+    display: block;
     text-align: left;
     color: $primary-color;
     border: 4px solid $grey;
diff --git a/static/scss/_students.scss b/static/scss/_students.scss
index ce50305..b396f87 100644
--- a/static/scss/_students.scss
+++ b/static/scss/_students.scss
@@ -9,8 +9,14 @@
     &__department {
         margin-top: 0;
     }
+}
 
-    &__clocked-in {
+.status {
+    &__clocked {
+
+    }
+
+    &__clocked--clocked-in {
         background-color: $green;
         color: white;
         padding: 0.5rem;
diff --git a/templates/registration/password_change_form.html b/templates/registration/password_change_form.html
index a0810eb..beab783 100644
--- a/templates/registration/password_change_form.html
+++ b/templates/registration/password_change_form.html
@@ -2,11 +2,13 @@
 
 {% block content %}
 <section class="panel">
+    <h1>Change password</h1>
     <form method="post" action="{% url 'password_change' %}">
         {% csrf_token %}
         {{ form.as_p }}
 
-        <input type="submit" value="Change my password">
+        <input type="submit" value="Change my password"> or
+        <a href="{{request.META.HTTP_REFERER}}">Cancel</a>
     </form>
 </section>
 {% endblock %}