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
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config['SECRET_KEY'] = 'dein_geheimer_schluessel'
|
||||
app.config['SECRET_KEY'] = 'geheimeschluessel'
|
||||
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('/')
|
||||
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')
|
||||
def handle_connect():
|
||||
emit('message', {'data': 'Verbunden'})
|
||||
socketio.emit('table_update', table_data, broadcast=True)
|
||||
logger.info('Daten aktualisiert: %s', table_data) # Logge die aktualisierten Daten
|
||||
return 'Daten aktualisiert'
|
||||
|
||||
if __name__ == '__main__':
|
||||
socketio.run(app)
|
||||
|
||||
@ -1,185 +1,71 @@
|
||||
/* Reset CSS */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
/* styles.css */
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#hero {
|
||||
background-image: url("img/hero-bg.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
transform-style: preserve-3d;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 600px;
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
transform: rotateY(10deg) rotateX(-10deg);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
#hero:hover .hero-content {
|
||||
transform: rotateY(0) rotateX(0);
|
||||
}
|
||||
|
||||
#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 {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
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;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.portfolio-item img {
|
||||
.table {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#contact {
|
||||
text-align: center;
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.table tr:nth-child(even) td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.table td.editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #333;
|
||||
.button {
|
||||
padding: 8px 16px;
|
||||
background-color: #4a86e8;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: 4px;
|
||||
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;
|
||||
}
|
||||
.category {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media (max-width: 768px) {
|
||||
nav ul li {
|
||||
display: block;
|
||||
.category-name {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-table-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #6ab04c;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,18 +1,123 @@
|
||||
<!-- index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebSocket Beispiel</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>WebSocket Beispiel</h1>
|
||||
<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 src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
|
||||
<script>
|
||||
const socket = io();
|
||||
var socket = io.connect();
|
||||
var tableCounter = 2;
|
||||
|
||||
socket.on('message', (data) => {
|
||||
console.log('Nachricht empfangen:', data);
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue