fixed bugs with adding/removing roles from channels

Proto-Chat · Mar 8, 2024 · 4db07e2 · 4db07e2
1 parent 774d50d
commit 4db07e2
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 34 deletions.
diff --git a/client/index.html b/client/index.html
@@ -62,6 +62,8 @@
 
             ws.addEventListener('open', () => {
                 console.log("websocket connection established!");
+                document.getElementById('loadingstatus').innerText = `Connected!`;
+
                 if (localStorage.getItem('sessionid') && localStorage.getItem('sessionid') != "undefined") {
                     ws.send(JSON.stringify({ code: 1, op: 0, sid: localStorage.getItem('sessionid') }));
                     getPFP();
@@ -75,7 +77,7 @@
                 //     return setPFP(message);
                 // }
                 const response = JSON.parse(message.data);
-                console.log(response);
+                if (response.op != 10) console.log(response);
 
                 switch (response.code) {
                     case 0:
@@ -150,7 +152,7 @@
                         window.location.reload();
 
                     case 503: {
-                        alert("Server is still booting up!");
+                        document.getElementById('loadingstatus').innerText = "Server is still booting up!";
                         setTimeout(connectSocket, 1000);
                         ws.close(1006);
                     }
@@ -168,14 +170,22 @@
                 bar.style.display = 'block';
 
                 // try reconnecting
+                var inter = 1000;
                 const timer = setInterval(() => {
                     connectSocket();
+                    clearInterval(countdowninter);
 
                     ws.addEventListener('open', () => {
                         clearInterval(timer);
                         window.location.reload();
                     });
-                }, 1000);
+
+                    if (inter < 5000) {
+                        inter += 1000;
+                        const el = document.getElementById('loadingstatus');
+                        el.innerText = `Retrying...`;
+                    }
+                }, inter);
             });
         }
 
@@ -234,6 +244,7 @@ <h2 style="margin-top: 0; color: darkred;">Problems Connecting</h2>
         <div id="loadingdiv">
             <div id="loader"></div>
             <h1>L O A D I N G . . .</h1>
+            <h2 id="loadingstatus"></h2>
         </div>
         <div id="loginDiv">
 

diff --git a/client/scripts/chatServerChannel.js b/client/scripts/chatServerChannel.js
@@ -155,6 +155,19 @@ function showEditChannelPopup(channelId, channelName) {
     document.getElementById('editChannelPopupContainer').dataset.channelId = channelId;
 }
 
+function createRoleChangeBtn(role) {
+    const rembtn = document.createElement('button');
+    rembtn.innerText = (role.isInChannel) ? 'remove' : 'add';
+
+    rembtn.classList = 'viewBaseBtn viewBanned';
+    rembtn.style = 'display: inline; border: none; margin: 10px; cursor: pointer;';
+    rembtn.id = `changeRoleInChannel${role.id}`;
+
+    if (!role.isInChannel) rembtn.style.backgroundColor = '#06bf06';
+    rembtn.style.padding = '5px 15px';
+    rembtn.style.fontSize = '13px';
+    return rembtn;
+}
 
 function dispChannelRoles(data) {
     document.getElementById("rolepopup").style.display = "block";
@@ -171,14 +184,7 @@ function dispChannelRoles(data) {
         h3.style = `color: ${role.color}; margin-bottom: 0px;`;
         h3.innerText = role.name;
 
-        const rembtn = document.createElement('button');
-        rembtn.innerText = (role.isInChannel) ? 'remove' : 'add';
-        h3.appendChild(rembtn);
-
-        rembtn.classList = 'viewBanned';
-        rembtn.style = 'display: inline; border: none; margin: 10px; cursor: pointer;';
-
-        if (!role.isInChannel) rembtn.style.backgroundColor = 'green';
+        h3.appendChild(createRoleChangeBtn(role));
         div.appendChild(h3);
         div.dataset.isinchannel = role.isInChannel;
 
@@ -624,15 +630,24 @@ function setUpChannel(response) {
     // messages.onchange = () => {messages.lastChild.lastChild.scrollIntoView();}
 
     // create the "inChannel" sidebar
-    const memberSideBar = document.createElement('div');
-    memberSideBar.className = 'member-sidebar';
-    const memTitle = document.createElement('div');
-    memTitle.innerText = 'users';
-    memTitle.className = 'memTitle';
-    memberSideBar.appendChild(memTitle);
-
-    document.getElementById('maincontent').appendChild(memberSideBar);
-    createCollapsable(memberSideBar, false);
+    const memsidebar = document.getElementsByClassName('member-sidebar')[0];
+    if (!memsidebar) {
+        const memberSideBar = document.createElement('div');
+        memberSideBar.className = 'member-sidebar';
+        const memTitle = document.createElement('div');
+        memTitle.innerText = 'users';
+        memTitle.className = 'memTitle';
+        memberSideBar.appendChild(memTitle);
+
+        document.getElementById('maincontent').appendChild(memberSideBar);
+        createCollapsable(memberSideBar, false);
+    }
+    else {
+        console.log("EXISTS");
+        // clear sidebar
+        memsidebar.querySelectorAll('.user-card').forEach((el) => el.remove());
+    }
+
 
     // add the users asynchronously
     fillUSideBar(channelConfigs).then((res) => console.log((res) ? 'added all users to sidebar!' : 'failed to add all users to sidebar!'));
@@ -663,7 +678,7 @@ function setUpChannel(response) {
 
     element.appendChild(messages);
     element.appendChild(inpwrapper);
-    createCollapsable(document.getElementById('channels'));
+    if (!memsidebar) createCollapsable(document.getElementById('channels'));
     element.style = 'display: block;';
 }
 

diff --git a/client/scripts/chatServerUserActions.js b/client/scripts/chatServerUserActions.js
@@ -358,10 +358,12 @@ async function createRolePopup(data, shouldRet = false) {
 
 			const tag = document.createElement('label');
 			tag.innerText = role.name;
-			tag.for = `roleInp${role.id}`;
+			tag.setAttribute('for', `roleInp${role.id}`);
 			tag.style.fontSize = '20px';
 
-			modalContent.append(tag, roleInp, br());
+			const container = document.createElement('div');
+			container.append(tag, roleInp);
+			modalContent.append(container, br());
 		}
 
 		const submitbtn = document.createElement('button');

diff --git a/client/scripts/messages.js b/client/scripts/messages.js
@@ -502,11 +502,19 @@ async function createDmLink(dmRaw, isServer = false) {
     a.onclick = (e) => {
         if (!closeDMBtn.contains(e.target)) {
             if (!isServer) requestDM(a.id);
-            else window.location.pathname = `/server/${a.id}`;
+            else {
+                // don't show the reconnecting bar
+                document.getElementById('reconnectingbar')?.remove();
+                window.location.pathname = `/server/${a.id}`;
+            }
         }
         else {
             if (isServer) {
-                const conf = confirm(`Are you sure you'd like to leave "${dmRaw.name}"?`)
+                const conf = confirm(`Are you sure you'd like to leave "${dmRaw.name}"?`);
+                if (!conf) return;
+
+                // TODO: implement this
+                console.log(`leaving server: "${dmRaw.name}" (ID: "${a.id}")`);
             }
             else {
                 const closeDMWSObj = {

diff --git a/client/server.html b/client/server.html
@@ -42,6 +42,8 @@
 
             ws.addEventListener('open', () => {
                 console.log("websocket connection established!");
+                document.getElementById('loadingstatus').innerText = `Connected!`;
+
                 if (localStorage.getItem('sessionid') && localStorage.getItem('sessionid') != "undefined") {
                     const serverId = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
                     if (!serverId) window.location.href = '/';
@@ -68,7 +70,7 @@
                         break;
 
                         case 503: {
-                            alert("Server is still booting up!");
+                            document.getElementById('loadingstatus').innerText = "Server is still booting up!";
                             setTimeout(connectSocket, 1000);
                             ws.close(1006);
                         }
@@ -126,7 +128,10 @@
                         if (response.actioncode == 0) userList.querySelector(`[data-uid="${user.uid}"]`)?.remove();
                         else if (response.actioncode == 1) addUcardToRole(roleId, user, userList, serverInfo);
                         else if (response.actioncode == 2) {
-
+                            const {roleId, adding} = response.data;
+                            alert(`${(adding) ? 'Added role to' : 'Removed role from'} channel!`);
+                            document.getElementById(`changeRoleInChannel${roleId}`)
+                                    .replaceWith(createRoleChangeBtn({id: roleId, isInChannel: adding}));
                         }
                     }
                     break;
@@ -143,14 +148,19 @@
                 bar.style.display = 'block';
 
                 // try reconnecting
+                var inter = 1000;
                 const timer = setInterval(() => {
                     connectSocket();
 
                     ws.addEventListener('open', () => {
                         clearInterval(timer);
                         window.location.reload();
                     });
-                }, 1000);
+
+                    if (inter < 5000) inter += 1000;
+                    const el = document.getElementById('loadingstatus');
+                    el.innerText = `Retrying...`;
+                }, inter);
             });
         }
 
@@ -176,6 +186,8 @@
         <div id="loadingdiv">
             <div id="loader"></div>
             <h1>L O A D I N G . . .</h1>
+
+            <h2 style="margin: auto; color: white !important; text-align: center; display: block;" id="loadingstatus"></h2>
         </div>
         <div id="maincontent" style="display: none">
             <div id="reconnectingbar" class="reconnectingbar">R E C O N N E C T I N G . . .</div>

diff --git a/server/guilds/chatServer.js b/server/guilds/chatServer.js
@@ -358,19 +358,21 @@ async function getChannel(ws, connectionMap, mongoconnection, data) {
 }
 
 
-async function changeChannelRoles(dbo, role) {
+async function changeChannelRoles(dbo, role, ws) {
 	// get role
 	const rDoc = (await dbo.findOne({_id: 'channelConfigs'})).permissions.roles;
 	if (!role.isAdding) {
-		if (!rDoc.permissions.roles.includes(role.roleToChange)) return;
+		if (!rDoc.includes(role.roleToChange)) return;
 		dbo.updateOne({ _id: 'channelConfigs' }, { $pull: { "permissions.roles": role.roleToChange } });
 		console.log(`removed ${role.roleToChange}`);
 	}
 	else {
-		if (rDoc.permissions.roles.includes(role.roleToChange)) return;
+		if (rDoc.includes(role.roleToChange)) return;
 		dbo.updateOne({ _id: 'channelConfigs' }, { $push: { "permissions.roles": role.roleToChange } });
 		console.log(`added ${role.roleToChange}`);
 	}
+
+	ws.send(JSON.stringify({code: 6, op: 13, actioncode: 2, data: {roleId: role.roleToChange, adding: role.isAdding}}));
 }
 
 
@@ -405,7 +407,7 @@ async function updateChannel(ws, connectionMap, mongoconnection, data, op) {
 				// check roles
 				const adminRole = uDoc.roles.find(r => r.name == 'admin');
 				if (!adminRole || (adminRole.id == data.roleToChange)) return ws.send(JSON.stringify({type: 1, code: 409}));
-				await changeChannelRoles(dbo, data);
+				await changeChannelRoles(dbo, data, ws);
 			}
 			else {
 				await dbo.updateOne({ _id: "channelConfigs" }, { $set: { name: data.newName } });
@@ -484,6 +486,6 @@ export async function handleChatServer(ws, connectionMap, mongoconnection, data)
 			handleRoleReq(ws, mongoconnection, connectionMap, data);
 			break;
 
-		default: console.log(data);
+		default: console.log("HANDLECHATSERVER: UNKNOWN DATA -->", data);
 	}
 }
diff --git a/server/guilds/handleRoles.js b/server/guilds/handleRoles.js
@@ -61,7 +61,6 @@ async function editRole(mongoconnection, ws, connectionMap, data) {
 
 export const uidsToUsers = (uids, client) => {
     return Promise.all(uids.map(async (uid) => {
-        console.log(uid);
         const doc = await client.db(uid).collection('configs').findOne({_id: 'myprofile'});
         doc['uid'] = uid;
         return doc;