feat: add cafes, demo pictures and show cafes list

Coffeefi/app.py

@@ -1,17 +1,62 @@
 from flask import Flask, render_template, url_for, redirect
 from flask_bootstrap import Bootstrap
 from flask_wtf import FlaskForm
-from wtforms import StringField, PasswordField, SelectField
+from wtforms import StringField, SubmitField, SelectField
 from wtforms.validators import DataRequired, URL
 import csv
 
 app = Flask(__name__)
+# add flask secret key
+app.secret_key = b'\xcb\x96KB\xb0\xa6p\x1c\x94/\xe3s\x0fOe+'
+#  add bootstrap to flask
+Bootstrap(app)
+
+
+class CafeForm(FlaskForm):
+    cafe = StringField('Cafe name', validators=[DataRequired()])
+    location = StringField("Cafe Location on Google Maps (URL)", validators=[DataRequired(), URL()])
+    open = StringField("Opening Time e.g. 8AM", validators=[DataRequired()])
+    close = StringField("Closing Time e.g. 5:30PM", validators=[DataRequired()])
+    coffee_rating = SelectField("Coffee Rating", choices=["☕️", "☕☕", "☕☕☕", "☕☕☕☕", "☕☕☕☕☕"],
+                                validators=[DataRequired()])
+    wifi_rating = SelectField("Wifi Strength Rating", choices=["✘", "💪", "💪💪", "💪💪💪", "💪💪💪💪", "💪💪💪💪💪"],
+                              validators=[DataRequired()])
+    power_rating = SelectField("Power Socket Availability",
+                               choices=["✘", "🔌", "🔌🔌", "🔌🔌🔌", "🔌🔌🔌🔌", "🔌🔌🔌🔌🔌"],
+                               validators=[DataRequired()])
+    submit = SubmitField('Submit')
 
 
 @app.route('/')
 def home():
     return render_template("index.html")
 
 
+@app.route('/add', methods=['GET', 'POST'])
+def add_cafe():
+    form = CafeForm()
+    if form.validate_on_submit():
+        with open("cafe-data.csv", mode="a", encoding="utf-8") as csv_file:
+            csv_file.write(f"\n{form.cafe.data},"
+                           f"{form.location.data},"
+                           f"{form.open.data},"
+                           f"{form.close.data},"
+                           f"{form.coffee_rating.data},"
+                           f"{form.wifi_rating.data},"
+                           f"{form.power_rating.data}")
+        return redirect(url_for('cafes'))
+    return render_template('add.html', form=form)
+
+
+@app.route('/cafes')
+def cafes():
+    with open('cafe-data.csv', newline='', encoding='utf-8') as csv_file:
+        csv_data = csv.reader(csv_file, delimiter=',')
+        list_of_row = []
+        for row in csv_data:
+            list_of_row.append(row)
+    return render_template("cafes.html", cafes=list_of_row)
+
+
 if __name__ == '__main__':
     app.run()

Coffeefi/static/css/style.css

@@ -0,0 +1,22 @@
+body {
+    background-color: #333;
+    color: white;
+}
+
+a {
+    color: #ffc107;
+}
+
+.jumbotron {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    height: 100vh;
+    color: white;
+    background-color: #333;
+}
+
+.space-above {
+    margin-top: 20px;
+    padding-top: 20px;
+}

Coffeefi/templates/add.html

@@ -0,0 +1,42 @@
+{# import flask bootstrap style#}
+{% extends 'bootstrap/base.html' %}
+
+{# import wtform #}
+{% import "bootstrap/wtf.html" as wtf %}
+
+
+{# adding custom styles #}
+{% block styles %}
+    {# import everything from bootstrap #}
+    {{ super() }}
+    {#custom style link#}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+{% endblock %}
+
+
+{# Daynamically change the title of the website #}
+
+{% block title %}Add Cafes{% endblock %}
+
+{#website body content#}
+
+{% block content %}
+
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-8">
+
+                <h1> Add a new cafe into the database </h1>
+
+                {# Generatating wtform automatically #}
+
+                {{ wtf.quick_form(form, novalidate=True) }}
+
+                <p class="space-above">
+                    <a href="{{ url_for('cafes') }}" class="btn btn-warning btn-lg"> See All Cafes </a>
+                </p>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

Coffeefi/templates/cafes.html

@@ -1,10 +1,48 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
+{# import flask bootstrap style#}
+{% extends 'bootstrap/base.html' %}
+
+{# adding custom styles #}
+{% block styles %}
+    {# import everything from bootstrap #}
+    {{ super() }}
+    {#custom style link#}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+{% endblock %}
+
+
+{# Daynamically change the title of the website #}
+
+{% block title %}All Cafes{% endblock %}
+
+{#website body content#}
+
+{% block content %}
+
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                All Cafes
+
+
+                <table class="table">
+                    {% for row in cafes %}
+
+                        <tr>
+                            {% for item in row %}
+                                {% if item[0:4] == "http" %}
+                                    <td><a href="{{ item }}">Maps Link</a></td>
+                                {% else %}
+                                    <td>{{ item }}</td>
+                                {% endif %}
+
+                            {% endfor %}
+                        </tr>
+
+                    {% endfor %}
+                </table>
+                <p><a href="{{ url_for('home') }}" class="btn btn-warning btn-lg">Return to Home Page</a></p>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

Coffeefi/templates/index.html

@@ -1,10 +1,33 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
+{# import flask bootstrap style#}
+{% extends 'bootstrap/base.html' %}
+
+{# adding custom styles #}
+{% block styles %}
+    {# import everything from bootstrap #}
+    {{ super() }}
+    {#custom style link#}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+{% endblock %}
+
+
+{# Daynamically change the title of the website #}
+
+{% block title %}Coffee & Wi-fi{% endblock %}
+
+{#website body content#}
+
+{% block content %}
+
+    <div class="jumbotron text-center">
+        <div class="container">
+            <h1 class="display-4">Coffee & Wi-fi</h1>
+            <p class="lead">Want to work in a cafe but need wifi?</p>
+            <hr class="my-4">
+            <p>You've found the right place! Checkout my collection of cafes with data on power socket availability,
+                wi-fi
+                speed and coffee quality.</p>
+            <a href="{{ url_for('cafes') }}" class="btn btn-warning btn-lg">Show Me</a>
+        </div>
+    </div>
+
+{% endblock %}