PetConnectBackend/petDetails.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pet Details</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
  <div class="max-w-3xl mx-auto bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-bold mb-4" id="petName">Pet Details</h1>

    <!-- Pet Info -->
    <div id="petDetails" class="space-y-2 text-gray-700"></div>

    <!-- Staff/Admin Controls -->
    <div id="staffControls" class="mt-6 hidden">
      <button onclick="showEditForm()" class="px-4 py-2 bg-blue-600 text-white rounded">Edit Pet</button>
      <button onclick="deletePet()" class="px-4 py-2 bg-red-600 text-white rounded">Delete Pet</button>
    </div>

    <!-- Adopter Controls -->
    <div id="adopterControls" class="mt-6 hidden">
      <button onclick="requestAdoption()" class="px-4 py-2 bg-green-600 text-white rounded">Request Adoption</button>
      <button onclick="requestFoster()" class="px-4 py-2 bg-yellow-600 text-white rounded">Request Foster</button>
    </div>

    <!-- Edit Form -->
    <form id="editForm" class="hidden mt-6 space-y-3">
      <input type="text" id="editName" placeholder="Name" class="w-full border p-2 rounded" />
      <input type="text" id="editBreed" placeholder="Breed" class="w-full border p-2 rounded" />
      <input type="number" id="editAge" placeholder="Age" class="w-full border p-2 rounded" />
      <select id="editGender" 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="updatePet()" class="px-4 py-2 bg-green-600 text-white rounded">Save</button>
    </form>

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

  <script>
    const token = localStorage.getItem("token");
    const petId = new URLSearchParams(window.location.search).get("id");

    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 loadPet() {
      try {
        const pet = await fetchWithAuth(`/api/pets/${petId}`);
        document.getElementById("petName").innerText = pet.name;

        document.getElementById("petDetails").innerHTML = `
          <p><strong>Breed:</strong> ${pet.breed || "N/A"}</p>
          <p><strong>Age:</strong> ${pet.age || "N/A"}</p>
          <p><strong>Gender:</strong> ${pet.gender || "N/A"}</p>
          <p><strong>Status:</strong> ${pet.status}</p>
          <p><strong>Energy Level:</strong> ${pet.energyLevel || "N/A"}</p>
          <p><strong>Temperament:</strong> ${(pet.temperament || []).join(", ") || "N/A"}</p>
        `;

        // Get current user role
        const user = await fetchWithAuth("/api/users/me");
        if (user.role === "staff" || user.role === "admin") {
          document.getElementById("staffControls").classList.remove("hidden");
        }
        if (user.role === "adopter") {
          document.getElementById("adopterControls").classList.remove("hidden");
        }
      } catch (err) {
        console.error("Error loading pet:", err);
      }
    }

    function showEditForm() {
      document.getElementById("editForm").classList.remove("hidden");
    }

    async function updatePet() {
      try {
        const body = {
          name: document.getElementById("editName").value,
          breed: document.getElementById("editBreed").value,
          age: document.getElementById("editAge").value,
          gender: document.getElementById("editGender").value,
        };
        await fetchWithAuth(`/api/pets/${petId}/details`, {
          method: "PATCH",
          body: JSON.stringify(body)
        });
        alert("Pet updated!");
        loadPet();
      } catch (err) {
        alert("Failed to update pet");
      }
    }

    async function deletePet() {
      if (!confirm("Are you sure you want to delete this pet?")) return;
      try {
        await fetchWithAuth(`/api/pets/${petId}`, { method: "DELETE" });
        alert("Pet deleted!");
        window.location.href = "pets.html";
      } catch (err) {
        alert("Failed to delete pet");
      }
    }

    async function requestAdoption() {
      try {
        await fetchWithAuth(`/api/pets/${petId}/adopt`, { method: "POST" });
        alert("Adoption request submitted!");
        loadPet();
      } catch (err) {
        alert("Failed to request adoption");
      }
    }

    async function requestFoster() {
      try {
        await fetchWithAuth(`/api/pets/${petId}/foster`, { method: "POST" });
        alert("Foster request submitted!");
        loadPet();
      } catch (err) {
        alert("Failed to request foster");
      }
    }

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