users.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. {% extends "base.html" %}
  2. {% set active_page = "users" %}
  3. {% block title %} User listing {% endblock %}
  4. {% block divs %}
  5. <div class="container-fluid">
  6. <div class="row">
  7. <div class="col-md-1"></div>
  8. <div class="col-md-9">
  9. <div class="card">
  10. <h3 id="usersTableTitle">All users</h3>
  11. <div class="form-check form-check-inline">
  12. <label class="form-check-label">
  13. <input
  14. id="inactiveUsersCheckbox"
  15. name="include_inactive"
  16. type="checkbox"
  17. />
  18. Include inactive
  19. </label>
  20. </div>
  21. <div class="table-responsive">
  22. <table
  23. class="table table-striped paginate nav-on-click"
  24. title="View this asset"
  25. id="usersTable"
  26. ></table>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. <script>
  33. function User(
  34. id,
  35. username,
  36. email,
  37. roles,
  38. account,
  39. timezone,
  40. lastLogin,
  41. lastSeen,
  42. active
  43. ) {
  44. this.id = id;
  45. this.username = `<span>${username}</span>`;
  46. this.email = `<a href="mailto:${email}" title="Mail this user">${email}</a>`;
  47. this.roles = roles.map((role) => role).join(", ");
  48. this.url = `/users/${id}`;
  49. if (account == null) this.account = "PUBLIC";
  50. else
  51. this.account = `
  52. <a href="/accounts/${account["id"]}" title="View this account">${account["name"]}</a>
  53. `;
  54. this.timezone = timezone;
  55. this.lastLogin = lastLogin;
  56. this.lastSeen = lastSeen;
  57. this.active = active;
  58. }
  59. $(document).ready(function () {
  60. let includeInactive = false;
  61. const tableTitle = $("#usersTableTitle");
  62. // Initialize the DataTable
  63. const table = $("#usersTable").dataTable({
  64. order: [
  65. [0, "asc"]
  66. ],
  67. serverSide: true,
  68. // make the table row vertically aligned with header
  69. columns: [{
  70. data: "username",
  71. title: "Username",
  72. orderable: true
  73. },
  74. {
  75. data: "email",
  76. title: "Email",
  77. orderable: true
  78. },
  79. {
  80. data: "roles",
  81. title: "Roles",
  82. orderable: false
  83. },
  84. {
  85. data: "account",
  86. title: "Account",
  87. orderable: false
  88. },
  89. {
  90. data: "timezone",
  91. title: "Timezone",
  92. orderable: false
  93. },
  94. {
  95. data: "lastLogin",
  96. title: "Last login",
  97. orderable: true
  98. },
  99. {
  100. data: "lastSeen",
  101. title: "Last seen",
  102. orderable: true
  103. },
  104. {
  105. data: "active",
  106. title: "Active",
  107. orderable: false
  108. },
  109. {
  110. data: "url",
  111. title: "URL",
  112. className: "d-none"
  113. },
  114. ],
  115. ajax: function (data, callback, settings) {
  116. const basePath = window.location.origin;
  117. let filter = data["search"]["value"];
  118. let orderColumnIndex = data["order"][0]["column"]
  119. let orderDirection = data["order"][0]["dir"];
  120. let orderColumnName = data["columns"][orderColumnIndex]["data"];
  121. let url = `${basePath}/api/v3_0/users?page=${data["start"] / data["length"] + 1}&per_page=${data["length"]}&include_inactive=${includeInactive}`;
  122. if (filter.length > 0) {
  123. url = `${url}&filter=${filter}`;
  124. }
  125. if (orderColumnName) {
  126. url = `${url}&sort_by=${orderColumnName}&sort_dir=${orderDirection}`;
  127. }
  128. $.ajax({
  129. type: "get",
  130. url: url,
  131. success: function (response, text) {
  132. let clean_response = [];
  133. response["data"].forEach((element) =>
  134. clean_response.push(
  135. new User(
  136. element["id"],
  137. element["username"],
  138. element["email"],
  139. element["flexmeasures_roles"],
  140. element["account"],
  141. element["timezone"],
  142. element["last_login_at"],
  143. element["last_seen_at"],
  144. element["active"]
  145. )
  146. )
  147. );
  148. callback({
  149. data: clean_response,
  150. recordsTotal: response["num-records"],
  151. recordsFiltered: response["filtered-records"],
  152. });
  153. },
  154. error: function (request, status, error) {
  155. console.log("Error: ", error);
  156. },
  157. });
  158. },
  159. });
  160. // Event listener for the checkbox to toggle includeInactive state
  161. $("#inactiveUsersCheckbox").change(function () {
  162. includeInactive = this.checked;
  163. table.api().ajax.reload();
  164. if (!includeInactive) {
  165. tableTitle.text("All users");
  166. } else {
  167. tableTitle.text("All active users");
  168. }
  169. });
  170. });
  171. </script>
  172. {% block paginate_tables_script %} {{ super() }} {% endblock %} {% endblock%}