3LoadGames

//TODO...

const baseURL= 'http://localhost:3030/jsonstore/games';


const LoadGamesBtn=document.getElementById('load-games');
const EditgameBtn=document.getElementById('edit-game');

const ListGame=document.getElementById('games-list');
const BtnAdd= document.getElementById('add-game');
const BtnEdit= document.getElementById('edit-game');

//input fields
  const Elname=document.getElementById('g-name');
  const Eltype=document.getElementById('type');
  const Elplayers=document.getElementById('players');

  let idgame='';
const LoadGames = async()=> {

     //Fetch all games
     const response = await fetch(baseURL);
     const data= await response.json();
     console.log(Object.values(data));

     ListGame.innerHTML='';
     for (const game of Object.values(data)) {

        const Elp1= document.createElement('p');
        Elp1.textContent=game.name;
        const Elp2= document.createElement('p');
        Elp2.textContent=game.players;
        const Elp3= document.createElement('p');
        Elp3.textContent=game.type;

        const Containerp= document.createElement('div');
        Containerp.classList.add('content');
        Containerp.appendChild(Elp1);
        Containerp.appendChild(Elp2);
        Containerp.appendChild(Elp3);

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

        const btnDelete=document.createElement('button');
        btnDelete.classList.add('delete-btn');
        btnDelete.textContent='Delete';

        const Containerbtns=document.createElement('div');
        Containerbtns.classList.add('buttons-container');

        Containerbtns.appendChild(btnChange);
        Containerbtns.appendChild(btnDelete);

        const Containergame= document.createElement('div');
        Containergame.classList.add('board-game');

        Containergame.appendChild(Containerp);
        Containergame.appendChild(Containerbtns);

        ListGame.appendChild(Containergame);

        btnChange.addEventListener('click',()=>{
            idgame= game._id;
            Elname.value=game.name;
            Eltype.value=game.type;
             Elplayers.value=game.players;

            BtnAdd.setAttribute('disabled','disabled');
            BtnEdit.removeAttribute('disabled');
        })

        btnDelete.addEventListener('click',()=>{

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

            Containergame.remove();

            idgame=null;
           LoadGames();
        })
     }

     BtnEdit.setAttribute('disabled','disabled');
}

LoadGamesBtn.addEventListener('click',LoadGames);

BtnAdd.addEventListener('click',async(e)=>{

    if(Elname.value=='' || Eltype.value ==''|| Elplayers.value==''){
       return;
    }
    e.preventDefault();
    const name=Elname.value;
    const type=Eltype.value;
    const players=Elplayers.value;


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


    Elname.value='';
    Eltype.value='';
    Elplayers.value='';
    LoadGames();
})

BtnEdit.addEventListener('click',async()=>{
    const name=Elname.value;
    const type=Eltype.value;
    const players=Elplayers.value;

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

        body:JSON.stringify({
          _id: idgame,
         name,
         type,
         players

      })
      });


      Elname.value='';
      Eltype.value='';
      Elplayers.value='';
      LoadGames();
       BtnEdit.setAttribute('disabled','disabled');
       BtnAdd.removeAttribute('disabled');


       idgame=null;
})