Show message on empty scoreboard

Author: erdnaxe

assets/js/scoreboard.js

@@ -8,12 +8,14 @@ window.CTFd = CTFd;
 
 Alpine.data("ScoreboardDetail", () => ({
   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;
   },
 }));
 

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>
@@ -55,6 +55,10 @@ <h1>
           </tbody>
         </table>
       </div>
+
+      <div class="col-md-12" x-show="! standings.length">
+        <h3 class="text-center text-muted">{% trans %}No challenges solved{% endtrans %}</h3>
+      </div>
     </div>
   </div>
 {% endblock %}