changed many things, creating base
thunic
3 years ago
parent
4a59db47de
commit
1462d7ab10
@ -1,40 +1,18 @@
|
||||
import logging
|
||||
from flask import Flask, render_template, request
|
||||
from flask_socketio import SocketIO, emit
|
||||
from flask import Flask, render_template
|
||||
|
||||
app = Flask(__name__)
|
||||
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', table_data=table_data)
|
||||
return render_template('index.html')
|
||||
|
||||
@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
|
||||
@app.route('/projekte')
|
||||
def projekte():
|
||||
return render_template('projekte.html')
|
||||
|
||||
socketio.emit('table_update', table_data, broadcast=True)
|
||||
logger.info('Daten aktualisiert: %s', table_data) # Logge die aktualisierten Daten
|
||||
return 'Daten aktualisiert'
|
||||
@app.route('/neuigkeiten')
|
||||
def neuigkeiten():
|
||||
return render_template('neuigkeiten.html')
|
||||
|
||||
if __name__ == '__main__':
|
||||
socketio.run(app)
|
||||
app.run()
|
||||
|
||||
@ -1,71 +1,72 @@
|
||||
/* styles.css */
|
||||
/* style.css */
|
||||
|
||||
/* Allgemeine Formatierung */
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
/* Header */
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
nav ul li {
|
||||
display: inline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background-color: #f2f2f2;
|
||||
/* Hero-Bereich */
|
||||
.hero {
|
||||
background-image: url("background.jpg");
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
padding: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table tr:nth-child(even) td {
|
||||
background-color: #fff;
|
||||
.hero h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.table td.editable {
|
||||
cursor: pointer;
|
||||
.hero p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 8px 16px;
|
||||
background-color: #4a86e8;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
/* Inhaltsbereich */
|
||||
.content {
|
||||
background-color: #f5f5f5;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin-bottom: 20px;
|
||||
.content h2 {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
.content p {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.new-table-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #6ab04c;
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
// projekte.js
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Das DOM ist vollständig geladen
|
||||
|
||||
// Elemente aus dem DOM abrufen
|
||||
var projektForm = document.getElementById("projekt-form");
|
||||
var projektNameInput = document.getElementById("projekt-name");
|
||||
var projekteListe = document.getElementById("projekte-liste");
|
||||
|
||||
// Eventlistener für das Formular hinzufügen
|
||||
projektForm.addEventListener("submit", function(event) {
|
||||
event.preventDefault(); // Standardformularverhalten verhindern
|
||||
|
||||
// Den eingegebenen Projektname auslesen
|
||||
var projektName = projektNameInput.value;
|
||||
|
||||
// Überprüfen, ob der Projektname nicht leer ist
|
||||
if (projektName.trim() !== "") {
|
||||
// Ein neues Listenelement erstellen
|
||||
var neuesProjekt = document.createElement("li");
|
||||
neuesProjekt.textContent = projektName;
|
||||
|
||||
// Das neue Listenelement zur Projekte-Liste hinzufügen
|
||||
projekteListe.appendChild(neuesProjekt);
|
||||
|
||||
// Das Eingabefeld leeren
|
||||
projektNameInput.value = "";
|
||||
|
||||
// Eventlistener für das Entfernen von Projekten hinzufügen
|
||||
neuesProjekt.addEventListener("click", function() {
|
||||
projekteListe.removeChild(neuesProjekt);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine coole Website</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1>Meine coole Website</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Über uns</a></li>
|
||||
<li><a href="#">Projekte</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="hero">
|
||||
<div class="container">
|
||||
<h2>Willkommen auf unserer Website</h2>
|
||||
<p>Wir erstellen moderne und ansprechende Websites für Ihr Unternehmen.</p>
|
||||
<a href="#" class="btn">Mehr erfahren</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="feature">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
<h3>Responsives Design</h3>
|
||||
<p>Unsere Websites passen sich allen Geräten an und sind auf Mobilgeräten benutzerfreundlich.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="fas fa-palette"></i>
|
||||
<h3>Kreatives Design</h3>
|
||||
<p>Wir verwenden moderne Designprinzipien, um ansprechende und ästhetische Websites zu erstellen.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="fas fa-code"></i>
|
||||
<h3>Saubere Codierung</h3>
|
||||
<p>Unser qualifiziertes Team verwendet beste Praktiken für eine saubere und effiziente Codierung.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="portfolio">
|
||||
<div class="container">
|
||||
<h2>Unsere Projekte</h2>
|
||||
<div class="portfolio-grid">
|
||||
<div class="portfolio-item">
|
||||
<img src="img/portfolio-1.jpg" alt="Projekt 1">
|
||||
<h4>Projekt 1</h4>
|
||||
</div>
|
||||
<div class="portfolio-item">
|
||||
<img src="img/portfolio-2.jpg" alt="Projekt 2">
|
||||
<h4>Projekt 2</h4>
|
||||
</div>
|
||||
<div class="portfolio-item">
|
||||
<img src="img/portfolio-3.jpg" alt="Projekt 3">
|
||||
<h4>Projekt 3</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<h2>Kontaktieren Sie uns</h2>
|
||||
<form action="#" method="POST">
|
||||
<input type="text" name="name" placeholder="Name" required>
|
||||
<input type="email" name="email" placeholder="E-Mail" required>
|
||||
<textarea name="message" placeholder="Nachricht" required></textarea>
|
||||
<button type="submit" class="btn">Senden</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2023 Meine coole Website. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,123 +1,35 @@
|
||||
<!-- 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">
|
||||
<meta charset="UTF-8">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/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>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/projekte">Projekte</a></li>
|
||||
<li><a href="/neuigkeiten">Neuigkeiten</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Willkommen auf meiner Webseite</h1>
|
||||
<p>Dies ist der Inhalt der Startseite.</p>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<h2>Über Uns</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit mauris vel nisl volutpat, at gravida ex commodo. Suspendisse potenti. Nulla facilisi.</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Projekte</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/projekte">Projekte</a></li>
|
||||
<li><a href="/neuigkeiten">Neuigkeiten</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="content">
|
||||
<h2>Projekte</h2>
|
||||
<ul id="projekte-liste">
|
||||
<!-- Hier werden die Projekte dynamisch hinzugefügt -->
|
||||
</ul>
|
||||
|
||||
<form id="projekt-form">
|
||||
<input type="text" id="projekt-name" placeholder="Projektname" required>
|
||||
<button type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/projekte.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue