djwesleyborges · August 24, 2023 17:46
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <script src="//unpkg.com/alpinejs" defer></script>
  <title>Simple CRUD</title>
 </head>

 <body>
  <div x-data="appData()">
    <h1>Lista de Faixas</h1>
    <form @submit.prevent="submitForm">
      <input type="text" x-model="form.name" placeholder="Nome da Faixa">
      <button x-show="!editing" type="submit">Adicionar</button>
      <button x-show="editing" @click="updateItem">Salvar Edições</button>
    </form>
    <ul>
      <template x-for="track in tracks" :key="track.id">
        <li x-text="track.title"></li>
      </template>
      <button @click="deleteItem(track.id)">Remover</button>
      </li>
    </ul>
  </div>

  <script>
    function appData() {
      return {
        form: {
          name: '',
        },
        editing: false,
        editedIndex: null,
        tracks: [],

        submitForm() {
          if (this.editing) {
            this.updateItem();
          } else {
            this.addItem();
          }
        },

        addItem() {
          // Lógica para enviar o formulário e adicionar uma faixa via POST
          // Atualize 'tracks' com a resposta do servidor
        },

        editItem(index) {
          this.editing = true;
          this.editedIndex = index;
          this.form.name = this.tracks[index].name;
        },

        updateItem() {
          const id = this.tracks[this.editedIndex].id;
          // Lógica para enviar as atualizações da faixa via PUT
          // Atualize 'tracks' com a resposta do servidor
          this.cancelEditing();
        },

        deleteItem(id) {
          // Lógica para excluir uma faixa via DELETE
          // Atualize 'tracks' removendo o item correspondente
        },

        cancelEditing() {
          this.editing = false;
          this.editedIndex = null;
          this.form.name = '';
        },

        // Carregar faixas iniciais via API GET
        async fetchTracks() {
          const response = await fetch('http://localhost:8000/api/tracks');
          this.tracks = await response.json();
        },
      };
    }
    appData().fetchTracks();
  </script>

 </body>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
	<script src="//unpkg.com/alpinejs" defer></script>
	<title>Simple CRUD</title>
	</head>

	<body>
	<div x-data="appData()">
	<h1>Lista de Faixas</h1>
	<form @submit.prevent="submitForm">
	<input type="text" x-model="form.name" placeholder="Nome da Faixa">
	<button x-show="!editing" type="submit">Adicionar</button>
	<button x-show="editing" @click="updateItem">Salvar Edições</button>
	</form>
	<ul>
	<template x-for="track in tracks" :key="track.id">
	<li x-text="track.title"></li>
	</template>
	<button @click="deleteItem(track.id)">Remover</button>
	</li>
	</ul>
	</div>

	<script>
	function appData() {
	return {
	form: {
	name: '',
	},
	editing: false,
	editedIndex: null,
	tracks: [],

	submitForm() {
	if (this.editing) {
	this.updateItem();
	} else {
	this.addItem();
	}
	},

	addItem() {
	// Lógica para enviar o formulário e adicionar uma faixa via POST
	// Atualize 'tracks' com a resposta do servidor
	},

	editItem(index) {
	this.editing = true;
	this.editedIndex = index;
	this.form.name = this.tracks[index].name;
	},

	updateItem() {
	const id = this.tracks[this.editedIndex].id;
	// Lógica para enviar as atualizações da faixa via PUT
	// Atualize 'tracks' com a resposta do servidor
	this.cancelEditing();
	},

	deleteItem(id) {
	// Lógica para excluir uma faixa via DELETE
	// Atualize 'tracks' removendo o item correspondente
	},

	cancelEditing() {
	this.editing = false;
	this.editedIndex = null;
	this.form.name = '';
	},

	// Carregar faixas iniciais via API GET
	async fetchTracks() {
	const response = await fetch('http://localhost:8000/api/tracks');
	this.tracks = await response.json();
	},
	};
	}
	appData().fetchTracks();
	</script>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

	</html>