From cb2d93255f0213b8c04eaf72816938d6ac325854 Mon Sep 17 00:00:00 2001
From: Samuel Silva <samiwinho@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:48:38 +0000
Subject: [PATCH] Update index.html

Mostra a semana corretamente a info da semana do conteudo de X a Y
---
 index.html | 476 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 293 insertions(+), 183 deletions(-)
diff --git a/index.html b/index.html
index 5a9094c..343eee3 100644
--- a/index.html
+++ b/index.html
@@ -1,240 +1,350 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     <title>Programa Mensal</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-    <meta http-equiv='cache-control' content='no-cache'> 
-<meta http-equiv='expires' content='0'> 
-<meta http-equiv='pragma' content='no-cache'>
-</head>
-<style>
-
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+    />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+  </head>
+  <style>
     * {
-        -webkit-font-smoothing: antialiased!important;
-        font-smoothing: antialiased!important;
-        font-family: 'Roboto', sans-serif;
-        margin: 0;
-        padding: 0;
+      -webkit-font-smoothing: antialiased !important;
+      font-smoothing: antialiased !important;
+      font-family: "Roboto", sans-serif;
+      margin: 0;
+      padding: 0;
     }
 
     body {
-        background-color: #5b3c88; 
-        color: white;
-        height: 100vh;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
+      background-color: #5b3c88;
+      color: white;
+      height: 100vh;
+      width: 100vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
 
     h1 {
-        text-align: center;
-        padding: 0px;
-        font-size: 3rem;
+      text-align: center;
+      padding: 0px;
+      font-size: 3rem;
     }
 
     h2 {
-        text-align: center;
-        padding-bottom: 20px;
-        font-style: italic;
-        padding-top: 30px;
-        margin-bottom: 5vh;
-        font-weight: lighter;
-        font-size: 1.5rem;
+      text-align: center;
+      padding-bottom: 20px;
+      font-style: italic;
+      padding-top: 30px;
+      margin-bottom: 5vh;
+      font-weight: lighter;
+      font-size: 1.5rem;
     }
 
     h3 {
-        padding: 5px;
-        color: black;
-        font-size: 16px;
+      padding: 5px;
+      color: black;
+      font-size: 16px;
     }
 
     .flex1 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     i {
-        color: #5b3c88;
-        font-size: 16px;
+      color: #5b3c88;
+      font-size: 16px;
     }
 
     span {
-        color: white;
-        font-size: 16px;
-        background-color: #626262;
-        padding: 5px;
-        border-radius: 5px;
-        text-align: center;
-        margin: 1rem;
+      color: white;
+      font-size: 16px;
+      background-color: #626262;
+      padding: 5px;
+      border-radius: 5px;
+      text-align: center;
+      margin: 1rem;
     }
 
     .caixa {
-        background: white;
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        align-items: start;
-        padding: 16px 32px;
-        border-radius: 16px;
-        -webkit-box-shadow:0px 0px 100px 20px rgba(35,39,46,0.5);
-        -moz-box-shadow: 0px 0px 100px 20px rgba(35,39,46,0.5);
-        box-shadow: 0px 0px 100px 20px rgba(35,39,46,0.5);
-        margin: 2rem;
-        }
-
-</style>
-
-<body>
-    
+      background: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: start;
+      padding: 16px 32px;
+      border-radius: 16px;
+      -webkit-box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+      -moz-box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+      box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+      margin: 2rem;
+    }
+  </style>
+
+  <body>
     <h1>Programação da Semana</h1>
     <h2 id="datahoje"></h2>
-    <div style="display: flex; justify-content: center; gap: 5%;">
-        <span class="material-symbols-outlined" onclick="funcaoAnterior()" style="background-color: white; color: black; cursor: pointer; padding: 20px; border-radius: 50%; box-shadow: 0px 0px 100px 20px rgba(35,39,46,0.5);">arrow_circle_left</span>
-        <span class="material-symbols-outlined" onclick="funcaoAtual()" style="background-color: white; color: black; cursor: pointer; padding: 20px; border-radius: 50%; box-shadow: 0px 0px 100px 20px rgba(35,39,46,0.5);">home</span>
-        <span class="material-symbols-outlined" onclick="funcaoSeguinte()" style="background-color: white; color: black; cursor: pointer; padding: 20px; border-radius: 50%; box-shadow: 0px 0px 100px 20px rgba(35,39,46,0.5);">arrow_circle_right</span>
+    <div style="display: flex; justify-content: center; gap: 5%">
+      <span
+        class="material-symbols-outlined"
+        onclick="funcaoAnterior()"
+        style="
+          background-color: white;
+          color: black;
+          cursor: pointer;
+          padding: 20px;
+          border-radius: 50%;
+          box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+        "
+        >arrow_circle_left</span
+      >
+      <span
+        class="material-symbols-outlined"
+        onclick="funcaoAtual()"
+        style="
+          background-color: white;
+          color: black;
+          cursor: pointer;
+          padding: 20px;
+          border-radius: 50%;
+          box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+        "
+        >home</span
+      >
+      <span
+        class="material-symbols-outlined"
+        onclick="funcaoSeguinte()"
+        style="
+          background-color: white;
+          color: black;
+          cursor: pointer;
+          padding: 20px;
+          border-radius: 50%;
+          box-shadow: 0px 0px 100px 20px rgba(35, 39, 46, 0.5);
+        "
+        >arrow_circle_right</span
+      >
     </div>
-    
+
     <div class="caixa">
-    <div class="flex1">
+      <div class="flex1">
         <span class="material-symbols-outlined">desktop_windows</span>
         <h3>Vídeo:</h3>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-    </div>
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+      </div>
 
-    <div class="flex1">
+      <div class="flex1">
         <span class="material-symbols-outlined">instant_mix</span>
         <h3>Som:</h3>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-    </div>
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+      </div>
 
-    <div class="flex1">
-        <span class="material-symbols-outlined" style="font-weight: regular;">podium</span>
+      <div class="flex1">
+        <span class="material-symbols-outlined" style="font-weight: regular"
+          >podium</span
+        >
         <h3>Palco:</h3>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-    </div>
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+      </div>
 
-    <div class="flex1">
+      <div class="flex1">
         <span class="material-symbols-outlined">mic_double</span>
         <h3>Micros:</h3>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-        <div style="font-weight: lighter; border-left: #c3c3c3 1px solid; width: 1px; height: 50%; margin-left: 5px; margin-right: 5px;"></div>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-    </div>
-
-    <div class="flex1" style="border-top: #c3c3c3 1px solid; width: 100%; justify-content: start!important;">
-        <span class="material-symbols-outlined" style="background-color: #c48430;">videocam</span>
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+        <div
+          style="
+            font-weight: lighter;
+            border-left: #c3c3c3 1px solid;
+            width: 1px;
+            height: 50%;
+            margin-left: 5px;
+            margin-right: 5px;
+          "
+        ></div>
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+      </div>
+
+      <div
+        class="flex1"
+        style="
+          border-top: #c3c3c3 1px solid;
+          width: 100%;
+          justify-content: start !important;
+        "
+      >
+        <span
+          class="material-symbols-outlined"
+          style="background-color: #c48430"
+          >videocam</span
+        >
         <h3>Transmissão Broadcasting:</h3>
-        <h3 class="semanaInfo" style="font-weight: lighter;"></h3>
-    </div> 
-
-
+        <h3 class="semanaInfo" style="font-weight: lighter"></h3>
+      </div>
     </div>
 
     <script>
-
-        Date.prototype.getWeekNumber = function () {
-        var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
+      Date.prototype.getWeekNumber = function () {
+        var d = new Date(
+          Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())
+        );
         var dayNum = d.getUTCDay() || 7;
         d.setUTCDate(d.getUTCDate() + 4 - dayNum);
         var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
         return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
-        };
-
-        var dataAtual = new Date();
-        var semanaEmVigor = 'semana' + dataAtual.getWeekNumber();
-
-
-
-        // Determine a semana em vigor (pode ser baseado na data atual)
-        //var dataAtual = new Date();
-        //var semanaEmVigor = 'semana' + (Math.ceil(dataAtual.getDate() / 7));
-
-        // Formatar a data em português
-            var dataFormatada = dataAtual.toLocaleDateString('pt-PT', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
-
-            function funcaoAtual() {
-                semanaEmVigor = 'semana' + dataAtual.getWeekNumber();
-                atualizarPrograma();
-            }
-
-            function funcaoSeguinte() {
-                var numeroSemana = parseInt(semanaEmVigor.substring(6));
-                semanaEmVigor = 'semana' + (numeroSemana + 1);
-                atualizarPrograma();
-            }
-
-            function funcaoAnterior() {
-                var numeroSemana = parseInt(semanaEmVigor.substring(6));
-                semanaEmVigor = 'semana' + (numeroSemana - 1);
-                atualizarPrograma();
-            }
-
-
-            // Exibir a data na página
-            document.getElementById('datahoje').textContent = dataFormatada;
-
-
-
-        // ... (your existing code)
-
-function atualizarPrograma() {
-    // Carregue os dados do programa a partir do arquivo JSON
-    fetch('https://samiwinho.github.io/dados-programacao/dados-programacao.json')
-        .then(response => response.json())
-        .then(programaData => {
-
-
-            // Exibir a data na página
-            document.getElementById('datahoje').textContent = dataFormatada;
-
+      };
+
+      function formatarData(data) {
+        var inicioSemana = new Date(data);
+        inicioSemana.setDate(
+          data.getDate() - data.getDay() + (data.getDay() === 0 ? -6 : 1)
+        );
+
+        var fimSemana = new Date(inicioSemana);
+        fimSemana.setDate(inicioSemana.getDate() + 6);
+
+        return (
+          "Semana de " +
+          inicioSemana.getDate() +
+          " a " +
+          fimSemana.getDate() +
+          " de " +
+          data.toLocaleDateString("pt-PT", { month: "long" })
+        );
+      }
+
+      var dataAtual = new Date();
+      var semanaEmVigor = "semana" + dataAtual.getWeekNumber();
+
+      var dataFormatada = formatarData(dataAtual);
+
+      function funcaoAtual() {
+        dataAtual = new Date(); // Defina a data atual
+        semanaEmVigor = "semana" + dataAtual.getWeekNumber();
+        atualizarPrograma();
+      }
+
+      function funcaoSeguinte() {
+        dataAtual.setDate(dataAtual.getDate() + 7); // Avance uma semana
+        semanaEmVigor = "semana" + dataAtual.getWeekNumber();
+        atualizarPrograma();
+      }
+
+      function funcaoAnterior() {
+        dataAtual.setDate(dataAtual.getDate() - 7); // Retroceda uma semana
+        semanaEmVigor = "semana" + dataAtual.getWeekNumber();
+        atualizarPrograma();
+      }
+
+      // Exibir a data na página
+      document.getElementById("datahoje").textContent = dataFormatada;
+
+      function atualizarPrograma() {
+        // Carregue os dados do programa a partir do arquivo JSON
+        fetch(
+          "https://samiwinho.github.io/dados-programacao/dados-programacao.json"
+        )
+          .then((response) => response.json())
+          .then((programaDados) => {
             // Exiba as informações da semana em vigor
-            if (programaData[semanaEmVigor]) {
-                var semanaInfoDivs = document.querySelectorAll('.semanaInfo');
-
-                for (var i = 0; i < programaData[semanaEmVigor].length; i++) {
-                    semanaInfoDivs[i].textContent = programaData[semanaEmVigor][i];
-                }
-
-                // Verifique se há texto para Transmissão Broadcasting e mostre a div apenas se houver texto
-                var transmissaoBroadcastingDiv = document.querySelector('.flex1[style="border-top: #c3c3c3 1px solid; width: 100%; justify-content: start!important;"]');
-                var textoTransmissaoBroadcasting = programaData[semanaEmVigor][programaData[semanaEmVigor].length - 1];
-                if (textoTransmissaoBroadcasting) {
-                    transmissaoBroadcastingDiv.style.display = 'flex';
-                } else {
-                    transmissaoBroadcastingDiv.style.display = 'none';
-                }
+            if (programaDados[semanaEmVigor]) {
+              var semanaInfoDivs = document.querySelectorAll(".semanaInfo");
+
+              for (var i = 0; i < programaDados[semanaEmVigor].length; i++) {
+                semanaInfoDivs[i].textContent = programaDados[semanaEmVigor][i];
+              }
+
+              // Atualizar o h2 "datahoje" com a informação da semana
+              var inicioSemana = new Date(dataAtual);
+              inicioSemana.setDate(
+                dataAtual.getDate() -
+                  dataAtual.getDay() +
+                  (dataAtual.getDay() === 0 ? -6 : 1)
+              );
+              var fimSemana = new Date(inicioSemana);
+              fimSemana.setDate(inicioSemana.getDate() + 6);
+
+              var semanaFormatada =
+                "Semana de " +
+                inicioSemana.getDate() +
+                " a " +
+                fimSemana.getDate() +
+                " de " +
+                inicioSemana.toLocaleDateString("pt-PT", { month: "long" });
+
+              document.getElementById("datahoje").textContent = semanaFormatada;
+
+              // Verifique se há texto para Transmissão Broadcasting e mostre a div apenas se houver texto
+              var transmissaoBroadcastingDiv = document.querySelector(
+                '.flex1[style="border-top: #c3c3c3 1px solid; width: 100%; justify-content: start!important;"]'
+              );
+              var textoTransmissaoBroadcasting =
+                programaDados[semanaEmVigor][
+                  programaDados[semanaEmVigor].length - 1
+                ];
+              if (textoTransmissaoBroadcasting) {
+                transmissaoBroadcastingDiv.style.display = "flex";
+              } else {
+                transmissaoBroadcastingDiv.style.display = "none";
+              }
             } else {
-                document.querySelectorAll('.semanaInfo').textContent = "Sem informações para esta semana.";
+              document
+                .querySelectorAll(".semanaInfo")
+                .forEach(function (element) {
+                  element.textContent = "";
+                });
+
+              // Se não houver dados para a semana em vigor, defina o h2 "datahoje" para indicar falta de informações
+              document.getElementById("datahoje").textContent =
+                "Informação disponível em breve";
             }
-        })
-
-        .catch(error => {
+          })
+          .catch((error) => {
             console.error("Erro ao carregar os dados do programa: " + error);
-        });
-}
-
-// Call the function to update the program initially
-atualizarPrograma();
-</script>
-
-        
+          });
+      }
 
+      // Chame a função para atualizar o programa inicialmente
+      atualizarPrograma();
     </script>
-
-</body>
+  </body>
 </html>
