229 lines
8.9 KiB
Plaintext
229 lines
8.9 KiB
Plaintext
|
<%- include('header') %>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-3">
|
||
|
|
<div id="clist" class="channels-list card">
|
||
|
|
<h6 class="m-b-0">
|
||
|
|
<% if (channels.length===0){ %>
|
||
|
|
No channels!
|
||
|
|
<% } else { %>
|
||
|
|
Channels
|
||
|
|
</h6>
|
||
|
|
<ul class="list-unstyled chat-list mt-2 mb-0">
|
||
|
|
<% for (const c of channels){ %>
|
||
|
|
<li class="clearfix" onclick="open_chat('<%= c.id %>')" id="entry_<%= c.id %>">
|
||
|
|
<div class="about">
|
||
|
|
<div class="name">
|
||
|
|
<% if(c.id in favorites){ %>
|
||
|
|
<i id="star_<%= c.id %>" class="bi bi-star-fill" style="color:#fcba03"> </i>
|
||
|
|
<% } else { %>
|
||
|
|
<i id="star_<%= c.id %>" class="bi bi-star"> </i>
|
||
|
|
<% } %>
|
||
|
|
<%= c.id %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<% } %>
|
||
|
|
<li class="clearfix" onclick="show_modal('new_channel_modal')">
|
||
|
|
<div class="about">
|
||
|
|
<div class="name" id="button-new-channel-modal">
|
||
|
|
<i class="bi bi-plus-circle"></i>
|
||
|
|
Create new channel
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<% } %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-9">
|
||
|
|
<div class="card chat-app" id="channel_content">
|
||
|
|
<div class="chat">
|
||
|
|
<div class="chat-header clearfix">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="chat-about">
|
||
|
|
<h6 class="m-b-0">No channel selected</h6>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-history">
|
||
|
|
<h6 class="m-b-0">Please select a channel to start messaging</h6>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modal new channel-->
|
||
|
|
<div class="modal fade" id="new_channel_modal" tabindex="-1" aria-labelledby="new_channel_modal_label" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h1 class="modal-title fs-5" id="new_channel_modal_label">Create new channel</h1>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="alert alert-danger" role="alert" id="new-channel-alert-id" style="display: none;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="input-group input-group-sm mb-3">
|
||
|
|
<span class="input-group-text" id="inputGroup-channel-id">Channel id</span>
|
||
|
|
<input type="text" id="input_channel_id" name="channelid" class="form-control" aria-describedby="inputGroup-channel-id">
|
||
|
|
</div>
|
||
|
|
<div class="input-group input-group-sm mb-3">
|
||
|
|
<span class="input-group-text" id="inputGroup-detail">Details</span>
|
||
|
|
<input type="text" id="input_detail" name="detail" class="form-control" aria-describedby="inputGroup-detail">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||
|
|
<button type="button" class="btn btn-outline-primary" id="button-create-channel" onclick="create_channel()">Create</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modal add user-->
|
||
|
|
<div class="modal fade" id="add_user_modal" tabindex="-1" aria-labelledby="add_user_modal_label" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h1 class="modal-title fs-5" id="add_user_modal_label">Add user to channel</h1>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="alert alert-danger" role="alert" id="add-user-alert-id" style="display: none;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="input-group input-group-sm mb-3">
|
||
|
|
<span class="input-group-text" id="inputGroup-userid">User ID</span>
|
||
|
|
<input type="text" id="input_userid" name="detail" class="form-control" aria-describedby="inputGroup-detail">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||
|
|
<button type="button" class="btn btn-outline-primary" onclick="add_user()">Add</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.onload = load_last();
|
||
|
|
async function add_user() {
|
||
|
|
const data = new URLSearchParams();
|
||
|
|
data.append('channelid', document.getElementById('channel_id').value);
|
||
|
|
data.append('user', document.getElementById('input_userid').value);
|
||
|
|
const res = await do_post("/invite", data);
|
||
|
|
const json = await res.json();
|
||
|
|
const modal = document.getElementById('add-user-alert-id');
|
||
|
|
if (json.error) {
|
||
|
|
modal.innerText = json.error;
|
||
|
|
modal.className = "alert alert-danger";
|
||
|
|
|
||
|
|
} else {
|
||
|
|
modal.innerText = json.msg;
|
||
|
|
modal.className = "alert alert-success";
|
||
|
|
}
|
||
|
|
modal.style.display = "block";
|
||
|
|
}
|
||
|
|
|
||
|
|
function show_modal(modalId) {
|
||
|
|
const modal = new bootstrap.Modal(document.getElementById(modalId));
|
||
|
|
modal.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function open_chat(s) {
|
||
|
|
const r = await fetch('/channel/' + s);
|
||
|
|
if (r.status === 200){
|
||
|
|
Array.from(document.querySelectorAll('.clearfix.active')).forEach((el) => el.classList.remove('active'));
|
||
|
|
document.getElementById('entry_' + s).classList.add('active');
|
||
|
|
document.getElementById('channel_content').innerHTML = await r.text();
|
||
|
|
document.getElementById('msg_txt').addEventListener('keydown', send_with_enter);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function send_with_enter(e) {
|
||
|
|
if (e.key === "Enter") {
|
||
|
|
send_message();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function save_last(){
|
||
|
|
if(document.getElementById('channel_id')){
|
||
|
|
channel = document.getElementById('channel_id').value;
|
||
|
|
if (channel){
|
||
|
|
location.hash = channel;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function load_last(){
|
||
|
|
const last = location.hash.replace('#', '');
|
||
|
|
if(last){
|
||
|
|
open_chat(last)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function send_message() {
|
||
|
|
if (document.getElementById('msg_txt').value === "")
|
||
|
|
return;
|
||
|
|
const data = new URLSearchParams();
|
||
|
|
data.append('channelid', document.getElementById('channel_id').value);
|
||
|
|
data.append('msg', document.getElementById('msg_txt').value);
|
||
|
|
await do_post('/new_message', data);
|
||
|
|
open_chat(document.getElementById('channel_id').value);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function create_channel() {
|
||
|
|
const data = new URLSearchParams();
|
||
|
|
data.append('channelid', document.getElementById('input_channel_id').value);
|
||
|
|
data.append('detail', document.getElementById('input_detail').value);
|
||
|
|
const res = await do_post('/new_channel', data);
|
||
|
|
const json = await res.json();
|
||
|
|
const modal = document.getElementById('new-channel-alert-id');
|
||
|
|
if (json.error) {
|
||
|
|
modal.innerText = json.error;
|
||
|
|
modal.className = "alert alert-danger";
|
||
|
|
modal.style.display = "block";
|
||
|
|
|
||
|
|
} else {
|
||
|
|
save_last();
|
||
|
|
location.reload();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async function do_post(url, data) {
|
||
|
|
return fetch(url, {
|
||
|
|
method: 'post',
|
||
|
|
body: data,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
async function click_event(e) {
|
||
|
|
clicked = encodeURIComponent(e.target.id).split('star_')[1];
|
||
|
|
selected = document.cookie.split(';').map(c => c.split('=')[0].trim());
|
||
|
|
if (selected.indexOf(clicked) !== -1) {
|
||
|
|
document.cookie = clicked + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT'
|
||
|
|
} else {
|
||
|
|
document.cookie = clicked + '=true'
|
||
|
|
}
|
||
|
|
save_last();
|
||
|
|
location.reload()
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const fav of document.getElementsByTagName('i')) {
|
||
|
|
fav.addEventListener('click', click_event)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<%- include('footer') %>
|