zanex/ITL-Huge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now that we have a working chat system, we just need to build a layout, which works dynamically and looks decent along with not having the page always reload when sending a message.

Browse Source
This commit is contained in:
Elias F.
2025-12-15 13:29:11 +01:00
parent aa9b3359b1
commit edcc1b5403
4 changed files with 229 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
application/core/Application.php
View File

@@ -19,10 +19,13 @@ class Application
private $action_name; private $action_name;
/** /**
* Start the application, analyze URL elements, call according controller/method or relocate to fallback location * Construct
*/ */
public function __construct() public function __construct()
{ {
// Reset header render flag
View::resetHeaderRendered();
// create array with URL parts in $url // create array with URL parts in $url
$this->splitUrl(); $this->splitUrl();

39
application/core/View.php
View File

@@ -16,6 +16,11 @@ class View
public $user_avatar_file; public $user_avatar_file;
public $avatar_file_path; public $avatar_file_path;
public $user_account_type; public $user_account_type;
/**
* Static property to track if header has been rendered
*/
private static $header_rendered = false;
/** /**
* simply includes (=shows) the view. this is done from the controller. In the controller, you usually say * simply includes (=shows) the view. this is done from the controller. In the controller, you usually say
@@ -32,9 +37,15 @@ class View
} }
} }
require Config::get('PATH_VIEW') . '_templates/header.php'; if (!self::$header_rendered) {
require Config::get('PATH_VIEW') . $filename . '.php'; self::$header_rendered = true;
require Config::get('PATH_VIEW') . '_templates/footer.php';
require Config::get('PATH_VIEW') . '_templates/header.php';
require Config::get('PATH_VIEW') . $filename . '.php';
require Config::get('PATH_VIEW') . '_templates/footer.php';
} else {
require Config::get('PATH_VIEW') . $filename . '.php';
}
} }
/** /**
@@ -51,13 +62,17 @@ class View
return false; return false;
} }
if ($data) { if (!self::$header_rendered) {
foreach ($data as $key => $value) { self::$header_rendered = true;
$this->{$key} = $value;
if ($data) {
foreach ($data as $key => $value) {
$this->{$key} = $value;
}
} }
}
require Config::get('PATH_VIEW') . '_templates/header.php'; require Config::get('PATH_VIEW') . '_templates/header.php';
}
foreach($filenames as $filename) { foreach($filenames as $filename) {
require Config::get('PATH_VIEW') . $filename . '.php'; require Config::get('PATH_VIEW') . $filename . '.php';
@@ -91,6 +106,14 @@ class View
header("Content-Type: application/json"); header("Content-Type: application/json");
echo json_encode($data); echo json_encode($data);
} }
/**
* Reset header render flag at start of request
*/
public static function resetHeaderRendered()
{
self::$header_rendered = false;
}
/** /**
* renders the feedback messages into the view * renders the feedback messages into the view

142
application/view/message/conversation.php
View File

@@ -1,117 +1,115 @@
<?php $this->render('_templates/header'); ?>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<!-- Back to Messenger --> <!-- Back to Messenger -->
<div class="col-md-12"> <div class="col-md-12">
<a href="<?= Config::get('URL') ?>message" class="btn btn-default"> <a href="<?= Config::get('URL') ?>message" class="btn btn-default">
<span class="glyphicon glyphicon-arrow-left"></span> Back to Messenger <span class="glyphicon glyphicon-arrow-left"></span> Back to Messenger
</a> </a>
<hr> <hr>
</div>
</div> </div>
</div>
<div class="row">
<!-- Chat Area --> <div class="row">
<div class="col-md-12"> <!-- Chat Area -->
<div class="panel panel-default"> <div class="col-md-12">
<div class="panel-heading"> <div class="panel panel-default">
Conversation with <?= htmlspecialchars($this->other_user->user_name) ?> <div class="panel-heading">
</div> Conversation with <?= htmlspecialchars($this->other_user->user_name) ?>
<div class="panel-body message-container"> </div>
<?php if (empty($this->messages)): ?> <div class="panel-body message-container">
<div class="text-center"> <?php if (empty($this->messages)): ?>
<em>No messages yet. Start a conversation!</em> <div class="text-center">
</div> <em>No messages yet. Start a conversation!</em>
<?php else: ?>
<?php foreach ($this->messages as $msg): ?>
<div class="message <?= $msg->message_type ?>">
<div class="message-bubble">
<?= htmlspecialchars($msg->message) ?>
</div>
<div class="message-time">
<?= date('M j, Y H:i', strtotime($msg->created_at)) ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Reply Form -->
<div class="panel-footer">
<form action="<?= Config::get('URL') ?>message/send" method="post" id="reply-form">
<input type="hidden" name="receiver_id" value="<?= $this->other_user->user_id ?>">
<div class="input-group">
<input type="text" name="message" class="form-control" placeholder="Type your message..." required>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div> </div>
<?php else: ?>
<?php foreach ($this->messages as $msg): ?>
<div class="message <?= $msg->message_type ?>">
<div class="message-bubble">
<?= htmlspecialchars($msg->message) ?>
</div>
<div class="message-time">
<?= date('M j, Y H:i', strtotime($msg->created_at)) ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div> </div>
<!-- Reply Form -->
<div class="panel-footer">
<form action="<?= Config::get('URL') ?>message/send" method="post" id="reply-form">
<input type="hidden" name="receiver_id" value="<?= $this->other_user->user_id ?>">
<div class="input-group">
<input type="text" name="message" class="form-control" placeholder="Type your message..." required>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
</div> </div>
</div>
</div> </div>
<style> <style>
.message-container { .message-container {
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 15px; padding: 15px;
} }
.message { .message {
margin-bottom: 15px; margin-bottom: 15px;
clear: both; clear: both;
} }
.message.sent { .message.sent {
text-align: right; text-align: right;
} }
.message.received { .message.received {
text-align: left; text-align: left;
} }
.message-bubble { .message-bubble {
display: inline-block; display: inline-block;
max-width: 70%; max-width: 70%;
padding: 10px 15px; padding: 10px 15px;
border-radius: 18px; border-radius: 18px;
position: relative; position: relative;
word-wrap: break-word; word-wrap: break-word;
} }
.message.sent .message-bubble { .message.sent .message-bubble {
background-color: #007bff; background-color: #007bff;
color: white; color: white;
} }
.message.received .message-bubble { .message.received .message-bubble {
background-color: #e5e5ea; background-color: #e5e5ea;
color: black; color: black;
} }
.message-time { .message-time {
font-size: 0.8em; font-size: 0.8em;
color: #666; color: #666;
margin-top: 5px; margin-top: 5px;
} }
/* Scroll to bottom of messages on load */ /* Scroll to bottom of messages on load */
.message-container { .message-container {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
</style> </style>
<script> <script>
// Scroll to bottom of messages // Scroll to bottom of messages
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.message-container'); const container = document.querySelector('.message-container');
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
}); });
</script> </script>
<?php $this->render('_templates/footer'); ?> <?php $this->render('_templates/footer'); ?>

250
application/view/message/index.php
View File

@@ -1,177 +1,175 @@
<?php $this->render('_templates/header'); ?>
<div class="container"> <div class="container">
<h1>Messenger</h1> <h1>Messenger</h1>
<div class="row"> <div class="row">
<!-- Conversations List --> <!-- Conversations List -->
<div class="col-md-4"> <div class="col-md-4">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
Conversations Conversations
<?php if ($this->unread_count > 0): ?> <?php if ($this->unread_count > 0): ?>
<span class="badge pull-right"><?= $this->unread_count ?></span> <span class="badge pull-right"><?= $this->unread_count ?></span>
<?php endif; ?>
</div>
<div class="panel-body" style="padding: 0; max-height: 500px; overflow-y: auto;">
<div class="list-group">
<?php if (empty($this->conversations)): ?>
<div class="list-group-item">
<em>No conversations yet</em>
</div>
<?php else: ?>
<?php foreach ($this->conversations as $conv): ?>
<a href="<?= Config::get('URL') ?>message/conversation/<?= $conv->other_user_id ?>"
class="list-group-item <?= $conv->unread_count > 0 ? 'active' : '' ?>">
<h5 class="list-group-item-heading">
<?= htmlspecialchars($conv->user_name) ?>
<?php if ($conv->unread_count > 0): ?>
<span class="badge"><?= $conv->unread_count ?></span>
<?php endif; ?> <?php endif; ?>
</div> </h5>
<div class="panel-body" style="padding: 0; max-height: 500px; overflow-y: auto;"> <p class="list-group-item-text">
<div class="list-group"> <small><?= date('M j, Y', strtotime($conv->last_message_time)) ?></small>
<?php if (empty($this->conversations)): ?> </p>
<div class="list-group-item"> </a>
<em>No conversations yet</em> <?php endforeach; ?>
</div> <?php endif; ?>
<?php else: ?> </div>
<?php foreach ($this->conversations as $conv): ?>
<a href="<?= Config::get('URL') ?>message/conversation/<?= $conv->other_user_id ?>"
class="list-group-item <?= $conv->unread_count > 0 ? 'active' : '' ?>">
<h5 class="list-group-item-heading">
<?= htmlspecialchars($conv->user_name) ?>
<?php if ($conv->unread_count > 0): ?>
<span class="badge"><?= $conv->unread_count ?></span>
<?php endif; ?>
</h5>
<p class="list-group-item-text">
<small><?= date('M j, Y', strtotime($conv->last_message_time)) ?></small>
</p>
</a>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
<!-- New Message -->
<div class="panel panel-default">
<div class="panel-heading">New Message</div>
<div class="panel-body">
<form action="<?= Config::get('URL') ?>message/send" method="post">
<div class="form-group">
<label for="receiver_id">To:</label>
<select name="receiver_id" id="receiver_id" class="form-control" required>
<option value="">Select user</option>
<?php foreach ($this->all_users as $user): ?>
<option value="<?= $user->user_id ?>"><?= htmlspecialchars($user->user_name) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" class="form-control" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
<!-- Send to Group -->
<div class="panel panel-default">
<div class="panel-heading">Send to Group</div>
<div class="panel-body">
<form action="<?= Config::get('URL') ?>message/sendgroup" method="post">
<div class="form-group">
<label for="group_type">Group:</label>
<select name="group_type" id="group_type" class="form-control" required>
<option value="">Select group</option>
<option value="all_users">All Users</option>
<option value="admins">Administrators</option>
<option value="moderators">Moderators</option>
</select>
</div>
<div class="form-group">
<label for="group_subject">Subject:</label>
<input type="text" name="subject" id="group_subject" class="form-control" required>
</div>
<div class="form-group">
<label for="group_message">Message:</label>
<textarea name="message" id="group_message" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-warning">Send to Group</button>
</form>
</div>
</div>
</div> </div>
</div>
<!-- Chat Area -->
<div class="col-md-8"> <!-- New Message -->
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">New Message</div>
Chat Area <div class="panel-body">
<span class="pull-right">Select a conversation to start messaging</span> <form action="<?= Config::get('URL') ?>message/send" method="post">
</div> <div class="form-group">
<div class="panel-body" style="height: 500px; background-color: #f5f5f5; text-align: center; padding-top: 200px;"> <label for="receiver_id">To:</label>
<em>Select a conversation from the left to view messages</em> <select name="receiver_id" id="receiver_id" class="form-control" required>
</div> <option value="">Select user</option>
<?php foreach ($this->all_users as $user): ?>
<option value="<?= $user->user_id ?>"><?= htmlspecialchars($user->user_name) ?></option>
<?php endforeach; ?>
</select>
</div> </div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" class="form-control" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div> </div>
</div>
<!-- Send to Group -->
<div class="panel panel-default">
<div class="panel-heading">Send to Group</div>
<div class="panel-body">
<form action="<?= Config::get('URL') ?>message/sendgroup" method="post">
<div class="form-group">
<label for="group_type">Group:</label>
<select name="group_type" id="group_type" class="form-control" required>
<option value="">Select group</option>
<option value="all_users">All Users</option>
<option value="admins">Administrators</option>
<option value="moderators">Moderators</option>
</select>
</div>
<div class="form-group">
<label for="group_subject">Subject:</label>
<input type="text" name="subject" id="group_subject" class="form-control" required>
</div>
<div class="form-group">
<label for="group_message">Message:</label>
<textarea name="message" id="group_message" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-warning">Send to Group</button>
</form>
</div>
</div>
</div> </div>
<!-- Chat Area -->
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Chat Area
<span class="pull-right">Select a conversation to start messaging</span>
</div>
<div class="panel-body" style="height: 500px; background-color: #f5f5f5; text-align: center; padding-top: 200px;">
<em>Select a conversation from the left to view messages</em>
</div>
</div>
</div>
</div>
</div> </div>
<style> <style>
.message-container { .message-container {
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 15px; padding: 15px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.message { .message {
margin-bottom: 10px; margin-bottom: 10px;
clear: both; clear: both;
} }
.message.sent { .message.sent {
text-align: right; text-align: right;
} }
.message.received { .message.received {
text-align: left; text-align: left;
} }
.message-bubble { .message-bubble {
display: inline-block; display: inline-block;
max-width: 70%; max-width: 70%;
padding: 10px 15px; padding: 10px 15px;
border-radius: 18px; border-radius: 18px;
position: relative; position: relative;
} }
.message.sent .message-bubble { .message.sent .message-bubble {
background-color: #007bff; background-color: #007bff;
color: white; color: white;
float: right; float: right;
} }
.message.received .message-bubble { .message.received .message-bubble {
background-color: #e5e5ea; background-color: #e5e5ea;
color: black; color: black;
float: left; float: left;
} }
.message-time { .message-time {
font-size: 0.8em; font-size: 0.8em;
color: #666; color: #666;
margin-top: 5px; margin-top: 5px;
clear: both; clear: both;
} }
.badge { .badge {
background-color: #d9534f; background-color: #d9534f;
} }
.list-group-item.active { .list-group-item.active {
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bce8f1; border-color: #bce8f1;
color: #31708f; color: #31708f;
} }
.list-group-item.active .badge { .list-group-item.active .badge {
background-color: #d9534f; background-color: #d9534f;
} }
</style> </style>
<?php $this->render('_templates/footer'); ?> <?php $this->render('_templates/footer'); ?>