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;
/**
* Start the application, analyze URL elements, call according controller/method or relocate to fallback location
* Construct
*/
public function __construct()
{
// Reset header render flag
View::resetHeaderRendered();
// create array with URL parts in $url
$this->splitUrl();

41
application/core/View.php
View File

@@ -17,6 +17,11 @@ class View
public $avatar_file_path;
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
* $this->view->render('help/index'); to show (in this example) the view index.php in the folder help.
@@ -32,9 +37,15 @@ class View
}
}
require Config::get('PATH_VIEW') . '_templates/header.php';
require Config::get('PATH_VIEW') . $filename . '.php';
require Config::get('PATH_VIEW') . '_templates/footer.php';
if (!self::$header_rendered) {
self::$header_rendered = true;
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;
}
if ($data) {
foreach ($data as $key => $value) {
$this->{$key} = $value;
}
}
if (!self::$header_rendered) {
self::$header_rendered = true;
require Config::get('PATH_VIEW') . '_templates/header.php';
if ($data) {
foreach ($data as $key => $value) {
$this->{$key} = $value;
}
}
require Config::get('PATH_VIEW') . '_templates/header.php';
}
foreach($filenames as $filename) {
require Config::get('PATH_VIEW') . $filename . '.php';
@@ -92,6 +107,14 @@ class View
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
*/

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

@@ -1,117 +1,115 @@
<?php $this->render('_templates/header'); ?>
<div class="container">
<div class="row">
<!-- Back to Messenger -->
<div class="col-md-12">
<a href="<?= Config::get('URL') ?>message" class="btn btn-default">
<span class="glyphicon glyphicon-arrow-left"></span> Back to Messenger
</a>
<hr>
</div>
<div class="row">
<!-- Back to Messenger -->
<div class="col-md-12">
<a href="<?= Config::get('URL') ?>message" class="btn btn-default">
<span class="glyphicon glyphicon-arrow-left"></span> Back to Messenger
</a>
<hr>
</div>
</div>
<div class="row">
<!-- Chat Area -->
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Conversation with <?= htmlspecialchars($this->other_user->user_name) ?>
</div>
<div class="panel-body message-container">
<?php if (empty($this->messages)): ?>
<div class="text-center">
<em>No messages yet. Start a conversation!</em>
</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>
<!-- 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 class="row">
<!-- Chat Area -->
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Conversation with <?= htmlspecialchars($this->other_user->user_name) ?>
</div>
<div class="panel-body message-container">
<?php if (empty($this->messages)): ?>
<div class="text-center">
<em>No messages yet. Start a conversation!</em>
</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>
<!-- 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>
<style>
.message-container {
.message-container {
height: 400px;
overflow-y: auto;
background-color: #f5f5f5;
padding: 15px;
}
}
.message {
.message {
margin-bottom: 15px;
clear: both;
}
}
.message.sent {
.message.sent {
text-align: right;
}
}
.message.received {
.message.received {
text-align: left;
}
}
.message-bubble {
.message-bubble {
display: inline-block;
max-width: 70%;
padding: 10px 15px;
border-radius: 18px;
position: relative;
word-wrap: break-word;
}
}
.message.sent .message-bubble {
.message.sent .message-bubble {
background-color: #007bff;
color: white;
}
}
.message.received .message-bubble {
.message.received .message-bubble {
background-color: #e5e5ea;
color: black;
}
}
.message-time {
.message-time {
font-size: 0.8em;
color: #666;
margin-top: 5px;
}
}
/* Scroll to bottom of messages on load */
.message-container {
/* Scroll to bottom of messages on load */
.message-container {
scroll-behavior: smooth;
}
}
</style>
<script>
// Scroll to bottom of messages
document.addEventListener('DOMContentLoaded', function() {
// Scroll to bottom of messages
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.message-container');
container.scrollTop = container.scrollHeight;
});
});
</script>
<?php $this->render('_templates/footer'); ?>

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

@@ -1,177 +1,175 @@
<?php $this->render('_templates/header'); ?>
<div class="container">
<h1>Messenger</h1>
<h1>Messenger</h1>
<div class="row">
<!-- Conversations List -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Conversations
<?php if ($this->unread_count > 0): ?>
<span class="badge pull-right"><?= $this->unread_count ?></span>
<div class="row">
<!-- Conversations List -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Conversations
<?php if ($this->unread_count > 0): ?>
<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; ?>
</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; ?>
</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>
</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>
<!-- 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>
<!-- 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>
<!-- 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>
<style>
.message-container {
.message-container {
height: 400px;
overflow-y: auto;
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin-bottom: 15px;
}
}
.message {
.message {
margin-bottom: 10px;
clear: both;
}
}
.message.sent {
.message.sent {
text-align: right;
}
}
.message.received {
.message.received {
text-align: left;
}
}
.message-bubble {
.message-bubble {
display: inline-block;
max-width: 70%;
padding: 10px 15px;
border-radius: 18px;
position: relative;
}
}
.message.sent .message-bubble {
.message.sent .message-bubble {
background-color: #007bff;
color: white;
float: right;
}
}
.message.received .message-bubble {
.message.received .message-bubble {
background-color: #e5e5ea;
color: black;
float: left;
}
}
.message-time {
.message-time {
font-size: 0.8em;
color: #666;
margin-top: 5px;
clear: both;
}
}
.badge {
.badge {
background-color: #d9534f;
}
}
.list-group-item.active {
.list-group-item.active {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
}
.list-group-item.active .badge {
.list-group-item.active .badge {
background-color: #d9534f;
}
}
</style>
<?php $this->render('_templates/footer'); ?>