DappMeetingV3 / temp /TestCreateRoom.html
Luisnguyen1
a
8f39e88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join Room Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js"></script>
</head>
<body>
<h2>Room Management</h2>
<button onclick="connectWallet()">Connect Wallet</button>
<p id="walletStatus">Not Connected</p>
<h3>Create Room</h3>
<input type="text" id="roomName" placeholder="Enter Room Name" />
<button onclick="createRoom()">Create</button>
<p id="status"></p>
<div id="events"></div>
<h3>Latest Room ID:</h3>
<p id="latestRoomId">Waiting for event...</p>
<script>
const provider = new ethers.providers.Web3Provider(window.ethereum);
let signer;
let contract;
const contractAddress = "0x28ecAa17F7c81069aD0aE6aA76c706ED460dA299";
async function connectWallet() {
await provider.send("eth_requestAccounts", []);
signer = provider.getSigner();
contract = new ethers.Contract(contractAddress, contractABI2, signer);
document.getElementById("walletStatus").innerText = "Connected: " + await signer.getAddress();
}
async function createRoom() {
if (!signer) await connectWallet();
const roomName = document.getElementById("roomName").value;
if (!roomName) {
document.getElementById("status").innerText = "Room Name is required!";
return;
}
const creatorId = crypto.randomUUID(); // Generate creator_id automatically
try {
const tx = await contract.createRoom(creatorId, roomName);
document.getElementById("status").innerText = "Transaction Sent: " + tx.hash;
await tx.wait();
document.getElementById("status").innerText = "Room Created Successfully!";
} catch (error) {
console.error("Transaction failed:", error);
document.getElementById("status").innerText = "Error: " + error.message;
}
}
function listenForEvents() {
if (!contract) return;
console.log(1);
contract.on("RoomCreated", (roomId, name, owner) => {
document.getElementById("events").innerHTML += `<p>Room Created: ID=${roomId}, Name=${name}, Owner=${owner}</p>`;
document.getElementById("latestRoomId").textContent = roomId;
console.log(2);
});
}
window.onload = listenForEvents;
</script>
<script src="contractABI2.js"></script>
</body>
</html>