klnodekb/views/Modals/modal_workReportEdit.pug

#workReportEditModal.modal(tabindex='-1', role='dialog', aria-labelledby='workReportEditModalLabel')
    //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
    style(type="text/css").
        .aaa:active,
        .aaa.active {
        background: red !important;
        box-shadow: none !important;
        }
    .modal-dialog(role='document', style='width:1000px;')
        .modal-content
            .modal-header#workReportEditHeader.bg-primary(style="background: Primary")
                h4 #{workTitle}
            .modal-body(style='background-color:#5f6b79')
                
                form#kabelform2
                    #form-group
                    input#wn1(name='wn1',style='display:none')
                    input#userid(name='userid',style='display:none', value=user._id)
                    input#id(name='id',style='display:none')
                    input#modify(name='modify',style='display:none')
                         
                    .row
                        .col-sm-12
                            label(for="workFlow",style='color: white') Munka leírása:
                            input.form-control(id='workFlow', name='workFlow', required, minlength="6",type=text, autofocus, readonly=false,style='')  
                    br
                    .row 
                        .col-sm-12
                        #buttons2(style="margin: 10px;")
                        
                        h4#arc
                    br   
                    //button#submit.btn.btn-primary(type='submit' ) Rendben  
                           
            .modal-footer(style="background-color: #2C3446")

        
                button#sendData.btn.btn-primary(type='button',data-dismiss='modal') Mentés  
                button#fmodalClose.btn.btn-primary(type='button', data-dismiss='modal') Mégsem
                
            script(src='/bower_components/jquery/dist/jquery.min.js')
            //-script(src='/bower_components/bootstrap-validator/dist/validator.min.js')
script.
            var cid=0;
            var workers=[]
            var usedWorkers=[]
           const form = document.getElementById('kabelform2');           
                 function handleClick(identifier) {
                    const state=$(identifier).hasClass('active');
                    //const d=JSON.parse(decodeURIComponent($(identifier).data('item')))
                    const d=$(identifier).data('id')
                    const name=$(identifier).data('name')
                    if (!state)
                    {
                        workers.push({employeeId:d, name:name});
                    }
                    else 
                    {
                        workers=workers.filter(obj=>obj.employeeId!==d);
                    }
                    if (workers.length)
                    {
                        document.getElementById("sendData").disabled=false
                    }
                    else 
                    {
                        document.getElementById("sendData").disabled=true
                    }
                    $('#arc').text(JSON.stringify(workers))
                    }
                    function textChanged(){
                        var length=document.getElementById("workFlow").value.length
                        if (length>3)
                        {
                            let divElement = document.getElementById("buttons2");
                            $.each(divElement.children,function(i,item){
                                if (workers.some(item3 => item3.employeeId === item.id)){
                                    item.classList.add("active")
                                }
                                if (usedWorkers.some(item2 => item2.employeeId === item.id)===false){
                                    item.disabled=false
                                }
                                
                            })
                            if (workers.length)
                            {
                                document.getElementById("sendData").disabled=false
                            }
                        }else{
                            let divElement = document.getElementById("buttons2");
                            $.each(divElement.children,function(i,item){

                                item.disabled=true
                            item.classList.remove("active")
                            })
                            workers=[]
                            document.getElementById("sendData").disabled=true
                        }
                        }
            $(document).ready(function () {
                var wid = document.getElementById ('wn').textContent;
                var uid = document.getElementById ('uid').textContent;
                var workFlowId=""
               

                const title=document.getElementById ('wn').textContent;
                document.getElementById("workFlow").onkeydown = function() {
                    textChanged();
                    };
                    $('#workFlow').change(function(event) {
                    //do stuff with the "event" object as the object that called the method
                    textChanged();
                    }
                    );                    

                document.getElementById('sendData').addEventListener('click', function(a) {
                    const workFlowTitle = document.getElementById('workFlow').value;
                    var dummy=document.getElementById('dummy').textContent
                    var t=JSON.parse(dummy);
                    //let result = t.workFlow.find(obj => obj._id === workFlowId);                    
                    var foundIndex = t.workFlow.findIndex(x => x._id == workFlowId);
                    const workFlowItem=
                    {
                        Title : workFlowTitle,
                        employeeList: workers
                    }
                   t.workFlow[foundIndex].Title=workFlowTitle;
                   t.workFlow[foundIndex].employeeList=workers;
                     document.getElementById('dummy').textContent=JSON.stringify(t)   
                     updateEditTable()                 
                })
                // Modal megjelenítése esemény
                $(document).on('show.bs.modal','#workReportEditModal', function (event) {
                    form.reset();
                    document.getElementById("sendData").disabled=true
                    var dummy=document.getElementById('dummy').textContent

                    var button = $(event.relatedTarget); // button the triggered modal
  			         workFlowId = button.data("rid"); //data-id of button which is equal to id (primary key) of person
                    
                    
                    var t=JSON.parse(dummy);
                    let result = t.workFlow.find(obj => {
                        if (obj._id){
                            return obj._id=== workFlowId
                        } 
                        else {
                            return obj.cid=== workFlowId
                        }
                        });
                    document.getElementById("workFlow").value=result.Title
                    
                    workers=[]
                    usedWorkers=[];
                    
                    workers=result.employeeList;


                    $.each(t.workFlow,function(i,item){
                        if(item._id!=result._id)
                        {
                        var arr=usedWorkers
                        usedWorkers=[...arr,...item.employeeList]//.push(item.employeeList)
                        }
                    })
                    
                        let divElement = document.getElementById("buttons2");
                        while (divElement.firstChild) {
                            divElement.removeChild(divElement.firstChild);
                        }
                       // const title=document.getElementById ('headertitle').textContent;
                        
            //var foo = document.getElementById("buttons");
            //Append the element in page (in span).  
                       
            //Fetch workReport
            
          fetch('/workreportUserList', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
            }
          })
            .then(response => response.json())
            .then(data => {
              console.log(data)
              $.each(data.users,function(i,item){
                var data_str = encodeURIComponent(JSON.stringify(item));
                $('<button class="btn btn-primary aaa" disabled onclick="handleClick(this)" id="'+item._id+'" data-item="'+data_str+'" data-name="'+item.name+'" data-id="'+item._id+'" style="width:150px;margin: 3px" data-toggle="button" type="button">'+item.name+'</button>').appendTo('#buttons2');
              })
              textChanged()
            })
            .catch(error => console.error('Error:', error));  
           })  

            });