diff options
| author | Furkan Sahin <furkan-dev@proton.me> | 2022-07-21 14:56:10 -0400 |
|---|---|---|
| committer | Furkan Sahin <furkan-dev@proton.me> | 2022-07-21 14:56:10 -0400 |
| commit | a6a357603b6c2d6c129ff2710edbee4d3dce9703 (patch) | |
| tree | 0b8c590e25373f481524e2e4cbc88d240bccf8f0 | |
| parent | fcd410d9365c0c0eb72a9df62f14c1a4ff6cdf04 (diff) | |
Begin Displaying Peer Teachers and their info in a table
| -rw-r--r-- | src/components/PeerTeachers/PeerTeachers.svelte | 75 |
1 files changed, 37 insertions, 38 deletions
diff --git a/src/components/PeerTeachers/PeerTeachers.svelte b/src/components/PeerTeachers/PeerTeachers.svelte index 6def4ac..28648d5 100644 --- a/src/components/PeerTeachers/PeerTeachers.svelte +++ b/src/components/PeerTeachers/PeerTeachers.svelte @@ -1,42 +1,41 @@ <script lang="ts"> + import { each } from "svelte/internal"; + import { labStore, ptStore } from "../../stores"; + import type PeerTeacher from "src/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()) + ); + const headers = ["", "Name", "UIN", "Labs"]; </script> -<div class="overflow-x-auto"> - <h1>TODO</h1> - <div class="overflow-x-auto"> - <table class="table w-full"> - <!-- head --> - <thead> - <tr> - <th></th> - <th>Name</th> - <th>Job</th> - <th>Favorite Color</th> - </tr> - </thead> - <tbody> - <!-- row 1 --> - <tr> - <th>1</th> - <td>Cy Ganderton</td> - <td>Quality Control Specialist</td> - <td>Blue</td> - </tr> - <!-- row 2 --> - <tr> - <th>2</th> - <td>Hart Hagerty</td> - <td>Desktop Support Technician</td> - <td>Purple</td> - </tr> - <!-- row 3 --> - <tr> - <th>3</th> - <td>Brice Swyre</td> - <td>Tax Accountant</td> - <td>Red</td> - </tr> - </tbody> - </table> - </div> +<div class="overflow-scroll"> + <div class="overflow-auto "> + <table class="table w-full"> + <!-- head --> + <thead> + <tr> + {#each headers as header} + <th>{header}</th> + {/each} + </tr> + </thead> + <tbody> + {#each peerTeachers as pt, i} + <tr> + <th>{i + 1}</th> + <th>{pt.name}</th> + <th>{pt.id}</th> + <th> + {#each Array.from(pt.labs) as lab_id} + {lab_id}, + {/each} + </th> + </tr> + {/each} + </tbody> + </table> + </div> </div> |