with logo

forms.py

@@ -1,8 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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)

geruecht/__init__.py

@@ -0,0 +1,10 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = '0a657b97ef546da90b2db91862ad4e29'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
+db = SQLAlchemy(app)
+
+from geruecht import routes

geruecht/forms.py

@@ -0,0 +1,16 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, SubmitField
+from wtforms.validators import DataRequired, Length, ValidationError
+from geruecht.model import User
+
+
+class RegistrationForm(FlaskForm):
+    username = StringField('Name', validators=[DataRequired(), Length(min=2, max=20)])
+    submit = SubmitField('Create')
+
+    def validate_username(self, username):
+
+        user = User.query.filter_by(username=username.data).first()
+
+        if user:
+            raise ValidationError('Bist du behindert!? Der Name ist vergeben!!')

geruecht/model.py

@@ -0,0 +1,13 @@
+from geruecht import db
+
+
+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 add(self, value):
+        self.sum += value
+
+    def __repr__(self):
+        return f"User('{self.username}', '{self.sum}')"

geruecht/routes.py

@@ -0,0 +1,46 @@
+from flask import render_template, url_for, redirect, flash, jsonify
+from geruecht import app, db
+from geruecht.forms import RegistrationForm
+from geruecht.model import User
+
+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():
+        user = User(username=form.username.data)
+        db.session.add(user)
+        db.session.commit()
+        flash(f'Person wurde angelegt: {form.username.data}', 'success')
+        return redirect(url_for('home'))
+    return render_template('home.html', users=User.query.all(), form=form)
+
+
+@app.route("/<string:username>/add-<int:value>", methods=['POST'])
+def add(username, value):
+    user = User.query.filter_by(username=username).first()
+    user.add(value)
+    db.session.commit()
+    flash(f'{username} wurde {value}€ hinzugefügt', 'success')
+    return jsonify({'data': user.sum})
+
+
+@app.route("/about")
+def about():
+    return render_template('about.html', title='about')

geruecht/static/master.css

@@ -4,11 +4,11 @@ body {
 
 .topnav {
   background-color: #077BCB;
+  height: 61;
   overflow: hidden;
 }
 
-.topnav a {
+.blue-button {
-  float: left;
   color: white;
   background-color: #055288;
   text-align: center;
@@ -20,18 +20,36 @@ body {
   border-style: solid;
   border-radius: 10px;
   transition-duration: 0.4s;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+/*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
 }
 
-.topnav a:hover {
+.no-mg {
+  margin: 0;
+}
+
+.no-pd {
+  padding: 0;
+}
+
+.blue-button:hover {
   background: white;
   color: black;
 }
 
-.topnav a.first {
+.first {
+  float: left;;
   margin-left: 10%;
 }
 
+.last {
+  float: right;
+}
+
+.logo-nav {
+  height: 61px;
+  width: auto;
+}
+
 .geruecht {
   margin: 5px auto;
   display: table;
@@ -75,6 +93,7 @@ body {
 .bottombar-element {
   float: left;
   line-height: auto;
+  vertical-align: middle;
 }
 
 .right {
@@ -112,3 +131,11 @@ body {
   border-radius: 5px;
   padding: 6px;
 }
+
+.alert-error {
+  background: darksalmon;
+  border: 1px solid darkred;
+  color: darkred;
+  border-radius: 5px;
+  padding: 6px;
+}

geruecht/templates/home.html

@@ -0,0 +1,44 @@
+{% extends "layout.html" %}
+{% block content %}
+    {% for user in users %}
+        <div class="geruecht">
+    <div class="g-item">
+      <p>{{ user.username }}</p>
+    </div>
+    <button class="g-item button" id="{{ user.id }}-2">
+      <p>+2 &euro;</p>
+    </button>
+    <div class="g-item button" id="{{ user.username }}-1">
+      <p>+1 &euro;</p>
+    </div>
+    <div class="g-item button" id="{{ user.username }}-050">
+      <p>+0,5 &euro;</p>
+    </div>
+    <div class="g-item button" id="{{ user.username }}-040">
+      <p>+0,4 &euro;</p>
+    </div>
+    <div class="g-item button" id="{{ user.username }}-020">
+      <p>+0,2 &euro;</p>
+    </div>
+    <div class="g-item button" id="{{ user.username }}-010">
+      <p>+0,1 &euro;</p>
+    </div>
+    <div class="g-item">
+      <p id="{{ user.id }}-sum">{{ user.sum }}</p>
+    </div>
+  </div>
+<script type="text/javascript">
+    $(document).ready(function(){
+      $("#{{ user.id }}-2").click(function(){
+        $("#{{ user.id }}-sum").text("Hello world!");
+      });
+    });
+  </script>
+<!-- url: "{{ url_for('add', username=user.username, value=2) }}",
+            type: "POST",
+            success: function(resp){
+                $('div#{{ user.id }}-sum').text(resp.data);
+            } -->
+    {% endfor %}
+{% endblock %}
+

geruecht/templates/layout.html

@@ -16,7 +16,8 @@
 </head>
 <body>
   <div class="topnav">
-    <a class="first" href="#">Finanzer</a>
+    <img class="logo-nav first" src="{{ url_for('static', filename='img/logo.png') }}">
+    <a class="last blue-button" href="#">Finanzer</a>
   </div>
   <div class="container">
     {% block content %}
@@ -33,6 +34,13 @@
             </div>
         {% endfor %}
       {% endif %}
+      {% if form.username.errors %}
+        {% for error in form.username.errors %}
+            <div class="alert alert-error">
+                <span>{{ error }}</span>
+            </div>
+        {% endfor %}
+      {% endif %}
     {% endwith %}
     <div class="bottombar-element">
         <form method="POST" action="">
@@ -45,14 +53,18 @@
                 </div>
             </fieldset>
             <div class="form-group m">
-                {{ form.submit(class="btn") }}
+                {{ form.submit(class="blue-button no-mg") }}
             </div>
         </form>
     </div>
-    <div class="bottombar-element right">
+    <div class="right blue-button buttombar-element no-mg no-pd">
       <p>Stornieren</p>
     </div>
   </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
+</script>
+
   <!-- 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>

run.py

@@ -0,0 +1,9 @@
+from geruecht import app
+
+
+
+
+
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0')

templates/home.html

@@ -1,32 +0,0 @@
-{% 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 %}
-