From 124867967c1fbb257fa86664e86a513d273667fa Mon Sep 17 00:00:00 2001
From: jsrobson10 <jsrobson10@gmail.com>
Date: Fri, 12 Apr 2019 17:47:30 +1000
Subject: [PATCH] Added basic functionality to see users and conversations

---
 index.html          |  6 +++---
 scripts/profiles.js | 40 +++++++++++++++++++++++++++++++++++++---
 style.css           | 29 ++++++++++++++++++++++++-----
 3 files changed, 64 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index f7575e3..a3b6edc 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,10 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <div class="chat-menu">
-      <ul id="chat-menu-profiles">
+    <div class='menu-vertical server-menu'>
+      <ul id="server-menu-profiles">
       </ul>
-      <ul id="chat-menu-config">
+      <ul id="server-menu-config">
         <li><a href="#" onclick="switch_new_profile()">New Profile</a></li>
       </ul>
     </div>
diff --git a/scripts/profiles.js b/scripts/profiles.js
index a9fdcfa..2154961 100644
--- a/scripts/profiles.js
+++ b/scripts/profiles.js
@@ -32,8 +32,8 @@ fs.readFile("profiles.json", "utf-8", function(err, data)
     profile_connect(i);
   }
 
-  document.getElementById("chat-menu-profiles").style.bottom =
-  document.getElementById("chat-menu-config").style.height;
+  document.getElementById("server-menu-profiles").style.bottom =
+  document.getElementById("server-menu-config").style.height;
 });
 
 function profiles_export()
@@ -91,12 +91,46 @@ function profile_switch_to(id)
 {
   // Set the active profile
   active_profile = id;
+
+  // Create a chats menu
+  var chats_menu = "";
+
+  // Loop over the chats
+  var chats_array = Object.keys(connections[id].chats);
+  for(var i=0;i<chats_array.length;i++)
+  {
+    // Add to the chats menu
+    chats_menu += "<li><a href='#'>"+connections[id].chats[chats_array[i]].name+"</a></li>";
+  }
+
+  // Create a users menu
+  var users_menu = "";
+
+  // Loop over the users
+  var users_array = Object.keys(connections[id].users);
+  for(var i=0;i<users_array.length;i++)
+  {
+    // Add to the chats menu
+    users_menu += "<li><a href='#'>"+users_array[i]+"</a></li>";
+  }
+
+  // Set the html data
+  document.getElementById("chat-main").innerHTML = "\
+  <div id='chats-menu' class='menu-vertical'>\
+  <ul>"+chats_menu+"</ul>\
+  </div>\
+  <div id='chat-area'>\
+  </div>\
+  <div id='users-menu' class='menu-vertical'>\
+  <ul>"+users_menu+"</ul>\
+  </div>\
+  ";
 }
 
 function profiles_reload()
 {
   // Get the chat menu id
-  var chat_menu = document.getElementById("chat-menu-profiles");
+  var chat_menu = document.getElementById("server-menu-profiles");
 
   // Reset it
   chat_menu.innerHTML = "";
diff --git a/style.css b/style.css
index b91f233..090dfb0 100644
--- a/style.css
+++ b/style.css
@@ -1,28 +1,47 @@
-.chat-menu ul#chat-menu-profiles {
+.server-menu ul#server-menu-profiles {
   top: 0;
   bottom: 56px;
   overflow-y: auto;
 }
 
-.chat-menu ul {
+#chats-menu ul {
+  top: 0;
+  bottom: 0;
+  left: 240px;
+  width: 100px;
+  background-color: #BBB;
+}
+
+#users-menu ul {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  background-color: #BBB;
+}
+
+.menu-vertical ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   background-color: #CCC;
-  width: 240px;
   position: fixed;
+}
+
+.server-menu ul {
+  width: 240px;
   left: 0;
   bottom: 0;
 }
 
-.chat-menu ul li a {
+.menu-vertical ul li a {
   display: block;
   padding: 20px;
   text-decoration: none;
   color: #000;
 }
 
-.chat-menu ul li a:hover {
+.menu-vertical ul li a:hover {
   background-color: #AAA;
 }
 
