Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise Generator</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/jquery-ui.min.css" />
    <link rel="stylesheet" href="css/fitbyte.css" />
</head>

<body>
    <!-- Container. -->
    <div class="container">

    <!-- Form. -->
          <form id="workoutForm">
              <h1 align="center">WORKOUT GENERATOR!</h1>
              <h4>Choose what You want to train!</h4>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
            <label class="form-check-label" for="inlineCheckbox1">ARMS</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
            <label class="form-check-label" for="inlineCheckbox2">LEGS</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
            <label class="form-check-label" for="inlineCheckbox3">TRUNK</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="checkAll" value="option4">
            <label class="form-check-label" for="checkAll">WHOLE BODY</label>
        </div>
              <h4>How many exercises?</h4>
              <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                  <div class="btn-group mr-2" role="group" aria-label="First group">
                      <button type="button" class="btn btn-secondary btn-lg">4</button>
                  </div>
                  <div class="btn-group mr-2" role="group" aria-label="Second group">
                      <button type="button" class="btn btn-secondary btn-lg">6</button>
                  </div>
                  <div class="btn-group mr-2" role="group" aria-label="Third group">
                      <button type="button" class="btn btn-secondary btn-lg">8</button>
                  </div>
                  <div class="btn-group" role="group" aria-label="Fourth group">
                      <button type="button" class="btn btn-secondary btn-lg">10</button>
                  </div>
                  <br><br />
              </div>
              <div class="form-group row">
                  <div class="col-sm-10">
                      <button type="submit" class="btn btn-primary">GENERATE!</button>
                  </div>
              </div>
        </form>

    <!-- Table. -->

        <div class="tab-content">
            <div id="exercises" class="tab-pane fade show active"
                 role="tabpanel" aria-labelledby="exercises-tab">
                <table class="table table-striped">
                    <thead>
                    <th scope="col">ID</th>
                    <th scope="col">Exercise</th>
                    <th scope="col">Exercise Type</th>
                    <th scope="col">Image</th>
                    <th></th>
                    </thead>
                    <tbody id="exercise_list"></tbody>
                </table>
                <button type="button" class="btn btn-primary"
                        onclick="prepareExerciseAdd()">Add</button>
            </div>
        </div>
        <!-- Exercise modal. -->

        <div class="modal face" id="exercise_modal" tabindex="-1" role="dialog" aria-labelledby="exercise_modal_label" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exercise_modal_label">Add/Edit Exercise</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                    </div>
                    <div class="modal-body">
                        <form name="exerciseForm">
                            <input type="hidden" id="id" name="id" value="0" />
                            <input type="text" id="name" name="name" class="form-control" placeholder="Exercise" /><br />
                            <label for="type">Select exercise type:</label>
                            <select id="type" name="type" class="form-control">
                                <option value="ARMS">ARMS</option>
                                <option value="LEGS">LEGS</option>
                                <option value="TRUNK">TRUNK</option>
                            </select> <br />
                            <input type="text" id="image" name="image" class="form-control" placeholder="Image" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="saveExercise()" data-dismiss="modal">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <!--License . -->
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>

    $(document).ready(
            function() {
             giveMeAllExercises();
            }
        );

    $("#checkAll").change(function() {
    if($(this).is(":checked")) {
        $(".form-check-input").each(function() {
            $(this).prop('checked', true);
        });
    }
    else {
        $(".form-check-input").each(function() {
            $(this).prop('checked', false);
        });
    }
});

    $(".form-check-input").change(function() {
    var allSelected = true;

    $(".form-check-input").each(function() {
        if(!$(this).is(":checked")) {
            $("#checkAll").prop('checked', false);
            allSelected = false;
        }
    });

    if(allSelected)
        $("#checkAll").prop('checked', true);
});


    function giveMeAllExercises() {
            $.ajax(
                {
                    method: "GET",
                    url: "/fitbyte/exercise/list",
                    dataType: "json",
                    contentType: "application/json",
                    complete: function(response) {
                        if (response.status == '401') {
                            window.location.href = '/fitbyte/login';
                        }
                        $('#exercise_list').empty();
                        var exercises = response.responseJSON;
                        for (var i = 0; i < exercises.length; i++) {
                            var row = "<tr>";
                            row = row + "<td>" + exercises[i].id + "</td>";
                            row = row + "<td>" + exercises[i].name + "</td>";
                            row = row + "<td>" + exercises[i].type + "</td>";
                            row = row + "<td>" + exercises[i].image + "</td>";

                            row = row + "<td>";
                            row = row + '<button class="btn btn-sm" onclick="prepareExercise(' + exercises[i].id + ');">Edit</button>&nbsp;'
                                + '<button class ="btn btn-sm btn-danger" onclick="deleteExercise(' + exercises[i].id + ');">Delete</button>';
                            row = row + "</td>";

                            row = row + "<tr>";
                            $('#exercise_list').append(row);
                        }
                    }
                }
            );

    }

    function prepareExerciseAdd() {
            $('#id').val(0);
            $('#name').val("");
            $('#type').val("");
            $('#image').val("");
            $('#exercise_modal').modal('show');
        }

        function prepareExercise(exerciseId) {
            $.ajax(
                {
                    method: "GET",
                    url: "/fitbyte/exercise/get/" + exerciseId,
                    dataType: "json",
                    contentType: "application/json",
                    complete: function(response) {
                        var exercise = response.responseJSON;
                        $('#id').val(exercise.id);
                        $('#name').val(exercise.name);
                        $('#extype').val(exercise.type);
                        $('#image').val(exercise.image);
                        $('#exercise_modal').modal('show');
                    }
                }
            );
        }

        function saveExercise() {
            $.ajax(
                {
                    method: "POST",
                    url: "/fitbyte/exercise/save",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(getData($('form[name=exerciseForm]').serializeArray())),
                    complete: function(response) {
                        giveMeAllExercises();
                    }
                }
            );
        }

        function deleteExercise(exerciseId) {
            if (confirm('Are you sure?')) {
                $.ajax(
                    {
                        method: "POST",
                        url: "/fitbyte/exercise/delete/" + exerciseId,
                        dataType: "json",
                        contentType: "application/json",
                        complete: function(response) {
                            giveMeAllExercises();
                        }
                    }
                );
            }
        }


  function getData(data) {
            var result = {};
            $.map(data, function(n) {
                result[n['name']] = n['value'];
            });
            return result;
        }


</script>

</body>
</html>