speakmore-2.0/templates/dashboard.html
Olai bc9fcda6aa Updated online detection and fixed bugs
Updated online detection and fixed bugs
2024-06-25 23:27:34 +02:00

94 lines
4.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
{% include 'head.html' %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</head>
<body class="ms-font">
<div style="height: 100%; width: 100%;">
{% include 'topbar.html' %}
<div class="flex flex-row w-full height-with-account bg-[#f5f5f5] dark:!bg-[#292929]">
{% include 'sidebar.html' %}
<div class="flex flex-1 p-5 w-full justify-center overflow-y-auto flex-row bg-white dark:!bg-[#242424] text-black dark:!text-white items-center border-solid border-l-1 dark:!border-[#595959] border-[#cad6d8]">
<div class="text-center font-bold absolute self-center top-16">Welcome to SpeakMore!</div>
<div class="text-center absolute self-center top-20">Fuck around and find out...</div>
<div id="friend-requests-section" class="dark:!bg-[#1f1f1f] shadow-lg bg-[#f1f1f1] w-fit flex flex-col rounded-md items-center justify-center mr-5">
<h4 class="text-black dark:!text-white relative top-2">Friend Request:</h4>
<ul id="friend-requests" class="text-neutral-700 dark:!text-neutral-300 relative top-2 flex flex-col justify-center items-center">
{% for request in friend_requests %}
{{ request.sender.username }}
<li class="mb-5 flex flex-row">
<button class="accept-friend-request ms-button" data-request-id="{{ request.id }}">Accept</button>
<button class="reject-friend-request ms-button" data-request-id="{{ request.id }}">Reject</button>
</li>
{% endfor %}
</ul>
</div>
<div class="dark:!bg-[#1f1f1f] shadow-lg bg-[#f1f1f1] w-fit flex flex-col rounded-md items-center" >
<h4 class="text-black dark:!text-white relative top-2">Add Friend</h4>
<form class="w-fit flex flex-col items-center" id="add-friend-form" method="POST">
<input class="dark:!bg-[#1f1f1f] bg-[#f1f1f1] pt-5 rounded-t-md w-3/4" type="text" name="friend_username" placeholder="Friend's Username" required autocomplete="off">
<button class="ms-button" type="submit">Add Friend</button>
<div id="add-friend-message" style="color: green;"></div>
</form>
</div>
{% if is_admin %}
<div class="dark:!bg-[#1f1f1f] shadow-lg bg-[#f1f1f1] w-fit flex ml-10 flex-col rounded-md items-center">
<h4 class="text-black dark:!text-white relative top-2">Create Group</h4>
<form id="create-group-form" method="POST" class="w-fit flex flex-col items-center justify-center">
<input class="dark:!bg-[#1f1f1f] bg-[#f1f1f1] pt-5 rounded-t-md w-3/4" type="text" name="group_name" placeholder="Group Name" required autocomplete="off">
<input class="dark:!bg-[#1f1f1f] bg-[#f1f1f1] pt-5 rounded-t-md w-full min-w-[280px]" type="text" name="members" placeholder="Member Usernames (comma separated)" required autocomplete="off">
<button class="ms-button" type="submit">Create Group</button>
<div id="create-group-message" style="color: green;"></div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const createGroupForm = document.getElementById('create-group-form');
if (createGroupForm) {
createGroupForm.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(createGroupForm);
const members = formData.get('members').split(',').map(member => member.trim());
formData.set('members', members.join(','));
fetch('/create_group', {
method: 'POST',
body: formData
}).then(response => response.json())
.then(data => {
if (data.status === 'Group created') {
alert('Group created successfully');
location.reload();
} else {
alert('Error creating group: ' + data.message);
}
})
.catch(error => {
alert('Error creating group: ' + error.message);
});
});
}
});
</script>
{% endif %}
</div>
</div>
</div>
</body>
</html>