Alguns ajustes no front-end junto e no back-end

darrow12 · Oct 18, 2020 · d303f14 · d303f14
1 parent e222c6b
commit d303f14
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 96 deletions.
diff --git a/public/css/buttons.css b/public/css/buttons.css
@@ -17,6 +17,8 @@
     justify-content: center;
 
     transition: background-color .2s;
+
+    text-decoration: none;
 }
 
 .primary-button:hover {

diff --git a/public/css/page-orphanage.css b/public/css/page-orphanage.css
@@ -103,6 +103,8 @@ main {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 2rem;
+
+    line-height: 1.5;
 }
 
 .open-details div {
@@ -123,9 +125,17 @@ main {
 }
 
 .open-details .open-on-weekends {
+    border-radius: 20px;
+}
+
+.open-on-weekends.open {
     background: linear-gradient(154.16deg, #edfff6 7.85%, #ffffff 91.03%);
     border: 1px solid #a1e9c5;
-    border-radius: 20px;
     color: #37c77f;
 }
 
+.open-on-weekends.closed {
+    background: linear-gradient(154.16deg, #fcf0f4 7.85%, #ffffff 91.03%);
+    border: 1px solid #ffbcd4;
+    color: #ff669d;
+}
diff --git a/public/scripts/page-orphanage.js b/public/scripts/page-orphanage.js
@@ -6,8 +6,12 @@ const options = {
     zoomControl: false
 }
 
+// Get values from html
+const lat = document.querySelector('span[data-lat]').dataset.lat
+const lng = document.querySelector('span[data-lng]').dataset.lng
+
 // Create map
-const map = L.map('mapid', options).setView([-23.453535,-46.5366249], 15);
+const map = L.map('mapid', options).setView([lat, lng], 15);
 
 
 // Create and add tileLayer
@@ -24,7 +28,7 @@ const icon = L.icon({
 
 
 // create and add marker
-L.marker([-23.453535,-46.5366249], { icon })
+L.marker([lat, lng], { icon })
 .addTo(map)
 
 /* image gallery */

diff --git a/src/database/database.sqlite b/src/database/database.sqlite
diff --git a/src/database/test.js b/src/database/test.js
@@ -7,7 +7,7 @@ Database.then(async db => {
     await saveOrphanage(db, {
         lat: "-23.453535",
         lng: "-46.5466249",
-        name: "Lar dos meninos",
+        name: "Lar das meninas",
         about: "Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.",
         whatsapp: "99878978979",
         images: [

diff --git a/src/pages.js b/src/pages.js
@@ -20,11 +20,16 @@ module.exports = {
             orphanage.images = orphanage.images.split(",")
             orphanage.firstImage = orphanage.images[0]
 
+// --------------------------- Desafio para mais tarde --------------------------- \\
             if(orphanage.open_on_weekends == "0") {
                 orphanage.open_on_weekends = false
             } else {
                 orphanage.open_on_weekends = true
             }
+
+    // Desafio:
+    // Descobrir como fazer um if ternário para colocar nesse open_on_weekends | Resumindo, transformar esse if else em um if ternário
+// --------------------------- Desafio para mais tarde --------------------------- \\
 
             return res.render('orphanage', { orphanage }) 
         } catch (error) {

diff --git a/src/views/orphanage.hbs b/src/views/orphanage.hbs
@@ -1,103 +1,108 @@
 <!DOCTYPE html>
 <html lang="pt-br">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{ orphanage.name }} | Happy</title>
-
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
-
-    <!-- Make sure you put this AFTER Leaflet's CSS -->
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
-
-    <link rel="icon" href="/images/logo-icon.png" />
-
-    <link rel="stylesheet" href="/css/main.css" />
-    <link rel="stylesheet" href="/css/animations.css" />
-    <link rel="stylesheet" href="/css/sidebar.css" />
-    <link rel="stylesheet" href="/css/map.css" />
-    <link rel="stylesheet" href="/css/buttons.css" />
-    <link rel="stylesheet" href="/css/page-orphanage.css" />
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="page-orphanage">
-      <aside class="animate-right sidebar">
-
-        <img src="/images/map-marker.svg" alt="Happy">
-
-        <footer>
-          <button onclick="history.back()">
-            <img src="/images/arrow-back.svg" alt="Voltar">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ orphanage.name }} | Happy</title>
+
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin="" />
+
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""></script>
+
+  <link rel="icon" href="/images/logo-icon.png" />
+
+  <link rel="stylesheet" href="/css/main.css" />
+  <link rel="stylesheet" href="/css/animations.css" />
+  <link rel="stylesheet" href="/css/sidebar.css" />
+  <link rel="stylesheet" href="/css/map.css" />
+  <link rel="stylesheet" href="/css/buttons.css" />
+  <link rel="stylesheet" href="/css/page-orphanage.css" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
+</head>
+
+<body>
+  <div id="page-orphanage">
+    <aside class="animate-right sidebar">
+
+      <img src="/images/map-marker.svg" alt="Happy">
+
+      <footer>
+        <button onclick="history.back()">
+          <img src="/images/arrow-back.svg" alt="Voltar">
+        </button>
+      </footer>
+
+    </aside>
+
+    <main class="animate-appear with-sidebar">
+      <div class="orphanage-details">
+        <img src="{{orphanage.firstImage}}" alt="{{orphanage.name}}" />
+
+        <div class="images">
+          {{#each orphanage.images }}
+          <button onclick="selectImage(event)" class="active" type="button">
+            <img src="{{this}}" alt="{{orphanage.name}}" />
           </button>
-        </footer>
-
-      </aside>
-
-      <main class="animate-appear with-sidebar">
-        <div class="orphanage-details">
-          <img src="{{orphanage.firstImage}}" alt="{{orphanage.name}}" />
-
-          <div class="images">
-            {{#each orphanage.images }}
-            <button onclick="selectImage(event)" class="active" type="button">
-              <img src="{{this}}" alt="{{orphanage.name}}" />
-            </button>
-            {{/each}}
-
-           </div>
-
-          <div class="orphanage-details-content">
-            <h1>{{orphanage.name}}</h1>
-
-            <p>{{orphanage.about}}</p>
-
-            <div class="map-container">
-              <div id="mapid"></div>
-              <span 
-              data-lat="{{orphanage.lat}}"
-              data-lng="{{orphanage.lng}}"></span>
-              <footer>
-                <a 
-                target="_blank"
-                href="https://maps.google.com/mobile?q={{orphanage.lat}},{{orphanage.lng}}&z=15">Ver rotas no Google Maps</a>
-              </footer>
-            </div>
+          {{/each}}
+
+        </div>
 
-            <hr />
+        <div class="orphanage-details-content">
+          <h1>{{orphanage.name}}</h1>
+
+          <p>{{orphanage.about}}</p>
+
+          <div class="map-container">
+            <div id="mapid"></div>
+            <span data-lat="{{orphanage.lat}}" data-lng="{{orphanage.lng}}"></span>
+            <footer>
+              <a target="_blank" href="https://maps.google.com/mobile?q={{orphanage.lat}},{{orphanage.lng}}&z=15">Ver
+                rotas no Google Maps</a>
+            </footer>
+          </div>
 
-            <h2>Instruções para visita</h2>
+          <hr />
 
-            <p>{{orphanage.instructions}}</p>
+          <h2>Instruções para visita</h2>
 
-            <div class="open-details">
-              <div class="hour">
-                <img src="/images/clock.svg" alt="Horários" />
-                {{orphanage.opening_hours}}
-              </div>
-              <div class="open-on-weekends">
-                {{#if orphanage.open_on_weekends}}
-                <img src="/images/info.svg" alt="Informações" />
-                Atendemos fim de semana
-                {{/if}}
-              </div>
+          <p>{{orphanage.instructions}}</p>
+
+          <div class="open-details">
+            <div class="hour">
+              <img src="/images/clock.svg" alt="Horários" />
+              {{orphanage.opening_hours}}
             </div>
 
-            <button class="primary-button" type="button">
-              <img
-                src="/images/whatsapp.svg"
-                alt="Chamar no WhatsApp"
-              />
-              Entrar em contato
-            </button>
+            {{#if orphanage.open_on_weekends}}
+            <div class="open-on-weekends open">
+              <img src="/images/info.svg" alt="Informações" />
+              Atendemos fim de semana
+            </div>
+            {{else}}
+            <div class="open-on-weekends closed">
+              <img src="/images/info-red.svg" alt="Informações" />
+              Não atendemos fim de semana
+            </div>
+            {{/if}}
           </div>
+
+          <a href="https://api.whatsapp.com/send?l=pt_BR&phone={{orphanage.whatsapp}}&text=Oi, quero conversar sobre as visitas no {{orphanage.name}}" target="_blank"
+            class="primary-button" type="button">
+            <img src="/images/whatsapp.svg" alt="Chamar no WhatsApp" />
+            Entrar em contato
+          </a>
         </div>
-      </main>
-    </div>
-    <script src="/scripts/page-orphanage.js"></script>
-  </body>
-</html>
+      </div>
+    </main>
+  </div>
+  <script src="/scripts/page-orphanage.js"></script>
+</body>
+
+</html>