speed up loading of group-list as well (like user-list)

Author: polarwinkel

service.json

@@ -98,7 +98,7 @@
         {
             "name":"pc_admin",
             "hostname":"pc_admin",
-            "url":"https://github.com/philleconnect/ServerContainers/releases/download/2.2.6/pc_admin.tar.gz",
+            "url":"https://github.com/philleconnect/ServerContainers/releases/download/2.2.7/pc_admin.tar.gz",
             "ports":[
                 {
                     "external":84,

ui/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "schoolconnect-administration",
   "private": true,
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "SchoolConnect Administration",
   "repository": "",
   "license": "UNLICENSED",

ui/package.json

@@ -42,13 +42,13 @@
     // Data display
     print: function() {
       document.getElementById("content").innerHTML = "";
+      var tableContent = "";
       let style = false;
       for (const group of groups) {
-        let tableRow = "";
         if (style) {
-          tableRow += "<tr class=\"alt\">";
+          tableContent += "<tr class=\"alt\">";
         } else {
-          tableRow += "<tr>";
+          tableContent += "<tr>";
         }
         style = !style;
         let permissions = "";
@@ -69,9 +69,9 @@
         if (group["type"] != 1) {
           modifyButton = '<a href="#" onclick="window.app.views.main.router.navigate(\'/groups/' + group["id"] + '\')"><i class="f7-icons icon-default">gear_alt_fill</i></a>';
         }
-        tableRow += '<td>' + group["name"] + '</td><td>' + group["info"] + '</td><td>' + group["type"] + '</td><td>' + permissions + '</td><td>' + modifyButton + deleteButton + '</td>';
-        document.getElementById("content").innerHTML += tableRow;
+        tableContent += '<td>' + group["name"] + '</td><td>' + group["info"] + '</td><td>' + group["type"] + '</td><td>' + permissions + '</td><td>' + modifyButton + deleteButton + '</td>';
       }
+      document.getElementById("content").innerHTML += tableContent;
       for (const element of document.getElementsByClassName("delete-group")) {
         element.addEventListener("click", function(e) {
           this.delete(parseInt(e.target.parentElement.dataset.id));

ui/src/pages/groups/list.f7.html

@@ -41,24 +41,24 @@
     },
     print: function() {
       var accTable = document.getElementById("accounts").innerHTML;
-      var out = "";
+      var tableContent = "";
       let style = false;
       for (const user of users) {
         if (style) {
-          out += "<tr class=\"alt\">";
+          tableContent += "<tr class=\"alt\">";
           style = false;
         } else {
-          out += "<tr>";
+          tableContent += "<tr>";
           style = true;
         }
-        out += "<td>" + user["username"] + "</td>";
-        out += "<td>" + user["firstname"] + " " + user["lastname"] + "</td>";
-        out += "<td>" + essentials.minusIfNull(birthday.convertToGermanFormat(user["birthdate"])) + "</td>";
-        out += "<td>" + essentials.minusIfNull(user["email"]) + "</td>";
-        out += "<td>" + essentials.minusIfNull(user["persistant"]) + "</td>";
-        out += "<td><a href=\"#\" onclick=\"window.app.views.main.router.navigate('/users/" + user["id"] + "')\"><i class=\"f7-icons icon-default\">gear_alt_fill</i></a>&nbsp;&nbsp;&nbsp;<a href=\"#\" data-id=\"" + user["id"] + "\" class=\"delete-user\"><i class=\"f7-icons icon-default\">trash_fill</i></a></td></tr>";
+        tableContent += "<td>" + user["username"] + "</td>";
+        tableContent += "<td>" + user["firstname"] + " " + user["lastname"] + "</td>";
+        tableContent += "<td>" + essentials.minusIfNull(birthday.convertToGermanFormat(user["birthdate"])) + "</td>";
+        tableContent += "<td>" + essentials.minusIfNull(user["email"]) + "</td>";
+        tableContent += "<td>" + essentials.minusIfNull(user["persistant"]) + "</td>";
+        tableContent += "<td><a href=\"#\" onclick=\"window.app.views.main.router.navigate('/users/" + user["id"] + "')\"><i class=\"f7-icons icon-default\">gear_alt_fill</i></a>&nbsp;&nbsp;&nbsp;<a href=\"#\" data-id=\"" + user["id"] + "\" class=\"delete-user\"><i class=\"f7-icons icon-default\">trash_fill</i></a></td></tr>";
       }
-      accTable = out;
+      accTable = tableContent;
       for (const element of document.getElementsByClassName("delete-user")) {
         element.addEventListener("click", function(e) {
           this.delete(e.target.parentElement.dataset.id);