added leaderboard page, improved dashboard, centered QR invite

app.py

@@ -227,8 +227,59 @@ def create_app(config=Config):
         }
         mongo.db.users.insert_one(admin_user)
         print(f"Admin {username} added! Referral code is {admin_user['referral_code']}")
+    
+    @app.route('/leaderboard')
+    def leaderboard():
+        leaders = mongo.db.pins.aggregate([
+            {
+                "$group": {
+                    "_id":"$added_by",
+                    "count": {"$sum":1}
+                }
+            },
+            {
+                "$sort": {"count":-1}
+            },
+            {
+                "$limit":10
+            },
+            {
+                "$lookup": {
+                    "from": "users",
+                    "localField": "added_by",
+                    "foreignField": "added_by",
+                    "as": "user_info"
+                }
+            },
+            {
+                "$unwind": "$user_info"
+            },
+            {
+            "$project": {
+                "_id":0,
+                "added_by": "$_id",
+                "count":1,
+                "username": "$user_info.username"
+            }
+            }
+        ])
+        #print(list(leaders))
+        cleaned_leaders=list()
+        for leader in list(leaders):
+            leader["username"] = leader["username"][0]+"***"+leader["username"][-1]
+            cleaned_leaders.append(leader)
+        if current_user.is_authenticated:
+            username = user.username
+        else:
+            username = None
+
+        return render_template('leaderboard.html', leaders=cleaned_leaders, username=username)
+        
+    
     return app
 
+    
+
 app=create_app()
 if __name__ == '__main__':
     app.run(debug=True)

static/styles.css

@@ -44,6 +44,14 @@ div.leaflet-popup-content {
 
 }
 
+div#qrgen img {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
 section#pinner-modal {
     position: absolute;
     top: 7vh;

templates/dashboard.html

@@ -9,22 +9,25 @@
 </style>
 <div style="padding-top: 30px;">
 <h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
-<p>Aquí puedes ver los pines que has agregado y ver tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.</p>
-<div id="qrgen" style="border-width:5px; border-color:#e6e6fa">
+<p>Aquí puedes ver los pines que has agregado y consultar tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.</p>
+<div class="grid" style="padding-bottom: 2rem;">
+  <div id="qrgen" style="">
+  </div>
+  <script type="text/javascript">
+    var qrcode = new QRCode(document.getElementById("qrgen"), {
+      text: "https://baches.qro.mx/registrame/{{current_user.referral_code}}",
+      width: 256,
+      height: 256,
+      colorDark : "#000000",
+      colorLight : "#e6e6fa",
+      correctLevel : QRCode.CorrectLevel.L
+    });
+    </script>
+  <div>
+    <h2>Tu link es:</h2>
+    <p><a href="https://baches.qro.mx/registrame/{{current_user.referral_code}}">https://baches.qro.mx/registrame/{{current_user.referral_code}}</a></p>
+  </div>
 </div>
-<script type="text/javascript">
-  var qrcode = new QRCode(document.getElementById("qrgen"), {
-    text: "https://baches.qro.mx/registrame/{{current_user.referral_code}}",
-    width: 128,
-    height: 128,
-    colorDark : "#000000",
-    colorLight : "#e6e6fa",
-    correctLevel : QRCode.CorrectLevel.L
-  });
-  </script>
-<h3>Tu link es:</h3>
-<h2>https://baches.qro.mx/registrame/{{current_user.referral_code}}</h2>
-
 {% if pins %}
     {% for pin in pins %}
 

templates/leaderboard.html

@@ -0,0 +1,19 @@
+{% extends 'secondbase.html' %}
+{% block content %}
+<h2>Aquí puedes consultar quiénes están contribuyendo. Por cuestiones de privacidad, los nombres están modificados, pero si sabes, sabes</h2>
+<table>
+    <thead>
+        <tr>
+            <th scope="col">Mapista</th>
+            <th scope="col">Marcador</th>
+        </tr>
+    </thead>
+    <tbody>
+{% for leader in leaders %}
+    <th scope="row">{{leader.username}}</th>
+    <th scope="row">{{leader.count}}</th>
+{% endfor %}
+    </tbody>
+</table>
+
+{% endblock %}

templates/quienes.html

@@ -1,7 +1,7 @@
 {% extends 'secondbase.html' %}
 {% block content %}
 
-    <div style="padding: 15px; overflow-y: scroll;">
+    <div style="padding: 15px;">
         <h4>Somos civiles y voluntari@s</h4>
         <p>Esta página es un servicio comunitario desarrollado por el hackspace Kernel Panic Room, con un (maravilloso) dominio patrocinado por el programa de RSE de Qro.mx.</p>
         <p>Nuestro objetivo es construir un puente entre la ciudadanía y las autoridades estatales y municipales para poder recabar, catalogar y visibilizar los problemas infraestructurales de nuestra entindad, con el fin de facilitar que se solucionen.</p>

templates/secondbase.html

@@ -32,7 +32,7 @@
     <link rel="canonical" href="https://baches.qro.mx">
     <!-- Versión pública 0.1 -->
 </head>
-<body style="color: black;overflow-y: scroll;">
+<body style="color: black;">
     <nav style="height: auto; align-items:center">
         <ul>
             <a href="/"><li><h3 style="margin-bottom: 0;">Bachemapa</h3></li></a>