webcit-ng/static/js/view_mail.js

   1 // This module handles the view for "mailbox" rooms.
   2 //
   3 // Copyright (c) 2016-2022 by the citadel.org team
   4 //
   5 // This program is open source software.  Use, duplication, or
   6 // disclosure are subject to the GNU General Public License v3.
   7
   8
   9 // Render a message into the mailbox view (FIXME make this different from the forum view)
  10 function mail_render_one(msg, target_div) {
  11         let div = "FIXME";
  12         try {
  13                 outmsg =
  14                   "<div class=\"ctdl-msg-wrapper\">"                            // begin message wrapper
  15                 + "<div class=\"ctdl-avatar\" onClick=\"javascript:user_profile('" + msg.from + "');\">"
  16                 + "<img src=\"/ctdl/u/" + msg.from + "/userpic\" width=\"32\" "
  17                 + "onerror=\"this.parentNode.innerHTML='&lt;i class=&quot;fa fa-user-circle fa-2x&quot;&gt;&lt;/i&gt; '\">"
  18                 + "</div>"                                                      // end avatar
  19                 + "<div class=\"ctdl-msg-content\">"                            // begin content
  20                 + "<div class=\"ctdl-msg-header\">"                             // begin header
  21                 + "<span class=\"ctdl-msg-header-info\">"                       // begin header info on left side
  22                 + "<span class=\"ctdl-username\" onClick=\"javascript:user_profile('" + msg.from + "');\">"
  23                 + msg.from
  24                 + "</a></span>"                                                 // end username
  25                 + "<span class=\"ctdl-msgdate\">"
  26                 + convertTimestamp(msg.time)
  27                 + "</span>"                                                     // end msgdate
  28                 + "</span>"                                                     // end header info on left side
  29                 + "<span class=\"ctdl-msg-header-buttons\">"                    // begin buttons on right side
  30
  31                 + "<span class=\"ctdl-msg-button\">"                            // Reply
  32                 + "<a href=\"javascript:open_reply_box('"+div+"',false,'"+msg.wefw+"','"+msg.msgn+"');\">"
  33                 + "<i class=\"fa fa-reply\"></i> "
  34                 + _("Reply")
  35                 + "</a></span>"
  36
  37                 + "<span class=\"ctdl-msg-button\">"                            // ReplyQuoted
  38                 + "<a href=\"javascript:open_reply_box('"+div+"',true,'"+msg.wefw+"','"+msg.msgn+"');\">"
  39                 + "<i class=\"fa fa-comment\"></i> "
  40                 + _("ReplyQuoted")
  41                 + "</a></span>";
  42
  43                 if (can_delete_messages) {
  44                         outmsg +=
  45                         "<span class=\"ctdl-msg-button\">"
  46                         + "<a href=\"javascript:forum_delete_message('"+div+"','"+msg.msgnum+"');\">"
  47                         + "<i class=\"fa fa-trash\"></i> "
  48                         + _("Delete")
  49                         + "</a></span>";
  50                 }
  51
  52                 outmsg +=
  53                   "</span>";                                                    // end buttons on right side
  54                 if (msg.subj) {
  55                         outmsg +=
  56                         "<br><span class=\"ctdl-msgsubject\">" + msg.subj + "</span>";
  57                 }
  58                 outmsg +=
  59                   "</div><br>"                                                  // end header
  60                 + "<div class=\"ctdl-msg-body\" id=\"" + div + "_body\">"       // begin body
  61                 + msg.text
  62                 + "</div>"                                                      // end body
  63                 + "</div>"                                                      // end content
  64                 + "</div>"                                                      // end wrapper
  65                 ;
  66         }
  67         catch(err) {
  68                 outmsg = "<div class=\"ctdl-msg-wrapper\">" + err.message + "</div>";
  69         }
  70
  71         target_div.innerHTML = outmsg;
  72 }
  73
  74
  75 // display an individual message
  76 function mail_display_message(msgnum, target_div) {
  77         url = "/ctdl/r/" + escapeHTMLURI(current_room) + "/" + msgnum + "/json";
  78         mail_fetch_msg = async() => {
  79                 response = await fetch(url);
  80                 msg = await(response.json());
  81                 if (response.ok) {
  82                         mail_render_one(msg, target_div);
  83                 }
  84         }
  85         mail_fetch_msg();
  86 }
  87
  88
  89 // Remember the last message that was selected
  90 var selected_message = 0;
  91 var RefreshMailboxInterval;
  92
  93
  94 // A message has been selected...
  95 function select_message(msgnum) {
  96         // unhighlight any previously selected message
  97         try {
  98                 document.getElementById("ctdl-msgsum-" + selected_message).classList.remove("w3-blue");
  99         }
 100         catch {
 101         }
 102
 103         // highlight the newly selected message
 104         selected_message = msgnum;
 105         document.getElementById("ctdl-msgsum-" + selected_message).classList.add("w3-blue");
 106         document.getElementById("ctdl-msgsum-" + selected_message).scrollIntoView();
 107
 108         // display the message
 109         mail_display_message(msgnum, document.getElementById("ctdl-reading-pane"));
 110 }
 111
 112
 113 // render one row in the mailbox table (this could be called from one of several places)
 114 function mail_render_row(msg) {
 115         row     = "<tr "
 116                 + "id=\"ctdl-msgsum-" + msg["msgnum"] + "\" "
 117                 + "onClick=\"select_message(" + msg["msgnum"] + ");\" "
 118                 //+ "onmouseenter=\"console.log('mouse in');\" "
 119                 //+ "onmouseleave=\"console.log('mouse out');\""
 120                 + ">"
 121                 + "<td>" + msg["subject"] + "</td>"
 122                 + "<td>" + msg["author"] + " &lt;" + msg["addr"] + "&gt;</td>"
 123                 + "<td>" + convertTimestamp(msg["time"]) + "</td>"
 124                 + "<td>" + msg["msgnum"] + "</td>"
 125                 + "</tr>";
 126         return(row);
 127 }
 128
 129
 130 // Set up the mailbox view
 131 function mail_display() {
 132         document.getElementById("ctdl-main").innerHTML = "<div id=\"ctdl-mailbox-pane\">mailbox pane</div><div id=\"ctdl-reading-pane\">reading pane</div>";
 133         refresh_mail_display();
 134         RefreshMailboxInterval = setInterval(refresh_mail_display, 10000);
 135 }
 136
 137
 138 // Display or refresh the mailbox
 139 function refresh_mail_display() {
 140         console.log("refresh_mail_display()");
 141
 142         // If the "ctdl-mailbox-pane" no longer exists, the user has navigated to a different part of the site,
 143         // so cancel the refresh.
 144         try {
 145                 document.getElementById("ctdl-mailbox-pane").innerHTML;
 146         }
 147         catch {
 148                 console.log("ending refresh_mail_display()");
 149                 clearInterval(RefreshMailboxInterval);
 150                 return;
 151         }
 152
 153         // Now go to the server.
 154         url = "/ctdl/r/" + escapeHTMLURI(current_room) + "/mailbox";
 155         fetch_mailbox = async() => {
 156                 response = await fetch(url);
 157                 msgs = await(response.json());
 158                 if (response.ok) {
 159
 160                         box =   "<table class=\"w3-table-all w3-hoverable\" width=100%>"
 161                                 + "<tr class=\"w3-blue\">"
 162                                 + "<th>" + _("Subject") + "</th>"
 163                                 + "<th>" + _("Sender") + "</th>"
 164                                 + "<th>" + _("Date") + "</th>"
 165                                 + "<th>#</th>"
 166                                 + "</tr>";
 167
 168                         for (var i=0; i<msgs.length; ++i) {
 169                                 box += mail_render_row(msgs[i]);
 170                         }
 171
 172                         box +=  "</table>";
 173                         document.getElementById("ctdl-mailbox-pane").innerHTML = box;
 174
 175                         if (selected_message > 0) {                     // if we had a message selected, keep it selected
 176                                 select_message(selected_message);
 177                         }
 178                 }
 179         }
 180         fetch_mailbox();
 181 }