check ins done

app/spreadsheet_service.py

@@ -333,8 +333,34 @@ def get_weekly_check_ins(self, course_id:str, email:str, user_role:str, check_in
                 return None
         elif user_role == "TEACHER" or user_role == "TA":
             all_records_df = pd.DataFrame(check_in_records)
-            mean_values = all_records_df.select_dtypes(include=['number']).groupby(all_records_df['Week Number']).mean()
-            return mean_values.to_dict(orient='records')
+            df_keys = list(all_records_df.columns.values)
+            week_numbers = list(all_records_df['Week Number'].unique())
+
+            return all_records_df.to_dict(orient='records'), df_keys, week_numbers
+
+    def get_check_ins_chart(self, course_id:str, check_in_sheet_name:str):
+        if self.doc.id == GOOGLE_SHEETS_MASTER_DOCUMENT_ID:
+            courses_sheet = self.get_sheet("courses")
+            courses_records = courses_sheet.get_all_records()
+
+            course_document_id_list = [c["SHEETS_DOCUMENT_ID"] for c in courses_records if c["COURSE_ID"] == int(course_id)]
+
+            if len(course_document_id_list) == 0:
+                raise Exception("course not found...")
+                #TODO: handle within the route
+            if len(course_document_id_list) > 1:
+                raise Exception("course duplicate found...error")
+                #TODO: handle within the route
+
+            self.set_active_document(course_document_id_list[0])
+
+        check_in_sheet = self.get_sheet(check_in_sheet_name)
+        check_in_records = check_in_sheet.get_all_records()
+        all_records_df = pd.DataFrame(check_in_records)
+        numeric_df = all_records_df.select_dtypes(include=['number'])
+        numeric_df['Week Number'] = all_records_df['Week Number']
+        mean_values = numeric_df.groupby('Week Number').mean().reset_index()
+        return mean_values.to_dict(orient='records')
 
 
 
@@ -382,8 +408,8 @@ def get_user_courses(self, email:str) -> list:
 
     ss = SpreadsheetService()
 
-    ss.get_weekly_check_ins("12345", "[email protected]", "TA", "check-ins-aggregate")
-
+    data = ss.get_weekly_check_ins("12345", "[email protected]", "TA", "check-ins-aggregate")
+    print(data)
     #ss.get_student_courses("[email protected]")
 
     #ss.get_assignment_scores("[email protected]", "12345", "onboarding")

web_app/routes/courses_routes.py

@@ -138,10 +138,39 @@ def check_ins(course_id):
     user_role = courses_info[0].get('USER_TYPE')
     course_name = courses_info[0].get('COURSE_NAME')
     check_in_sheet_name = courses_info[0].get('CHECK_IN_SHEET_NAME')
+    check_in_form_id = courses_info[0].get('CHECK_IN_FORM_ID')
 
     print("-----")
     print(courses_info[0])
 
     if user_role == "STUDENT":
         check_in_data, check_in_headers = ss.get_weekly_check_ins(course_id=course_id, email=email, user_role=user_role, check_in_sheet_name=check_in_sheet_name)
-        return render_template("check_ins_student.html", course_id=course_id, course_name=course_name, check_in_data=check_in_data, check_in_headers=check_in_headers)
+        return render_template("check_ins_student.html", course_id=course_id, course_name=course_name, check_in_data=check_in_data, check_in_headers=check_in_headers, check_in_form_id=check_in_form_id)
+
+    else: #ta, teacher, or admin
+        check_in_data, check_in_headers, week_numbers = ss.get_weekly_check_ins(course_id=course_id, email=email, user_role=user_role, check_in_sheet_name=check_in_sheet_name)
+        return render_template("check_ins_teacher.html", course_id=course_id, course_name=course_name, check_in_data=check_in_data, check_in_headers=check_in_headers, week_numbers=week_numbers)
+
+
+@courses_routes.route("/courses/<course_id>/check_ins/chart")
+@authenticated_route
+@ta_route()
+def check_ins_chart(course_id):
+    ss = current_app.config["SPREADSHEET_SERVICE"]
+    current_user = session.get("current_user")
+    email = current_user["email"]
+
+
+    courses_info = [c for c in current_user.get('user_courses') if int(c['COURSE_ID']) == int(course_id)]
+
+    if len(courses_info) == 0:
+        flash(str(courses_info))
+        return redirect('/user/courses')
+
+    user_role = courses_info[0].get('USER_TYPE')
+    course_name = courses_info[0].get('COURSE_NAME')
+    check_in_sheet_name = courses_info[0].get('CHECK_IN_SHEET_NAME')
+    check_in_form_id = courses_info[0].get('CHECK_IN_FORM_ID')
+
+    formatted_data = ss.get_check_ins_chart(course_id=course_id, check_in_sheet_name=check_in_sheet_name)
+    return render_template("check_ins_chart.html", course_name=course_name, formatted_data=formatted_data)

web_app/templates/assignments_teacher.html

@@ -3,6 +3,7 @@
 
 {% block content %}
 
+
     <h1>Assignments: {{personal_course_info.DEPARTMENT}}-{{personal_course_info.NUMBER}} {{personal_course_info.COURSE_NAME}}</h1>
 
     <table class="table table-hover text-center">

web_app/templates/check_ins_chart.html

@@ -0,0 +1,66 @@
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "courses" %}
+
+{% block content %}
+    <!-- Import Chart.js through CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <h1>{{course_name}}: Check-in Aggregate Data</h1>
+    <hr>
+
+    <canvas id="myChart" style="max-height: 600px; width: 100%;"></canvas>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Make sure JSON data is correctly handled by using | tojson | safe
+            var rawData = {{ formatted_data | tojson | safe }};
+            var datasets = [];
+
+            // Predefined set of distinct colors
+            var colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#E7E9ED', '#605ca8'];
+
+            // Assuming 'rawData' is an array of objects where each object has week as one key and metrics as others
+            const metrics = Object.keys(rawData[0]).filter(key => key !== 'Week Number');
+            const weeks = rawData.map(item => item['Week Number']);
+
+            metrics.forEach((metric, index) => {
+                var dataPoints = rawData.map(weekData => ({
+                    x: weekData['Week Number'],
+                    y: weekData[metric]
+                }));
+
+                datasets.push({
+                    label: metric,
+                    data: dataPoints,
+                    backgroundColor: colors[index % colors.length], // Cycle through colors array
+                    borderColor: colors[index % colors.length], // Optional: Set border color to match
+                    showLine: true,
+                    fill: false,
+                    pointRadius: 5, // Make points larger
+                    pointHoverRadius: 7 // Larger when hovered
+                });
+            });
+
+            var ctx = document.getElementById('myChart').getContext('2d');
+            var myChart = new Chart(ctx, {
+                type: 'scatter',
+                data: { datasets: datasets },
+                options: {
+                    responsive: true, // Ensure the chart is responsive
+                    maintainAspectRatio: false, // Allow custom dimensions
+                    scales: {
+                        x: {
+                            type: 'category',
+                            labels: weeks,
+                            title: { display: true, text: 'Week' }
+                        },
+                        y: {
+                            title: { display: true, text: 'Value' }
+                        }
+                    }
+                }
+            });
+        });
+
+    </script>
+{% endblock %}

web_app/templates/check_ins_student.html

@@ -5,6 +5,8 @@
 
     <h1>Check Ins: {{ course_name }}</h1>
 
+    <h3>Fill out check-in form <a href ="{{check_in_form_id}}">here</a>.</h3>
+
     <table class="table table-hover text-center">
         <thead>
             <tr>

web_app/templates/check_ins_teacher.html

@@ -0,0 +1,67 @@
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "assignments" %}
+
+{% block content %}
+
+<h1>Check Ins: {{ course_name }}</h1>
+<h4><a href="/courses/{{course_id}}/check_ins/chart">View Chart</a></h4>
+
+<hr>
+
+<select id="weekFilter" onchange="filterTable()">
+    <option value="">Select a Week</option>
+    {% for week in week_numbers %}
+    <option value="{{ week }}">{{ week }}</option>
+    {% endfor %}
+</select>
+
+<!-- Ensure the table has an id -->
+<table id="data-table" class="table table-hover text-center">
+    <thead>
+        <tr>
+            {% for col in check_in_headers %}
+            <th scope="col">{{ col }}</th>
+            {% endfor %}
+        </tr>
+    </thead>
+    <tbody>
+        {% for data in check_in_data %}
+        <tr class="data-row">
+            {% for col in check_in_headers %}
+            <!-- Assign 'week-column' class to the 'Week Number' cell -->
+            <td {% if col == 'Week Number' %}class="week-column"{% endif %}>{{ data[col] }}</td>
+            {% endfor %}
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+<script>
+    function filterTable() {
+        var select = document.getElementById("weekFilter");
+        var week = select.value;
+        var rows = document.querySelectorAll("#data-table .data-row");
+
+        rows.forEach(function(row) {
+            var weekCell = row.querySelector(".week-column");
+            if (week && weekCell.textContent.trim() === week) {
+                row.style.display = "";
+            } else {
+                row.style.display = "none";
+            }
+        });
+    }
+</script>
+
+<script>
+document.addEventListener("DOMContentLoaded", function(){
+    document.querySelectorAll('.clickable-row').forEach(row => {
+        row.addEventListener('click', function() {
+            window.location.href = this.dataset.href;
+        });
+    });
+    filterTable();
+});
+</script>
+
+{% endblock %}