klnodekb/views/gantt_holiday.pug

extends layout

block content
    link(rel='stylesheet' href='/bower_components/jquery-typeahead/dist/jquery.typeahead.min.css')
    
    link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.6.1/css/all.css', integrity='sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP', crossorigin='anonymous')
    link(href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet')
    style(type="text/css").
        #calendar {
        height: 100%;
        margin: 40px auto;
      }
      .fc-event.hidden {
      display: none;
      }
      .badge{
          position: relative !important;
          right: -1.7em !important;
          top: -0.7em !important;
         

      }

      //-.container#wrapper(style='width:100%;')
    .mainContainer
      .panel.panel-primary
        .panel-heading
          h2.contHeader #{title}
        .panel-body
        
          .container(style='width:100%; ')
            button.btn.btn-warning(id='toggleAll',class='toggleAll',style='margin-right:4px;margin-bottom: 4px',data-view='auto') Mind elrejt
          .container#buttonsEmp(style='width:100%; ')
              each employee, l in employees
                button.btn.btn-none(id=employee._id,class='toggle',style='width:200px;margin-right:4px;margin-bottom: 4px; color:white',data-index=l,data-empId=employee._id,data-view='auto',data-color=employee.color)&attributes({'style': 'background-color:'+employee.color}) 
                  | #{employee.name}
                  span.badge.badge-warning
                    | #{employee.vacationYear+'/'+employee.vacationUsed}
                    
          #calendar(style="background-color: white")
    script(src='/bower_components/jquery/dist/jquery.js')
    script(src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js')
    //-script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js')
    script(type='text/javascript').
     $(document).ready(async function() {
            //var toggle=[];
            //const response = await fetch('/gantt_holidays/getcolors');
            //const colors = await response.json();
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'multiMonthYear',
            locale: 'hu',
            firstDay: 1,
            eventLimit:true,
            dayMaxEvents: 10,
            dayMaxEventRows: 10,
            displayEventTime: false,
            editable: false,
            height: 'auto',
            //initialEvents: res,
            events: '/gantt_holidays/data/all/'+moment().format("YYYY"),
            weekNumbers: true,
            themeSystem: 'default',
              eventClick: function(info) {
              //alert('Event: ' + info.event.title+'\n'+info.event.id+'\n'+info.event.extendedProps.employeeId);
              console.log('Event: ' + info.event.title+'\n'+info.event.id+'\n'+info.event.extendedProps.employeeId)

              // change the border color just for fun
              info.el.style.borderColor = 'red';
            },
            // ÉV választás
                datesSet: async function (info) {
                calendar.removeAllEventSources();
                calendar.addEventSource('/gantt_holidays/data/all/'+moment(info.view.activeStart).format("YYYY"))    
                
                //Az összes gomb visszaállítása.
                const buttonsEmp = document.querySelectorAll('.toggle')

                buttonsEmp.forEach(await function(currentBtn){
                      currentBtn.style='\
                                        width:200px; \
                                        margin-right: \
                                        4px;margin-bottom: 4px; \
                                        color: white; \
                                        background-color:'+currentBtn.dataset.color

                  })
              }

            });
              
              calendar.render();
              function handleEvent(ev)
              {
                const empid=ev.target.dataset.empid
                const btnIndex=ev.target.dataset.index
                var visible=ev.target.dataset.view
                if (visible=='auto')
                {
                    //ev.target.className='btn btn-none col-sm-1 toggle'
                    ev.target.dataset.view='none'
                    ev.target.style='margin-right:4px;margin-bottom: 4px;'
                }
                else 
                {
                  //ev.target.className='btn btn-none col-sm-1 toggle'
                  ev.target.dataset.view='auto'
                  ev.target.style='margin-right:4px;margin-bottom: 4px; background-color:'+ev.target.dataset.color//colors[btnIndex]
                  
                }
                
                console.log(empid)
                let event = calendar.getEventById(empid)
                let eventList=calendar.getEvents();
                eventList.forEach(function(evt){
                  if (evt.extendedProps.employeeId==empid)
                  {
                      evt.setProp('display', ev.target.dataset.view ) ;  
                  }
                })

              }

              async function handleEventAll(ev)
              {
              
                var visible=ev.target.dataset.view
                //console.log('Before'+ev.target.dataset.view)
                if (visible=='auto')
                {
                    ev.target.className='btn btn-none toggleAll'
                    ev.target.dataset.view='none'
                    ev.target.dataset.textContent='Mind látszik'
                    ev.target.dataset.url='/gantt_holidays/data/none'
                   
                }
                else 
                {
                  ev.target.className='btn btn-warning toggleAll'
                  ev.target.dataset.view='auto'
                  ev.target.dataset.textContent='Mind elrejt'
                  ev.target.dataset.url='/gantt_holidays/data/all'
                  
                }
                ev.target.textContent=ev.target.dataset.textContent
                //console.log('After'+ev.target.dataset.view)
                calendar.removeAllEventSources();
                calendar.addEventSource(ev.target.dataset.url+moment(calendar.currentData.currentDate).format("YYYY"))
                
                const buttons = document.querySelectorAll('.toggle')

                buttons.forEach(await function(currentBtn){
                    if (ev.target.dataset.view=='auto')
                    {
                      currentBtn.style='width:200px;margin-right:4px;margin-bottom: 4px; color: white;background-color:'+currentBtn.dataset.color
                    }
                    else 
                    {
                      currentBtn.style='width:200px;margin-right:4px;margin-bottom: 4px; color:black'
                      
                    }
                    currentBtn.dataset.view=ev.target.dataset.view
                  })
              }


              const buttons = document.querySelectorAll('.toggle')
              buttons.forEach(function(currentBtn){
                currentBtn.addEventListener('click', handleEvent)
              })
              const buttonAll = document.getElementById('toggleAll')
              
                buttonAll.addEventListener('click', handleEventAll)
              
            //document.querySelector(".toggle").addEventListener('click',function(ev) {

              //calendar.changeView('timeGridWeek');
              
           
      })