Frontend

attendance/templates/attendance.html

@@ -1,143 +1,104 @@
-{% extends "home/home.html" %}
+{% extends "base.html" %}
 
 {% block content %}
 
-<style>
-table {
-  font-family: arial, sans-serif;
-  border-collapse: collapse;
-  width: 75%;
-}
-
-td, th {
-  border: 1px solid #dddddd;
-  text-align: center;
-  padding: 8px;
-}
-
-tr:nth-child(even) {
-  background-color: cadetblue;
-}
-
-.button {
-   font-size: 10px;
-   font-family: "American Typewriter";
-   border-radius: 14px;
-   background-color: white;
-   color: #4CAF50;
-   border: 2px solid #000080;
-}
-.buttonSub {
-   font-size: 14px;
-   font-family: "American Typewriter";
-   border-radius: 18px;
-   background-color: white;
-   color: #4CAF50;
-   border: 2px solid #000080;
-}
-</style>
-
-<div class="sidenav">
-  <li><a href="{% url 'home-home' %}">Home</a></li>
-</div>
-
-<div class="main-container">
-    {% if course %}
-    <h1 style="padding-bottom: 30px"> Attendance for {{ course }} </h1>
-      <table>
-      <tr>
-        <th>Date</th>
-        <th>Daily Attendance</th>
-        <th>Take Attendance</th>
-        <th>Send Absent Notifications</th>
-      </tr>
-      {% for date in dates %}
-      <tr>
-        <td>{{ date }}</td>
-        <td>{{ daily_attendance|get_item:date }}%</td>
-        <td>
-        <form action= "{% url 'take_attendance' %}" method="GET">
-          {% csrf_token %}
-          <input type="hidden" name="date" value="{{ date }}" />
-          <input type="hidden" name="course_id" value={{ course_id }} />
-          <input type="hidden" name="date_id" value={{ id }} />
-          <button class="button" type="submit">View/Take Attendance</button>
-        </form>
-        </td>
-        <td>
-          <form action= "{% url 'notify_absent_students' %}" method="GET">
-          {% csrf_token %}
-          <input type="hidden" name="date" value="{{ date }}" />
-          <input type="hidden" name="course_id" value={{ course_id }} />
-          <input type="hidden" name="date_id" value={{ id }} />
-          <button class="button" type="submit">Notify Absent Students</button>
-          </form>
-        </td>
-      </tr>
-    {% endfor %}
-    </table>
-    {% elif attendance_objects %}
-    <h1 style="padding-bottom: 30px"> {{ course_name }} {{ attendance_objects.first.date }} </h1>
-    <form action= "{% url 'attendance' %}" method="POST" style="width: 80%">
-    {% csrf_token %}
-      <table>
-      <tr>
-        <th>Date</th>
-        <th>Student</th>
-        <th>Status</th>
-        <th>Current Status</th>
-      </tr>
-      {% for attendance_object in attendance_objects %}
-      <tr>
-        <td>{{ attendance_object.date }}</td>
-        <td>{{ attendance_object.student.first_name }} {{ attendance_object.student.last_name }}</td>
-        <td>
-            <select name="{{ attendance_object.student.first_name }} {{ attendance_object.student.last_name }}">
-              <option value="{{ attendance_object.presence }}">-----------</option>
-              <option value="Present">Present</option>
-              <option value="Absent">Absent</option>
-              <option value="Late">Late</option>
-              <option value="Excused">Excused</option>
-            </select>
-        </td>
-        <td>
-          {{ attendance_object.presence }}
-        </td>
-      </tr>
+  <div style="text-align: center;">
+    <div style="width: 85%; display: inline-block" class="mui-panel">
+      {% if course %}
+      <h1 style="padding-bottom: 30px"> Attendance for {{ course }} </h1>
+        <table class="mui-table mui-table--bordered">
+        <tr>
+          <th style="text-align: center;">Date</th>
+          <th style="text-align: center;">Daily Attendance</th>
+          <th style="text-align: center;">Take Attendance</th>
+          <th style="text-align: center;">Send Absent Notifications</th>
+        </tr>
+        {% for date in dates %}
+        <tr>
+          <td>{{ date }}</td>
+          <td>{{ daily_attendance|get_item:date }}%</td>
+          <td>
+          <a href="{% url 'take_attendance' course_id=course_id date=date %}"
+             class="mui-btn mui-btn--primary mui-btn--small">View/Take</a>
+          </td>
+          <td>
+            <form action= "{% url 'notify_absent_students' %}" method="GET">
+            {% csrf_token %}
+            <input type="hidden" name="date" value="{{ date }}" />
+            <input type="hidden" name="course_id" value={{ course_id }} />
+            <input type="hidden" name="date_id" value={{ id }} />
+            <button class="mui-btn mui-btn--primary mui-btn--small" type="submit">Send</button>
+            </form>
+          </td>
+        </tr>
       {% endfor %}
       </table>
-      <input type="hidden" name="attendance_taken" value="true" />
-      <input type="hidden" name="date" value="{{ attendance_objects.first.date }}" />
-      <input type="hidden" name="course_id" value="{{ course_id }}" />
-      <div style="padding-top: 20px">
-        <button class="buttonSub" type="submit"> Submit </button>
-      </div>
-    </form>
-    {% else %}
-    <h1 style="padding-bottom: 30px"> Attendance Home </h1>
-      <table>
-      <tr>
-        <th>Course</th>
-        <th>Teacher</th>
-        <th>Overall Attendance</th>
-        <th>View Attendance</th>
-      </tr>
-      {% for classroom in classrooms %}
-      <tr>
-        <td>{{ classroom.course }}</td>
-        <td>{{ classroom.teacher }}</td>
-        <td>{{ attendance_averages|get_item:classroom.course }}%</td>
-        <td>
-          <form method="GET">
-            <button class="button" type="submit" name="course_id" value="{{ classroom.id }}">View Class Attendance</button>
-          </form>
-        </td>
-      </tr>
-    {% endfor %}
-    </table>
-    {% endif %}
+      {% elif attendance_objects %}
+      <h1> {{ course_name }} {{ attendance_objects.first.date }} </h1>
+      <form action= "{% url 'attendance' %}" method="POST">
+      {% csrf_token %}
+        <table class="mui-table mui-table--bordered">
+        <tr>
+          <th style="text-align: center;">Date</th>
+          <th style="text-align: center;">Student</th>
+          <th style="text-align: center;">Status</th>
+          <th style="text-align: center;">Current Status</th>
+        </tr>
+        {% for attendance_object in attendance_objects %}
+        <tr>
+          <td>{{ attendance_object.date }}</td>
+          <td>{{ attendance_object.student.first_name }} {{ attendance_object.student.last_name }}</td>
+          <td>
+            <div class="mui-select">
+              <select name="{{ attendance_object.student.first_name }} {{ attendance_object.student.last_name }}">
+                <option value="{{ attendance_object.presence }}">-----------</option>
+                <option value="Present">Present</option>
+                <option value="Absent">Absent</option>
+                <option value="Late">Late</option>
+                <option value="Excused">Excused</option>
+              </select>
+            </div>
+          </td>
+          <td>
+            {{ attendance_object.presence }}
+          </td>
+        </tr>
+        {% endfor %}
+        </table>
+        <input type="hidden" name="attendance_taken" value="true" />
+        <input type="hidden" name="date" value="{{ attendance_objects.first.date }}" />
+        <input type="hidden" name="course_id" value="{{ course_id }}" />
+        <div style="padding-top: 20px">
+          <button class="mui-btn mui-btn--primary mui-btn--small" type="submit"> Submit </button>
+        </div>
+      </form>
+      {% else %}
+        <h1 style="padding-left: 10px"> Attendance Home </h1>
+        <table class="mui-table mui-table--bordered">
+        <tr>
+          <th style="text-align: center;">Course</th>
+          <th style="text-align: center;">Overall Attendance</th>
+          <th style="text-align: center;">View Attendance</th>
+        </tr>
+        {% for classroom in classrooms %}
+        <tr>
+          <td>{{ classroom.course }}</td>
+          <td>{{ attendance_averages|get_item:classroom.course }}%</td>
+          <td>
+            <form method="GET">
+              <button class="mui-btn mui-btn--primary mui-btn--small" type="submit" name="course_id" value="{{ classroom.id }}">View</button>
+            </form>
+          </td>
+        </tr>
+      {% endfor %}
+      </table>
+      {% endif %}
+  </div>
 </div>
 
+
 {% endblock content %}
 
 
+
+

attendance/templates/attendance_base.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link href="//cdn.muicss.com/mui-0.9.43/css/mui.min.css" rel="stylesheet" type="text/css" />
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
+    <link rel="stylesheet" href="{% static  'css/mui_assets.css' %}"/>
+    <link rel="icon" href="{% static "missionbit-icon.png" %}"> <!-- LOGO ON THE TAB BAR -->
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+    <script src="//cdn.muicss.com/mui-0.9.43/js/mui.min.js"></script>
+    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <title>Mission Bit</title>
+    {% include "manipulation_js.html" %}
+</head>
+
+<body class="hide-sidedrawer">
+
+    {% include 'header.html' %}
+
+    {% include 'instafeed.html' %}
+
+    {% include 'left_side_panel.html' %}
+
+    <div id="content-wrapper">
+      <div class="mui--appbar-height"></div>
+      <div class="mui-container-fluid">
+        <br>
+        {% block content %}
+
+        {% endblock %}
+      </div>
+    </div>
+
+  {% include 'footer.html' %}
+
+  </body>
+</html>

attendance/urls.py

@@ -3,6 +3,14 @@
 
 urlpatterns = [
     path("", views.attendance, name="attendance"),
-    path("take_attendance/", views.take_attendance, name="take_attendance"),
-    path("notify_absent_students/", views.notify_absent_students, name="notify_absent_students")
+    path(
+        "take_attendance/<course_id>/<date>/",
+        views.take_attendance,
+        name="take_attendance",
+    ),
+    path(
+        "notify_absent_students/",
+        views.notify_absent_students,
+        name="notify_absent_students",
+    ),
 ]