window.onload = init;

// let b;

​

let liste;

​

function init() {

    // on récupère la liste ul avec selector API

    // param = selecteur CSS

​

   liste = $("#listeRestaus");

  afficherLesRestaurants();

  // on aurait pu faire ça

  //b = document.querySelector("#boutonAjouter");

  //b.addEventlistener("click", ajouterRestaurant)

}

​

let restaurants = [

  {

    id:1,

    nom:'Sun city café',

    cuisine: 'francaise'

  },

  {

    id:2,

    nom:'Café de Paris',

    cuisine: 'Française'

  }

];

​

function afficherLesRestaurants() {

  console.log("afficher les restaurants");

  restaurants.forEach(r => {

    console.log(r.nom);

    $('<li>'+ r.nom + ", cuisine " + r.cuisine + '</li>')

    .appendTo(liste)

    .attr('id', r.id)

    .click(supprimerRestaurant);

  })

}

​

​

function ajouterRestaurant() {

  let nom = $("#nom").val(); // jQuery

  let cuisine = $("#cuisine").val();

  console.log("Ajout du restaurant " + nom);

​

  // on le rajoute au tableau 

  const nouveauRestaurant = {

    id: _.uniqueId('restaurant_'),

    nom: nom,

    cuisine: cuisine

  }

  restaurants.push(nouveauRestaurant);

  console.log(restaurants);

    $('<li>'+ nouveauRestaurant.nom + ", cuisine " + nouveauRestaurant.cuisine + '</li>')

    .appendTo(liste)

    .attr('id', nouveauRestaurant.id)

    .click(supprimerRestaurant);

​

}

​

function supprimerRestaurant(event) {

  let li = $(this); // equivalent au event.targer en jquery

  console.log("supprimer restaurant id=" + li.id);

  for(let i = 0; i < restaurants.length; i++) {

    if(restaurants[i].id == li.id) {

        // supprime 1 element à la position i

        restaurants.splice(i, 1);

​

      break;

    }

  }

  // On doit aussi supprimer le li de l'affichage

  li.remove();

}