Think I finally have the demonstration web application nailed down! Whew!

Author: writeson

flask-connexion-rest-part-3/config.py

@@ -15,7 +15,7 @@
 sqlite_url = "sqlite:////" + os.path.join(basedir, "people.db")
 
 # Configure the SqlAlchemy part of the app instance
-app.config["SQLALCHEMY_ECHO"] = True
+app.config["SQLALCHEMY_ECHO"] = False
 app.config["SQLALCHEMY_DATABASE_URI"] = sqlite_url
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
 

flask-connexion-rest-part-3/models.py

@@ -12,18 +12,20 @@ class Person(db.Model):
     timestamp = db.Column(
         db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
     )
-    notes = db.relationship('Note',
-                            backref=db.backref('person',
-                                               lazy='joined',
-                                               cascade='delete, delete-orphan',
-                                               single_parent=True),
-                            order_by='desc(Note.timestamp)')
+    notes = db.relationship(
+        'Note',
+        backref='person',
+        lazy='joined',
+        cascade='all, delete, delete-orphan',
+        single_parent=True,
+        order_by='desc(Note.timestamp)'
+    )
 
 
 class Note(db.Model):
     __tablename__ = 'note'
     note_id = db.Column(db.Integer, primary_key=True)
-    person_id = db.Column(db.Integer, db.ForeignKey('person.person_id'), nullable=False)
+    person_id = db.Column(db.Integer, db.ForeignKey('person.person_id'))
     content = db.Column(db.String, nullable=False)
     timestamp = db.Column(
         db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow

flask-connexion-rest-part-3/people.py

@@ -35,7 +35,7 @@ def read_one(person_id):
     # Build the initial query
     person = Person.query \
         .filter(Person.person_id == person_id) \
-        .join(Note) \
+        .outerjoin(Note) \
         .options(db.joinedload(Person.notes)) \
         .one_or_none()
 

flask-connexion-rest-part-3/server.py

@@ -30,27 +30,30 @@ def home():
 
 # Create a URL route in our application for "/people"
 @connex_app.route("/people")
-def people():
+@connex_app.route("/people/<int:person_id>")
+def people(person_id=""):
     """
     This function just responds to the browser URL
     localhost:5000/people
 
     :return:        the rendered template "people.html"
     """
-    return render_template("people.html")
+    return render_template("people.html", person_id=person_id)
 
 
 # Create a URL route to the notes page
-@connex_app.route("/notes/<int:person_id>")
-def notes(person_id):
+@connex_app.route("/people/<int:person_id>")
+@connex_app.route("/people/<int:person_id>/notes")
+@connex_app.route("/people/<int:person_id>/notes/<int:note_id>")
+def notes(person_id, note_id=""):
     """
     This function responds to the browser URL
     localhost:5000/notes/<person_id>
 
     :param person_id:   Id of the person to show notes for
     :return:            the rendered template "notes.html"
     """
-    return render_template("notes.html", person_id=person_id)
+    return render_template("notes.html", person_id=person_id, note_id=note_id)
 
 
 if __name__ == "__main__":

flask-connexion-rest-part-3/static/css/home.css

@@ -2,6 +2,11 @@
  * CSS stylesheet for home page
  */
 
+div.blog {
+    margin: 10px 10px 10px 10px;
+    border: 2px solid darkgrey;
+}
+
 .blog table {
     border-collapse: collapse;
     width: 100%;
@@ -10,22 +15,16 @@
 .blog table caption {
     font-weight: bold;
     padding: 10px 0 10px 0;
-    border-bottom: 1px solid darkgrey;
+    border-bottom: 2px solid darkgrey;
     background-color: antiquewhite;
 }
 
 .blog table thead {
     padding: 10px 0 10px 0;
 }
 
-.blog table thead tj {
-    border-right: 1px solid darkgrey;
-}
-
-
-th, td {
-    padding: 3px;
-    border: 1px solid darkgrey;
+th:not(:last-child), td:not(:last-child) {
+    border-right: 2px solid darkgrey;
 }
 
 td.name {
@@ -35,21 +34,32 @@ td.name {
 
 td.timestamp {
     text-align: center;
-    width: 230px;
+    width: 280px;
 }
 
 td.content {
     text-align: left;
+    padding-left: 5px;
 }
 
 tbody tr:nth-child(odd) {
-    background-color: lightgrey;
+    background-color: gainsboro;
 }
 
-tbody tr {
+tbody td.name, tbody td.content {
     cursor: pointer;
+    height: 33px;
+}
+
+thead tr {
+    height: 33px;
+    border-bottom: 2px solid darkgrey;
+}
+
+tbody tr:not(:last-child){
+    border-bottom: 2px solid darkgrey;
 }
 
 tbody tr:hover {
-    background-color: aqua;
+    background-color: powderblue;
 }

flask-connexion-rest-part-3/static/css/notes.css

@@ -15,8 +15,8 @@
     margin-left: auto;
     margin-right: auto;
     padding: 5px;
-    border: 1px solid lightgrey;
-    border-radius: 3px;
+    border: 2px solid darkgrey;
+    border-radius: 4px;
     margin-bottom: 5px;
 }
 
@@ -40,51 +40,67 @@ input[type=text] {
     width: 550px;
 }
 
-.notes {
-    width: 95%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 5px;
+div.notes {
+    margin: 10px 10px 10px 10px;
+    border: 2px solid darkgrey;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
 }
 
-table, caption, th, td {
-    border: 1px solid lightgrey;
-}
-
 table caption {
-    height: 33px;
     font-weight: bold;
-    padding-top: 5px;
-    border-bottom: none;
+    padding: 10px 0 10px 0;
+    border-bottom: 2px solid darkgrey;
+    background-color: antiquewhite;
 }
 
-tr {
-    cursor: pointer;
-    height: 33px;
+.blog table thead {
+    padding: 10px 0 10px 0;
 }
 
-tr:nth-child(even) {
-    background-color: #f0f0f0
+th:not(:last-child), td:not(:last-child) {
+    border-right: 2px solid darkgrey;
 }
 
-tbody td.content {
-    text-align: left;
-    padding: 0 5px 0 5px;
+td.name {
+    text-align: center;
+    width: 175px;
 }
 
-td {
+td.timestamp {
     text-align: center;
+    width: 230px;
 }
 
-tbody tr:hover {
-    background-color: cornsilk;
+td.content {
+    text-align: left;
+    padding-left: 5px;
+}
+
+tbody tr:nth-child(odd) {
+    background-color: gainsboro;
+}
+
+tbody tr {
+    cursor: pointer;
+    height: 33px;
 }
 
+thead tr {
+    height: 33px;
+    border-bottom: 2px solid darkgrey;
+}
+
+tbody tr:not(:last-child){
+    border-bottom: 2px solid darkgrey;
+}
+
+tbody tr:hover {
+    background-color: powderblue;
+}
 .content {
     width: 70%;
 }

flask-connexion-rest-part-3/static/css/people.css

@@ -11,8 +11,8 @@
     margin-left: auto;
     margin-right: auto;
     padding: 5px;
-    border: 1px solid lightgrey;
-    border-radius: 3px;
+    border: 2px solid darkgrey;
+    border-radius: 4px;
     margin-bottom: 5px;
 }
 
@@ -28,44 +28,59 @@ button {
     background-color: #eee;
 }
 
-.people {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 5px;
+div.people {
+    margin: 10px 30px 10px 30px;
+    border: 2px solid darkgrey;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
 }
 
-table, caption, th, td {
-    border: 1px solid lightgrey;
+.people table caption {
+    font-weight: bold;
+    padding: 10px 0 10px 0;
+    border-bottom: 2px solid darkgrey;
+    background-color: antiquewhite;
 }
 
-table caption {
-    height: 33px;
-    font-weight: bold;
-    padding-top: 5px;
-    border-bottom: none;
+.people table thead {
+    padding: 10px 0 10px 0;
 }
 
-tr {
-    cursor: pointer;
-    height: 33px;
+th:not(:last-child), td:not(:last-child) {
+    border-right: 2px solid darkgrey;
 }
 
 tr:nth-child(even) {
-    background-color: #f0f0f0
+    background-color: gainsboro;
 }
 
 td {
     text-align: center;
 }
 
+tbody td.timestamp {
+    width: 280px;
+}
+
+tbody td.name {
+    cursor: pointer;
+    height: 33px;
+}
+
+thead tr {
+    height: 33px;
+    border-bottom: 2px solid darkgrey;
+}
+
+tbody tr:not(:last-child){
+    border-bottom: 2px solid darkgrey;
+}
+
 tbody tr:hover {
-    background-color: cornsilk;
+    background-color: powderblue;
 }
 
 .error {

flask-connexion-rest-part-3/static/js/home.js

@@ -41,7 +41,7 @@ ns.view = (function() {
     // Return the API
     return {
         build_table: function(data) {
-            var source = $('#blog-table-template').html(),
+            let source = $('#blog-table-template').html(),
                 template = Handlebars.compile(source),
                 html;
 
@@ -76,6 +76,23 @@ ns.controller = (function(m, v) {
         model.read();
     }, 100);
 
+    // handle application events
+    $('table').on('dblclick', 'tbody td.name', function(e) {
+       let $target = $(e.target).parent(),
+           person_id = $target.data('person_id');
+
+       window.location = `/people/${person_id}`;
+
+    });
+
+    $('table').on('dblclick', 'tbody td.content', function(e) {
+       let $target = $(e.target).parent(),
+           person_id = $target.data('person_id'),
+           note_id = $target.data('note_id');
+
+       window.location = `people/${person_id}/notes/${note_id}`;
+    });
+
     // Handle the model events
     $event_pump.on('model_read_success', function(e, data) {
         view.build_table(data);