src/render/mail.ts

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