added leaderboard page, improved dashboard, centered QR invite

app.py

@@ -256,8 +256,8 @@ def create_app(config=Config):
             {
                 "$lookup": {
                     "from": "users",
-                    "localField": "_id",
-                    "foreignField": "_id",
+                    "localField": "added_by",
+                    "foreignField": "added_by",
                     "as": "user_info"
                 }
             },
@@ -273,14 +273,17 @@ def create_app(config=Config):
             }
             }
         ])
-        print(leaders)
-        for leader in leaders:
+        #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=leaders, username=username)
+
+        return render_template('leaderboard.html', leaders=cleaned_leaders, username=username)
         
     
     return app

static/styles.css

@@ -45,6 +45,14 @@ main {
     padding-bottom: 6rem;
 }
 
+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/{{invite_code}}",
-    width: 128,
-    height: 128,
+      text: "https://baches.qro.mx/registrame/{{current_user.referral_code}}",
+      width: 256,
+      height: 256,
       colorDark : "#000000",
       colorLight : "#e6e6fa",
       correctLevel : QRCode.CorrectLevel.L
     });
     </script>
-<h3>Tu link es:</h3>
-<h2>https://baches.qro.mx/registrame/{{invite_code}}</h2>
-
+  <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>
 {% if pins %}
     {% for pin in pins %}
 

templates/leaderboard.html

@@ -1,6 +1,19 @@
 {% extends 'secondbase.html' %}
-<ul>
+{% 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 %}
-    {% if username != None and leader.username == username %}<li><span style="padding-left: -100%;">¡Felicidades, estás aquí!</span><b>{{ leader.username }} -> {{leader.count}}</b></li>{% else %}{{leader.username}} -> {{leader.count}}{% endif %}
+    <th scope="row">{{leader.username}}</th>
+    <th scope="row">{{leader.count}}</th>
 {% endfor %}
-</ul>
+    </tbody>
+</table>
+
+{% endblock %}