Edit templates

app.py

@@ -18,14 +18,18 @@
 
 app = Flask(__name__)
 
+# Load the Google Sign-in API Client ID. 
 CLIENT_ID = json.loads(
     open('client_secrets.json', 'r').read())['web']['client_id']
 
-# Connect to Database and create database session
+# Connect to database and create a database session.
 engine = create_engine('sqlite:///itemcatalog.db',
                        connect_args={'check_same_thread': False})
 
+# Bind the above engine to a session.
 Session = sessionmaker(bind=engine)
+
+# Create a Session object.
 session = Session()
 
 
@@ -34,7 +38,10 @@
 @app.route('/catalog/')
 @app.route('/catalog/items/')
 def home():
-    return render_template('index.html')
+    categories = session.query(Category).all()
+    items = session.query(Item).all()
+    return render_template(
+        'index.html', categories=categories, items=items)
 
 
 # Create anti-forgery state token
@@ -125,9 +132,9 @@ def gconnect():
     login_session['user_id'] = user_id
 
     output = ''
-    output += '<h1>Welcome, '
+    output += '<h2>Welcome, '
     output += login_session['username']
-    output += '!</h1>'
+    output += '!</h2>'
     output += '<img src="'
     output += login_session['picture']
     output += ' " style = "width: 300px; height: 300px; '
@@ -203,19 +210,48 @@ def get_user_id(email):
         return None
 
 
-@app.route("/add_category")
+@app.route("/catalog/category/new/", methods=['GET', 'POST'])
 def add_category():
-    pass
-
+    if 'username' not in login_session:
+        flash("You were not authorised to access that page.\
+              Please log in to continue.")
+        return redirect(url_for('login'))
+    elif request.method == 'POST':
+        if request.form['new-category-name'] == '':
+            flash('The category cannot be empty.')
+            return redirect(url_for('home'))
+
+        new_category = Category(
+            name=request.form['new-category-name'],
+            user_id=login_session['user_id'])
+        session.add(new_category)
+        session.commit()
+        flash('New category %s successfully created!' % new_category.name)
+        return redirect(url_for('home'))
+    else:
+        return render_template('new-category.html')
 
-@app.route("/add_item/<int:category_id>/")
-def add_item(category_id):
-    pass
 
+@app.route("/catalog/item/new/")
+def add_item():
+    if 'username' not in login_session:
+        flash("You were not authorised to access that page.\
+              Please log in to continue.")
+        return redirect(url_for('login'))
+    elif request.method == 'POST':
 
-@app.route("/items")
-def all_items():
-    pass
+        flash('New item successfully created!')
+        return redirect(url_for('home'))
+    else:
+        items = session.query(Item).\
+                filter_by(user_id=login_session['user_id']).all()
+        categories = session.query(Category).\
+            filter_by(user_id=login_session['user_id']).all()
+        return render_template(
+            'new-item.html',
+            items=items,
+            categories=categories
+        )
 
 
 if __name__ == "__main__":

database_setup.py

@@ -25,7 +25,7 @@ class Category(Base):
     __tablename__ = "category"
 
     id = Column(Integer, primary_key=True)
-    category = Column(String(50), nullable=False)
+    name = Column(String(50), nullable=False)
     user_id = Column(Integer, ForeignKey('user.id'))
     user = relationship(User)
 
@@ -35,7 +35,7 @@ def serialize(self):
 
         return {
             'id': self.id,
-            'category': self.category
+            'name': self.name
         }
 
 

fake_db_populator.py

@@ -0,0 +1,42 @@
+from database_setup import User, Base, Item, Category
+from sqlalchemy.orm import sessionmaker
+from sqlalchemy import create_engine
+
+
+engine = create_engine('sqlite:///itemcatalog.db',
+                       connect_args={'check_same_thread': False})
+
+# Bind the above engine to a session.
+Session = sessionmaker(bind=engine)
+
+# Create a Session object.
+session = Session()
+
+user1 = User(
+    name='Subhadeep',
+    email='[email protected]',
+    picture='https://img.com/sdf'
+)
+
+session.add(user1)
+session.commit()
+
+category1 = Category(
+    name='Snowboarding',
+    user=user1
+)
+
+session.add(category1)
+session.commit()
+
+item1 = Item(
+    name='Snowboard',
+    description='It is an exciting snowboard. You will feel like in heaven after driving it!',
+    category=category1,
+    user=user1
+)
+
+session.add(item1)
+session.commit()
+
+print('Finished populating the database!')

templates/index.html

@@ -14,7 +14,7 @@ <h1>Welcome to Item Catalog App!</h1>
     <div class="row">
       <div class="col-md-12">
         <a href="{{ url_for('add_category') }}"><button class="btn btn-primary"><i class="fas fa-plus text-and-icon"></i>Add Category</button></a>
-        <a href="{{ url_for('all_items') }}"><button class="btn btn-success" style="margin-left: 10px;"><i class="fas fa-plus text-and-icon"></i>Add Item</button></a>
+        <a href="{{ url_for('add_item') }}"><button class="btn btn-success" style="margin-left: 10px;"><i class="fas fa-plus text-and-icon"></i>Add Item</button></a>
       </div>
     </div>
     {% endif %}
@@ -24,23 +24,18 @@ <h1>Welcome to Item Catalog App!</h1>
             <div class="row">
               <div class="col-md-3" style="background-color:white; padding-top: 8px;">
                 <h2>Category</h2><hr>
-                <p><a href="#">Chips</a></p>
-                <a href="#"><p>Computer Parts</p></a>
+                {% for category in categories %}
+                  <a href="#"><p>{{ category.name }}</p></a>
+                {% endfor %}
               </div>
 
               <div class="offset-md-1"></div>
 
               <div class="col-md-8" style="background-color:white; padding-top: 8px;">
                 <h2>Latest Items</h2><hr>
-                <a href="#"><p>Apple iPhone</p></a>
-                <a href="#"><p>Dell Inspiron 5559</p></a>
-                <a href="#"><p>iPhone 2</p></a>
-                <a href="#"><p>MacBook Air</p></a>
-                <a href="#"><p>Python Cookbook</p></a>
-                <a href="#"><p>Adorian's macBook X Pro</p></a>
-                <a href="#"><p>Adorian's macBook X Pro</p></a>
-                <a href="#"><p>Adorian's macBook X Pro</p></a>
-                <a href="#"><p>Adorian's macBook X Pro</p></a>
+                {% for item in items %}
+                  <a href="#"><p>{{ item.name }}</p></a>
+                {% endfor %}
               </div>
             </div>
           </div>

templates/layout.html

@@ -33,7 +33,7 @@
         {% for message in messages %}
             {% if 'username' in session %}
                 <div class="alert alert-success alert-dismissible fade show mb-0 text-center" role="alert">
-            {% elif message == 'You have been successfully logged out!' %}
+            {% elif (message == 'You have been successfully logged out!') %}
                 <div class="alert alert-success alert-dismissible fade show mb-0 text-center" role="alert">
             {% else %}
                 <div class="alert alert-danger alert-dismissible fade show mb-0 text-center" role="alert">
@@ -61,7 +61,7 @@
                   <a class="nav-link" href="{{ url_for('home') }}">Home <span class="sr-only">(current)</span></a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="{{ url_for('all_items') }}">Catalog <span class="sr-only">(catalog)</span></a>
+                  <a class="nav-link" href="{{ url_for('add_item') }}">Catalog <span class="sr-only">(catalog)</span></a>
                 </li>
 
                 {% if 'username' in session %}

templates/new-category.html

@@ -7,14 +7,16 @@
             <div class="col-md-7">
                <h1>Create New Category</h1>
 
-               <form>
+               <form name="new-category" method="POST">
                     <div class="form-group">
-                      <input type="text" class="form-control">
+                      <input name="new-category-name" type="text" class="form-control" required>
                     </div>
 
                     <button type="submit" class="btn btn-primary"><i class="fas fa-save text-and-icon"></i></i>Submit</button>
-                    <button type="button" class="btn btn-danger"><i class="fas fa-times text-and-icon"></i>Cancel</button>
-                  </form>
+                    <a href="{{ url_for('home') }}">
+                        <button type="button" class="btn btn-danger"><i class="fas fa-times text-and-icon"></i>Cancel</button>
+                    </a>
+                </form>
 
             </div>
         </div>

templates/new-item.html

@@ -7,21 +7,22 @@
             <div class="col-md-7">
                <h1>Create new item</h1>
 
-               <form>
+               <form method="POST">
                     <div class="form-group">
                       <label for="exampleFormControlInput1">Title</label>
-                      <input type="text" class="form-control">
+                      <input name="title" type="text" class="form-control">
                     </div>
                     <div class="form-group">
                       <label for="exampleFormControlSelect1">Category</label>
-                      <select class="form-control" id="exampleFormControlSelect1">
-                        <option data-tokens="mustard">Laptops</option>
-                        <option data-tokens="olive">MacBook</option>
+                      <select name="category" class="form-control" id="exampleFormControlSelect1" required>
+                        {% for category in categories %}
+                          <option value="{{ category.name }}">{{ category.name }}</option>
+                        {% endfor %}
                       </select>
                     </div>                          
                     <div class="form-group">
                       <label for="exampleFormControlTextarea1">Description</label>
-                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                      <textarea name="description" class="form-control" id="exampleFormControlTextarea1" rows="5" required></textarea>
                     </div>
 
                     <button type="submit" class="btn btn-primary">Submit</button>