PetConnectBackend/pets.html at main · Gulsher17/PetConnectBackend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pets Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
  <div class="max-w-5xl mx-auto bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-bold mb-4">Pets Dashboard</h1>

    <!-- Add Pet Button -->
    <button onclick="showAddForm()" class="mb-4 px-4 py-2 bg-green-600 text-white rounded">+ Add Pet</button>

    <!-- Add Pet Form -->
    <form id="addForm" class="hidden mb-6 space-y-3">
      <input type="text" id="addName" placeholder="Name" class="w-full border p-2 rounded" />
      <input type="text" id="addBreed" placeholder="Breed" class="w-full border p-2 rounded" />
      <input type="number" id="addAge" placeholder="Age" class="w-full border p-2 rounded" />
      <select id="addGender" class="w-full border p-2 rounded">
        <option value="">Select Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <button type="button" onclick="createPet()" class="px-4 py-2 bg-blue-600 text-white rounded">Save Pet</button>
    </form>

    <!-- Pets List -->
    <table class="w-full border">
      <thead>
        <tr class="bg-gray-100">
          <th class="p-2 border">Name</th>
          <th class="p-2 border">Breed</th>
          <th class="p-2 border">Age</th>
          <th class="p-2 border">Status</th>
          <th class="p-2 border">Action</th>
        </tr>
      </thead>
      <tbody id="petsList"></tbody>
    </table>

    <button onclick="window.location.href='auth.html'" class="mt-6 underline text-blue-500">← Back to Dashboard</button>
  </div>

  <script>
    const token = localStorage.getItem("token");

    async function fetchWithAuth(url, options = {}) {
      options.headers = {
        ...options.headers,
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json"
      };
      const res = await fetch(url, options);
      if (!res.ok) throw new Error(await res.text());
      return res.json();
    }

    async function loadPets() {
      try {
        const pets = await fetchWithAuth("/api/pets");
        const list = document.getElementById("petsList");
        list.innerHTML = pets.map(pet => `
          <tr>
            <td class="p-2 border">${pet.name}</td>
            <td class="p-2 border">${pet.breed || "N/A"}</td>
            <td class="p-2 border">${pet.age || "N/A"}</td>
            <td class="p-2 border">${pet.status}</td>
            <td class="p-2 border">
              <a href="petDetails.html?id=${pet._id}" class="text-blue-600 underline">View</a>
            </td>
          </tr>
        `).join("");
      } catch (err) {
        console.error("Failed to load pets:", err);
      }
    }

    function showAddForm() {
      document.getElementById("addForm").classList.toggle("hidden");
    }

    async function createPet() {
      try {
        const body = {
          name: document.getElementById("addName").value,
          breed: document.getElementById("addBreed").value,
          age: document.getElementById("addAge").value,
          gender: document.getElementById("addGender").value,
        };
        await fetchWithAuth("/api/pets", {
          method: "POST",
          body: JSON.stringify(body)
        });
        alert("Pet added!");
        loadPets();
        showAddForm();
      } catch (err) {
        alert("Failed to add pet");
      }
    }

    loadPets();
  </script>
</body>
</html>