<commit_before><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Edit user</title>
    <style>
        .menu {
            background-color: #9ce7fc;
            width: auto;
            margin:auto;
            text-align: center;
        }
        #table-with-users {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        #table-with-users td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #table-with-users tr:nth-child(even){background-color: #f2f2f2;}

        #table-with-users tr:hover {background-color: #ddd;}

        #table-with-users th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
        }
    </style>
    <script>
        // get json data from servlet
        $.ajax('./json', {
            method: 'get',
            complete: function (data) {
                var result = "<tr>\n" +
                    "<td>Login</td>\n" +
                    "<td>Name</td>\n" +
                    "<td>Email</td>\n" +
                    "<td>Create date</td>\n" +
                    "<td>Password</td>\n" +
                    "<td>Role</td>\n" +
                    "<td>Country</td>\n" +
                    "<td>City</td>\n" +
                    "</tr>";
                var users = JSON.parse(data.responseText);
                for(var i = 0; i != users.length; i++) {
                    result += "<tr>\n" +
                        "<td>" + users[i].login + "</td>\n" +
                        "<td>" + users[i].name + "</td>\n" +
                        "<td>" + users[i].email + "</td>\n" +
                        "<td>" + users[i].createDate + "</td>\n" +
                        "<td>" + users[i].password + "</td>\n" +
                        "<td>" + users[i].role + "</td>\n" +
                        "<td>" + users[i].country + "</td>\n" +
                        "<td>" + users[i].city + "</td>\n" +
                        "</tr>";
                }
                var table = document.getElementById("table-with-users");
                table.innerHTML = result;
            }
        });
    </script>
</head>
<body>
    <!-- Menu -->
    <div class="menu">
        <section id="content" >
            <h1>Edit user</h1>
            <a href="home">
                <input type="button" value="Menu" />
            </a>
        </section>
    </div>

    <!-- Input labels for edit -->
    <div class="container">
        <form action='./editUser' method='post'>
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" name='name'>
            </div>

            <div class="form-group">
                <label for="login">Login:</label>
                <input type="text" class="form-control" id="login" name='login'>
            </div>

            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" class="form-control" id="password" name='password'>
            </div>

            <div class="form-group">
                <label for="role">Role:</label>
                <input type="text" class="form-control" id="role" name='role'>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="text" class="form-control" id="email" name='email'>
            </div>

            <div class="form-group">
                <label for="createDate">Create date:</label>
                <input type="text" class="form-control" id="createDate" name='createDate'>
            </div>

            <div class="form-group">
                <label for="country">Country:</label>
                <input list="countries" class="form-control" id="country" name='country'>
                <datalist id="countries">
                    <option value="USA">
                    <option value="Switzerland">
                    <option value="Canada">
                    <option value="Germany">
                    <option value="United Kingdom">
                </datalist>
            </div>

            <div class="form-group">
                <label for="city">City:</label>
                <input list="cities" class="form-control" id="city" name='city'>
                <datalist id="cities">
                    <option value="New York">
                    <option value="Los Angeles">
                    <option value="California">
                    <option value="Geneva">
                    <option value="London">
                </datalist>
            </div><commit_msg>In the form of editing. If the country was changed, then cities change dynamically.<commit_after><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Edit user</title>
    <style>
        .menu {
            background-color: #9ce7fc;
            width: auto;
            margin:auto;
            text-align: center;
        }
        #table-with-users {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        #table-with-users td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #table-with-users tr:nth-child(even){background-color: #f2f2f2;}

        #table-with-users tr:hover {background-color: #ddd;}

        #table-with-users th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
        }
    </style>
    <script>
        $(document).ready(function(){
            // get json data from servlet.
            $.ajax('./json', {
                method: 'get',
                complete: function (data) {
                    var result = "<tr>\n" +
                        "<td>Login</td>\n" +
                        "<td>Name</td>\n" +
                        "<td>Email</td>\n" +
                        "<td>Create date</td>\n" +
                        "<td>Password</td>\n" +
                        "<td>Role</td>\n" +
                        "<td>Country</td>\n" +
                        "<td>City</td>\n" +
                        "</tr>";
                    var users = JSON.parse(data.responseText);
                    for(var i = 0; i !== users.length; i++) {
                        result += "<tr>\n" +
                            "<td>" + users[i].login + "</td>\n" +
                            "<td>" + users[i].name + "</td>\n" +
                            "<td>" + users[i].email + "</td>\n" +
                            "<td>" + users[i].createDate + "</td>\n" +
                            "<td>" + users[i].password + "</td>\n" +
                            "<td>" + users[i].role + "</td>\n" +
                            "<td>" + users[i].country + "</td>\n" +
                            "<td>" + users[i].city + "</td>\n" +
                            "</tr>";
                    }
                    var table = document.getElementById("table-with-users");
                    table.innerHTML = result;
                }
            });

            // if country changed then change city.
            $("#country").change(function(){
                var val = $(this).val();
                if (val == "USA") {
                    $("#city").html("<option value='New York'>New York</option><option value='California'>California</option>");
                } else if (val == "Switzerland") {
                    $("#city").html("<option value='Geneva'>Geneva</option><option value='Lucerne'>Lucerne</option>");
                } else if (val == "United Kingdom") {
                    $("#city").html("<option value='London'>London</option><option value='Birmingham'>Birmingham</option>");
                }
            });
        });
    </script>
</head>
<body>
    <!-- Menu -->
    <div class="menu">
        <section id="content" >
            <h1>Edit user</h1>
            <a href="home">
                <input type="button" value="Menu" />
            </a>
        </section>
    </div>

    <!-- Input labels for edit -->
    <div class="container">
        <form action='./editUser' method='post'>
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" name='name'>
            </div>

            <div class="form-group">
                <label for="login">Login:</label>
                <input type="text" class="form-control" id="login" name='login'>
            </div>

            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" class="form-control" id="password" name='password'>
            </div>

            <div class="form-group">
                <label for="role">Role:</label>
                <input type="text" class="form-control" id="role" name='role'>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="text" class="form-control" id="email" name='email'>
            </div>

            <div class="form-group">
                <label for="createDate">Create date:</label>
                <input type="text" class="form-control" id="createDate" name='createDate'>
            </div>

            <div class="form-group">
                <label for="country">Country:</label>
                <select class="form-control" id="country" name='country'>
                    <option value="USA">USA</option>
                    <option value="Switzerland">Switzerland</option>
                    <option value="United Kingdom">United Kingdom</option>
                </select>
            </div>

            <div class="form-group">
                <label for="city">City:</label>
                <select class="form-control" id="city" name='city'></select>
            </div>

{'fraction_non_alphanumeric': 0.16995861550037622, 'fraction_numerical': 0.005267118133935289, 'mean_word_length': 1.356604609929078, 'pattern_counts': {'":': 0, '<': 245, '<?xml version=': 0, '>': 245, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5515417', 'n_tokens_mistral': 3022, 'n_tokens_neox': 2879, 'n_words': 558}