Untitled

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <title>Users Page</title>
</head>

<body onload="load()"; style="padding-left: 25px;">

    <!-- Itt kezdődne a form-->

    <meta name="csrf-token" content="({ csrf_token })" />
    <!--<label for="id">
        Id
    </label>-->
    <input type="hidden" id="id" name="id"> <br>

    <label for="username">
        Username
    </label>
    <input type="text" id="username" required="required" name="username"> <br>

    <label for="password">
    Password
    </label>
    <input type="password" name="password" id="password" required="required"><br>

    <label for="firstname">
    Firstname
    </label>
    <input type="text" id="firstname" required="required" name="firstname"> <br>

    <label for="lastname">
    Lastname
    </label>
    <input type="text" id="lastname" name="lastname" required="required"> <br>

    <label for="email">
    Email
    </label>
    <input type="email" name="email" id="email" required="required"><br>

    <label for="phone">
    Phone
    </label>
    <input type="text" name="phone" id="phone" required="required"><br>

    <input id="userbtn" type="button" value="Add New User" name="userbtn" onclick="submit();"/>
    <br><br><br>
<!-- Itt lenne a form vége-->


    <!-- SEARCH BOX-->

    <label for="search">Search box</label>
    <input type="text" id="search" name="search">
    <input id="searchbtn" type="button" value="Search" name="searchbtn" onclick="load();"/>

    <!-- SEARCH BOX-->
    <table id="table" border="1">
    <tr>    <th>#</th>
            <th>Username</th>
            <th>Password</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Phone</th></tr>
    </table>


    <script type="text/javascript">
        data= "";

        submit = function(){
            $.ajax({
                url:'api/SaveOrUpdate',
                type:'POST',
                data:{id:$("#id").val(), username:$('#username').val(), password:$('#password').val(),firstname:$('#firstname').val(), lastname:$('#lastname').val(), email:$('#email').val(), phone:$('#phone').val() },
                success: function(response){
                    alert(response.message);
                    load();
                }
            });
            $('#userbtn').attr('value','Add New User');
            resetform();

        }

        load = function(){

            $.ajax({
                url:'api/list',
                type:'POST',
                data:{value:$('#search').val()},
                success: function(response){
                    //alert(response.message);

                    data=response.data;
                    $('.tr').remove();
                    for(i=0; i<response.data.length; ++i){

                        $("#table").append("<tr class='tr'> <td> "+response.data[i].id+" </td> <td> "+response.data[i].username+" </td> <td> "+response.data[i].password+" </td> <td> "+response.data[i].firstname+" </td> <td> "+response.data[i].lastname+" </td> <td> "+response.data[i].email+" </td> <td> "+response.data[i].phone+" </td> <td><a href='#' onclick= edit("+i+");>Edit </a> </td> <td><a href='#' onclick=_delete("+data[i].id+");>Delete </a> </td> </tr>")
                    }

                }
            });
        };


        edit = function(index){

            $('#id').val(data[index].id);
            $('#username').val(data[index].username);
            $('#password').val(data[index].password);
            $('#firstname').val(data[index].firstname);
            $('#lastname').val(data[index].lastname);
            $('#email').val(data[index].email);
            $('#phone').val(data[index].phone);

            $('#userbtn').attr('value','Update');


        };


        _delete = function(id){
            $.ajax({
                url:'api/delete',
                type:'POST',
                data:{id},
                success: function(response){
                    alert(response.message); // a függvény visszatérítését kíírja sikeres hívás esetén
                    load();
                }
            })
        }

        resetform = function(){
            $('#username').val('');
            $('#password').val('');
            $('#firstname').val('');
            $('#lastname').val('');
            $('#phone').val('');
            $('#email').val('');
        }


    </script>


</body>
</html>