TickNick
/
websockets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed many things, creating base

Browse Source
master
thunic 3 years ago
parent 4a59db47de
commit 1462d7ab10
8 changed files with 156 additions and 282 deletions
Show Stats Download Patch File Download Diff File

40
main.py
Unescape Escape View File

@ -1,40 +1,18 @@
import logging from flask import Flask, render_template
from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit
app = Flask(__name__) 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('/') @app.route('/')
def index(): def index():
return render_template('index.html', table_data=table_data) return render_template('index.html')
@app.route('/update_table', methods=['POST']) @app.route('/projekte')
def update_table(): def projekte():
updated_data = request.json return render_template('projekte.html')
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.emit('table_update', table_data, broadcast=True) @app.route('/neuigkeiten')
logger.info('Daten aktualisiert: %s', table_data) # Logge die aktualisierten Daten def neuigkeiten():
return 'Daten aktualisiert' return render_template('neuigkeiten.html')
if __name__ == '__main__': if __name__ == '__main__':
socketio.run(app) app.run()

87
static/css/styles.css
Unescape Escape View File

@ -1,71 +1,72 @@
/* styles.css */ /* style.css */
/* Allgemeine Formatierung */
body { body {
background-color: #f5f7fa;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.container { /* Header */
max-width: 1200px; header {
margin: 0 auto; background-color: #333;
padding: 20px; color: #fff;
padding: 10px;
} }
h1 { nav ul {
font-size: 2rem; list-style-type: none;
text-align: center; margin: 0;
margin-bottom: 20px; padding: 0;
} }
.table { nav ul li {
width: 100%; display: inline;
border-collapse: collapse; margin-right: 10px;
margin-bottom: 20px;
} }
.table th, nav ul li a {
.table td { color: #fff;
padding: 10px; text-decoration: none;
border: 1px solid #ddd;
text-align: left;
} }
.table th { /* Hero-Bereich */
background-color: #f2f2f2; .hero {
background-image: url("background.jpg");
background-size: cover;
color: #fff;
padding: 100px;
text-align: center;
} }
.table tr:nth-child(even) td { .hero h1 {
background-color: #fff; font-size: 40px;
} }
.table td.editable { .hero p {
cursor: pointer; font-size: 20px;
} }
.button { /* Inhaltsbereich */
padding: 8px 16px; .content {
background-color: #4a86e8; background-color: #f5f5f5;
color: #fff; padding: 50px;
border: none;
border-radius: 4px;
cursor: pointer;
} }
.category { .content h2 {
margin-bottom: 20px; color: #333;
font-size: 30px;
} }
.category-name { .content p {
font-size: 1.2rem; color: #666;
margin-bottom: 10px; font-size: 18px;
} }
.new-table-button { /* Footer */
padding: 8px 16px; footer {
background-color: #6ab04c; background-color: #333;
color: #fff; color: #fff;
border: none; padding: 10px;
border-radius: 4px; text-align: center;
cursor: pointer;
} }

38
static/js/projekte.js
Unescape Escape View File

@ -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);
});
}
});
});

0
static/js/script.js
Unescape Escape View File

92
templates/Irgendwann.html
Unescape Escape View File

@ -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>&copy; 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>

144
templates/index.html
Unescape Escape View File

@ -1,123 +1,35 @@
<!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Echtzeit-Tabelle</title> <meta charset="UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script> <title>Meine Webseite</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div class="container"> <header>
<h1>Echtzeit-Tabelle</h1> <nav>
<ul>
<div id="categories-container"> <li><a href="/">Startseite</a></li>
<div class="category"> <li><a href="/projekte">Projekte</a></li>
<h2 class="category-name">Kategorie 1</h2> <li><a href="/neuigkeiten">Neuigkeiten</a></li>
<table class="table" data-category="1"> </ul>
<thead> </nav>
<tr> </header>
<th>Name</th>
<th>Alter</th> <section class="hero">
<th></th> <h1>Willkommen auf meiner Webseite</h1>
</tr> <p>Dies ist der Inhalt der Startseite.</p>
</thead> </section>
<tbody>
{% for row in table_data %} <section class="content">
<tr> <h2>Über Uns</h2>
<td contenteditable="true" class="editable">{{ row.name }}</td> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit mauris vel nisl volutpat, at gravida ex commodo. Suspendisse potenti. Nulla facilisi.</p>
<td contenteditable="true" class="editable">{{ row.age }}</td> </section>
<td><button onclick="saveChanges(this)" class="button">Speichern</button></td>
</tr> <footer>
{% endfor %} <p>&copy; 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
</tbody> </footer>
</table>
</div> <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</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> </body>
</html> </html>

0
templates/neuigkeiten.html
Unescape Escape View File

37
templates/projekte.html
Unescape Escape View File

@ -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>&copy; 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
</footer>
<script src="{{ url_for('static', filename='js/projekte.js') }}"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save