Dynamically generate officer listing on about page

acmsite/__init__.py

@@ -62,5 +62,8 @@ def create_app():
     from .admin import bp as admin_bp
     app.register_blueprint(admin_bp)
 
+    from .api import bp as api_bp
+    app.register_blueprint(api_bp)
+
 
     return app

acmsite/admin/__init__.py

@@ -288,7 +288,7 @@ def upload_photo_post():
     if not current_user.is_admin:
         return error_json("Unauthorized")    
 
-    img_path = os.path.join(current_app.config["UPLOAD_FOLDER"], f"{current_user.username()}.png")
+    img_path = os.path.join("acmsite/" + current_app.config["UPLOAD_FOLDER"], f"{current_user.username()}.png")
     b64_string = request.data.decode()
     b64_string += '=' * (len(b64_string) % 4)
 

acmsite/api/__init__.py

@@ -0,0 +1,48 @@
+from os.path import exists
+from flask import Blueprint, jsonify, url_for, current_app
+import os
+import datetime
+
+from acmsite.models import Event, Officer, User
+
+bp = Blueprint("api", __name__, url_prefix="/api")
+
+
+def json(obj):
+    """
+    Calls a "create_json" method on the passed in object. Write it yourself!
+    """
+    return obj.create_json()
+
+@bp.route("/events/upcoming")
+def upcoming_events():
+    event_list = Event.query.filter(Event.start_time >
+                                    datetime.datetime.now()).all()
+    
+    return jsonify(list(map(json, event_list)))
+
+@bp.route("/officers/current")
+def current_officers():
+    now = datetime.datetime.now()
+    officers = Officer.query.filter(Officer.term_start < now, Officer.term_end >
+                                    now).all()
+
+    officers_complete = []
+    for o in officers:
+        u = User.query.filter_by(id = o.user_id).first()
+        if u is None:
+            continue # Broken reference, continue
+        img = url_for('static', filename="img/officers/placeholder.png")
+        if exists(f"acmsite/{current_app.config['UPLOAD_FOLDER']}/{u.username()}.png"):
+            img = url_for("main.officer_images", username="f{u.username()}.png")
+        officers_complete.append({
+                "id": o.id,
+                "position": o.position,
+                "term_end": o.term_end,
+                "term_start": o.term_start,
+                "name": u.first_name + " " + u.last_name,
+                "img": img
+            }) 
+
+
+    return jsonify(list(officers_complete))

acmsite/main/__init__.py

@@ -1,5 +1,5 @@
 import datetime
-from flask import Blueprint, render_template, abort, redirect
+from flask import Blueprint, current_app, render_template, abort, redirect, send_from_directory, send_file
 from acmsite.models import Event, Link
 
 bp = Blueprint('main', __name__)
@@ -21,6 +21,12 @@ def events():
 def join():
     return render_template("join.html")
 
+@bp.route("/officers/<path:username>")
+def officer_images(username):
+    print(current_app.config["UPLOAD_FOLDER"])
+    print(username)
+    return send_from_directory(current_app.config["UPLOAD_FOLDER"], username)
+
 
 @bp.route("/<string:slug>")
 def shortlink(slug):

acmsite/templates/about.html

@@ -13,67 +13,72 @@ very friendly. You can find a list of our events and meetings <a href="{{
                                                                        }}">here</a>.</p>
 
 <h4>Exec Board</h4>
-<!-- TODO: Make this dynamic -- create officers table? <22-03-24, Cara> -->
 <div class="row">
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/avenat.png')
+       <div class="card" id="president">
+           <img class="card-img-top" id="President-img"src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="President"> 
            <div class="card-body">
                 <h5 class="card-title">President</h5> 
+                <p class="card-text" id="President-name">Unavailable</p>
            </div>
        </div>
    </div> 
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/nitty.png')
+       <div class="card" id="vice-president">
+           <img class="card-img-top" id="Vice President-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Vice President"> 
            <div class="card-body">
                 <h5 class="card-title">Vice President</h5> 
+                <p class="card-text" id="Vice President-name">Unavailable</p>
            </div>
        </div>
    </div> 
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/ajhenbest.png')
+       <div class="card" id="treasurer">
+           <img class="card-img-top" id="Treasurer-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Treasurer"> 
            <div class="card-body">
                 <h5 class="card-title">Treasurer</h5> 
+                <p class="card-text" id="Treasurer-name">Unavailable</p>
            </div>
        </div>
    </div> 
 </div>
 <div class="row">
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/gdshiu.png')
+       <div class="card" id="secretary">
+           <img class="card-img-top" id="Secretary-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Secretary"> 
            <div class="card-body">
                 <h5 class="card-title">Secretary</h5> 
+                <p class="card-text" id="Secretary-name">Unavailable</p>
            </div>
        </div>
    </div> 
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/gcampbell2.png')
+       <div class="card" id="pr-chair">
+           <img class="card-img-top" id="PR Chair-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="PR Chair"> 
            <div class="card-body">
                 <h5 class="card-title">PR Chair</h5> 
+                <p class="card-text" id="PR Chair-name">Unavailable</p>
            </div>
        </div>
    </div> 
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/mdidenko.png')
+       <div class="card" id="events-coordinator">
+           <img class="card-img-top" id="Events Coordinator-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Events Coordinator"> 
            <div class="card-body">
                 <h5 class="card-title">Events Coordinator</h5> 
+                <p class="card-text" id="Events Coordinator-name">Unavailable</p>
            </div>
        </div>
    </div>  
@@ -81,32 +86,35 @@ very friendly. You can find a list of our events and meetings <a href="{{
 
 <div class="row">
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/djreynolds1.png')
+       <div class="card" id="hackathon-manager-1">
+           <img class="card-img-top" id="Hackathon Manager 1-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Hackathon Manager"> 
            <div class="card-body">
                 <h5 class="card-title">Hackathon Manager</h5> 
+                <p class="card-text" id="Hackathon Manager 1-name">Unavailable</p>
            </div>
        </div>
    </div>  
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/rganguli.png')
+       <div class="card" id="hackathon-manager-2">
+           <img class="card-img-top" id="Hackathon Manager 2-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="Hackathon Manager"> 
            <div class="card-body">
                 <h5 class="card-title">Hackathon Manager</h5> 
+                <p class="card-text" id="Hackathon Manager 2-name">Unavailable</p>
            </div>
        </div>
    </div>  
    <div class="col"> 
-       <div class="card">
-           <img class="card-img-top" src="{{ url_for('static',
-                                          filename='img/officers/csalter2.png')
+       <div class="card" id="system-administrator">
+           <img class="card-img-top" id="System Administrator-img" src="{{ url_for('static',
+                                          filename='img/officers/placeholder.png')
                                           }}" alt="System Administrator"> 
            <div class="card-body">
                 <h5 class="card-title">System Administrator</h5> 
+                <p class="card-text" id="System Administrator-name">Unavailable</p>
            </div>
        </div>
    </div>  
@@ -162,4 +170,27 @@ officers in the chapter system.</p>
             Epsilon</a> -- The CS honor society</li>
 </ul>
     
+<script charset="utf-8">
+   pres = document.querySelector("#president")
+   vp = document.querySelector("#vice-president")
+   sec = document.querySelector("#secretary")
+   tres = document.querySelector("#treasurer")
+   hm1 = document.querySelector("#hackathon-manager-1")
+   hm2 = document.querySelector("#hackathon-manager-2")
+   pr = document.querySelector("#pr-chair")
+   sys = document.querySelector("#system-administrator")
+   ec = document.querySelector("#events-coordinator")
+    
+    officers = new Request("/api/officers/current")
+    fetch(officers).then(async (res) => {
+        data = await res.json()
+        console.log(data)
+
+        for (var i = 0; i < data.length; i++) {
+            let title = data[i]["position"]
+            document.getElementById(title + "-name").innerHTML = data[i]["name"]
+            document.getElementById(title + "-img").src = data[i]["img"]
+        }
+    });
+</script>
 {% endblock %}