slococo-uni
/
getendpoints
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor index.html

This commit is contained in:
Santiago Lo Coco 2024-10-25 21:26:31 +02:00
parent 9dca419e9d
commit 677d993de1
2 changed files with 163 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -130,3 +130,5 @@ cython_debug/
# PyCharm # PyCharm
.idea/ .idea/
html/

188
src/templates/index.html
View File

@ -3,105 +3,197 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Endpoints manager</title> <title>Endpoint Manager</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style> <style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body { body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
margin: 20px; min-height: 100vh;
background-color: #f9f9f9; background-color: #e9ecef;
color: #333; color: #343a40;
padding: 20px;
}
.container {
max-width: 1000px;
width: 100%;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
overflow: hidden;
} }
h1 { h1 {
color: #4CAF50; color: #28a745;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 20px 0; overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
th, td { th, td {
padding: 12px; padding: 12px;
border: 1px solid #ccc; border-bottom: 1px solid #dee2e6;
text-align: left; text-align: left;
font-size: 16px;
word-wrap: break-word;
} }
th { th {
background-color: #4CAF50; background-color: #28a745;
color: white; color: white;
font-weight: 500;
}
tbody tr {
transition: background-color 0.2s ease;
} }
tbody tr:hover { tbody tr:hover {
background-color: #f1f1f1; background-color: #f8f9fa;
} }
.update-btn { .update-btn {
background-color: #4CAF50; background-color: #28a745;
color: white; color: white;
border: none; border: none;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease, transform 0.1s ease;
font-size: 14px;
white-space: nowrap;
} }
.update-btn:hover { .update-btn:hover {
background-color: #45a049; background-color: #218838;
transform: scale(1.05);
} }
input[type="url"] { input[type="url"] {
padding: 8px; padding: 8px;
border: 1px solid #ccc; border: 1px solid #ced4da;
border-radius: 4px; border-radius: 5px;
width: calc(100% - 100px); width: calc(100% - 110px);
margin-right: 10px; margin-right: 8px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px;
transition: border-color 0.3s ease;
} }
input[type="url"]:focus { input[type="url"]:focus {
outline: none; outline: none;
border-color: #4CAF50; border-color: #28a745;
} }
h2 { .highlight {
margin-top: 40px; background-color: #e0f2f1 !important;
color: #333;
} }
pre { @media (max-width: 768px) {
background-color: #fff; .container {
padding: 10px; padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
overflow-x: auto;
} }
@media (max-width: 600px) {
table, th, td { table, th, td {
font-size: 14px; font-size: 14px;
} }
h1 {
font-size: 22px;
}
input[type="url"] { input[type="url"] {
width: calc(100% - 80px); width: calc(100% - 80px);
} }
.update-btn { .update-btn {
padding: 6px 10px; padding: 6px 8px;
}
}
@media (max-width: 540px) {
h1 {
font-size: 20px;
}
table {
overflow-x: auto;
white-space: nowrap;
}
thead {
display: none;
}
tbody tr {
display: block;
background-color: #fff;
border-radius: 10px;
border: 1px solid #ddd;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
tbody tr td {
display: block;
justify-content: flex-start;
padding: 10px 0;
width: 100%;
}
tbody tr td::before {
content: attr(data-label);
font-weight: bold;
color: #28a745;
margin-right: 10px;
}
.update-btn-container {
margin-top: 10px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.update-btn {
padding: 8px 12px;
font-size: 14px;
background-color: #4caf50;
margin-top: 5px;
}
input[type="url"] {
width: 100%;
margin-bottom: 10px;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Endpoints manager</h1> <div class="container">
<h1>Endpoint Manager</h1>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
@ -111,11 +203,11 @@
</thead> </thead>
<tbody id="endpoints-table-body"> <tbody id="endpoints-table-body">
{% for endpoint in endpoints %} {% for endpoint in endpoints %}
<tr> <tr id="row-{{ endpoint.id }}">
<td>{{ endpoint.id }}</td> <td data-label="ID">{{ endpoint.id }}</td>
<td id="url-{{ endpoint.id }}">{{ endpoint.url }}</td> <td data-label="URL" id="url-{{ endpoint.id }}">{{ endpoint.url }}</td>
<td> <td data-label="Action">
<form onsubmit="return updateEndpoint(event, '{{ endpoint.id }}')"> <form class="update-btn-container" onsubmit="return updateEndpoint(event, '{{ endpoint.id }}')">
<input type="url" id="new-url-{{ endpoint.id }}" placeholder="New URL" required> <input type="url" id="new-url-{{ endpoint.id }}" placeholder="New URL" required>
<button type="submit" class="update-btn">Update</button> <button type="submit" class="update-btn">Update</button>
</form> </form>
@ -123,30 +215,36 @@
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<script> <script>
function updateEndpoint(event, endpointId) { function updateEndpoint(event, endpointId) {
event.preventDefault(); event.preventDefault();
const newUrl = document.getElementById(`new-url-${endpointId}`).value;
const newUrlInput = document.getElementById(`new-url-${endpointId}`);
const newUrl = newUrlInput.value.trim();
const row = document.getElementById(`row-${endpointId}`);
fetch(`http://{{ api_host }}:5000/api/endpoints/${endpointId}`, { fetch(`http://{{ api_host }}:5000/api/endpoints/${endpointId}`, {
method: 'PUT', method: 'PUT',
headers: { headers: { 'Content-Type': 'application/json' },
'Content-Type': 'application/json',
},
body: JSON.stringify({ url: newUrl }), body: JSON.stringify({ url: newUrl }),
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.status === 'success') { if (data.status === 'success') {
document.getElementById(`url-${endpointId}`).innerText = newUrl; document.getElementById(`url-${endpointId}`).innerText = newUrl;
newUrlInput.value = "";
row.classList.add("highlight");
setTimeout(() => row.classList.remove("highlight"), 3000);
} else { } else {
console.error(data.message); console.error("Failed to update URL:", data.message);
} }
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error("Error:", error);
}); });
} }
</script> </script>