Skip to content

Wip chat UI mob #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abhay-keyvalue wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Wip chat UI mob #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a893155
feat: Implement chat ui
abhay-keyvalue Sep 26, 2023
fd23ce9
fix: fix chat scroll issue
abhay-keyvalue Sep 26, 2023
86b4bf6
fix: profile and send icons added
abhay-keyvalue Sep 26, 2023
8eae635
fix: ui changes
abhay-keyvalue Sep 26, 2023
6d737ce
feat: mob ui
abhay-keyvalue Sep 28, 2023
9b64962
Merge branch 'main' into WIP-chat-ui-mob
abhay-keyvalue Sep 28, 2023
24d7053
button text fix
arjun-keyvalue Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/assets/avathar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/send.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 79 additions & 34 deletions src/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,43 +21,88 @@
$messages_query = new MessageQuery();
$messages_query = $messages_query->orderByCreatedAt();
$messages = $messages_query->find();
$arrayMessages = iterator_to_array($messages);
$reversedMessages = array_reverse($arrayMessages);

?>

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<nav>
<h1>Omegul</h1>
<div class="nav-items">
<a href="/">Home</a>
<a href="profile.php">Profile</a>
</div>
</nav>

<!-- Messages -->
<div class="messages">
<?php foreach ($messages as $message): ?>
<ul class="message" msg-owns="<?= ($user->getId() == $message->getUserId()) ? 'true' : 'false' ?>">
<li class="message-author">
<a href="user.php?id=<?= $message->getUserId() ?>">
<?= $message->getUser()->getUsername() ?>
</a>
</li>
<li class="message-created-at">
<?= $message->getCreatedAt()->format('d.m.y H:i:s') ?>
</li>
<li class="message-content">
<?= $message->getContent() ?>
</li>
</ul>
<?php endforeach ?>
</div>

<!-- Form to send message -->
<form class="send-message" method="post" action="send_message.php">
<textarea name="message" class="message" placeholder="type something..."></textarea>
<input type="hidden" name="user_id" class="user_id" value="<?= $user->getId() ?>">
<input type="submit" name="send_message" class="send_message" value="Send">
</form>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omegul</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inclusive+Sans"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="chat-nav">
<span class="title">Omegul</span>
<div class="profile-button">
<img class="profile-icon" src="./assets/avathar.svg" alt="send">
<a href="profile.php"
><?= $user->getUsername() ?></a
>
</div>
</div>
<div class="chat-container">
<div class="chat-messages-container">
<div class="chat-messages">
<?php foreach ($reversedMessages as $index =>
$message): ?>
<div
class="<?= ($user->getId() != $message->getUserId()) ? 'message-left' : 'message-right'?>"
>
<div
class="message <?= ($user->getId() != $message->getUserId()) ? 'left-bubble' : 'right-bubble'?>"
>
<div class="message-author">
<a href="user.php?id=<?= $message->getUserId() ?>">
<?= $message->getUser()->getUsername() ?>
</a>
</div>
<div class="message-created-at">
<?php
$originalTime = $message->getCreatedAt();
$utcTime = $originalTime->setTimezone(new DateTimeZone('UTC'));
echo $utcTime->format('H:i');
?>
</div>
<div class="message-content"><?= $message->getContent() ?></div>
</div>
</div>

<?php endforeach ?>
</div>
</div>
<form method="post" action="send_message.php">
<div class="chat-input">
<input
name="message"
type="text"
class="message-input"
placeholder="Type your message..."
/>
<input
type="hidden"
name="user_id"
class="user_id"
value="<?= $user->getId() ?>"
/>
<button type="submit" name="send_message" class="send-button">
<img class="send-icon" src="./assets/send.svg" alt="send">
</button>
</div>
</form>
</div>
</div>
</body>
</html>
58 changes: 31 additions & 27 deletions src/profile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,22 @@

<!DOCTYPE HTML>
<html>

<nav>
<h1>Omegul</h1>
<div class="nav-section">
<a href="/">Home</a>
<a href="profile.php">Profile</a>
</div>
</nav>

<div class="user">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omegul</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inclusive+Sans" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container profile-container">
<span class="title"><a href="/">Omegul</a></span>
<div class="user-card">
<p class="user-username">
Username:
<?= $user->getUsername() ?>
</p>
<div class="user-card-content">
<p class="user-created-at">
Joined on:
<?= $user->getCreatedAt()->format('d.m.y H:i:s') ?>
Expand All @@ -51,37 +53,39 @@
<?= $message_count ?>
</p>
<?php endif ?>

<hr/>
</div>
<div class="secrets">
<h3>Secrets</h3>
<h4>You can upload your secrets securely. Only txt, pdf, docx, jpg & png files are supported.</h4>
<div class="sub-title">Secrets</div>
<div class="para">You can upload your secrets securely. Only txt, pdf, docx, jpg & png files are supported.</div>
<form class="secret-upload" method="post" enctype="multipart/form-data" action="upload_secret.php">
<label for="file">Choose a file:</label>
<div class="upload-buttons" >
<input type="file" name="secret_file" class="secret_file">
<input type="hidden" name="user_id" class="user_id" value="<?= $user->getId() ?>">
<input type="submit" name="upload_secret" class="upload_secret" value="Upload">
</form>
</div>

</form>
<hr/>
<?php if (count($secrets) > 0): ?>
<h4>Your secrets</h4>
<ul class="secrets-all">
<div class="sub-title">Your secrets</div>
<?php foreach ($secrets as $secret): ?>
<li class="secrets-secret">
<a href="uploads/<?= $secret->getId() . '.' . $secret->getFileType() ?>">
<?= $secret->getFileName() ?>
</a>
<div class="secrets-secret">
<div class="secrets-file-name">
<a href="uploads/<?= $secret->getId() . '.' . $secret->getFileType() ?>">
<?= $secret->getFileName() ?>
</a>
</div>
<form class="secret-delete" method="post" action="delete_secret.php">
<input type="hidden" name="user_id" class="user_id" value="<?= $user->getId() ?>">
<input type="hidden" name="secret_id" class="secret_id" value="<?= $secret->getId() ?>">
<input type="submit" name="delete_secret" class="delete_secret" value="Delete">
<button name="delete_secret" class="delete_secret">Delete</button>
</form>
</li>
</div>
<?php endforeach ?>
</ul>
<?php endif ?>
</div>
</div>

</div>
<script>
const secretUploadForm = document.querySelector('.secret-upload');

Expand Down
Loading