Load tag statistics into grid after the profile finished loading

app/assets/javascripts/external_users.js

@@ -0,0 +1,32 @@
+$(function() {
+  var grid = $('#tag-grid');
+
+  if ($.isController('external_users') && grid.isPresent()) {
+    var spinner = $('#loading');
+    var noElements = $('#no-elements');
+
+    var buildTagContainer = function(tag) {
+      return '\
+        <div class="tag">\
+          <div class="name">' + tag.key + '</div>\
+          <div class="progress">\
+            <div class="progress-bar" role="progressbar" style="width:' + tag.value + '%">' + tag.value + '%</div>\
+          </div>\
+        </div>';
+    };
+
+    var jqxhr = $.ajax(window.location.href + '/tag_statistics', {
+      dataType: 'json',
+      method: 'GET'
+    });
+    jqxhr.done(function(response) {
+      spinner.hide();
+      if (response.length === 0) {
+        noElements.show();
+      } else {
+        var elements = response.map(buildTagContainer);
+        grid.append(elements);
+      }
+    });
+  }
+});

app/assets/stylesheets/external_users.css.scss

@@ -0,0 +1,16 @@
+#no-elements {
+  display: none;
+}
+
+#tag-grid {
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  grid-column-gap: 10px;
+  grid-row-gap: 15px;
+
+  .progress {
+    .progress-bar {
+      min-width: 2em;
+    }
+  }
+}

app/views/external_users/show.html.slim

@@ -7,4 +7,11 @@ h1 = @user.name
 br
 = link_to(t('shared.statistics'), statistics_external_user_path(@user))
 
-.tag-grid
+br
+h4 = t('.tag_statistics')
+#loading
+  .spinner
+  = t('.loading_tag_statistics')
+#no-elements
+  = t('.empty_tag_statistics')
+#tag-grid

config/locales/de.yml

@@ -378,6 +378,10 @@ de:
       score: Bewertung
       runs: Abgaben
       worktime: Arbeitszeit
+    show:
+      loading_tag_statistics: "Lade Lernbereichstatistiken"
+      tag_statistics: "Lernbereichstatistiken"
+      empty_tag_statistics: "Keine Statistiken verfügbar"
   files:
     roles:
       main_file: Hauptdatei

config/locales/en.yml

@@ -378,6 +378,10 @@ en:
       score: Score
       runs: Submissions
       worktime: Working Time
+    show:
+      loading_tag_statistics: "Loading tag statistics..."
+      tag_statistics: "Tag Statistics"
+      empty_tag_statistics: "No statistics available"
   files:
     roles:
       main_file: Main File