src/render/mail.ts

   1 import { DateTime } from "luxon";
   2 import { MessageWithNames } from "../repository/mail";
   3
   4 export function renderMailroom(mail: MessageWithNames[]): string {
   5     return `
   6     <div hx-trigger="every 600s" hx-get="/poll/mailroom">
   7     <h2 data-augmented-ui="tl-clip bl-clip none">Mail</h2>
   8     <table>
   9     <tr>
  10         <th>From</th>
  11         <th>Subject</th>
  12         <th>Sent At</th>
  13     </tr>
  14     ${mail.map(msg => {
  15         return `
  16         <tr class="${msg.read_at === 0 ? 'unread': 'read'}" >
  17             <td>${msg.username}</td>
  18             <td>
  19             <a href="#" hx-trigger="click" hx-get="/messages/${msg.id}" hx-target="#individual-message">
  20                 ${msg.subject}
  21             </a>
  22             </td>
  23             <td>${DateTime.fromMillis(msg.sent_at)}</td>
  24         </tr>
  25         `;
  26     }).join("\n")}
  27     </table>
  28     <div id="individual-message"></div>
  29     </div>
  30     `;
  31 }
  32
  33 export function renderMessage(msg: MessageWithNames): string {
  34     return `
  35     <table>
  36     <tr>
  37         <th>From</th>
  38         <td>${msg.username}</td>
  39     </tr>
  40     <tr>
  41         <th>Sent</th>
  42         <td>${DateTime.fromMillis(msg.sent_at)}</td>
  43     </tr>
  44     <tr>
  45         <th>Subject</th>
  46         <td>${msg.subject}</td>
  47     </tr>
  48     <tr>
  49         <th valign="top">Message</th>
  50         <td>${msg.message}</td>
  51     </tr>
  52     </table>
  53     `;
  54 }