Permalink
Browse files
Create UI for receiving and sending messages and create API routes
- Loading branch information
Showing
with
282 additions
and 4 deletions.
- +1 −0 app/database/init.php
- +36 −1 app/model/SecureMessage.php
- +39 −0 public/api.php
- +9 −1 public/css/app.css
- +3 −0 public/css/menu-button.css
- +15 −0 public/css/messages.css
- +57 −1 public/js/app.js
- +105 −0 public/messages.php
- +1 −0 public/template/footer.html
- +16 −1 public/template/user_menu_button.php
@@ -0,0 +1,39 @@ | ||
<?php | ||
defined('APP_DIR') or define('APP_DIR', __DIR__ . '/../app/'); | ||
include_once(APP_DIR . 'include/http.php'); | ||
include_once(APP_DIR . 'model/SecureMessage.php'); | ||
include_once(APP_DIR . 'model/User.php'); | ||
|
||
$data = User::authenticated(); | ||
if (!$data) { | ||
echo json_encode(['unauthorized']); | ||
exit(); | ||
} | ||
|
||
/* POST API Routes */ | ||
if ($_SERVER['REQUEST_METHOD'] === 'POST') { | ||
$params = Http::post_params(); | ||
$action = $params['action']; | ||
|
||
if ($action === 'mark_unread') { | ||
$m = SecureMessage::getByID($params['message_id']); | ||
$m->is_read = true; | ||
$m->save(); | ||
echo json_encode(['success']); | ||
} else if ($action === 'send_message') { | ||
$user = User::getByID($params['user_id']); | ||
$recipient = User::get($params['recipient']); | ||
if (!$recipient) { | ||
echo json_encode(['unknown_recipient']); | ||
} else { | ||
$m = new SecureMessage; | ||
$m->message = $params['message']; | ||
$m->sender_id = $user->id; | ||
$m->receiver_id = $recipient->id; | ||
$m->save(); | ||
echo json_encode(['success']); | ||
} | ||
} | ||
|
||
} | ||
?> |
@@ -0,0 +1,3 @@ | ||
.menu-messages-count { | ||
min-width: 1rem !important; | ||
} |
@@ -0,0 +1,15 @@ | ||
.messages-container { | ||
padding-top: 50px; | ||
} | ||
|
||
.send-message-container { | ||
position: absolute; | ||
width: 100%; | ||
left: 0; | ||
bottom: 10px; | ||
} | ||
|
||
.message-compose-box { | ||
padding: 10px !important; | ||
border-radius: 5px; | ||
} |
@@ -0,0 +1,105 @@ | ||
<?php | ||
defined('APP_DIR') or define('APP_DIR', __DIR__ . '/../app/'); | ||
include_once(APP_DIR . 'model/User.php'); | ||
include_once(APP_DIR . 'model/SecureMessage.php'); | ||
include_once(APP_DIR . 'include/http.php'); | ||
|
||
$data = User::authenticated(); | ||
if (!$data) { | ||
Http::redirect('index.php'); | ||
} | ||
|
||
$user = User::get($data->username); | ||
$inbox = SecureMessage::all_to($user->id); | ||
$outbox = SecureMessage::all_from($user->id); | ||
|
||
include 'template/header.html'; | ||
include 'template/user_menu_button.php'; | ||
?> | ||
|
||
<div class="row messages-container"> | ||
<div class="col l8 m10 s12 offset-l2 offset-m1"> | ||
<div class="row"> | ||
<div class="col s12"> | ||
<h1> Messages </h1> | ||
</div> | ||
<div class="col s12 card-panel"> | ||
<ul class="tabs"> | ||
<li class="tab col s3"><a href="#inbox">Inbox</a></li> | ||
<li class="tab col s3"><a href="#sent">Sent</a></li> | ||
</ul> | ||
</div> | ||
<div id="inbox" class="col s12"> | ||
<ul id="messages-list" class="collapsible popout" data-collapsible="accordion"> | ||
<?php foreach($inbox as $message) { ?> | ||
<li value="<?php echo $message->id ?>"> | ||
<div class="collapsible-header"> | ||
<?php if ($message->is_read) { ?> | ||
<i id="inbox-icon-<?php echo $message->id ?>" | ||
class="material-icons">check | ||
</i> | ||
<?php } else { ?> | ||
<i id="inbox-icon-<?php echo $message->id ?>" | ||
class="material-icons red-text">fiber_new | ||
</i> | ||
<?php } ?> | ||
<?php echo $message->sender()->username ?> | ||
</div> | ||
<div class="collapsible-body"> | ||
<span> | ||
<?php echo $message->message ?> | ||
</span> | ||
</div> | ||
</li> | ||
<?php } ?> | ||
</ul> | ||
</div> | ||
<div id="sent" class="col s12" style="display:none"> | ||
<ul id="sent-list" class="collapsible popout" data-collapsible="accordion"> | ||
<?php foreach($outbox as $message) { ?> | ||
<li> | ||
<div class="collapsible-header"> | ||
<?php if ($message->is_read) { ?> | ||
<i class="material-icons green-text">check_circle</i> | ||
<?php } else { ?> | ||
<i class="material-icons">arrow_forward</i> | ||
<?php } ?> | ||
<?php echo $message->receiver()->username ?> | ||
</div> | ||
<div class="collapsible-body"> | ||
<span> | ||
<?php echo $message->message ?> | ||
</span> | ||
</div> | ||
</li> | ||
<?php } ?> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="row send-message-container"> | ||
<div class="col l8 m10 s12 offset-l2 offset-m1 z-depth-3 message-compose-box"> | ||
<input type="hidden" id="user-id" value="<?php echo $user->id ?>"> | ||
<div class="input-field col s6"> | ||
<input placeholder="Enter their username" id="recipient" type="text" class="validate"> | ||
<label id="recipient-label" for="recipient">Recipient</label> | ||
</div> | ||
<div clas="col s12"></div> | ||
<div class="input-field col s12"> | ||
<textarea placeholder="Craft a message..." id="message-compose" class="materialize-textarea"></textarea> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="fixed-action-btn"> | ||
<button data-position="top" data-delay="50" data-tooltip="Send message" | ||
id="send-button" class="modal-trigger btn-floating btn-large blue tooltipped"> | ||
<i class="large material-icons waves-effect waves-light">send</i> | ||
</button> | ||
</div> | ||
|
||
<?php | ||
include 'template/footer.html'; | ||
?> |