`TamuHtmlOutput` page is finished for now. Resume working on parsing office hours.

4 files changed, 82 insertions, 5 deletions

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>
diff --git a/src/models/PeerTeacher.ts b/src/models/PeerTeacher.ts
index c19fbd2..9069069 100644
--- a/src/models/PeerTeacher.ts
+++ b/src/models/PeerTeacher.ts
@@ -101,4 +101,9 @@ export default class PeerTeacher {
         return total_hours;
     }
 
+    get drive_pic(): string {
+        if (this.prof_pic_url == null || this.prof_pic_url == undefined) return ""
+        return `https://drive.google.com/uc?export=view&id=${this.prof_pic_url.replace(/^[^=]*=/, '')}`;
+    }
+
 }
\ No newline at end of file