add form and json db for user contribution

app.py

@@ -4,9 +4,10 @@ Created on Sat Apr 22 17:07:13 2022
 
 @author: Hammerle
 """
+import time
 import json
 import requests
-from flask import Flask, render_template
+from flask import Flask, render_template, request, flash
 
 
 # FOLDER = "src/"  # docker
@@ -45,17 +46,34 @@ def events():
     return render_template('events.html', events=events)
 
 
-@app.route("/mitgestaltung", methods=["GET"])
+@app.route("/mitgestalten", methods=["GET", "POST"])
 def contribute():
+    if request.method == "POST":
+        contribution = {
+            "fullname": request.form.get("fullname"),
+            "email": request.form.get("email"),
+            "message": request.form.get("message"),
+            "timestamp": time.time()
+        }
+        add_to_database("contribute", contribution)
+
+        flash("Danke für's Mitmachen!", "success")
     return render_template("contribute.html")
 
 
-def read_database(name):
-    with open(f"{FOLDER}database_{name}.json") as file:
+def read_database(db_name):
+    with open(f"{FOLDER}database_{db_name}.json") as file:
         db_data = json.load(file)
     return db_data
 
 
+def add_to_database(db_name, data_to_add):
+    db_data = read_database(db_name)
+    db_data.append(data_to_add)
+    with open(f"{FOLDER}database_{db_name}.json", "w") as file:
+        json.dump(db_data, file, indent=4)
+
+
 if __name__ == "__main__":
     app.run()  # localhost
     # app.run(host="0.0.0.0")  # in network

static/css/main.css

@@ -49,3 +49,8 @@ nav a svg, nav a i {
     height: calc(100vh - 120px - 2em);
     min-height: 200px;
 }
+
+.btn-success{
+    --bs-btn-bg: var(--dark-bg);
+    --bs-btn-border-color: var(--dark-bg);
+}

templates/contribute.html

@@ -3,4 +3,32 @@
 {% block content %}
     <h2>Mitgestalten</h2>
 
+    <form action="/mitgestalten" method="post" >
+        <div class="mb-3">
+            <label for="fullname" class="form-label mb-1">Name</label>
+            <input type="text" class="form-control" id="fullname" name="fullname">
+        </div>
+        <div class="mb-3">
+            <label for="email" class="form-label mb-1">Email-Adresse</label>
+            <input type="email" class="form-control" id="email" name="email">
+        </div>
+
+        <div class="mb-3">
+            <label for="message" class="form-label mb-1">Deine Wünsche, Ideen und Anregungen für <em>Nach & Nach</em>:</label>
+            <textarea class="form-control" id="message" name="message" rows="3"></textarea>
+        </div>
+        <button type="submit" class="btn btn-success mb-3">Senden</button>
+    </form>
+
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }} alert-dismissible" role="alert">
+                    {{ message }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+
 {% endblock %}

templates/layout.html

@@ -52,9 +52,9 @@
                     <i class="bi bi-calendar-day" title="Events" aria-hidden="true"></i>
                     <span>Events</span>
                 </a>
-                <a class="nav-link pt-0 pb-0 p-0" href="/mitgestaltung">
-                    <i class="bi bi-people" title="Mitgestaltung" aria-hidden="true"></i>
-                    <span>Mitgestaltung</span>
+                <a class="nav-link pt-0 pb-0 p-0" href="/mitgestalten">
+                    <i class="bi bi-people" title="Mitgestalten" aria-hidden="true"></i>
+                    <span>Mitgestalten</span>
                 </a>
             </nav>