tests

.gitignore

@@ -114,3 +114,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+#ide
+.idea

forms.py

@@ -0,0 +1,8 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, SubmitField
+from wtforms.validators import  DataRequired, Length
+
+
+class RegistrationForm(FlaskForm):
+    username = StringField('Name', validators=[DataRequired(), Length(min=2, max=20)])
+    submit = SubmitField('Create')

geruecht.py

@@ -0,0 +1,52 @@
+from flask import Flask, render_template, url_for, redirect, flash
+from flask_sqlalchemy import SQLAlchemy
+from forms import RegistrationForm
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = '0a657b97ef546da90b2db91862ad4e29'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
+db = SQLAlchemy(app)
+
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(20), unique=True, nullable=False)
+    sum = db.Column(db.Float, nullable=False, default=0.0)
+
+    def __repr__(self):
+        return f"User('{self.username}', '{self.sum}')"
+
+    
+
+users = [
+    {
+        'name': 'Corey Schafer',
+        'sum': '20€'
+    },
+    {
+        'name': 'Tim Gröger',
+        'sum': '10€'
+    },
+    {
+        'name': 'Franziska Bobbe',
+        'sum': '5,80€'
+    }
+]
+
+
+@app.route("/", methods=['GET', 'POST'])
+@app.route("/home", methods=['GET', 'POST'])
+def home():
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        flash(f'Person wurde angelegt: {form.username.data}', 'success')
+        return redirect(url_for('home'))
+    return render_template('home.html', users=users, form=form)
+
+
+@app.route("/about")
+def about():
+    return render_template('about.html', title='about')
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

static/master.css

@@ -12,7 +12,7 @@ body {
   color: white;
   background-color: #055288;
   text-align: center;
-  padding: 10px 16px;
+  padding: 5px 5px;
   margin: 17px 17px;
   text-decoration: none;
   font-size: 17px;
@@ -33,23 +33,27 @@ body {
 }
 
 .geruecht {
-  margin: 10px auto;
+  margin: 5px auto;
   display: table;
-  top: 40px;
   border: 0px;
   border-top: 1px gray;
   border-bottom: 1px gray;
   border-radius: 15px;
   border-style: solid;
   width: 100%;
-  border-spacing: 10px;
+  border-spacing: 5px;
+  height: 30px;
 }
 
 .g-item {
   display: table-cell;
   text-align: center;
-  padding: 10px;
+  vertical-align: middle;
-  height: 50px;
+  width: 20%;
+}
+
+.g-item p {
+  font-size: 15px;
 }
 
 .button {
@@ -65,12 +69,46 @@ body {
   position: fixed;
   bottom: 0;
   width: 100%;
+  display: table;
 }
 
 .bottombar-element {
   float: left;
+  line-height: auto;
 }
 
 .right {
   float: right;
 }
+
+.form-group {
+  float: left;
+  border: 0;
+  height: auto;
+  padding: 5px;
+  margin: auto;
+  float: left;
+  vertical-align: middle;
+}
+
+.reg-label {
+  color: white;
+}
+
+.m {
+  margin-top: 10px;
+}
+
+.alert {
+  color: black;
+  font-size: 15px;
+  text-align: center;
+}
+
+.alert-success {
+  background: lightgreen;
+  border: 1px solid darkgreen;
+  color: darkgreen;
+  border-radius: 5px;
+  padding: 6px;
+}

templates/about.html

@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block content %}
+    <h1>About Page</h1>
+{% endblock %}

templates/home.html

@@ -0,0 +1,32 @@
+{% extends "layout.html" %}
+{% block content %}
+    {% for user in users %}
+        <div class="geruecht">
+    <div class="g-item first">
+      <p>{{ user.name }}</p>
+    </div>
+    <div class="g-item button">
+      <p>+2 &euro;</p>
+    </div>
+    <div class="g-item button">
+      <p>+1 &euro;</p>
+    </div>
+    <div class="g-item button">
+      <p>+0,5 &euro;</p>
+    </div>
+    <div class="g-item button">
+      <p>+0,4 &euro;</p>
+    </div>
+    <div class="g-item button">
+      <p>+0,2 &euro;</p>
+    </div>
+    <div class="g-item button">
+      <p>+0,1 &euro;</p>
+    </div>
+    <div class="g-item">
+      <p>{{ user.sum }}</p>
+    </div>
+  </div>
+    {% endfor %}
+{% endblock %}
+

templates/layout.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<head>
+
+    {% if title %}
+        <title>{{ title }}</title>
+    {% else %}
+        <title>Gerüchteküche</title>
+    {% endif %}
+
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link href="{{ url_for('static', filename='master.css') }}", type="text/css", rel="stylesheet">
+
+</head>
+<body>
+  <div class="topnav">
+    <a class="first" href="#">Finanzer</a>
+  </div>
+  <div class="container">
+    {% block content %}
+
+    {% endblock %}
+
+  </div>
+  <div class="bottombar">
+      {% with messages = get_flashed_messages(with_categories=true) %}
+      {% if messages %}
+        {% for category, message in messages %}
+            <div class="alert alert-{{ category }}">
+                {{ message }}
+            </div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+    <div class="bottombar-element">
+        <form method="POST" action="">
+            {{ form.hidden_tag() }}
+            <fieldset class="form-group">
+               <!-- <legend class="reg-label">neue Person hinzufügen</legend>  -->
+                <div class="form-group">
+                    {{ form.username.label(class="reg-label") }}
+                    {{ form.username() }}
+                </div>
+            </fieldset>
+            <div class="form-group m">
+                {{ form.submit(class="btn") }}
+            </div>
+        </form>
+    </div>
+    <div class="bottombar-element right">
+      <p>Stornieren</p>
+    </div>
+  </div>
+  <!-- Optional JavaScript -->
+  <!-- jQuery first, then Popper.js, then Bootstrap JS
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    -->
+</body>
+</html>