basic frontend

This commit is contained in:
BENEDEK László 2024-10-11 15:58:12 +02:00
parent e3117f1475
commit 49374c0e84
14 changed files with 293 additions and 13 deletions

View File

@ -24,7 +24,7 @@ func Listen(address string, path string) {
apiAuth := api.Group("auth")
{
apiAuth.POST("register", auth.Register)
apiAuth.GET("login", auth.Login)
apiAuth.POST("login", auth.Login)
}
apiAdmin := api.Group("admin").Use(auth.LoggedIn).Use(auth.IsAdmin)

View File

@ -1,17 +1,13 @@
server {
listen ${NGINX_PORT};
root /usr/share/nginx/html;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
index index.html;
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
error_page 404 /404.html;
location ~ api\/?.* {
proxy_pass http://backend:5000;

View File

@ -9,7 +9,7 @@ type User struct {
}
type Task struct {
ID int `db:"id"`
ID int `db:"id" json:"id"`
Description string `db:"description" form:"description" json:"description"`
Points int `db:"points" form:"points" json:"points" validate:"required"`
Recipient string `db:"recipient" form:"recipient" json:"recipient" validate:"required,len=6"`

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add task</title>
<script src="/js/config.js"></script>
<script src="/js/utils.js"></script>
<script defer src="/js/add.js"></script>
</head>
<body>
<form id="add_form">
<label for="recipient">Recipient</label>
<input type="text" id="recipient" name="recipient">
<br>
<label for="description">Description</label>
<input type="text" id="description" name="description">
<br>
<label for="points">Points</label>
<input type="number" value="0" id="points" name="points">
<br>
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>

12
static/admin/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
</head>
<body>
<a href="add">Add task</a>
<a href="list">List tasks</a>
</body>
</html>

View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List tasks by Neptun</title>
<script src="/js/config.js"></script>
<script src="/js/utils.js"></script>
<script defer src="/js/admin_list.js"></script>
</head>
<body>
<input type="text" id="neptun">
<br>
<input type="button" value="List" onclick="list_tasks()">
<div>Sum: <span id="sum"></span></div>
<table>
<thead>
<tr>
<th>Description</th>
<th>Issuer</th>
<th>Points</th>
<th></th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</body>
</html>

View File

@ -1,11 +1,29 @@
<!DOCTYPE html>
<html lang="hu">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SZOE pontok</title>
<title>Authentication</title>
<script src="/js/config.js"></script>
<script src="/js/utils.js"></script>
<script defer src="/js/auth.js"></script>
</head>
<body>
<h1>SZOE pontok</h1>
<form id="auth_form">
<label for="neptun">Neptun</label>
<input type="text" id="neptun" name="neptun">
<br>
<label for="email">Email</label>
<input type="text" id="email" name="email">
<br>
<label for="password">Password</label>
<input type="password" id="password" name="password">
<br>
<input type="button" value="Login" onclick="login()">
<input type="button" value="Register" onclick="register()">
</form>
</body>
</html>

22
static/js/add.js Normal file
View File

@ -0,0 +1,22 @@
var add_form = document.getElementById("add_form");
function add() {
fetch(`${config.apiBase}/admin/task/add`,
{
method: "POST",
credentials: "same-origin",
body: new FormData(add_form)
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
alert("task added");
}
})
.catch(error => {
console.log(error);
});
}

54
static/js/admin_list.js Normal file
View File

@ -0,0 +1,54 @@
function list_tasks() {
fetch(`${config.apiBase}/admin/task/list/${document.getElementById("neptun").value}`,
{
method: "GET",
credentials: "same-origin",
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
let sum = 0;
let table = document.getElementById("list");
table.innerHTML = "";
data.tasks.forEach(task => {
let row = table.insertRow();
row.insertCell().innerText = task.description;
row.insertCell().innerText = task.issuer;
row.insertCell().innerText = task.points;
row.insertCell().innerHTML = `<input type="button" value="Remove" onclick="remove(${task.id})">`;
sum += task.points;
});
document.getElementById("sum").innerText = sum;
}
})
.catch(error => {
console.log(error);
});
}
function remove(id) {
fetch(`${config.apiBase}/admin/task/remove/${id}`,
{
method: "POST",
credentials: "same-origin",
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
alert("removed");
list_tasks();
}
})
.catch(error => {
console.log(error);
});
}

43
static/js/auth.js Normal file
View File

@ -0,0 +1,43 @@
var auth_form = document.getElementById("auth_form");
function login() {
fetch(`${config.apiBase}/auth/login`,
{
method: "POST",
credentials: "same-origin",
body: new FormData(auth_form)
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
redirect("/list");
}
})
.catch(error => {
console.log(error);
});
}
function register() {
fetch(`${config.apiBase}/auth/register`,
{
method: "POST",
credentials: "same-origin",
body: new FormData(auth_form)
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
alert("succesful registration");
}
})
.catch(error => {
console.log(error);
});
}

3
static/js/config.js Normal file
View File

@ -0,0 +1,3 @@
const config = {
apiBase: "/api"
};

30
static/js/list.js Normal file
View File

@ -0,0 +1,30 @@
function list() {
fetch(`${config.apiBase}/user/list`,
{
method: "GET",
credentials: "same-origin",
})
.then(response => response.json())
.then(data => {
if (data.status !== 200) {
alert(data.error);
console.log(data);
} else {
let sum = 0;
data.tasks.forEach(task => {
let row = document.getElementById("list").insertRow();
row.insertCell().innerText = task.description;
row.insertCell().innerText = task.issuer;
row.insertCell().innerText = task.points;
sum += task.points;
});
document.getElementById("sum").innerText = sum;
}
})
.catch(error => {
console.log(error);
});
}
list();

3
static/js/utils.js Normal file
View File

@ -0,0 +1,3 @@
function redirect(path) {
window.location.href = path;
}

34
static/list/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List tasks</title>
<script src="/js/config.js"></script>
<script src="/js/utils.js"></script>
<script defer src="/js/list.js"></script>
</head>
<body>
<a href="/admin">Admin</a>
<div>Sum: <span id="sum"></span></div>
<table id="list">
<thead>
<tr>
<th>Description</th>
<th>Issuer</th>
<th>Points</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>