From f05396f0e86f68ee45e8c25d79401b6f54979dba Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Mon, 1 Aug 2022 16:58:57 -0500
Subject: `TamuHtmlOutput` page is finished for now. Resume working on parsing
 office hours.

---
 src/components/Sidebar.svelte       |  9 ++---
 src/components/TamuOutput.svelte    | 71 +++++++++++++++++++++++++++++++++++++
 src/components/helpers/PTBox.svelte |  2 +-
 3 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TamuOutput.svelte

(limited to 'src/components')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index b7cfc84..7a71191 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -4,17 +4,18 @@
   import FileUploads from "./FileUploads.svelte";
   import PeerTeachers from "./PeerTeachers.svelte";
   import Labs from "./Labs.svelte";
+  import TamuOutput from "./TamuOutput.svelte";
   import { onMount } from "svelte";
   import { parseDatabaseLocalStorage } from "../util/parser";
 
   let sections = [
     { name: "File Uploads", component: FileUploads },
-    { name: "Peer Teachers", component: PeerTeachers }, // TODO
+    { name: "Peer Teachers", component: PeerTeachers },
     { name: "Assign Labs", component: AssignLabs },
-    { name: "Labs", component: Labs }, // TODO
+    { name: "Labs", component: Labs },
     { name: "Active Peer Teachers", component: null }, // TODO
     { name: "Stats", component: null }, // TODO
-    { name: "TAMU Html Output", component: null }, // TODO
+    { name: "TAMU Html Output", component: TamuOutput },
   ];
 
   let selected = sections[0];
@@ -70,7 +71,7 @@
   </div>
 
   <!-- Chosen Section / Component -->
-  <div class="flex-auto h-full">
+  <div class="flex-auto h-full overflow-y-hidden">
     <svelte:component this={selected.component} />
   </div>
 </div>
diff --git a/src/components/TamuOutput.svelte b/src/components/TamuOutput.svelte
new file mode 100644
index 0000000..454c50c
--- /dev/null
+++ b/src/components/TamuOutput.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { ptStore } from "../stores";
+    import type PeerTeacher from "../models/PeerTeacher";
+
+    $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
+        a.lastname.toUpperCase() === b.lastname.toUpperCase()
+            ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
+            : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
+    );
+
+    function getCourses(pt: PeerTeacher) {
+        const courses = new Map<number, number[]>();
+        const getCourse = (x: number) => Math.floor(x / 1000);
+        pt.labs.forEach((lab_id) => {
+            const key = getCourse(lab_id);
+            const sec = lab_id % 1000;
+            if (courses.has(key)) {
+                courses.get(key).push(sec);
+            } else {
+                courses.set(key, [sec]);
+            }
+        });
+        pt.can_teach.forEach((course) => {
+            if (course == null || course == undefined) return;
+            if (!courses.has(course)) courses.set(course, []);
+        });
+        return courses;
+    }
+</script>
+
+<div
+    class="flex flex-col overflow-y-auto h-full overflow-x-hidden mx-[25%] pt-10"
+>
+    {#each peerTeachers as pt}
+        <div class="h-40">
+            <hr />
+            <p>
+                <img
+                    class="float-right"
+                    alt={pt?.name}
+                    src={pt?.drive_pic}
+                    width="100"
+                    height="125"
+                />
+            </p>
+            <h1 class="text-xl font-bold">
+                {pt?.name} |
+                <a
+                    href="mailto:{pt.email}"
+                    rel="noopener"
+                    target="_blank"
+                    title="${pt?.name} email"
+                >
+                    Email {pt?.firstname}
+                </a>
+            </h1>
+            {#if pt?.labs.size > 0}
+                <p>
+                    <strong class="text-lg">Courses:</strong>
+                </p>
+                <ul class="text-lg">
+                    {#each Array.from(getCourses(pt)) as lab}
+                        <li>
+                            CSCE {lab[0]} - {lab[1]}
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/each}
+</div>
diff --git a/src/components/helpers/PTBox.svelte b/src/components/helpers/PTBox.svelte
index 73b62c7..2b881f9 100644
--- a/src/components/helpers/PTBox.svelte
+++ b/src/components/helpers/PTBox.svelte
@@ -40,5 +40,5 @@
     </div>
 
     <!-- Bottom half, hours -->
-    <div class="">Hours: {pt.lab_hours}</div>
+    <div class="">Hours: {pt.lab_hours}/{pt.pref_work}</div>
 </div>
-- 
cgit v1.2.3