table created, responsive design

main.py

@@ -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')
+    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__':
     socketio.run(app)

static/css/styles.css

@@ -1,185 +1,71 @@
-/* Reset CSS */
+/* styles.css */
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  
 body {
+  background-color: #f5f7fa;
   font-family: Arial, sans-serif;
-    font-size: 16px;
+  margin: 0;
-    line-height: 1.6;
+  padding: 0;
-    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 {
+.container {
-    max-width: 600px;
+  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 {
+h1 {
-    transform: rotateY(10deg) rotateX(-10deg);
+  font-size: 2rem;
-    transition: transform 0.5s ease;
-  }
-  
-  #portfolio {
   text-align: center;
+  margin-bottom: 20px;
 }
 
-  .portfolio-grid {
+.table {
-    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;
+  border-collapse: collapse;
+  margin-bottom: 20px;
 }
 
-  #contact {
+.table th,
-    text-align: center;
+.table td {
+  padding: 10px;
+  border: 1px solid #ddd;
+  text-align: left;
 }
 
-  .form-group {
+.table th {
-    margin-bottom: 20px;
+  background-color: #f2f2f2;
 }
 
-  label {
+.table tr:nth-child(even) td {
-    display: block;
+  background-color: #fff;
-    margin-bottom: 5px;
 }
 
-  input[type="text"],
+.table td.editable {
-  input[type="email"],
+  cursor: pointer;
-  textarea {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
 }
 
-  button[type="submit"] {
+.button {
-    background-color: #333;
+  padding: 8px 16px;
+  background-color: #4a86e8;
   color: #fff;
   border: none;
-    padding: 10px 20px;
+  border-radius: 4px;
-    border-radius: 5px;
   cursor: pointer;
-    transform-style: preserve-3d;
-    perspective: 1000px;
 }
 
-  button[type="submit"]:hover {
+.category {
-    transform: rotateY(10deg) rotateX(-10deg);
+  margin-bottom: 20px;
-    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 */
+.category-name {
-  @media (max-width: 768px) {
+  font-size: 1.2rem;
-    nav ul li {
-      display: block;
   margin-bottom: 10px;
 }
-  }
 
+.new-table-button {
+  padding: 8px 16px;
+  background-color: #6ab04c;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

templates/index.html

@@ -1,18 +1,123 @@
+<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
-    <title>WebSocket Beispiel</title>
+  <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>
-    <h1>WebSocket Beispiel</h1>
+  <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) => {
+    socket.on('connect', function() {
-        console.log('Nachricht empfangen:', data);
+      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>