implemented changing users in roles

Proto-Chat · Mar 7, 2024 · 48f81ae · 48f81ae
1 parent c9912f4
commit 48f81ae
Show file tree

Hide file tree

Showing 13 changed files with 584 additions and 199 deletions.
diff --git a/client/CSS/chatServer.css b/client/CSS/chatServer.css
@@ -96,6 +96,7 @@
     padding: 20px;
     border-radius: 8px;
     text-align: center;
+    width: 100%;
 }
 
 .popup h2 {
@@ -262,7 +263,8 @@
 .viewBaseBtn {
     color: white; /* White text */
     margin-right: 10px;
-    padding: 10px; /* Padding around the text */
+    /* padding: 10px; Padding around the text */
+    padding: 7px 20px;
     border: none; /* No border */
     border-radius: 4px; /* Rounded corners */
     cursor: pointer; /* Pointer cursor on hover */
@@ -370,4 +372,86 @@
     color: black;
     text-decoration: none;
     cursor: pointer;
+}
+
+.newrolediv {
+    justify-content: center;
+    display: table;
+    width: fit-content;
+    border-collapse: separate;
+    border-spacing: 0 1em;
+}
+
+.newrolediv input, label, h2 {
+    display: table-cell;
+}
+
+.newrolediv label { text-align: right; padding-right: 10px; }
+
+
+#uSearchInp {
+    box-sizing: border-box;
+    font-size: 16px;
+    padding: 14px 20px 12px 45px;
+    border: 1px solid #ccc; /* Changed to a lighter border */
+    border-radius: 5px; /* Added for rounded corners */
+    outline: none; /* Removes the default outline to use custom focus style */
+}
+
+#uSearchInp:focus {
+    border: 2px solid #aaa; /* Custom focus style */
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    /* display: none; */
+    position: absolute;
+    background-color: #f9f9f9; /* Light grey background for dropdown */
+    min-width: 230px;
+    overflow: auto;
+    border: 1px solid #ccc; /* Lighter border */
+    border-radius: 5px; /* Rounded corners */
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Added shadow for depth */
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    transition: background-color 0.3s; /* Smooth transition for hover effect */
+}
+
+.dropdown-content a:hover {
+    background-color: #ddd; /* Lighter grey for hover */
+}
+
+
+.role-item h3 {
+    width: fit-content;
+    background-color: #ffffff5e;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+
+.addubtn {
+    color: #ffffff;
+    background-color: #00379e;
+    font-size: 16px;
+    border: 1px solid #2d63c8;
+    border-radius: 10px;
+    padding: 7px 20px;
+    cursor: pointer;
+    margin-bottom: 10px;
+}
+
+.addubtn:hover {
+    color: #ffffff;
+    background-color: #001764;
 }
diff --git a/client/index.html b/client/index.html
@@ -148,6 +148,13 @@
                     case 500:
                         alert('REQUEST FAILED!');
                         window.location.reload();
+
+                    case 503: {
+                        alert("Server is still booting up!");
+                        setTimeout(connectSocket, 1000);
+                        ws.close(1006);
+                    }
+                    break;
 
                     default: console.log("UNKNOWN RESPONSE ", response);
                 }

diff --git a/client/scripts/chatServerChannel.js b/client/scripts/chatServerChannel.js
@@ -158,7 +158,6 @@ function showEditChannelPopup(channelId, channelName) {
 
 function dispChannelRoles(data) {
     document.getElementById("rolepopup").style.display = "block";
-    const usersAll = data.serverConfs.usersAll;
     const roleContainer = document.getElementById("dataContainer");
     roleContainer.innerHTML = '<h1 style="text-align: center; margin-bottom: 0px;">Users and Roles</h1>';
 
@@ -189,13 +188,17 @@ function dispChannelRoles(data) {
         uList.style.marginTop = '0px';
         uList.style.border = 'solid black 1px';
 
+        role.users = role.users.map((uid => data.users.find(u => u.uid == uid)));
         role.users.forEach(user => {
             const li = document.createElement('li');
             li.dataset.uid = user.uid;
-            li.innerText = user.name
+            li.innerText = user.username;
             uList.appendChild(li);
         });
 
+        const addUBtn = document.createElement('button');
+        addUBtn.className = "gobtn"
+
         // div.innerHTML += '<h4 style="margin: 0px 0px 1px 30px;">Users in Role</h4>';
         div.appendChild(uList);
         roleContainer.appendChild(div);