Merge pull request #15 from lzpmpc005/v

html frontend and view logic
lzpmpc005 · Feb 26, 2024 · 648bf3c · 648bf3c
2 parents 90e16df + a97624d
commit 648bf3c
Show file tree

Hide file tree

Showing 60 changed files with 60,192 additions and 435 deletions.
diff --git a/DigitalZoo/__pycache__/views.cpython-311.pyc b/DigitalZoo/__pycache__/views.cpython-311.pyc
diff --git a/DigitalZoo/templates/add.html b/DigitalZoo/templates/add.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Entity</title>
+</head>
+<body>
+    <h2>Add Entity</h2>
+    <form id="addEntityForm" method="POST">
+        {% csrf_token %}
+        <label for="entity_type">Entity Type:</label>
+        <select name="entity_type" id="entity_type">
+            <option value="species">Species</option>
+            <option value="animal">Animal</option>
+            <option value="venue">Venue</option>
+        </select>
+        <br><br>
+
+        <div id="speciesFields">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name"><br>
+            <label for="habitat">Habitat:</label>
+            <input type="text" id="habitat" name="habitat"><br>
+            <label for="temperature">Temperature:</label>
+            <input type="text" id="temperature" name="temperature"><br>
+            <label for="humidity">Humidity:</label>
+            <input type="text" id="humidity" name="humidity"><br>
+            <label for="light_intensity">Light Intensity:</label>
+            <input type="text" id="light_intensity" name="light_intensity"><br>
+        </div>
+
+        <div id="animalFields" style="display: none;">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name"><br>
+            <label for="age">Age:</label>
+            <input type="text" id="age" name="age"><br>
+            <label for="diet">Diet:</label>
+            <input type="text" id="diet" name="diet"><br>
+            <label for="species">Species:</label>
+            <select name="species" id="species">
+                {% for species in species_list %}
+                    <option value="{{ species.id }}">{{ species.name }}</option>
+                {% endfor %}
+            </select><br>
+            <label for="venue">Venue:</label>
+            <select name="venue" id="venue">
+                {% for venue in venue_list %}
+                    <option value="{{ venue.id }}">{{ venue.name }}</option>
+                {% endfor %}
+            </select><br>
+        </div>
+
+        <div id="venueFields" style="display: none;">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name"><br>
+            <label for="habitat">Habitat:</label>
+            <input type="text" id="habitat" name="habitat"><br>
+            <label for="location">Location:</label>
+            <input type="text" id="location" name="location"><br>
+            <label for="size">Size:</label>
+            <input type="text" id="size" name="size"><br>
+            <label for="temperature">Temperature:</label>
+            <input type="text" id="temperature" name="temperature"><br>
+            <label for="humidity">Humidity:</label>
+            <input type="text" id="humidity" name="humidity"><br>
+            <label for="light_intensity">Light Intensity:</label>
+            <input type="text" id="light_intensity" name="light_intensity"><br>
+        </div>
+        <br>
+        <button type="submit">Submit</button>
+    </form>
+    <script>
+        function submitForm(submitType) {
+            var form = document.getElementById('addEntityForm');
+            var entityType = document.getElementById('entity_type').value;
+
+            if (submitType === 'json') {
+                var formData = {};
+                formData['entity_type'] = entityType;
+
+                if (entityType === 'species') {
+                    formData['name'] = document.getElementById('species_name').value;
+
+                } else if (entityType === 'animal') {
+                    formData['name'] = document.getElementById('animal_name').value;
+
+                } else if (entityType === 'venue') {
+                    formData['name'] = document.getElementById('venue_name').value;
+
+                }
+
+                fetch('/add_entity/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': '{{ csrf_token }}' // Django CSRF token
+                    },
+                    body: JSON.stringify(formData)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    console.log('Success:', data);
+
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+
+                });
+            } else if (submitType === 'form') {
+
+                form.submit();
+            }
+        }
+        document.getElementById('entity_type').addEventListener('change', function() {
+            var entityType = this.value;
+            var speciesFields = document.getElementById('speciesFields');
+            var animalFields = document.getElementById('animalFields');
+            var venueFields = document.getElementById('venueFields');
+
+            if (entityType === 'species') {
+                speciesFields.style.display = 'block';
+                animalFields.style.display = 'none';
+                venueFields.style.display = 'none';
+            } else if (entityType === 'animal') {
+                speciesFields.style.display = 'none';
+                animalFields.style.display = 'block';
+                venueFields.style.display = 'none';
+            } else if (entityType === 'venue') {
+                speciesFields.style.display = 'none';
+                animalFields.style.display = 'none';
+                venueFields.style.display = 'block';
+            }
+        });
+    </script>
+    <div>
+        <button onclick="location.href='/homepage/'">Homepage</button>
+    </div>
+</body>
+</html>
+</body>
+</html>
diff --git a/DigitalZoo/templates/animalmanagement.html b/DigitalZoo/templates/animalmanagement.html
diff --git a/DigitalZoo/templates/delete.html b/DigitalZoo/templates/delete.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Delete Entity</title>
+</head>
+<body>
+    <h2>Delete Entity</h2>
+
+    <h3>Species</h3>
+    <ul>
+        {% for species in species_list %}
+        <li>
+            {{ species.name }} - <button onclick="deleteEntity('species', {{ species.id }})">Delete</button>
+        </li>
+        {% endfor %}
+    </ul>
+
+    <h3>Animal</h3>
+    <ul>
+        {% for animal in animal_list %}
+        <li>
+            {{ animal.name }} - <button onclick="deleteEntity('animal', {{ animal.id }})">Delete</button>
+        </li>
+        {% endfor %}
+    </ul>
+
+    <h3>Venue</h3>
+    <ul>
+        {% for venue in venue_list %}
+        <li>
+            {{ venue.name }} - <button onclick="deleteEntity('venue', {{ venue.id }})">Delete</button>
+        </li>
+        {% endfor %}
+    </ul>
+
+    <script>
+        function deleteEntity(entityType, entityId) {
+            fetch('/delete_entity/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-CSRFToken': '{{ csrf_token }}'
+                },
+                body: new URLSearchParams({
+                    entity_type: entityType,
+                    entity_id: entityId
+                })
+            })
+            .then(response => {
+                if (response.ok) {
+                    window.location.reload(); // Refresh page after successful deletion
+                } else {
+                    console.error('Error deleting entity:', response.statusText);
+                }
+            })
+            .catch(error => console.error('Error deleting entity:', error));
+        }
+    </script>
+    <div>
+        <button onclick="location.href='/homepage/'">Homepage</button>
+    </div>
+</body>
+</html>
diff --git a/DigitalZoo/templates/edit.html b/DigitalZoo/templates/edit.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Entity</title>
+</head>
+<body>
+    <h2>Edit Entity</h2>
+
+    <h3>Species</h3>
+    {% for s in species %}
+    <div>
+        <p>{{ s.name }}</p>
+
+        <button onclick="editEntity('species', {{ s.id }})">Edit</button>
+    </div>
+    {% endfor %}
+
+
+    <h3>Animals</h3>
+    {% for a in animals %}
+    <div>
+        <p>{{ a.name }}</p>
+
+        <button onclick="editEntity('animal', {{ a.id }})">Edit</button>
+    </div>
+    {% endfor %}
+
+
+    <h3>Venues</h3>
+    {% for v in venues %}
+    <div>
+        <p>{{ v.name }}</p>
+
+        <button onclick="editEntity('venue', {{ v.id }})">Edit</button>
+    </div>
+    {% endfor %}
+
+
+    <form id="updateForm" style="display: none;">
+
+        <input type="hidden" id="entityType" name="entity_type">
+        <input type="hidden" id="entityId" name="entity_id">
+
+        <button type="submit">Save</button>
+    </form>
+
+    <script>
+        function editEntity(entityType, entityId) {
+            // Populate the form with the current entity details
+            document.getElementById('entityType').value = entityType;
+            document.getElementById('entityId').value = entityId;
+            // Show the form
+            document.getElementById('updateForm').style.display = 'block';
+        }
+
+
+        document.getElementById('updateForm').addEventListener('submit', function(event) {
+            event.preventDefault(); 
+            var form = this;
+            var formData = new FormData(form); // Create FormData object from form data
+
+            fetch('/edit_entity/', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                alert(data.message); 
+
+                form.style.display = 'none';
+            })
+            .catch(error => console.error('Error updating entity:', error));
+        });
+    </script>
+    <div>
+        <button onclick="location.href='/homepage/'">Homepage</button>
+    </div>
+</body>
+</html>