zxq5/chatapp
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

code cleanup & multi-channel support

Browse Source
This commit is contained in:
zxq5
2025-10-20 03:45:53 +01:00
parent 07857f1d0a
commit 91ff2e00c4
10 changed files with 304 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/templates/chat.html.tera
+123 -41
View File
@@ -5,53 +5,83 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discord Clone - Group Chat</title>
<link rel="stylesheet" href="static/css/index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
</head>
<body>
<div class="chat-container">
<!--<div class="chat-container" style="background-image: url('cdn/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
<!-- Chat Header -->
<div class="chat-header">
<div class="chat-title">
<img class="user-avatar" src="cdn/profile/0"></img>
<h1>Wish.com Discord frfr</h1>
<div class="app-container">
<!-- Sidebar -->
<div class="sidebar">
<div class="resize-handle"></div>
<div class="sidebar-header">
Channels
</div>
<div class="channels-list">
<div class="channel-item active" data-channel-id="1">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 1</span>
</div>
<div class="channel-item" data-channel-id="2">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 2</span>
</div>
<div class="channel-item" data-channel-id="3">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 3</span>
</div>
<div class="channel-item" data-channel-id="4">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 4</span>
</div>
<div class="channel-item" data-channel-id="5">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 5</span>
</div>
<div class="channel-item" data-channel-id="6">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 6</span>
</div>
<div class="channel-item" data-channel-id="7">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 7</span>
</div>
<div class="channel-item" data-channel-id="8">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 8</span>
</div>
<div class="channel-item" data-channel-id="9">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 9</span>
</div>
<div class="channel-item" data-channel-id="10">
<span class="channel-icon">#</span>
<span class="channel-name">Channel 10</span>
</div>
</div>
</div>
<!-- Live Location Notification Bubble -->
<div class="notification-container">
<!--<div class="live-location-bubble" id="locationBubble">
<div class="map-container">
<img src="cdn/map.png" alt="Map" />
<!-- Chat Container -->
<div class="chat-container">
<!-- Chat Header -->
<div class="chat-header">
<button class="sidebar-toggle" id="sidebarToggle">☰</button>
<div class="chat-title">
<img class="user-avatar" src="cdn/profile/0"></img>
<h1>Wish.com Discord frfr</h1>
</div>
<div class="location-content">
<div class="location-icon">
<img src="cdn/icons/location.svg" alt="Location"></img>
</div>
<button class="join-button" id="joinButton">
Join
</div>
<!-- Messages Container -->
<div class="messages-container"></div>
<!-- Input Container -->
<div class="input-container">
<div class="input-wrapper">
<input type="text" placeholder="Start Typing..." />
<button class="send-button">
<img src="cdn/icons/send.svg" alt="Send" />
</button>
<div class="location-text">Live Location</div>
<div class="location-users" id="locationUsers">
</div>
</div>
</div>-->
</div>
<!-- Messages Container -->
<!--<div class="messages-container" style="background-image: url('cdn/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
<div class="messages-container"></div>
<!-- Input Container -->
<div class="input-container">
<div class="input-wrapper">
<input type="text" placeholder="Start Typing..." />
<button class="send-button">
<img src="cdn/icons/send.svg" alt="Send" />
</button>
</div>
</div>
</div>
@@ -69,11 +99,12 @@
} catch (__) {}
}
return ''; // use external default escaping
return '';
}
})
const user_id = {{ user_id }};
let channel_id = 1;
const user_id = 1; // {{ user_id }}
var users = {};
// Handle message sending
@@ -110,7 +141,7 @@
function sendMessage() {
const message = input.value.trim();
if (message) {
fetch("/api/chat", {
fetch(`/api/chat/${channel_id}`, {
method: "POST",
body: JSON.stringify({
user_id: user_id,
@@ -132,6 +163,8 @@
}
});
let messageSource;
async function loadData() {
try {
const userIds = await fetch("/api/users/")
@@ -151,7 +184,11 @@
console.log('Users loaded:', users);
const messageSource = new EventSource("/api/events");
if (messageSource) {
messageSource.close();
}
messageSource = new EventSource(`/api/events/${channel_id}`);
messageSource.onopen = () => messagesContainer.innerHTML = '';
messageSource.onmessage = (event) => insertMessage(JSON.parse(event.data));
messageSource.onerror = (error) => {
@@ -163,6 +200,51 @@
}
}
// Handle channel switching
document.querySelectorAll('.channel-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.channel-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
channel_id = parseInt(this.dataset.channelId);
loadData();
});
});
// Sidebar toggle
const sidebar = document.querySelector('.sidebar');
const sidebarToggle = document.getElementById('sidebarToggle');
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
});
// Sidebar resize
const resizeHandle = document.querySelector('.resize-handle');
let isResizing = false;
resizeHandle.addEventListener('mousedown', (e) => {
isResizing = true;
document.body.style.cursor = 'ew-resize';
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const newWidth = e.clientX;
if (newWidth >= 180 && newWidth <= 400) {
sidebar.style.width = newWidth + 'px';
}
});
document.addEventListener('mouseup', () => {
if (isResizing) {
isResizing = false;
document.body.style.cursor = '';
document.body.style.userSelect = '';
}
});
loadData();
</script>