Adds settings for the owner and a defined owner!

YummyOreo · Mar 31, 2021 · ee185c2 · ee185c2
1 parent c178847
commit ee185c2
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ This is where you can talk about code questions, the app, or anything. You can g
 	* Levels of perms to users.
 - [x] Room Kicks
 	* Kick a user from the room.
-- [ ] Owner Crown
+- [x] Owner/Owner Crown
 	* Adds a crown to the owner in chat, and in the member list.
 - [ ] API for the chat
 	* A api for devs that want to make bots.

diff --git a/public/script.js b/public/script.js
@@ -6,6 +6,7 @@ const roomContaner = document.getElementById('room-contaner');
 const userContaner = document.getElementById('user-contaner');
 const messageForm = document.getElementById('send-message-form')
 const messageInput = document.getElementById('message-input')
+const settings = document.getElementById('settings')
 //start
 if (messageForm != null) {
 	let name = prompt('What is your name?')
@@ -37,6 +38,11 @@ if (messageForm != null) {
 		socket.emit('leave')
 	});
 
+	settings.addEventListener('click', e => {
+		console.log('clicked')
+		window.location.href = `/${roomName}` +'/settings'
+	});
+
 }
 
 socket.on('user-changed-name', () => {

diff --git a/public/settings.js b/public/settings.js
@@ -0,0 +1,12 @@
+const socket = io('http://localhost:3000')
+const settingsForm = document.getElementById('settings');
+const back = document.getElementById('back')
+
+back.addEventListener('click', () => {
+	window.location.href = `/${roomName}/owner`;
+});
+
+settingsForm.addEventListener('submit', e => {
+	e.preventDefault()
+	socket.emit('privacy-change', roomName, document.getElementById('private').value)
+})
diff --git a/server.js b/server.js
@@ -20,7 +20,7 @@ app.post('/room', (req, res) => {
 	}
 	console.log(req.body.private + '/room')
 	rooms[req.body.room] = { users: {}, public: req.body.private }
-	res.redirect(req.body.room)
+	res.redirect(req.body.room + '/owner')
 	io.emit('room-created', req.body.room)
 })
 
@@ -32,6 +32,22 @@ app.get('/:room', (req, res) => {
 	res.render('room', { roomName: req.params.room })
 })
 
+app.get('/:room/settings', (req, res) => {
+	if (rooms[req.params.room] == null) {
+		return res.render('error')
+	}
+	console.log(req.params.room)
+	res.render('settings', { roomName: req.params.room })
+})
+
+app.get('/:room/owner', (req, res) => {
+	if (rooms[req.params.room] == null) {
+		return res.render('error')
+	}
+	console.log(req.params.room)
+	res.render('owner-room', { roomName: req.params.room })
+})
+
 server.listen(3000)
 
 io.on('connection', socket => {
@@ -97,6 +113,9 @@ io.on('connection', socket => {
 			socket.emit("user-list", rooms[room].users[user])
 		}
 	})
+	socket.on('privacy-change', (room, value) => {
+		rooms[room].public = value;
+	})
 })
 
 function getUserRooms(soket) {

diff --git a/views/owner-room.ejs b/views/owner-room.ejs
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Chat App</title>
+	<script>
+		const roomName = "<%= roomName %>"
+	</script>
+	<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
+	<script defer src="../script.js"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+</head>
+
+<body>
+	<nav>
+		<div class='nav-wrapper'>
+			<a class="waves-effect waves-light btn" id='back'>Back To Home</a>
+			<a class="waves-effect waves-light btn" id='name'>Change Your Name</a>
+			<a class="waves-effect waves-light btn" id='settings'>Settings</a>
+			<a class="brand-logo center" id="title"><%= roomName %></a>
+		</div>
+	</nav>
+	<br>
+	<div id='user-contaner'>
+		<p>Members In <%= roomName %></p>
+	</div>
+	<br>
+	<div id='message-contaner'>
+		<p>Start Of Chat</p>
+	</div>
+		<form id='send-message-form' align="center">
+
+			<textarea placeholder="Message" rows="4" cols="50" form="send-message-form" id="message-input" required></textarea>
+			<button type='submit' id='send-message' class="waves-effect waves-light btn">Send</button>
+		</form>
+</body>
+
+</html>
diff --git a/views/room.ejs b/views/room.ejs
@@ -20,7 +20,6 @@
 			<a class="waves-effect waves-light btn" id='back'>Back To Home</a>
 			<a class="waves-effect waves-light btn" id='name'>Change Your Name</a>
 			<a class="brand-logo center" id="title"><%= roomName %></a>
-
 		</div>
 	</nav>
 	<br>

diff --git a/views/settings.ejs b/views/settings.ejs
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Chat App</title>
+	<script>
+		const roomName = "<%= roomName %>"
+	</script>
+	<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
+	<script defer src="../settings.js"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+</head>
+
+<body>
+	<nav>
+		<div class='nav-wrapper'>
+			<a class="waves-effect waves-light btn" id='back'>Back To <%= roomName %></a>
+			<a class="brand-logo center" id="title"><%= roomName %> Settings</a>
+		</div>
+	</nav>
+	<br>
+	<div align="center">
+	<form id='settings'>
+		<div class="switch">
+				<label>
+				  Public
+				  <input type="checkbox" id='private'>
+				  <span class="lever"></span>
+				  Private
+				</label>
+			  </div>
+			  <br>
+			<button type="submit" class="waves-effect waves-light btn">Save</button>
+	</form>
+	</div>
+</body>
+
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ @@
     			<a class="waves-effect waves-light btn" id='back'>Back To Home</a>
     			<a class="waves-effect waves-light btn" id='name'>Change Your Name</a>
     			<a class="brand-logo center" id="title"><%= roomName %></a>
     		</div>
     	</nav>
     	<br>
@@ Expand Down @@