Skip to content

Commit b9a5d38

Browse files
iKnowJavaScriptiKnowJavaScript
committed
Added delete feature to admin dashboard
1 parent 63a3f07 commit b9a5d38

File tree

2 files changed

+76
-49
lines changed

2 files changed

+76
-49
lines changed

‎db.json

Lines changed: 36 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,39 @@
11
{
2-
"animals": [
3-
{
4-
"id": 1,
5-
"name": "Camel",
6-
"species": "Camelidae Diomedarius",
7-
"family": "Camelius",
8-
"class": "Mammalia",
9-
"category": "land",
10-
"external-link": "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=33&cad=rja&uact=8&ved=2ahUKEwjHxMvo4NvgAhVStHEKHXrMBwoQmhMwIHoECAUQAg&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCamel&usg=AOvVaw0NjLn-kyh76RRgv2zYTDXG",
11-
"image": "https://rangerrick.org/wp-content/uploads/2018/07/Camels-by-Roland-Seitre-Minden-1156x650.jpg",
12-
"info": "A camel is an even-toed ungulate in the genus Camelus that bears distinctive fatty deposits known as 'humps' on its back. Camels have long been domesticated and, as livestock, they provide food and textiles"
13-
},
14-
{
15-
"name": "Tiger",
16-
"species": "Panthera",
17-
"family": "Felidae",
18-
"class": "Mammalia",
19-
"category": "land",
20-
"external": "https://en.wikipedia.org/wiki/Tiger",
21-
"image": "https://images.theconversation.com/files/242298/original/file-20181025-71032-1hmrk2l.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip",
22-
"info": "The tiger is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, jaguar, leopard, and snow leopard.",
23-
"id": 2
24-
},
25-
{
26-
"name": "Tiger",
27-
"species": "Panthera",
28-
"family": "Felidae",
29-
"class": "Mammalia",
30-
"category": "land",
31-
"external": "https://en.wikipedia.org/wiki/Tiger",
32-
"image": "https://images.theconversation.com/files/242298/original/file-20181025-71032-1hmrk2l.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip",
33-
"info": "The tiger is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, jaguar, leopard, and snow leopard.",
34-
"id": 3
35-
}
36-
],
37-
"admin": {
38-
"id": 1,
39-
"username": "admin",
40-
"password": "admin"
2+
"animals": [
3+
{
4+
"id": 1,
5+
"name": "Camel",
6+
"species": "Camelidae Diomedarius",
7+
"family": "Camelius",
8+
"class": "Mammalia",
9+
"category": "land",
10+
"external-link": "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=33&cad=rja&uact=8&ved=2ahUKEwjHxMvo4NvgAhVStHEKHXrMBwoQmhMwIHoECAUQAg&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCamel&usg=AOvVaw0NjLn-kyh76RRgv2zYTDXG",
11+
"image": "https://rangerrick.org/wp-content/uploads/2018/07/Camels-by-Roland-Seitre-Minden-1156x650.jpg",
12+
"info": "A camel is an even-toed ungulate in the genus Camelus that bears distinctive fatty deposits known as 'humps' on its back. Camels have long been domesticated and, as livestock, they provide food and textiles"
4113
},
42-
"category": [
43-
{
44-
"sea": "sea"
45-
},
46-
{
47-
"land": "land"
48-
}
49-
]
14+
{
15+
"name": "Tiger",
16+
"species": "Panthera",
17+
"family": "Felidae",
18+
"class": "Mammalia",
19+
"category": "land",
20+
"external": "https://en.wikipedia.org/wiki/Tiger",
21+
"image": "https://images.theconversation.com/files/242298/original/file-20181025-71032-1hmrk2l.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip",
22+
"info": "The tiger is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, jaguar, leopard, and snow leopard.",
23+
"id": 3
24+
}
25+
],
26+
"admin": {
27+
"id": 1,
28+
"username": "admin",
29+
"password": "admin"
30+
},
31+
"category": [
32+
{
33+
"sea": "sea"
34+
},
35+
{
36+
"land": "land"
37+
}
38+
]
5039
}

‎javascript/dashboard.js

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $(document).ready(function() {
2424
<div class="d-flex justify-content-between align-items-center">
2525
<div class="btn-group">
2626
<button type="button" class="btn btn-sm btn-outline-secondary">Edit </button>
27-
<button type="button" class="btn btn-sm btn-outline-secondary">Delete</button>
27+
<button type="button" data-id=${animal.id} class="btn btn-sm btn-outline-secondary remove">Delete</button>
2828
</div>
2929
</div>
3030
</div>
@@ -53,4 +53,42 @@ $(document).ready(function() {
5353
}
5454
});
5555
});
56-
})
56+
57+
//delete animal
58+
$divAppendEdit.delegate('.remove','click', function(e) { //.delete has not been added to the page yet hence
59+
e.preventDefault();
60+
let $div = $(this).closest('div');
61+
62+
$.ajax({
63+
type: 'DELETE',
64+
url: 'http://localhost:3000/animals/' + $(this).attr('data-id'),
65+
success: function() {
66+
$div.fadeOut(300, function() {
67+
$(this).remove();
68+
})
69+
}
70+
})
71+
})
72+
})
73+
74+
75+
76+
77+
78+
// function addAnimalAdmin(animal) {
79+
// $divAppendEdit.append(`<div class="col-md-4">
80+
// <div class="card mb-4 box-shadow">
81+
// <img class="card-img-top" src=${animal.image} alt="Card image cap">
82+
// <div class="card-body">
83+
// <p class="card-text">${animal.info}</p>
84+
// <div class="d-flex justify-content-between align-items-center">
85+
// <div class="btn-group">
86+
// <button type="button" class="btn btn-sm btn-outline-secondary">Edit </button>
87+
// <button type="button" data-id=${animal.id} class="btn btn-sm btn-outline-secondary remove">Delete</button>
88+
// </div>
89+
// </div>
90+
// </div>
91+
// </div>
92+
// </div>
93+
// `);
94+
// }

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy