back to almost recent additions... need to do UI for profile and messaging

app/logic.py

@@ -1,11 +1,11 @@
 # Site Back-End Logic
 from hmac import new
-import string, secrets
 from flask import Blueprint, render_template, request, flash, redirect, url_for
 from flask_login import login_user, login_required, logout_user, current_user
 from werkzeug.security import generate_password_hash, check_password_hash
 from .models import User, Message
 from . import db
+import string, secrets
 
 logic = Blueprint('logic', __name__)
 
@@ -49,13 +49,38 @@ def profile():
 
     return render_template("profile.html", user=current_user)
 
+recipient_id = None
 
 @logic.route('/matchbook', methods=['GET', 'POST'])
 @login_required
 def matchbook():
     all_users = User.query.all()
+
+    if request.method == 'POST':
+        global recipient_id
+        recipient_id = request.form.get('message_recipient')
+        return redirect(url_for('logic.messaging'))
+
     return render_template("matchbook.html", user=current_user, userlist=all_users)
 
+@logic.route('/messaging', methods=['GET', 'POST'])
+@login_required
+def messaging():
+    recipient = User.query.filter_by(id=recipient_id).first()
+
+    sent_history = Message.query.filter_by(sender=current_user.id, recipient=recipient.id).all()
+    recv_history = Message.query.filter_by(sender=recipient.id, recipient=current_user.id).all()
+    joint_history = sent_history + recv_history
+    joint_history.sort(key=lambda x: x.id) # add reverse=True for descending
+    ## add filter to remove duplicate messages to self?
+    if request.method == 'POST':
+        message = request.form.get('message_box')
+        new_msg_dbcall = Message(sender=current_user.id, recipient=recipient.id, message=message)
+        db.session.add(new_msg_dbcall)
+        db.session.commit()
+
+    return render_template("messaging.html", user=current_user, recipient=recipient, msg_hist=joint_history)
+
 
 @logic.route('/login', methods=['GET', 'POST'])
 def login():

app/static/css/custom.css

@@ -0,0 +1,57 @@
+/* Font Declaration */
+@font-face {
+    font-family: 'NunitoReg';
+    src: url('/static/fonts/nunito/Nunito-Regular.ttf');
+}
+h1, h3, a, p {
+    font-family: 'NunitoReg';
+}
+h1 {
+    margin: 20px 0 20px 0;
+}
+/* Major */
+body {
+    padding-bottom: 50px;
+}
+/* Navbar */
+nav.navbar {
+    background-color: #ff3333;
+    max-width: 50%;
+    position: relative;
+    margin: auto;
+    border-radius: 0 0 25px 25px;
+}
+.navbar-brand {
+    filter: invert(100%) sepia(3%) saturate(0%) hue-rotate(271deg) brightness(104%) contrast(101%);
+    width: 50px;
+}
+nav a, .navbar-text, .navbar-toggler-icon {
+    color: white;
+}
+.navbar-text {
+    font-weight: bolder;
+    font-size: large;
+    padding-right: 20px;
+}
+/* Images */
+img {
+    max-width: 250px;
+    max-height: 250px;
+    margin: 20px 0 20px 0;
+}
+/* Input */
+.btn {
+    background-color: #ff3333;
+    border-color: #ff3333;
+}
+input {
+    max-width: 200px;
+}
+
+/* Backgrounds */
+.matchbook-bg {
+    /*background-color:  #ffb3b3;*/
+    background-color: white;
+    width: 500px;
+    border-radius: 25%;
+}

app/static/icons/balloon-heart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-balloon-heart" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721L8 2.42Zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063.045.041.089.084.132.129.043-.045.087-.088.132-.129 3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3.177 3.177 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398Z"/>
+</svg>

app/templates/base.html

@@ -14,11 +14,17 @@
             href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
             crossorigin="anonymous"
         />
+        <link
+            rel="stylesheet"
+            href="static/css/custom.css"
+        />
         <title>{% block title %}Home{% endblock %}</title>
     </head>
 
     <body>
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <nav class="navbar navbar-expand-md">
+            <img src="static/icons/balloon-heart.svg" class="navbar-brand">
+            <p class="navbar-text">Matcsh.</p>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"> <!-- for mobile devices -->
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -32,6 +38,7 @@
                     <a class="nav-item nav-link" id="login" href="/login">Login</a>
                     <a class="nav-item nav-link" id="register" href="/register">Register</a>
                     {% endif %}
+                </div>
             </div>
         </nav>
         <!-- For Flash Errors to User -->

app/templates/matchbook.html

@@ -2,26 +2,25 @@
 
 {% block content %}
 
-
-<h1>Matchbook</h1>
-<ul class="list-group list-group-flush" id="matchbooklist">
-    {% for user in userlist %}
-    <li class="list-group-item">
-        {% if user.profile_image %}
-            <img src="static/uploads/{{ user.profile_image }}" witdh="100" height="100">
-        {% else %}
-            <img src="static/uploads/default.png" width="100" height="100">
-        {% endif %}
-        <p>{{ user.firstname }}</p>
-        <p>{{ user.lastname }}</p>
-        <p>{{ user.gender }} , {{ user.age }}</p>
-        <p>{{ user.description }}</p>
-        <form method="POST">
-            <button type="submit" class="btn btn-primary">Message</button>
-        </form>
-    </li>
-    {% endfor %}
-
-</ul>
-
+<div class="mx-auto text-center">
+    <h1>Matchbook</h1>
+    <ul class="list-group list-group-flush" id="matchbooklist">
+        {% for user in userlist %}
+        <li class="list-group-item matchbook-bg border rounded mx-auto">
+            {% if user.profile_image %}
+                <img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle">
+            {% else %}
+                <img src="static/uploads/default.png" class="border rounded-circle">
+            {% endif %}
+            <p>{{ user.firstname }}</p>
+            <p style="font-weight: 900;">{{ user.lastname }}</p>
+            <p>{{ user.gender }} , {{ user.age }}</p>
+            <p>{{ user.description }}</p>
+            <form method="POST">
+                <button type="submit" class="btn btn-primary" name="message_recipient" value="{{ user.id }}">Message</button>
+            </form>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
 {% endblock %}

app/templates/messaging.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<h1>Messaging</h1>
+{% if user.profile_image %}
+<img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle">
+{% else %}
+<img src="static/uploads/default.png" class="border rounded-cirle">
+{% endif %}
+{{ user.firstname }}
+
+{% if recipient.profile_image %}
+<img src="static/uploads/{{ recipient.profile_image }}" class="border rounded-circle">
+{% else %}
+<img src="static/uploads/default.png" class="border rounded-circle">
+{% endif %}
+{{ recipient.firstname }}
+
+<div>
+    {% for message in msg_hist %}
+        {%if message.sender == user.id %}
+        <p class="sender_msg">{{ message.datestamp }} :: {{ message.message }}</p>
+        {% else %}
+        <p class="rcvr_msg">{{ message.datestamp }} :: {{ message.message }}</p>
+        {% endif %}
+    {% endfor %}
+</div>
+
+<form method="POST">
+    <textarea name="message_box" id="message_box" cols="50" rows="3" style="resize:none;"></textarea>
+    <button type="submit" class="btn btn-primary">Send</button>
+</form>
+{% endblock %}

app/templates/profile.html

@@ -1,22 +1,23 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="mx-auto text-center">
 <h1> Your Profile</h1>
 {% if user.profile_image %}
-    <img src="static/uploads/{{ user.profile_image }}" witdh="100" height="100">
+    <img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle">
 {% else %}
-    <img src="static/uploads/default.png" width="100" height="100">
+    <img src="static/uploads/default.png" class="border rounded-circle">
 {% endif %}
 <form method="POST" action="" enctype="multipart/form-data">
     <input type="file" id="profilepic_upload" name="profilepic_upload" accept="image/png, image/jpeg">
-    <button type="submit" class="btn btn-primary">Upload</button>
+    <button type="submit" class="btn btn-primary">Update Photo</button>
 </form>
 <p>{{ user.firstname }}</p>
 <p>{{ user.lastname }}</p>
 <p>{{ user.gender }} , {{ user.age }}</p>
 <form method="POST">
-    <textarea id="description_area" name="description_area" placeholder="{{ user.description }}"></textarea>
-    <button type="submit" class="btn btn-primary">Edit</button>
+    <textarea id="description_area" name="description_area" placeholder="{{ user.description }}" style="resize:none;" rows="3" cols="40"></textarea>
+    <button type="submit" class="btn btn-primary">Update Description</button>
 </form>
 <form method="POST">
     <label for="passwd_1"></label>
@@ -38,3 +39,4 @@
     <button type="submit" class="btn btn-primary">Update Password</button>
 </form>
 {% endblock %}
+</div>