Show message on empty scoreboard (#74)

* scoreboard.js: init data with right types

* _graphs.scss: do not define display as it is always overriden to flex

* Show message on empty scoreboard

* scoreboard.html: fix unclosed span element

* yarn build

* Use more generic empty language

---------

Co-authored-by: Kevin Chung <kchung@ctfd.io>

assets/js/scoreboard.js

@@ -7,18 +7,20 @@ window.Alpine = Alpine;
 window.CTFd = CTFd;
 
 Alpine.data("ScoreboardDetail", () => ({
-  data: null,
+  data: {},
+  show: true,
 
   async init() {
     this.data = await CTFd.pages.scoreboard.getScoreboardDetail(10);
 
     let option = getOption(CTFd.config.userMode, this.data);
     embed(this.$refs.scoregraph, option);
+    this.show = Object.keys(this.data).length > 0;
   },
 }));
 
 Alpine.data("ScoreboardList", () => ({
-  standings: null,
+  standings: [],
   brackets: [],
   activeBracket: null,
 
@@ -28,7 +30,7 @@ Alpine.data("ScoreboardList", () => ({
     });
     const body = await response.json();
     this.brackets = body["data"];
-    this.full_standings = this.standings = await CTFd.pages.scoreboard.getScoreboard();
+    this.standings = await CTFd.pages.scoreboard.getScoreboard();
   },
 }));
 

assets/scss/includes/components/_graphs.scss

@@ -3,8 +3,6 @@
 
 #score-graph {
   min-height: 400px;
-  display: block;
-  clear: both;
 }
 
 #solves-graph {

static/manifest.json

@@ -38,7 +38,7 @@
     ]
   },
   "assets/js/scoreboard.js": {
-    "file": "assets/scoreboard.eecf07d0.js",
+    "file": "assets/scoreboard.ffe44295.js",
     "src": "assets/js/scoreboard.js",
     "isEntry": true,
     "imports": [
@@ -140,7 +140,7 @@
     ]
   },
   "assets/scss/main.scss": {
-    "file": "assets/main.63991f7d.css",
+    "file": "assets/main.3095e2ea.css",
     "src": "assets/scss/main.scss",
     "isEntry": true
   }

templates/scoreboard.html

@@ -11,14 +11,14 @@ <h1>
   <div class="container">
     {% include "components/errors.html" %}
 
-    <div id="score-graph" class="d-flex align-items-center" x-data="ScoreboardDetail" x-ref="scoregraph">
+    <div id="score-graph" class="align-items-center" :class="{'d-flex': show, 'd-none': !show}" x-data="ScoreboardDetail" x-ref="scoregraph">
       <div class="col-md-12 text-center">
         <i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
       </div>
     </div>
 
     <div id="scoreboard" class="row" x-data="ScoreboardList">
-      <template x-if="brackets.length">
+      <template x-if="brackets.length && standings.length">
         <div class="col-md-12 py-3">
           <nav class="nav nav-pills nav-fill">
             <button :class="{'nav-link': true, 'active': !activeBracket}" @click="activeBracket=null">{% trans %}All{% endtrans %}</button>
@@ -29,7 +29,7 @@ <h1>
         </div>
       </template>
 
-      <div class="col-md-12">
+      <div class="col-md-12" x-show="standings.length">
         <table class="table table-striped">
           <thead>
           <tr>
@@ -46,7 +46,7 @@ <h1>
                 <td>
                   <a :href="standing.account_url" x-text="standing.name"></a>
                   <template x-if="standing.bracket_name">
-                    <span class="badge bg-secondary ms-2" x-text="standing.bracket_name">
+                    <span class="badge bg-secondary ms-2" x-text="standing.bracket_name"></span>
                   </template>
                 </td>
                 <td x-text="standing.score"></td>
@@ -55,6 +55,10 @@ <h1>
           </tbody>
         </table>
       </div>
+
+      <div class="col-md-12" x-show="! standings.length">
+        <h3 class="text-center text-muted">{% trans %}Scoreboard is empty{% endtrans %}</h3>
+      </div>
     </div>
   </div>
 {% endblock %}