VacationSchedule

const baseURL='http://localhost:3030/jsonstore/tasks';
const btnLoad= document.getElementById('load-vacations');

const listList= document.getElementById('list');
const BtnAddVacation= document.getElementById('add-vacation');
const BtnEditVacation= document.getElementById('edit-vacation');

const Elementname= document.getElementById('name');
const Elementdays=document.getElementById('num-days');
const Elementdate=document.getElementById('from-date');

const DoneBtn= document.getElementById('done-btn');

let idvacation;

    const LoadVacations= async()=> {
        const response = await fetch(baseURL);
        const data= await response.json();

        console.log(Object.values(data));
        listList.innerHTML='';
       for (const vac of Object.values(data)) {

        const Elementh1=document.createElement('h2');
        Elementh1.textContent=vac.name;
        const Elementh2=document.createElement('h3');
        Elementh2.textContent=vac.date;
        const Elementh3=document.createElement('h3');
        Elementh3.textContent=vac.days;

        const btnChange=document.createElement('button');
        btnChange.classList.add('change-btn');
        btnChange.textContent='Change';

        const btnDone=document.createElement('button');
        btnDone.classList.add('done-btn');
        btnDone.textContent='Done';

        const Containerdiv=document.createElement('div');
        Containerdiv.classList.add('container');

        Containerdiv.appendChild(Elementh1);
        Containerdiv.appendChild(Elementh2);
        Containerdiv.appendChild(Elementh3);
        Containerdiv.appendChild(btnChange);
        Containerdiv.appendChild(btnDone);

        listList.appendChild(Containerdiv);

        btnChange.addEventListener('click',()=>{
            Containerdiv.remove();

            Elementname.value=vac.name;
            Elementdays.value=vac.days;
            Elementdate.value= vac.date;

            BtnEditVacation.removeAttribute('disabled');
            BtnAddVacation.setAttribute('disabled','disabled');
            idvacation=vac._id;
        });



        btnDone.addEventListener('click',async()=>{

      const response= await fetch(`${baseURL}/${vac._id}`,{
        method:'DELETE'
     });

     Containerdiv.remove();
})
   }
    }


    btnLoad.addEventListener('click',LoadVacations);

    BtnAddVacation.addEventListener('click',async(e)=>{
        e.preventDefault();
        const name= Elementname.value;
        const days= Elementdays.value;
        const date= Elementdate.value;

        const response= await fetch(baseURL, {
            method :'POST',
            headers:{
            'content-type':'application/json',
            },
            body: JSON.stringify({name,days,date }),
            });

            await  LoadVacations();

            Elementname.value="";
            Elementdays.value="";
            Elementdate.value="";
    })

    BtnEditVacation.addEventListener('click',async(e)=>{
        e.preventDefault();
        const name= Elementname.value;
        const days= Elementdays.value;
        const date= Elementdate.value;


    //make put request
    const response= await fetch(`${baseURL}/${idvacation}`,{
        method:'PUT',
        headers:{
          'content-type':'application/json',
        },

        body:JSON.stringify({
          _id: idvacation,
         name,
         days,
         date

      })
    });


    LoadVacations();
    BtnAddVacation.removeAttribute('disabled');
    BtnEditVacation.setAttribute('disabled','disabled');
});