Skip to content

Commit abad022

Browse files
ErwannLeRouxErwannLeRoux
committed
fix: practical work 1 updates
1 parent 9ba31f3 commit abad022

File tree

3 files changed

+63
-54
lines changed

3 files changed

+63
-54
lines changed

‎public/js/dinosaurs.js‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,64 @@ const alertContainer = document.querySelector('#alert-container')
22
const template = document.querySelector('#dinosaur-item-template')
33
const dinosaurList = document.querySelector('#dinosaur-list')
44

5-
fetch(window.location)
6-
.then(async response => {
7-
const topic = response.headers.get('x-mercure-topic')
8-
const hubUrl = response.headers.get('Link').match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]
5+
const displayToast = (message) => {
6+
alertContainer.innerHTML = `<div class='alert alert-success'>${message}</div>`
7+
window.setTimeout(() => {
8+
const alert = document.querySelector('.alert')
9+
alert.parentNode.removeChild(alert)
10+
}, 5000)
11+
}
12+
13+
const createDinosaur = (name, link) => {
14+
const clone = template.content.cloneNode(true)
15+
const dinosaurTemplateNameContainer = clone.querySelector('#dinosaur-item-template-name')
16+
const dinosaurTemplateLinkContainer = clone.querySelector('#dinosaur-item-template-link')
17+
18+
dinosaurTemplateNameContainer.innerHTML = name
19+
dinosaurTemplateLinkContainer.href = link
920

10-
const hub = new URL(hubUrl);
21+
dinosaurList.append(clone)
1122

12-
hub.searchParams.append('topic', topic)
23+
displayToast(`Welcome to ${name}!`)
24+
}
1325

14-
const es = new EventSource(hub)
26+
const removeDinosaur = (id) => {
27+
const item = document.querySelector(`a[data-id="${id}"]`)
28+
item.remove()
1529

16-
es.onmessage = e => {
17-
const dinosaur = JSON.parse(e.data)
30+
displayToast(`A dinosaur has been removed !`)
31+
}
32+
33+
const editDinosaur = (data) => {
34+
const item = document.querySelector(`a[data-id="${data.id}"]`)
35+
const name = item.querySelector('div')
36+
name.innerHTML = data.name
37+
}
38+
39+
fetch(window.location)
40+
.then(async response => {
41+
const topic = response.headers.get('x-mercure-topic')
42+
const hubUrl = response.headers.get('Link').match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]
1843

19-
const clone = template.content.cloneNode(true)
20-
const dinosaurTemplateNameContainer = clone.querySelector('#dinosaur-item-template-name')
21-
const dinosaurTemplateLinkContainer = clone.querySelector('#dinosaur-item-template-link')
44+
const hub = new URL(hubUrl);
2245

23-
dinosaurTemplateNameContainer.innerHTML = dinosaur.name
24-
dinosaurTemplateLinkContainer.href = dinosaur.link
46+
hub.searchParams.append('topic', topic)
2547

26-
dinosaurList.append(clone)
48+
const es = new EventSource(hub)
2749

28-
alertContainer.innerHTML =`<div class='alert alert-success'>Welcome to ${dinosaur.name}!</div>`
50+
es.onmessage = e => {
51+
const message = JSON.parse(e.data)
2952

30-
window.setTimeout(() => {
31-
const alert = document.querySelector('.alert')
32-
alert.parentNode.removeChild(alert)
33-
}, 5000);
53+
switch (message.type) {
54+
case 'create':
55+
createDinosaur(message.name, message.link)
56+
break
57+
case 'remove':
58+
removeDinosaur(message.id)
59+
break
60+
case 'edit':
61+
editDinosaur(message.data)
62+
break
3463
}
64+
}
3565
})

‎src/Controller/DinosaursController.php‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -73,38 +73,6 @@ public function single(
7373
]);
7474
}
7575

76-
#[Route(
77-
'/api/dinosaurs/{id}',
78-
name: 'api_single_dinosaur',
79-
requirements: ['id' => '\d+']
80-
)]
81-
public function apiSingle(
82-
string $id,
83-
ManagerRegistry $doctrine,
84-
Request $request
85-
): Response
86-
{
87-
$dinosaur = $doctrine
88-
->getRepository(Dinosaur::class)
89-
->find($id)
90-
;
91-
92-
if ($dinosaur === false) {
93-
throw $this->createNotFoundException(
94-
'The dinosaur you are looking for does not exists.'
95-
);
96-
}
97-
98-
return new JsonResponse([
99-
'id' => $dinosaur->getId(),
100-
'name' => $dinosaur->getName(),
101-
'gender' => $dinosaur->getGender(),
102-
'age' => $dinosaur->getAge(),
103-
'eyeColor' => $dinosaur->getEyesColor(),
104-
'topic' => "https://dinosaur-app/api/dinosaurs/{$dinosaur->getId()}"
105-
]);
106-
}
107-
10876
#[Route('/dinosaurs/create', name: 'app_create_dinosaur')]
10977
public function create(
11078
Request $request,
@@ -130,6 +98,7 @@ public function create(
13098
json_encode([
13199
'link' => $this->router->generate('app_single_dinosaur', ['id' => $dinosaur->getId()]),
132100
'name' => $dinosaur->getName(),
101+
'type' => 'create',
133102
'message' => "{$dinosaur->getName()} has been created!"
134103
])
135104
);
@@ -177,11 +146,17 @@ public function edit(Request $request, int $id, ManagerRegistry $doctrine): Resp
177146
$update = new Update(
178147
[
179148
sprintf('https://dinosaur-app/dinosaurs/edit/%d', $id),
149+
'https://dinosaur-app/dinosaurs',
180150
'https://dinosaur-app/activity'
181151
],
182152
json_encode([
183153
'link' => $this->router->generate('app_single_dinosaur', ['id' => $dinosaur->getId()]),
184-
'message' => "{$dinosaur->getName()} has been edited!"
154+
'message' => "{$dinosaur->getName()} has been edited!",
155+
'type' => 'edit',
156+
'data' => [
157+
'id' => $dinosaur->getId(),
158+
'name' => $dinosaur->getName()
159+
]
185160
])
186161
);
187162

@@ -222,11 +197,14 @@ public function remove(int $id, ManagerRegistry $doctrine): Response
222197
$update = new Update(
223198
[
224199
sprintf('https://dinosaur-app/dinosaurs/remove/%d', $id),
200+
'https://dinosaur-app/dinosaurs',
225201
'https://dinosaur-app/activity'
226202
],
227203
json_encode([
228204
'link' => $this->router->generate('app_single_dinosaur', ['id' => $id]),
229-
'message' => "{$dinosaur->getName()} has been removed!"
205+
'message' => "{$dinosaur->getName()} has been removed!",
206+
'type' => 'remove',
207+
'id' => $id
230208
])
231209
);
232210

‎templates/dinosaurs-list.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
{% for dinosaur in dinosaurs %}
2121
<a class="list-group-item list-group-item-action d-flex gap-3 py-3"
2222
href="{{ path('app_single_dinosaur', {id: dinosaur.id}) }}"
23+
data-id="{{ dinosaur.id }}"
2324
>
2425
<img
2526
src="{{ asset('img/dino.png') }}"

0 commit comments

Comments
 (0)