projectInfo.php

<?php
$dir = dirname(dirname(dirname(__FILE__)));
$functions = new Functions($db);
$projectReport = $app->getObject("ProjectReport");
$projectInfo = $projectReport->getProjectTaskInfo($id);
$options['nodes'] = 'all';
$user->getLowerLevelNodes($options);

?>

  <link rel="stylesheet" href="chosen_v1.8.5/chosen.css">

<div class="main-wrapper">
    <div class="table-wrapper">
        <h2> <?= $projectInfo['name'] ?> nustatymai</h2><br>
        <div class="project-settings">
            <form id="projectInfo" action="action">
                <div class="side-by-side clearfix">
                     <div class="row">
                        <label>Projekto vadovai</label>
                        <select class="multiSelect"  name="managers[]" onchange="" multiple>
                            <?php foreach ($projectReport->getProjectManagers() as $manager) { ?>
                                <option value="<?= $manager['id'] ?>" <?php echo in_array($manager['id'], $projectInfo['managers']) ? "selected" : "" ?>><?php echo $manager['name'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-100">
                        <label>Grupė(-ės)</label>
                        <select class="multiSelect" id="node" name="nodes[]" onchange="getEmployeesByNodes(this);" multiple>
                            <?php foreach ($user->getLowerLevelNodes($options) as $value) {
                                $value = (array) $value;?>
                                <option value="<?= $value['id'] ?>" <?php echo in_array($value['id'], $projectInfo['nodes']) ? "selected" : "" ?>><?= $value['name'] ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="row">
                        <div class="row">
                            <label>Projekto statusas</label>
                            <select class="text-input" name="status">
                                <option value="<?= $projectInfo['status'] ?>"><?= $projectInfo['status'] ?></option>
                            <?php if ($projectInfo['status'] !== 'TU'){ ?>
                                    <option value="TU">TU</option>
                            <?php } if($projectInfo['status'] !== 'PTU'){ ?>
                                    <option value="PTU">PTU</option>
                            <?php } if($projectInfo['status'] !== 'KA'){ ?>
                                    <option value="KA">KA</option>
                            <?php } if($projectInfo['status'] !== 'Priduotas'){ ?>
                                    <option value="Priduotas">Priduotas</option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-33">
                        <label>Termino pradžia</label>
                        <input class="text-input date-input" type="text" name="date_from" value="<?= $projectInfo['start_date'] ?>">
                    </div>
                    <div class="col-33">
                        <label>Termino pabaiga</label>
                        <input class="text-input date-input" type="text" name="date_to" value="<?= $projectInfo['end_date'] ?>">
                    </div>
                    <div class="col-33">
                        <label>Projekto valandų skaičius</label>
                        <input class="text-input" id="projectHours"  name="hours" value="<?= $projectInfo['hours'] ?>" readonly>
                    </div>
                </div>
                <div class="row" id="add-employee">
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Vardas pavardė</th>
                            <th>Darbuotojo grupė</th>
                            <th>Laikas</th>

                        </tr>
                    </thead>
                    <tbody id="employee-lists">
                        <?php if (isset($projectInfo['employees'])){
                                foreach ($projectInfo['employees'] as $key => $employee) {
                                if(!empty($key)){ ?>
                                <tr id="<?= $key ?>">
                                    <td  value="<?= $key ?>"><?= $employee['name'] ?></td>
                                    <td value="<?= $employee['node_name'] ?>"><?= $employee['node_name'] ?></td>
                                    <td> <input type="number" onchange="calculateHours();" id="employee-hours" value="<?= $employee['hours'] ?>"></td>
                                    <td><img src="img/delete.png" class="delete_button_category right_add_button" onclick="deleteEmployee(<?= $key ?>, '<?= $employee['name'] ?>', '<?= $employee['node_name'] ?>');" alt="Ištrinti darbuotoją"></td>
                                    <td><input type="hidden" name="employee_id" value="<?= $key ?>"></td>
                                <?php }
                                }
                            }?>
                        </tr>
                    </tbody>
                </table>
                <br>
                <div class="">
                    <input id="submit" type="button" class="btn" value="Atnaujinti" />
                </div>

            </form>
        </div>
    </div>
</div>
    <script src="chosen_v1.8.5/docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="chosen_v1.8.5/chosen.jquery.js" type="text/javascript"></script>
  <script src="chosen_v1.8.5/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <script src="chosen_v1.8.5/docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<style>
    .project-settings{
        max-width: 600px;
        width: 100%;
    }
    .btn-back {
    padding-left: 5px;
    width: 110px;
    height: 36px;
    border-radius: 8px;
    border: none;
    color: #fff !important;
    font-weight: 400;
    line-height: 35px;
    cursor: pointer;
    background-size: 200% 100%;
    background-color: #336699;
    background-image: linear-gradient(to right, #336699 50%, #004D8C 50%);
    -webkit-transition: background-position .45s;
    -moz-transition: background-position .45s;
    transition: background-position .45s;
    behavior: url(css/PIE.htc);
    z-index: 0;
    font-size: 1em;
    }
</style>
<script type="text/javascript">
    $('.tab-navigation .tab-item').on('click', function(element) {
    $(".tab-item").removeClass("active");
    $(this).addClass("active");
    $('#'+element.target.id+'-form').show();
    if (element.target.id == "user-info") {
        $('#user-permissions').removeClass("active");
        $('#user-permissions-form').hide();
    } else if (element.target.id == "user-permissions"){
        $('#user-info').removeClass("active");
        $('#user-info-form').hide();
    }
})
    $(document).ready(function () {
        $(".multiSelect").chosen({width: "100%"});
    });

    $(function () {
        $('.date-input').datepicker({
            controlType: 'select',
            dateFormat: "yy-mm-dd",
            oneLine: true,
            firstDay: 1,
            autoclose: true
        });
    });

    $(document).ready(function () {
        getEmployeesByNodes();
    });
    function calculateHours() {
        var sum = 0;
        $("[id^=employee-hours]").each(function () {
            sum = sum + (parseInt(this.value, 10));
        });
        $('#projectHours').val(sum);
    }

    function addEmployee(ele) {
        var info = ele.value.split('&');
        var htmlText;
        htmlText = "<tr id=" + info[0] + ">";
        htmlText += "<td value=" + info[0] + ">" + info[1] + "</td>";
        htmlText += "<td value=''>" + info[2] + "</td>";
        htmlText += "<td><input onchange='calculateHours()' id='employee-hours' type=number value='0'></td>";
        var name = info[1];
        var node_name = info[2];
        htmlText += "<td><img src=img/delete.png class='delete_button_category right_add_button' onclick='deleteEmployee(" + info[0] + ", \"" + name + "\", \"" + node_name + "\");' alt='Ištrinti darbuotoją'></td>";
        htmlText += "<td><input type=hidden name=employee_id value=" + info[0] + "></td>"
//        var table = document.getElementById('employee-lists');
        $("#employee-lists").append(htmlText);
        var deleteOption = document.getElementById("added-employee-" + info[0]);
        deleteOption.remove(deleteOption.selectedIndex);
    }

    function deleteEmployee(key, userName, node_name) {
        var htmlText;
        $('#' + key).remove();
        htmlText += "<option id=added-employee-" + key + " value=\"" + key + "&" + userName + "&" + node_name + "\">" + userName + "</option>";
        var option = document.getElementById('projectEmployee');
        option.innerHTML += htmlText;
        calculateHours();
    }
    function getEmployeesByNodes(ele) {
        var nodes = $(ele).val();
        if (ele === undefined) {
            var selected = [];
            $("#node option").each(function () {
                if ($(this).attr("selected")) {
                    selected.push($(this)[0].value);
                    nodes = selected;
                }
            });
        }

        $.ajax({
            url: 'ajax_controller.php?page=getEmployeesByGroups',
            data: {'nodes': nodes, 'id' : <?=$id?>},
            datatype: 'json',
            type: "POST",
            success: function (data) {
                var div = document.getElementById('add-employee');
                div.innerHTML = data;
            }

        });
    }

    $('#submit').on('click', function (e) {
//        e.preventDefault();
//    $(this).prop('disabled',true);
        var formData = {
            'project_id': <?= $id ?>,
            'managers': $('select[name="managers[]"]').val(),
            'nodes': $('select[name="nodes[]"').val(),
            'status': $('select[name=status]').val(),
            'date_from': $('input[name=date_from]').val(),
            'date_to': $('input[name=date_to]').val(),
            'hours': $('input[name=hours]').val(),
        }
        var empList = [];
        $("#employee-lists tr").each(function () {
            var emp = {};
            emp['id'] = $(this).find('input[type="hidden"]').val();
            emp['name'] = $(this).children("td:eq(0)").text();
            emp['node_name'] = $(this).children("td:eq(1)").text();
            emp['hours'] = $(this).find("input").val();

            empList.push(emp);
        });
        formData['employees'] = empList;
        $.ajax({
            url: 'requestController.php?action=addProjectInfo',
            data: {formData: formData, 'id': <?= $id ?>},
            async: true,
            type: 'POST',
            success: function (response) {
                response = JSON.parse(response);
                if (response.display === true) {
                    error_alert(response.msg);
//                    $('#submit').prop('disabled',false);
                } else {
                    location.reload();
//                    window.location.href = "index.php?page=taskControl";
                }
            }
        });
    })
</script>

</script>