table created, responsive design
thunic
3 years ago
parent
73c4f14189
commit
4a59db47de
@ -1,17 +1,40 @@
|
|||||||
from flask import Flask, render_template
|
import logging
|
||||||
|
from flask import Flask, render_template, request
|
||||||
from flask_socketio import SocketIO, emit
|
from flask_socketio import SocketIO, emit
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
app.config['SECRET_KEY'] = 'dein_geheimer_schluessel'
|
app.config['SECRET_KEY'] = 'geheimeschluessel'
|
||||||
socketio = SocketIO(app)
|
socketio = SocketIO(app)
|
||||||
|
|
||||||
|
# Beispiel-Datenquelle
|
||||||
|
table_data = [
|
||||||
|
{"id": 1, "name": "Alice", "age": 25},
|
||||||
|
{"id": 2, "name": "Bob", "age": 30},
|
||||||
|
{"id": 3, "name": "Charlie", "age": 35}
|
||||||
|
]
|
||||||
|
|
||||||
|
# Konfiguriere das Logging
|
||||||
|
logging.basicConfig(level=logging.DEBUG)
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
@app.route('/')
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
return render_template('index.html')
|
return render_template('index.html', table_data=table_data)
|
||||||
|
|
||||||
|
@app.route('/update_table', methods=['POST'])
|
||||||
|
def update_table():
|
||||||
|
updated_data = request.json
|
||||||
|
for row in updated_data:
|
||||||
|
row_id = row['id']
|
||||||
|
for entry in table_data:
|
||||||
|
if entry['id'] == row_id:
|
||||||
|
entry['name'] = row['name']
|
||||||
|
entry['age'] = row['age']
|
||||||
|
break
|
||||||
|
|
||||||
@socketio.on('connect')
|
socketio.emit('table_update', table_data, broadcast=True)
|
||||||
def handle_connect():
|
logger.info('Daten aktualisiert: %s', table_data) # Logge die aktualisierten Daten
|
||||||
emit('message', {'data': 'Verbunden'})
|
return 'Daten aktualisiert'
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
socketio.run(app)
|
socketio.run(app)
|
||||||
|
|||||||
@ -1,185 +1,71 @@
|
|||||||
/* Reset CSS */
|
/* styles.css */
|
||||||
* {
|
body {
|
||||||
box-sizing: border-box;
|
background-color: #f5f7fa;
|
||||||
margin: 0;
|
font-family: Arial, sans-serif;
|
||||||
padding: 0;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
|
}
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
.container {
|
||||||
font-size: 16px;
|
max-width: 1200px;
|
||||||
line-height: 1.6;
|
margin: 0 auto;
|
||||||
color: #333;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
h1 {
|
||||||
background-color: #333;
|
font-size: 2rem;
|
||||||
padding: 20px;
|
text-align: center;
|
||||||
color: #fff;
|
margin-bottom: 20px;
|
||||||
text-align: center;
|
}
|
||||||
}
|
|
||||||
|
.table {
|
||||||
nav ul {
|
width: 100%;
|
||||||
list-style: none;
|
border-collapse: collapse;
|
||||||
margin-top: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li {
|
.table th,
|
||||||
display: inline-block;
|
.table td {
|
||||||
margin-right: 10px;
|
padding: 10px;
|
||||||
}
|
border: 1px solid #ddd;
|
||||||
|
text-align: left;
|
||||||
nav ul li a {
|
}
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
.table th {
|
||||||
}
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
main {
|
|
||||||
padding: 20px;
|
.table tr:nth-child(even) td {
|
||||||
}
|
background-color: #fff;
|
||||||
|
}
|
||||||
h2 {
|
|
||||||
margin-bottom: 10px;
|
.table td.editable {
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
section {
|
|
||||||
margin-bottom: 40px;
|
.button {
|
||||||
}
|
padding: 8px 16px;
|
||||||
|
background-color: #4a86e8;
|
||||||
#hero {
|
color: #fff;
|
||||||
background-image: url("img/hero-bg.jpg");
|
border: none;
|
||||||
background-size: cover;
|
border-radius: 4px;
|
||||||
background-position: center;
|
cursor: pointer;
|
||||||
color: #fff;
|
}
|
||||||
padding: 80px 0;
|
|
||||||
text-align: center;
|
.category {
|
||||||
transform-style: preserve-3d;
|
margin-bottom: 20px;
|
||||||
perspective: 1000px;
|
}
|
||||||
}
|
|
||||||
|
.category-name {
|
||||||
.hero-content {
|
font-size: 1.2rem;
|
||||||
max-width: 600px;
|
margin-bottom: 10px;
|
||||||
margin: 0 auto;
|
}
|
||||||
transform: rotateY(10deg) rotateX(-10deg);
|
|
||||||
transition: transform 0.5s ease;
|
.new-table-button {
|
||||||
}
|
padding: 8px 16px;
|
||||||
|
background-color: #6ab04c;
|
||||||
#hero:hover .hero-content {
|
color: #fff;
|
||||||
transform: rotateY(0) rotateX(0);
|
border: none;
|
||||||
}
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
#features {
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature {
|
|
||||||
flex-basis: 300px;
|
|
||||||
margin: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-align: center;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
perspective: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature:hover {
|
|
||||||
transform: rotateY(10deg) rotateX(-10deg);
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#portfolio {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portfolio-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
grid-gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portfolio-item {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
perspective: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portfolio-item:hover {
|
|
||||||
transform: rotateY(10deg) rotateX(-10deg);
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portfolio-item img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[type="submit"] {
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
perspective: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[type="submit"]:hover {
|
|
||||||
transform: rotateY(10deg) rotateX(-10deg);
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Media Queries */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nav ul li {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@ -1,18 +1,123 @@
|
|||||||
|
<!-- index.html -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>WebSocket Beispiel</title>
|
<title>Echtzeit-Tabelle</title>
|
||||||
</head>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
|
||||||
<body>
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
<h1>WebSocket Beispiel</h1>
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
|
<body>
|
||||||
<script>
|
<div class="container">
|
||||||
const socket = io();
|
<h1>Echtzeit-Tabelle</h1>
|
||||||
|
|
||||||
socket.on('message', (data) => {
|
<div id="categories-container">
|
||||||
console.log('Nachricht empfangen:', data);
|
<div class="category">
|
||||||
});
|
<h2 class="category-name">Kategorie 1</h2>
|
||||||
</script>
|
<table class="table" data-category="1">
|
||||||
</body>
|
<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>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue