Admin.html

<div class="row" style="margin-top: 2rem;">
    <div id="users" class="col s12">
    </div>
</div>

<script>
    function refresh()
    {
        console.log(global);

        // List of article posts
        if (global == null || (global.params != null && Object.keys(global.params).length == 0))
        {
            app.GetUser().GetUsers().then(function(res)
            {
                if (res.result == 200)
                {
                    var html = "";

                    html += "<div class=\"collection left-align\">\n";

                    for (var i = 0; i < res.user.length; i++)
                    {
                        html += "<a class='internal collection-item left-align blue-text' href=\"" + app.GetBaseURL() + "page/admin/user/" + res.user[i].id + "\">"
                        html += "  <div>";
                        html += "    <b>" + res.user[i].login_name + "</b>";
                        html += "  </div>";
                        html += "  <div>";
                        html += "    <i>Email: " + res.user[i].email + "</i>";
                        html += "  </div>";
                        html += "</a>";
                    }

                    html += "</div>\n";

                    $('#users').html(html);

                    app.Finish();
                }
                else
                {
                    app.Error("Error " + res.result + ": " + res.error);
                }
            });
        }
        else if (global.params && global.params.user)
        {
            app.GetUser().GetUser(global.params.user).then(function(res)
            {
                if (res.result == 200)
                {
                    app.GetUser().GetPermission(global.params.user).then(function(res)
                    {
                        if (res.result == 200)
                        {
                            var html = "";

                            html += "<div class=\"collection left-align\">\n";

                            for (var i = 0; i < res.permission.length; i++)
                            {
                                html += "<div class=\"collection-item left-align\">\n"
                                html += "  <div class=\"row\">\n";
                                html += "    <div class=\"col s6\">\n";
                                html += "      <div>\n";
                                html += "        Permission role:\n";
                                html += "      </div>\n";
                                html += "      <div>\n";
                                html += "        <b>" + res.permission[i].role + "</b>\n";
                                html += "      </div>\n";
                                html += "    </div>\n";
                                html += "    <div class=\"input-field col s6\">\n";
                                html += "      <select id=\"permission-level_" + res.permission[i].id + "\" data-index=\"" + res.permission[i].id + "\" data-role=\"" + res.permission[i].role + "\">\n";
                                html += "        <option value=\"\" disabled selected>Choose your option</option>\n";
                                html += "        <option value=\"1\">Read</option>\n";
                                html += "        <option value=\"2\">Write Self</option>\n";
                                html += "        <option value=\"4\">Write</option>\n";
                                html += "      </select>\n";
                                html += "      <label>Permission level select</label>\n";
                                html += "    </div>\n";
                                html += "  </div>\n";
                                html += "</div>\n";
                            }

                            html += "</div>\n";

                            html += "<div class=\"row\">\n";
                            html += "  <div class=\"input-field col s6\">\n";
                            html += "  <input placeholder=\"Permission\" id=\"permission-role\" type=\"text\" class=\"validate\">\n";
                            html += "  <label for=\"permission-role\">Permission role</label>\n";
                            html += "  </div>\n";
                            html += "  <div class=\"input-field col s6\">\n";
                            html += "    <select id=\"permission-level\">\n";
                            html += "      <option value=\"\" disabled selected>Choose your option</option>\n";
                            html += "      <option value=\"1\">Read</option>\n";
                            html += "      <option value=\"2\">Write Self</option>\n";
                            html += "      <option value=\"4\">Write</option>\n";
                            html += "    </select>\n";
                            html += "    <label>Permission level select</label>\n";
                            html += "  </div>\n";
                            html += "</div>\n";

                            html += "<div class=\"row right\">\n";
                            html += "  <div class=\"input-field col s12\">\n";
                            html += "    <a class=\"waves-effect waves-light btn\" id=\"permission\"><i class=\"material-icons left\">add</i>Add Permission</a>\n";
                            html += "  </div>\n";
                            html += "</div>\n";

                            $('#users').html(html);

                            for (var i = 0; i < res.permission.length; i++)
                            {
                                $("#permission-level_" + res.permission[i].id).val(res.permission[i].level);
                                $("#permission-level_" + res.permission[i].id).off();
                                $("#permission-level_" + res.permission[i].id).on('change', function()
                                {
                                    app.GetUser().UpdatePermission($(this).data('index'), $(this).data('role'), $(this).val()).then(function(res)
                                    {
                                        console.log(res);
                                    });
                                });
                            }

                            $("#permission").off();
                            $("#permission").on('click', function()
                            {
                                app.GetUser().AddPermission(global.params.user, $("#permission-role").val(), $("#permission-level").val()).then(function(res)
                                {
                                    refresh();
                                });
                            });

                            $('select').formSelect();

                            M.updateTextFields();

                            app.Finish();
                        }
                        else
                        {
                            app.Error("Error " + res.result + ": " + res.error);
                        }
                    });
                }
                else
                {
                    app.Error("Error " + res.result + ": " + res.error);
                }
            });
        }
    }

    $(document).ready(refresh);
</script>