136 lines
4.1 KiB
HTML
136 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chat</title>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket Room</h1>
|
|
|
|
<section id="connection">
|
|
<h2>Connection</h2>
|
|
<form action="" onsubmit="login(event)">
|
|
<input type="text" placeholder="Username..." id="username" />
|
|
<input type="text" placeholder="Password..." id="password" />
|
|
<button>Se connecter</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Room</h2>
|
|
|
|
<section>
|
|
<h3>Create or Join</h3>
|
|
|
|
<form action="" onsubmit="join(event)">
|
|
<input type="text" id="room_code" />
|
|
<input type="text" id="name" />
|
|
<input type="text" id="reco" />
|
|
<button>join</button>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<p>Members</p>
|
|
<u id="members"></u>
|
|
|
|
<p>Waiters</p>
|
|
<u id="waiters"></u>
|
|
|
|
<script>
|
|
let ws = null;
|
|
let token = null;
|
|
async function login(e) {
|
|
e.preventDefault();
|
|
var username = document.getElementById("username").value;
|
|
var password = document.getElementById("password").value;
|
|
var form = new FormData();
|
|
form.append("username", username);
|
|
form.append("password", password);
|
|
var data = new URLSearchParams(form);
|
|
|
|
token = await fetch("http://localhost:8001/login", {
|
|
method: "post",
|
|
body: data,
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
})
|
|
.then((res) => {
|
|
return res.json();
|
|
})
|
|
.then((r) => {
|
|
var token = r["access_token"];
|
|
var connect_section = document.getElementById("connection");
|
|
var p = document.createElement("p");
|
|
var name = JSON.parse(atob(r["access_token"].split(".")[1]))["sub"];
|
|
name = document.createTextNode(`Connected as ${name}`);
|
|
|
|
connect_section.appendChild(p);
|
|
connect_section.appendChild(name);
|
|
return token;
|
|
});
|
|
}
|
|
|
|
function join(e) {
|
|
e.preventDefault();
|
|
var room_code = document.getElementById("room_code").value;
|
|
ws = new WebSocket(`ws://localhost:8001/ws/${room_code}`, [], {
|
|
headers: { Authorization: "Bearer " + token },
|
|
});
|
|
|
|
ws.onmessage = (msg) => {
|
|
var type = JSON.parse(msg.data)["type"];
|
|
var data = JSON.parse(msg.data)["data"];
|
|
console.log("TYPE", type, type == "add_waiter");
|
|
if (type == "accept") {
|
|
if (token == null) {
|
|
var name = document.getElementById("name").value;
|
|
var reco = document.getElementById("reco").value;
|
|
if (name == "") {
|
|
ws.send(
|
|
JSON.stringify({
|
|
type: "login",
|
|
data: { relogin_code: reco },
|
|
})
|
|
);
|
|
} else {
|
|
ws.send(
|
|
JSON.stringify({ type: "login", data: { name: name } })
|
|
);
|
|
}
|
|
} else {
|
|
ws.send(JSON.stringify({ type: "auth", data: { token: token } }));
|
|
}
|
|
}
|
|
if (type == "auth_success") {
|
|
ws.send(JSON.stringify({ type: "login", data: {} }));
|
|
}
|
|
if (type == "auth_failed") {
|
|
ws.send(
|
|
JSON.stringify({ type: "login", data: { name: "test_name" } })
|
|
);
|
|
}
|
|
if (type == "add_waiter") {
|
|
var name = data["name"];
|
|
var id = data["id"];
|
|
name = document.createTextNode(name);
|
|
|
|
var waiter = document.getElementById("waiters");
|
|
var li = document.createElement("li");
|
|
var btn = document.createElement("button");
|
|
waiter.appendChild(li);
|
|
li.appendChild(name);
|
|
li.addEventListener("click", () => {
|
|
console.log("TET");
|
|
ws.send(
|
|
JSON.stringify({ type: "accept_waiter", data: { id: id } })
|
|
);
|
|
});
|
|
}
|
|
if (type == "log_waiter") {
|
|
ws.send(JSON.stringify({ type: "log_waiter", data: {} }));
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|