679 lines
22 KiB
HTML
679 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Chat Controller Tester</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 1000px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-section {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
width: 150px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
input,
|
||
|
|
select {
|
||
|
|
padding: 8px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
padding: 10px 15px;
|
||
|
|
background-color: #4CAF50;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#response {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 15px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.participant-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.participant-item input {
|
||
|
|
flex-grow: 1;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.remove-participant {
|
||
|
|
color: red;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Chat Controller Tester</h1>
|
||
|
|
|
||
|
|
<div class="form-section">
|
||
|
|
<h2>Create Chat</h2>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="create_user_id">Acting User ID:</label>
|
||
|
|
<input type="text" id="create_user_id" placeholder="User creating the chat" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="is_group">Is Group:</label>
|
||
|
|
<select id="is_group">
|
||
|
|
<option value="false">One-to-One Chat</option>
|
||
|
|
<option value="true">Group Chat</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row" id="chat-name-row">
|
||
|
|
<label for="chat_name">Chat Name:</label>
|
||
|
|
<input type="text" id="chat_name" placeholder="Enter group name (required for groups)" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row" id="group-type-row">
|
||
|
|
<label for="group_type">Group Type:</label>
|
||
|
|
<select id="group_type">
|
||
|
|
<option value="public">Public</option>
|
||
|
|
<option value="private">Private</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row" id="max-participants-row">
|
||
|
|
<label for="max_participants">Max Participants:</label>
|
||
|
|
<input type="number" id="max_participants" placeholder="Leave empty for no limit" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="description">Description:</label>
|
||
|
|
<input type="text" id="description" placeholder="Optional description" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="profile_photo">Profile Photo URL:</label>
|
||
|
|
<input type="text" id="profile_photo" placeholder="Optional image URL" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label>Participants:</label>
|
||
|
|
<div style="flex-grow: 1;">
|
||
|
|
<div id="participants-container">
|
||
|
|
<div class="participant-item">
|
||
|
|
<input type="text" class="participant-id" placeholder="Enter user ID" />
|
||
|
|
<span class="remove-participant">✕</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button type="button" id="add-participant">Add Participant</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="create-chat">Create Chat</button>
|
||
|
|
<button id="reset-form">Reset Form</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="response"></div>
|
||
|
|
|
||
|
|
<h2>Add Participant to Group Chat</h2>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="add_user_id">Acting User ID:</label>
|
||
|
|
<input type="text" id="add_user_id" placeholder="User performing the action" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="add_chat_id">Chat ID:</label>
|
||
|
|
<input type="text" id="add_chat_id" placeholder="Target group chat ID" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="add_participant_id">New Participant ID:</label>
|
||
|
|
<input type="text" id="add_participant_id" placeholder="User ID to add" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="add-participant-to-group">Add to Group</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Remove Participant from Group Chat</h2>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="remove_user_id">Acting User ID:</label>
|
||
|
|
<input type="text" id="remove_user_id" placeholder="User performing the action (admin)" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="remove_chat_id">Chat ID:</label>
|
||
|
|
<input type="text" id="remove_chat_id" placeholder="Target group chat ID" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="remove_participant_id">Participant ID:</label>
|
||
|
|
<input type="text" id="remove_participant_id" placeholder="User ID to remove" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="remove-participant-from-group">Remove from Group</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Get Chat Participants</h2>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="get_chat_id">Chat ID:</label>
|
||
|
|
<input type="text" id="get_chat_id" placeholder="Enter chat ID to fetch participants" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="get-chat-participants">Get Participants</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Accept/Reject Group Join Request (Private Group)</h2>
|
||
|
|
<div class="form-section">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="admin_user_id">Admin User ID:</label>
|
||
|
|
<input type="text" id="admin_user_id" placeholder="Admin user ID" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="group_chat_id">Group Chat ID:</label>
|
||
|
|
<input type="text" id="group_chat_id" placeholder="Private group chat ID" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="pending_participant_id">Participant ID:</label>
|
||
|
|
<input type="text" id="pending_participant_id" placeholder="User ID to accept/reject" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="accept-join-request">Accept Join Request</button>
|
||
|
|
<button id="reject-join-request" style="background-color:#e74c3c;">Reject Join Request</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Get All Group Join Requests</h2>
|
||
|
|
<div class="form-section">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="request_user_id">User ID:</label>
|
||
|
|
<input type="text" id="request_user_id" placeholder="User ID to fetch group join requests" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="get-all-group-requests">Get All Group Join Requests</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h2>Get All Join Requests For Particular Group</h2>
|
||
|
|
<div class="form-section">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="group_requests_chat_id">Group Chat ID:</label>
|
||
|
|
<input type="text" id="group_requests_chat_id" placeholder="Group Chat ID" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="get-group-join-requests">Get Join Requests</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-section">
|
||
|
|
<h2>Live Chat Demo</h2>
|
||
|
|
<input type="text" id="chat-message" placeholder="Type your message..." style="width:80%;" />
|
||
|
|
<button id="send-message">Send</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-section">
|
||
|
|
<h2>Test sendMessage API one to one </h2>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="send_user_id">User ID:</label>
|
||
|
|
<input type="text" id="send_user_id" placeholder="Sender user ID" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="send_chat_id">Chat ID:</label>
|
||
|
|
<input type="text" id="send_chat_id" placeholder="Chat ID" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="send_receiver_id">Receiver ID:</label>
|
||
|
|
<input type="text" id="send_receiver_id" placeholder="Receiver ID (optional for group)" />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="send_message_text">Message:</label>
|
||
|
|
<input type="text" id="send_message_text" placeholder="Type your message..." />
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<button id="send-message-api">Send via API</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="join_chat_id">Join Chat ID:</label>
|
||
|
|
<input type="text" id="join_chat_id" placeholder="Enter chat ID to join room" />
|
||
|
|
<button id="join-room-btn">Join Room</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="chat-window"
|
||
|
|
style="height:200px;overflow-y:auto;border:1px solid #ccc;padding:10px;margin-bottom:10px;background:#fafafa">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
document.getElementById("join-room-btn").addEventListener("click", function () {
|
||
|
|
const chatId = document.getElementById("join_chat_id").value.trim();
|
||
|
|
if (chatId) {
|
||
|
|
socket.emit("join-room", { chatId });
|
||
|
|
alert("Joined room " + chatId);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Toggle group-specific fields
|
||
|
|
const isGroupSelect = document.getElementById("is_group");
|
||
|
|
const toggleGroupFields = () => {
|
||
|
|
const isGroup = isGroupSelect.value === "true";
|
||
|
|
document.getElementById("chat-name-row").style.display = isGroup ? "flex" : "none";
|
||
|
|
document.getElementById("group-type-row").style.display = isGroup ? "flex" : "none";
|
||
|
|
document.getElementById("max-participants-row").style.display = isGroup ? "flex" : "none";
|
||
|
|
};
|
||
|
|
isGroupSelect.addEventListener("change", toggleGroupFields);
|
||
|
|
toggleGroupFields(); // Initialize
|
||
|
|
|
||
|
|
// Participant management
|
||
|
|
document.getElementById("add-participant").addEventListener("click", () => {
|
||
|
|
const container = document.getElementById("participants-container");
|
||
|
|
const newItem = document.createElement("div");
|
||
|
|
newItem.className = "participant-item";
|
||
|
|
newItem.innerHTML = `
|
||
|
|
<input type="text" class="participant-id" placeholder="Enter user ID">
|
||
|
|
<span class="remove-participant">✕</span>
|
||
|
|
`;
|
||
|
|
container.appendChild(newItem);
|
||
|
|
|
||
|
|
newItem.querySelector(".remove-participant").addEventListener("click", () => {
|
||
|
|
if (document.querySelectorAll(".participant-item").length > 1) {
|
||
|
|
container.removeChild(newItem);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("reset-form").addEventListener("click", () => {
|
||
|
|
document.querySelectorAll("input").forEach((input) => (input.value = ""));
|
||
|
|
document.getElementById("is_group").value = "false";
|
||
|
|
document.getElementById("group_type").value = "public";
|
||
|
|
|
||
|
|
const participantsContainer = document.getElementById("participants-container");
|
||
|
|
participantsContainer.innerHTML = `
|
||
|
|
<div class="participant-item">
|
||
|
|
<input type="text" class="participant-id" placeholder="Enter user ID">
|
||
|
|
<span class="remove-participant">✕</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
toggleGroupFields();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("create-chat").addEventListener("click", async () => {
|
||
|
|
const userId = Number(document.getElementById("create_user_id").value.trim());
|
||
|
|
const isGroup = document.getElementById("is_group").value === "true";
|
||
|
|
const chatName = document.getElementById("chat_name").value;
|
||
|
|
const groupType = document.getElementById("group_type").value;
|
||
|
|
const maxParticipants = document.getElementById("max_participants").value;
|
||
|
|
const description = document.getElementById("description").value;
|
||
|
|
const profilePhoto = document.getElementById("profile_photo").value;
|
||
|
|
|
||
|
|
const participantInputs = document.querySelectorAll(".participant-id");
|
||
|
|
const participants = Array.from(participantInputs)
|
||
|
|
.map((input) => input.value.trim())
|
||
|
|
.filter((id) => id !== "")
|
||
|
|
.map(Number);
|
||
|
|
|
||
|
|
if (!userId) {
|
||
|
|
alert("Acting User ID is required");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isGroup && !chatName) {
|
||
|
|
alert("Group chat requires a name");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isGroup && participants.length !== 1) {
|
||
|
|
alert("One-to-one chat requires exactly one participant");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const requestBody = {
|
||
|
|
userId,
|
||
|
|
chat_name: isGroup ? chatName : null,
|
||
|
|
is_group: isGroup,
|
||
|
|
group_type: isGroup ? groupType : null,
|
||
|
|
max_participants: isGroup ? (maxParticipants || null) : null,
|
||
|
|
description: description || null,
|
||
|
|
profile_photo: profilePhoto || null,
|
||
|
|
participants,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("http://localhost:8000/api/chat/user/createNewChat", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestBody),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("add-participant-to-group").addEventListener("click", async () => {
|
||
|
|
const userId = document.getElementById("add_user_id").value.trim();
|
||
|
|
const chatId = document.getElementById("add_chat_id").value.trim();
|
||
|
|
const newParticipantId = document.getElementById("add_participant_id").value.trim();
|
||
|
|
|
||
|
|
if (!userId || !chatId || !newParticipantId) {
|
||
|
|
alert("Please fill all fields (User ID, Chat ID, New Participant ID)");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const requestBody = {
|
||
|
|
chatId,
|
||
|
|
newParticipantId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/user/addParticipant/${userId}`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestBody),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("remove-participant-from-group").addEventListener("click", async () => {
|
||
|
|
const userId = Number(document.getElementById("remove_user_id").value.trim());
|
||
|
|
const chatId = Number(document.getElementById("remove_chat_id").value.trim());
|
||
|
|
const participantId = Number(document.getElementById("remove_participant_id").value.trim());
|
||
|
|
|
||
|
|
if (!userId || !chatId || !participantId) {
|
||
|
|
alert("Please fill all fields (User ID, Chat ID, Participant ID)");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const requestBody = {
|
||
|
|
chatId,
|
||
|
|
participantId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/user/removeParticipant/${userId}`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestBody),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("get-chat-participants").addEventListener("click", async () => {
|
||
|
|
const chatId = document.getElementById("get_chat_id").value.trim();
|
||
|
|
|
||
|
|
if (!chatId) {
|
||
|
|
alert("Please enter a Chat ID");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/user/getChatParticipants/${chatId}`, {
|
||
|
|
method: "GET"
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
console.error("Error:", result);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Accept Join Request
|
||
|
|
document.getElementById("accept-join-request").addEventListener("click", async () => {
|
||
|
|
const userId = document.getElementById("admin_user_id").value.trim();
|
||
|
|
const chatId = document.getElementById("group_chat_id").value.trim();
|
||
|
|
const participantId = document.getElementById("pending_participant_id").value.trim();
|
||
|
|
|
||
|
|
if (!userId || !chatId || !participantId) {
|
||
|
|
alert("Please fill all fields (Admin User ID, Group Chat ID, Participant ID)");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const requestBody = {
|
||
|
|
chatId,
|
||
|
|
participantId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/admin/acceptGroupJoinRequest/${userId}`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestBody),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Reject Join Request
|
||
|
|
document.getElementById("reject-join-request").addEventListener("click", async () => {
|
||
|
|
const userId = document.getElementById("admin_user_id").value.trim();
|
||
|
|
const chatId = document.getElementById("group_chat_id").value.trim();
|
||
|
|
const participantId = document.getElementById("pending_participant_id").value.trim();
|
||
|
|
|
||
|
|
if (!userId || !chatId || !participantId) {
|
||
|
|
alert("Please fill all fields (Admin User ID, Group Chat ID, Participant ID)");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const requestBody = {
|
||
|
|
chatId,
|
||
|
|
participantId,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/admin/rejectGroupJoinRequest/${userId}`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestBody),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Get All Group Join Requests (no token)
|
||
|
|
document.getElementById("get-all-group-requests").addEventListener("click", async () => {
|
||
|
|
const userId = document.getElementById("request_user_id").value.trim();
|
||
|
|
|
||
|
|
if (!userId) {
|
||
|
|
alert("Please enter a User ID");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/user/get-all-chat-group-request/${userId}`, {
|
||
|
|
method: "GET"
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
console.error("Error:", result);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("get-group-join-requests").addEventListener("click", async () => {
|
||
|
|
const chatId = document.getElementById("group_requests_chat_id").value.trim();
|
||
|
|
|
||
|
|
if (!chatId) {
|
||
|
|
alert("Please enter a Group Chat ID");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`http://localhost:8000/api/chat/admin/group/${chatId}`, {
|
||
|
|
method: "GET"
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
console.error("Error:", result);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error:", error);
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// ...existing code...
|
||
|
|
|
||
|
|
// Live Chat Demo with Socket.IO
|
||
|
|
const socket = io("http://localhost:3000");
|
||
|
|
|
||
|
|
// Listen for incoming messages
|
||
|
|
socket.on("chat-message", function (data) {
|
||
|
|
const chatWindow = document.getElementById("chat-window");
|
||
|
|
const div = document.createElement("div");
|
||
|
|
if (typeof data === "object" && data.message) {
|
||
|
|
div.textContent =
|
||
|
|
(data.sender_xid ? "User " + data.sender_xid + ": " : "") +
|
||
|
|
data.message +
|
||
|
|
(data.receiver_xid ? " (to User " + data.receiver_xid + ")" : "");
|
||
|
|
} else {
|
||
|
|
div.textContent = typeof data === "string" ? data : JSON.stringify(data);
|
||
|
|
}
|
||
|
|
chatWindow.appendChild(div);
|
||
|
|
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Send message
|
||
|
|
document.getElementById("send-message").addEventListener("click", function () {
|
||
|
|
const input = document.getElementById("chat-message");
|
||
|
|
const msg = input.value.trim();
|
||
|
|
if (msg) {
|
||
|
|
socket.emit("chat-message", msg);
|
||
|
|
input.value = "";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Optionally, send message on Enter key
|
||
|
|
document.getElementById("chat-message").addEventListener("keydown", function (e) {
|
||
|
|
if (e.key === "Enter") {
|
||
|
|
document.getElementById("send-message").click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// ANGAD
|
||
|
|
document.getElementById("send-message-api").addEventListener("click", async function () {
|
||
|
|
const userId = document.getElementById("send_user_id").value.trim();
|
||
|
|
const chatId = document.getElementById("send_chat_id").value.trim();
|
||
|
|
const receiverId = document.getElementById("send_receiver_id").value.trim();
|
||
|
|
const message = document.getElementById("send_message_text").value.trim();
|
||
|
|
|
||
|
|
if (!userId || !chatId || !message) {
|
||
|
|
alert("User ID, Chat ID, and Message are required!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const body = {
|
||
|
|
userId: Number(userId),
|
||
|
|
chatId: Number(chatId),
|
||
|
|
message: message
|
||
|
|
};
|
||
|
|
if (receiverId) body.receiverId = Number(receiverId);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("http://localhost:8000/api/chat/user/send-message", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify(body)
|
||
|
|
});
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById("response").textContent = JSON.stringify(result, null, 2);
|
||
|
|
if (!response.ok) console.error("Error:", result);
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById("response").textContent = "Error: " + error.message;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// ...existing code...
|
||
|
|
</script>
|
||
|
|
<!-- ...existing code...
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|