You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.7 KiB
HTML
124 lines
3.7 KiB
HTML
<!-- index.html -->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Echtzeit-Tabelle</title>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Echtzeit-Tabelle</h1>
|
|
|
|
<div id="categories-container">
|
|
<div class="category">
|
|
<h2 class="category-name">Kategorie 1</h2>
|
|
<table class="table" data-category="1">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Alter</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in table_data %}
|
|
<tr>
|
|
<td contenteditable="true" class="editable">{{ row.name }}</td>
|
|
<td contenteditable="true" class="editable">{{ row.age }}</td>
|
|
<td><button onclick="saveChanges(this)" class="button">Speichern</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="addNewTable()" class="new-table-button">Neue Tabelle</button>
|
|
</div>
|
|
|
|
<script>
|
|
var socket = io.connect();
|
|
var tableCounter = 2;
|
|
|
|
socket.on('connect', function() {
|
|
console.log('Verbindung zum Server hergestellt');
|
|
});
|
|
|
|
socket.on('table_update', function(data) {
|
|
updateTable(data);
|
|
});
|
|
|
|
function addNewTable() {
|
|
var categoryContainer = document.getElementById('categories-container');
|
|
var newCategory = document.createElement('div');
|
|
newCategory.classList.add('category');
|
|
|
|
var categoryName = document.createElement('h2');
|
|
categoryName.classList.add('category-name');
|
|
categoryName.textContent = 'Kategorie ' + tableCounter;
|
|
newCategory.appendChild(categoryName);
|
|
|
|
var newTable = document.createElement('table');
|
|
newTable.classList.add('table');
|
|
newTable.dataset.category = tableCounter;
|
|
|
|
var tableHeader = document.createElement('thead');
|
|
var headerRow = document.createElement('tr');
|
|
var nameHeader = document.createElement('th');
|
|
nameHeader.textContent = 'Name';
|
|
var ageHeader = document.createElement('th');
|
|
ageHeader.textContent = 'Alter';
|
|
var buttonHeader = document.createElement('th');
|
|
|
|
headerRow.appendChild(nameHeader);
|
|
headerRow.appendChild(ageHeader);
|
|
headerRow.appendChild(buttonHeader);
|
|
tableHeader.appendChild(headerRow);
|
|
|
|
var tableBody = document.createElement('tbody');
|
|
newTable.appendChild(tableHeader);
|
|
newTable.appendChild(tableBody);
|
|
|
|
newCategory.appendChild(newTable);
|
|
categoryContainer.appendChild(newCategory);
|
|
|
|
tableCounter++;
|
|
}
|
|
|
|
function saveChanges(button) {
|
|
var row = button.parentNode.parentNode;
|
|
var name = row.cells[0].innerText;
|
|
var age = row.cells[1].innerText;
|
|
var id = row.getAttribute('data-id');
|
|
|
|
var updatedRow = {
|
|
id: parseInt(id),
|
|
name: name,
|
|
age: parseInt(age)
|
|
};
|
|
|
|
socket.emit('update_row', updatedRow);
|
|
|
|
var checkmark = row.querySelector('.checkmark');
|
|
checkmark.style.display = 'inline';
|
|
|
|
setTimeout(function() {
|
|
checkmark.style.display = 'none';
|
|
}, 3000);
|
|
}
|
|
|
|
function updateTable(data) {
|
|
var tableBody = $('#data-table tbody');
|
|
tableBody.empty();
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
var row = '<tr data-id="' + data[i].id + '"><td contenteditable="true">' + data[i].name + '</td><td contenteditable="true">' + data[i].age + '</td><td><button onclick="saveChanges(this)">Speichern</button></td></tr>';
|
|
tableBody.append(row);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|