123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- {% extends "base.html" %}
- {% set active_page = "users" %}
- {% block title %} User listing {% endblock %}
- {% block divs %}
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-1"></div>
- <div class="col-md-9">
- <div class="card">
- <h3 id="usersTableTitle">All users</h3>
- <div class="form-check form-check-inline">
- <label class="form-check-label">
- <input
- id="inactiveUsersCheckbox"
- name="include_inactive"
- type="checkbox"
- />
- Include inactive
- </label>
- </div>
- <div class="table-responsive">
- <table
- class="table table-striped paginate nav-on-click"
- title="View this asset"
- id="usersTable"
- ></table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- function User(
- id,
- username,
- email,
- roles,
- account,
- timezone,
- lastLogin,
- lastSeen,
- active
- ) {
- this.id = id;
- this.username = `<span>${username}</span>`;
- this.email = `<a href="mailto:${email}" title="Mail this user">${email}</a>`;
- this.roles = roles.map((role) => role).join(", ");
- this.url = `/users/${id}`;
- if (account == null) this.account = "PUBLIC";
- else
- this.account = `
- <a href="/accounts/${account["id"]}" title="View this account">${account["name"]}</a>
- `;
- this.timezone = timezone;
- this.lastLogin = lastLogin;
- this.lastSeen = lastSeen;
- this.active = active;
- }
- $(document).ready(function () {
- let includeInactive = false;
- const tableTitle = $("#usersTableTitle");
- // Initialize the DataTable
- const table = $("#usersTable").dataTable({
- order: [
- [0, "asc"]
- ],
- serverSide: true,
- // make the table row vertically aligned with header
- columns: [{
- data: "username",
- title: "Username",
- orderable: true
- },
- {
- data: "email",
- title: "Email",
- orderable: true
- },
- {
- data: "roles",
- title: "Roles",
- orderable: false
- },
- {
- data: "account",
- title: "Account",
- orderable: false
- },
- {
- data: "timezone",
- title: "Timezone",
- orderable: false
- },
- {
- data: "lastLogin",
- title: "Last login",
- orderable: true
- },
- {
- data: "lastSeen",
- title: "Last seen",
- orderable: true
- },
- {
- data: "active",
- title: "Active",
- orderable: false
- },
- {
- data: "url",
- title: "URL",
- className: "d-none"
- },
- ],
- ajax: function (data, callback, settings) {
- const basePath = window.location.origin;
- let filter = data["search"]["value"];
- let orderColumnIndex = data["order"][0]["column"]
- let orderDirection = data["order"][0]["dir"];
- let orderColumnName = data["columns"][orderColumnIndex]["data"];
- let url = `${basePath}/api/v3_0/users?page=${data["start"] / data["length"] + 1}&per_page=${data["length"]}&include_inactive=${includeInactive}`;
- if (filter.length > 0) {
- url = `${url}&filter=${filter}`;
- }
- if (orderColumnName) {
- url = `${url}&sort_by=${orderColumnName}&sort_dir=${orderDirection}`;
- }
- $.ajax({
- type: "get",
- url: url,
- success: function (response, text) {
- let clean_response = [];
- response["data"].forEach((element) =>
- clean_response.push(
- new User(
- element["id"],
- element["username"],
- element["email"],
- element["flexmeasures_roles"],
- element["account"],
- element["timezone"],
- element["last_login_at"],
- element["last_seen_at"],
- element["active"]
- )
- )
- );
- callback({
- data: clean_response,
- recordsTotal: response["num-records"],
- recordsFiltered: response["filtered-records"],
- });
- },
- error: function (request, status, error) {
- console.log("Error: ", error);
- },
- });
- },
- });
- // Event listener for the checkbox to toggle includeInactive state
- $("#inactiveUsersCheckbox").change(function () {
- includeInactive = this.checked;
- table.api().ajax.reload();
- if (!includeInactive) {
- tableTitle.text("All users");
- } else {
- tableTitle.text("All active users");
- }
- });
- });
- </script>
- {% block paginate_tables_script %} {{ super() }} {% endblock %} {% endblock%}
|