Added basic sesh list rendering to PM panel UX

www/css/panel/pm.css

@@ -22,6 +22,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 #pm-panel-sesh-list-container{
     flex: 1;
     max-width: 10em;
+    width: calc(100% - 1.25em);
+    margin-left: 0.25em;
 }
 
 #pm-panel-sesh-container{
@@ -33,11 +35,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 }
 
 #pm-panel-start-sesh{
-    width: calc(100% - 1.25em);
-    margin-left: 0.25em;
     padding: 0 0.5em;
     text-wrap: nowrap;
     display: flex;
+    font-size: 1.2em;
+    font-weight: bold;
 }
 
 #pm-panel-start-sesh span{
@@ -52,3 +54,15 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 #pm-panel-sesh-control-div{
     margin: 0.5em;
 }
+
+div.pm-panel-sesh-list-entry{
+    padding: 0 0.5em;
+    display: flex;
+    flex-direction: row;
+}
+
+div.pm-panel-sesh-list-entry, div.pm-panel-sesh-list-entry p{
+    margin: 0;
+    text-wrap: nowrap;
+    text-align: center;
+}

www/css/theme/movie-night.css

@@ -627,6 +627,11 @@ div.archived p{
     border-bottom: 1px solid var(--accent0);
 }
 
+
+div.pm-panel-sesh-list-entry{
+    border-bottom: 1px solid var(--accent0);
+}
+
 /* altcha theming*/
 div.altcha{
     box-shadow: 4px 4px 1px var(--bg1-alt0) inset;

www/js/channel/panels/emotePanel.js

@@ -27,6 +27,13 @@ class emotePanel extends panelObj{
     constructor(client, panelDocument){
         super(client, "Emote Palette", "/panel/emote", panelDocument);
 
+        this.defineListeners();
+    }
+
+    /**
+     * Defines network related listeners
+     */
+    defineListeners(){
         this.client.socket.on("personalEmotes", this.renderEmoteLists.bind(this));
     }
 

www/js/channel/panels/pmPanel.js

@@ -26,13 +26,26 @@ class pmPanel extends panelObj{
      */
     constructor(client, panelDocument){
         super(client, "Private Messaging", "/panel/pm", panelDocument);
+
+        this.defineListeners();
     }
 
     closer(){
     }
 
     docSwitch(){
+        this.seshList = this.panelDocument.querySelector('#pm-panel-sesh-list');
+
         this.setupInput();
+
+        this.renderSeshList();
+    }
+
+    /**
+     * Defines network related event listeners
+     */
+    defineListeners(){
+
     }
 
     /**
@@ -40,4 +53,36 @@ class pmPanel extends panelObj{
      */
     setupInput(){
     }
+
+    /**
+     * Render out current sesh array to sesh list UI
+     */
+    renderSeshList(){
+        //For each session tracked by the pmHandler
+        for(const sesh of this.client.pmHandler.seshList){
+            this.renderSeshListEntry(sesh);
+        }
+    }
+
+    /**
+     * Renders out a given messaging sesh to the sesh list UI
+     */
+    renderSeshListEntry(sesh){
+        //Create container div
+        const entryDiv = document.createElement('div');
+        //Set conatiner div classes
+        entryDiv.classList.add('pm-panel-sesh-list-entry','interactive');
+
+
+        //Create sesh label
+        const seshLabel = document.createElement('p');
+        //Create human-readable label out of members array
+        seshLabel.textContent = utils.unescapeEntities(sesh.recipients.sort().join(', '));
+
+        //append sesh label to entry div
+        entryDiv.appendChild(seshLabel);
+
+        //Append entry div to sesh list
+        this.seshList.appendChild(entryDiv);
+    }
 }

www/js/channel/pmHandler.js

@@ -15,23 +15,142 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
 /**
- * Class for handling incoming Private Messages
+ * Class for handling incoming Private Messages for the entire client
  */
 class pmHandler{
+    /**
+     * Instantiates a new Private Message Handler object
+     * @param {channel} client - Parent client Management Object
+     */
     constructor(client){
+        /**
+         * Parent client management object
+         */
         this.client = client;
 
+        /**
+         * PM Icon in the main chat bar
+         */
         this.pmIcon = document.querySelector('#chat-panel-pm-icon');
 
+        /**
+         * List of PM Sessions
+         */
+        this.seshList = [];
+
         this.defineListeners();
         this.setupInput();
     }
 
+    /**
+     * Defines network related event listeners for PM Handler
+     */
     defineListeners(){
-        
+        this.client.pmSocket.on("message", this.handlePM.bind(this));
+        this.client.pmSocket.on("sent", this.handlePM.bind(this));
     }
 
+    /**
+     * Defines inpet related event listeners for PM handler
+     */
     setupInput(){
         this.pmIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new pmPanel(client))});
     }
+
+    /**
+     * Handles received Private Messages from the PM service on the server, organizing it into the proper session from the sesh list
+     * Or creating a new sesh where a matching one does not a exist
+     * @param {object} data - Private Message data from the server
+     */
+    handlePM(data){
+        //Store whether or not current message has been consumed by an existing sesh
+        let consumed = false;
+
+        //Create members array from scratch to avoid changing the input data for further processing
+        const members = [];
+
+        //Manually iterate through recipients
+        for(const member of data.recipients){
+            //check to make sure we're not adding ourselves
+            if(member != this.client.user.user){
+                //Copy relevant array members by value instead of reference
+                members.push(member);
+            }
+        }
+
+        //If this wasn't our message
+        if(data.sender != this.client.user.user){
+            //Push sender onto members list
+            members.push(data.sender);
+        }
+
+        //For each existing sesh
+        for(let seshIndex in this.seshList){
+            //Get current sesh
+            const sesh = this.seshList[seshIndex];
+
+            //Check to see if the length of sesh recipients equals current length (only check on arrays that actually make sense to save time)
+            if(sesh.recipients.length == members.length){
+                /*Feels like cheating to have the JS engine to the hard bits by just telling it to sort them.
+                That being said, since the function is implemented into the JS Engine itself
+                It will be quicker than any custom comparison code we can write*/
+
+                //Sort recipient lists so lists with the same user will be equal when joined together in a string and compare, if they're the same...
+                if(sesh.recipients.sort().join() == members.sort().join()){
+                    //Dump collected message into the matching session
+                    this.seshList[seshIndex].messages.push(data);
+
+                    //Let the rest of the method know that we've consumed this message
+                    consumed = true;
+                }
+            }
+        }
+
+        //If we made it through the loop without consuming the message
+        if(!consumed){
+            //Add it to it's own fresh new sesh
+            this.seshList.push(new pmSesh(data, client));
+        }
+    }
+}
+
+/**
+ * Class which represents an existing Private Messaging session between two or more users
+ */
+class pmSesh{
+    /**
+     * Instatiates a new pmSession object
+     * @param {Object} message - Initial Private Message object from server that initiated the session
+     */
+    constructor(message, client){
+         /**
+         * Parent client management object
+         */
+        this.client = client;       
+
+        /**
+         * Members of session excluding the currently logged in user
+         */
+        this.recipients = [];
+
+        //Manually iterate through recipients
+        for(const member of message.recipients){
+            //check to make sure we're not adding ourselves
+            if(member != this.client.user.user){
+                //Copy relevant array members by value instead of reference
+                this.recipients.push(member);
+            }
+        }
+
+        //If this wasn't our message
+        if(message.sender != this.client.user.user){
+            //Push sender onto members list
+            this.recipients.push(message.sender);
+        }
+
+        /**
+         * Array containing all session messages
+         */
+        this.messages = [message];
+    }
 }