feat: create search songs

localcatolico · Oct 19, 2024 · 25cd8ba · 25cd8ba
1 parent 84388d6
commit 25cd8ba
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 17 deletions.
diff --git a/assets/js/music.js b/assets/js/music.js
@@ -64,8 +64,6 @@ function generateSlidesMusic(musicId) {
   let pptx = new PptxGenJS();
   let music = findMusicById(musicId);
   let filename = music.name;
-  console.log("getToUpperCase: ", toUpperCase);
-  console.log("toDarkTheme: ", toDarkTheme);
   slideLocalCatolico(pptx, filename, toDarkTheme);
   addMusicContentSlide(pptx, music, toDarkTheme, toUpperCase);
   pptx.writeFile({ fileName: filename });

diff --git a/assets/js/ppt.js b/assets/js/ppt.js
@@ -49,8 +49,18 @@ function slideEmpty(pptx, darkTheme) {
 function addMusicTitleSlide(pptx, music, darkTheme) {
   let slide = pptx.addSlide();
   darkSlideTheme(slide, darkTheme)
-  slide.addText(`${music.name}`, { x: 1, y: 1, fontSize: 24, color: '363636' });
-  slide.addText(`${music.artist}`, { x: 1, y: 2, fontSize: 18, color: '636363' });
+  slide.addText(`${music.name}`, {
+    x: 1,
+    y: 1,
+    fontSize: 24,
+    color: darkTheme ? 'FFFFFF' : '363636',
+  });
+  slide.addText(`${music.artist}`, {
+    x: 1,
+    y: 2,
+    fontSize: 18,
+    color: darkTheme ? 'FFFFFF' : '363636',
+  });
 }
 
 function addMusicContentSlide(pptx, music, darkTheme, toUpperCase) {

diff --git a/assets/js/search.js b/assets/js/search.js
@@ -0,0 +1,61 @@
+var musics;
+fetch("/data/musics.json")
+  .then(res => res.json())
+  .then(data => {
+    musics = data.musics;
+   })
+  .then(() => {
+    searchMusic();
+   });
+
+function searchMusic() {
+  const searchQuery = document.getElementById('searchInput').value.toLowerCase();
+  const resultsContainer = document.getElementById('searchResults');
+  resultsContainer.innerHTML = '';
+
+  let filteredMusics = musics.filter(music => 
+    music.name != "" &&
+    (
+      music.name.toLowerCase().includes(searchQuery) || 
+      music.artist.toLowerCase().includes(searchQuery) ||
+      music.content.join(" ").toLowerCase().includes(searchQuery)
+    )
+  );
+
+  // Ordena os resultados por ordem alfabética pelo nome da música
+  filteredMusics = filteredMusics.sort((a, b) => a.name.localeCompare(b.name));
+
+  if (filteredMusics.length > 0) {
+    filteredMusics.forEach(music => {
+      let contentMatch = "";
+      if (searchQuery && music.content.join(" ").toLowerCase().includes(searchQuery)) {
+        const fullContent = music.content.join(" ");
+        const startIndex = fullContent.toLowerCase().indexOf(searchQuery);
+        const endIndex = startIndex + searchQuery.length;
+
+        const snippetStart = Math.max(0, startIndex - 100);
+        const snippetEnd = Math.min(fullContent.length, endIndex + 100);
+        const snippet = fullContent.substring(snippetStart, snippetEnd);
+
+        contentMatch = snippet.replace(new RegExp(searchQuery, 'gi'), match => `<mark>${match}</mark>`);
+      }
+
+      resultsContainer.innerHTML += `
+        <div class="col-md-12 music-item">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title">${music.name}</h5>
+              <p class="card-text">${music.artist}</p>
+              ${contentMatch ? `<p class="card-text">${contentMatch}</p>` : ''}
+              <a href="${music.youtube_url}" class="btn btn-danger" target="_blank">YouTube</a>
+              <a href="${music.cifra_url}" class="btn btn-warning" target="_blank">Cifra</a>
+              <a href="${music.letra_url}" class="btn btn-success" target="_blank">Letra</a>
+            </div>
+          </div>
+        </div>
+      `;
+    });
+  } else {
+    resultsContainer.innerHTML = `<p class="text-muted">No results found.</p>`;
+  }
+}
diff --git a/assets/js/slides.js b/assets/js/slides.js
@@ -7,11 +7,13 @@ fetch("/data/musics.json")
   });
 
 function generateSlidesMissa() {
+  let toUpperCase = getToUpperCase();
+  let toDarkTheme = getToDarkTheme();
   let pptx = new PptxGenJS();
   let filename = generateFileName();
 
-  slideLocalCatolico(pptx, filename, darkTheme);
-  slideEmpty(pptx, darkTheme);
+  slideLocalCatolico(pptx, filename, toDarkTheme);
+  slideEmpty(pptx, toDarkTheme);
 
   const musicFields = [
     "musicEntrance",
@@ -32,9 +34,9 @@ function generateSlidesMissa() {
     if (selectedMusicId) {
       const music = findMusicById(selectedMusicId);
       if (music) {
-        addMusicTitleSlide(pptx, music, darkTheme);
-        addMusicContentSlide(pptx, music, darkTheme, toUpperCase);
-        slideEmpty(pptx, darkTheme);
+        addMusicTitleSlide(pptx, music, toDarkTheme);
+        addMusicContentSlide(pptx, music, toDarkTheme, toUpperCase);
+        slideEmpty(pptx, toDarkTheme);
       }
     }
   });
@@ -51,3 +53,21 @@ function viewMusic(selectId) {
     alert("Por favor, selecione uma música primeiro.");
   }
 }
+
+function getToUpperCase() {
+  const fontSelect = document.getElementById('fontOption');
+  const selectedValue = fontSelect.value;
+  if (selectedValue === 'original') {
+    return false;
+  }
+  return true;
+}
+
+function getToDarkTheme() {
+  const themeSelect = document.getElementById('themeOption');
+  const selectedValue = themeSelect.value;
+  if (selectedValue === 'light') {
+    return false;
+  }
+  return true;
+}
diff --git a/index.html b/index.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-outline-primary" href="index.html">Sumário</a>
+      <a class="btn btn-outline-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-primary" href="musics.html">Músicas</a>
       <a class="btn btn-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>
@@ -33,7 +34,20 @@ <h3 class="text-white">Local Católico</h3>
     <main>
       <div class="d-flex justify-content-center" style="margin-top: 50px">
         <div class="col-md-6">
-          <div class="accordion accordion-flush" id="summary"></div><br>
+          <div class="row">
+            <div class="col-md-8 offset-md-2">
+              <div class="input-group">
+                <input type="text" id="searchInput" class="form-control" placeholder="Pesquise pelo nome da música ou artista" aria-label="Search" onkeyup="searchMusic()">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex justify-content-center" style="margin-top: 50px">
+        <div class="col-md-6 card">
+          <div class="card-body">
+            <div id="searchResults" class="search-results row"></div>
+          </div>
         </div>
       </div>
       <footer class="d-flex justify-content-center text-white" style="margin-top: 50px">
@@ -42,6 +56,6 @@ <h3 class="text-white">Local Católico</h3>
       </footer>
     </main>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-    <script src="assets/js/summary.js"></script>
+    <script src="assets/js/search.js"></script>
   </body>
 </html>
diff --git a/music.html b/music.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-primary" href="index.html">Sumário</a>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-outline-primary" href="musics.html">Músicas</a>
       <a class="btn btn-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>

diff --git a/musics.html b/musics.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-primary" href="index.html">Sumário</a>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-outline-primary" href="musics.html">Músicas</a>
       <a class="btn btn-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>

diff --git a/playlist.html b/playlist.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-primary" href="index.html">Sumário</a>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-primary" href="musics.html">Músicas</a>
       <a class="btn btn-outline-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>

diff --git a/playlists.html b/playlists.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-primary" href="index.html">Sumário</a>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-primary" href="musics.html">Músicas</a>
       <a class="btn btn-outline-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>

diff --git a/slides.html b/slides.html
@@ -24,7 +24,8 @@
       <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
       <h3 class="text-white">Local Católico</h3>
       <p class="text-white"></p>
-      <a class="btn btn-primary" href="index.html">Sumário</a>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-primary" href="summary.html">Sumário</a>
       <a class="btn btn-primary" href="musics.html">Músicas</a>
       <a class="btn btn-primary" href="playlists.html">Playlists</a>
       <a class="btn btn-outline-primary" href="slides.html">Slides (.ppt)</a>

diff --git a/summary.html b/summary.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Local Católico - Músicas</title>
+    <link rel="icon" type="image/x-icon" href="assets/img/logo.png">
+    <meta name="description" content="Site com músicas da igreja católica.">
+    <meta property="og:title" content="Local Católico - Músicas"/>
+    <meta property="og:description" content="Site com músicas.">
+    <meta property="og:image" content="https://pix.localcatolico.com.br/assets/img/logo.png"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="pt_BR"/>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/background.css">
+  </head>
+  <body>
+    <div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+   </div>
+    <header class="m-4">
+      <a href="https://localcatolico.com.br"><img src="assets/img/logo.png" width="80" height="80"/></a><br><br>
+      <h3 class="text-white">Local Católico</h3>
+      <p class="text-white"></p>
+      <a class="btn btn-primary" href="index.html">Pesquisa</a>
+      <a class="btn btn-outline-primary" href="summary.html">Sumário</a>
+      <a class="btn btn-primary" href="musics.html">Músicas</a>
+      <a class="btn btn-primary" href="playlists.html">Playlists</a>
+      <a class="btn btn-primary" href="slides.html">Slides (.ppt)</a>
+      <a class="btn btn-info btn-sm" href="https://liturgia.cancaonova.com/pb" href="_blank">Liturgia</a>
+    </header>
+    <main>
+      <div class="d-flex justify-content-center" style="margin-top: 50px">
+        <div class="col-md-6">
+          <div class="accordion accordion-flush" id="summary"></div><br>
+        </div>
+      </div>
+      <footer class="d-flex justify-content-center text-white" style="margin-top: 50px">
+        Desenvolvido por&nbsp;
+        <a href="https://github.com/rafaelbmateus" target="_blank" class="text-white">Rafael Mateus</a>
+      </footer>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+    <script src="assets/js/summary.js"></script>
+  </body>
+</html>