feat: Link fake data to the frontend

This commit lectures class 4
lobophf · Oct 17, 2020 · 69ca7fd · 69ca7fd
1 parent 48dbda6
commit 69ca7fd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/public/scripts/page-orphanages.js b/public/scripts/page-orphanages.js
@@ -9,13 +9,27 @@ const icon = L.icon({
 	popupAnchor: [170, 2]
 });
 
-const popup = L.popup({
-	closeButton: false,
-	className: 'map-popup',
-	minWidth: 240,
-	minHeight: 240
-}).setContent('Lar das meninas <a href="orphanage.html?id=1" class="choose-orphanage"><img src="/images/arrow-white.svg"></a>');
+function addMarker({id, name, lat, lng}){
+	const popup = L.popup({
+		closeButton: false,
+		className: 'map-popup',
+		minWidth: 240,
+		minHeight: 240
+	}).setContent(`${name} <a href="orphanage.html?id=${id}"><img src="/images/arrow-white.svg"></a>`);
+
+	L.marker([lat, lng], { icon })
+		.addTo(map)
+		.bindPopup(popup)
+}
 
-L.marker([-27.222633, -49.6455874], {icon })
-	.addTo(map)
-	.bindPopup(popup)
+const orphanagesSpan = document.querySelectorAll('.orphanages span');
+console.log(orphanagesSpan)
+orphanagesSpan.forEach(span => {
+	const orphanage = {
+		id: span.dataset.id,
+		name: span.dataset.name,
+		lat: span.dataset.lat,
+		lng: span.dataset.lng
+	}
+	addMarker(orphanage)
+})
diff --git a/src/database/fakedata.js b/src/database/fakedata.js
@@ -1,4 +1,4 @@
-module.exports [ 
+module.exports = [ 
 {
 	id: 1,
 	lat: "-27.222633",

diff --git a/src/pages.js b/src/pages.js
@@ -9,7 +9,7 @@ module.exports = {
 		return res.render('orphanage')
 	},
 	orphanages(req, res){
-		return res.render('orphanages', { orphanages})
+		return res.render('orphanages', { orphanages })
 	},
 	createOrphanage(req, res){
 		return res.render('create-orphanage')

diff --git a/src/views/orphanages.hbs b/src/views/orphanages.hbs
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+	<!DOCTYPE html>
 <html lang="pt_BR">
 	<head>
 		<meta charset="UTF-8">	
@@ -33,6 +33,18 @@
 				</footer>
 			</aside>
 			<div id="mapid" class="animate-appear"></div>
+
+			<div class="orphanages">
+				{{#each orphanages}}
+					<span hidden 
+					data-id="{{this.id}}" 
+					data-name="{{this.name}}"
+					data-lat="{{this.lat}}"
+					data-lng="{{this.lng}}"
+					></span>
+				{{/each}}
+			</div>
+
 			<a href="/create-orphanage" class="create-orphanage" title="Cadastre um orfanato">
 				<img src="/images/plus.svg" alt="Criar orfanato">
 			</a>