pycodebr · willamylp · Mar 26, 2024
diff --git a/app/settings.py b/app/settings.py
@@ -11,7 +11,7 @@
 """
 
 from pathlib import Path
-
+import os
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
@@ -124,6 +124,9 @@
 
 STATIC_URL = 'static/'
 
+STATICFILES_DIRS = ['static',]
+STATIC_ROOT = os.path.join(BASE_DIR, '/static/')
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
 

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -1,13 +1,14 @@
+{% load static %}
+
 <!DOCTYPE html>
-<html lang="pt-br" data-bs-theme="dark">
+<html lang="pt-br" data-bs-theme="light">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}{% endblock %}</title>
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
 </head>
 
@@ -16,8 +17,20 @@
 
   <div class="container-fluid">
     <div class="row flex-nowrap">
-      <div class="col-auto col-md-0 col-xl-0 px-0 bg-dark">
-        <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white">
+      <div class="col-auto col-md-0 col-xl-0 px-0 ">
+        <hr class="m-3"/>
+        <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2">
+          <div class="form-check form-switch">
+            <label class="form-check-label" for="checkDarkMode">Modo Escuro</label>  
+            <input class="form-check-input" type="checkbox" id="checkDarkMode" onclick="saveThemeMode(this)">
+          </div>
+        </div>
+        <hr class="m-3"/>
+      </div>
+    </div>
+    <div class="row flex-nowrap">
+      <div class="col-auto col-md-0 col-xl-0 px-0 ">
+        <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2">
           <button class="btn btn-dark d-block d-sm-none mb-3" type="button" data-bs-toggle="collapse"
             data-bs-target="#menuCollapse" aria-expanded="false" aria-controls="menuCollapse">
             <i class="bi bi-list fs-4"></i>
@@ -86,4 +99,11 @@
   {% include 'components/_footer.html' %}
 </body>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="{% static 'js/themeMode.js' %}"></script>
+
+  <!-- Bloco para os scripts individuais de cada página -->
+  {% block scripts %} 
+  {% endblock %}
+
 </html>
diff --git a/app/templates/components/_dashboard.html b/app/templates/components/_dashboard.html
@@ -0,0 +1,93 @@
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        var dailySalesData = JSON.parse('{{ daily_sales_data|safe }}');
+        var dailySalesQuantityData = JSON.parse('{{ daily_sales_quantity_data|safe }}');
+
+        var ctxDailySales = document.getElementById('dailySalesChart').getContext('2d');
+        var dailySalesChart = new Chart(ctxDailySales, {
+            type: 'line',
+            data: {
+            labels: dailySalesData.dates,
+            datasets: [{
+                label: 'Valor em vendas',
+                data: dailySalesData.values,
+                fill: false,
+                borderColor: 'rgba(54, 162, 235, 1)',
+                borderWidth: 2,
+                tension: 0.5
+            }]
+            },
+            options: {
+            scales: {
+                y: {
+                beginAtZero: true
+                }
+            }
+            }
+        });
+
+        var ctxDailySalesQuantity = document.getElementById('dailySalesQuantityChart').getContext('2d');
+        var dailySalesQuantityChart = new Chart(ctxDailySalesQuantity, {
+            type: 'bar',
+            data: {
+            labels: dailySalesQuantityData.dates,
+            datasets: [{
+                label: 'Quantidade de Vendas',
+                data: dailySalesQuantityData.values,
+                backgroundColor: 'rgba(255, 99, 132, 0.6)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1
+            }]
+            },
+            options: {
+            scales: {
+                y: {
+                beginAtZero: true
+                }
+            }
+            }
+        });
+
+        var productCountByCategory = JSON.parse('{{ product_count_by_category|safe }}');
+        var productCountByBrand = JSON.parse('{{ product_count_by_brand|safe }}');
+
+        var ctxCategory = document.getElementById('productByCategoryChart').getContext('2d');
+        var productByCategoryChart = new Chart(ctxCategory, {
+            type: 'doughnut',
+            data: {
+            labels: Object.keys(productCountByCategory),
+            datasets: [{
+                data: Object.values(productCountByCategory),
+                borderWidth: 1
+            }]
+            },
+            options: {
+            plugins: {
+                legend: {
+                display: false
+                },
+            }
+            }
+        });
+
+        var ctxBrand = document.getElementById('productByBrandChart').getContext('2d');
+        var productByBrandChart = new Chart(ctxBrand, {
+            type: 'doughnut',
+            data: {
+            labels: Object.keys(productCountByBrand),
+            datasets: [{
+                data: Object.values(productCountByBrand),
+                borderWidth: 1
+            }]
+            },
+            options: {
+            plugins: {
+                legend: {
+                display: false
+                },
+            }
+            }
+        });
+    });
+</script>
diff --git a/app/templates/components/_header.html b/app/templates/components/_header.html
@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-dark">
+<nav class="navbar navbar-expand-lg navbar-light">
     <div class="container-fluid">
-        <a class="navbar-brand text-white" href="{% url 'home' %}">Sistema de Gestão de Estoque (SGE)</a>
+        <a class="navbar-brand" href="{% url 'home' %}">Sistema de Gestão de Estoque (SGE)</a>
     </div>
 </nav>
diff --git a/app/templates/home.html b/app/templates/home.html
@@ -1,3 +1,4 @@
+{% load static %}
 {% extends 'base.html' %}
 
 {% block title %}
@@ -40,97 +41,7 @@ <h5 class="mb-3">Produtos por Marca</h5>
     </div>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
-      var dailySalesData = JSON.parse('{{ daily_sales_data|safe }}');
-      var dailySalesQuantityData = JSON.parse('{{ daily_sales_quantity_data|safe }}');
+  {% include 'components/_dashboard.html' %}
+  <script src="{% static 'js/themeMode.js' %}"></script>
 
-      var ctxDailySales = document.getElementById('dailySalesChart').getContext('2d');
-      var dailySalesChart = new Chart(ctxDailySales, {
-        type: 'line',
-        data: {
-          labels: dailySalesData.dates,
-          datasets: [{
-            label: 'Valor em vendas',
-            data: dailySalesData.values,
-            fill: false,
-            borderColor: 'rgba(54, 162, 235, 1)',
-            borderWidth: 2,
-            tension: 0.5
-          }]
-        },
-        options: {
-          scales: {
-            y: {
-              beginAtZero: true
-            }
-          }
-        }
-      });
-
-      var ctxDailySalesQuantity = document.getElementById('dailySalesQuantityChart').getContext('2d');
-      var dailySalesQuantityChart = new Chart(ctxDailySalesQuantity, {
-        type: 'bar',
-        data: {
-          labels: dailySalesQuantityData.dates,
-          datasets: [{
-            label: 'Quantidade de Vendas',
-            data: dailySalesQuantityData.values,
-            backgroundColor: 'rgba(255, 99, 132, 0.6)',
-            borderColor: 'rgba(255, 99, 132, 1)',
-            borderWidth: 1
-          }]
-        },
-        options: {
-          scales: {
-            y: {
-              beginAtZero: true
-            }
-          }
-        }
-      });
-
-      var productCountByCategory = JSON.parse('{{ product_count_by_category|safe }}');
-      var productCountByBrand = JSON.parse('{{ product_count_by_brand|safe }}');
-
-      var ctxCategory = document.getElementById('productByCategoryChart').getContext('2d');
-      var productByCategoryChart = new Chart(ctxCategory, {
-        type: 'doughnut',
-        data: {
-          labels: Object.keys(productCountByCategory),
-          datasets: [{
-            data: Object.values(productCountByCategory),
-            borderWidth: 1
-          }]
-        },
-        options: {
-          plugins: {
-            legend: {
-              display: false
-            },
-          }
-        }
-      });
-
-      var ctxBrand = document.getElementById('productByBrandChart').getContext('2d');
-      var productByBrandChart = new Chart(ctxBrand, {
-        type: 'doughnut',
-        data: {
-          labels: Object.keys(productCountByBrand),
-          datasets: [{
-            data: Object.values(productCountByBrand),
-            borderWidth: 1
-          }]
-        },
-        options: {
-          plugins: {
-            legend: {
-              display: false
-            },
-          }
-        }
-      });
-    });
-  </script>
 {% endblock %}
diff --git a/static/js/themeMode.js b/static/js/themeMode.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const defaultTheme = 'light';
+    const savedTheme = localStorage.getItem('themeMode');
+    const checkDarkMode = document.getElementById('checkDarkMode');
+
+    applyTheme(savedTheme ? savedTheme : defaultTheme);
+
+    if (savedTheme === 'dark' || defaultTheme === 'dark') {
+        checkDarkMode.checked = true;
+    } else {
+        checkDarkMode.checked = false;
+    }
+
+    checkDarkMode.addEventListener('change', function() {
+        const checked = this.checked;
+        const themeMode = checked ? 'dark' : 'light';
+        applyTheme(themeMode);
+        saveThemeMode(checked);
+    });
+});
+
+function applyTheme(themeMode) {
+    const html = document.querySelector('html');
+    html.dataset.bsTheme = themeMode;
+}
+
+function saveThemeMode(checkedTheme) {
+    const themeMode = checkedTheme ? 'dark' : 'light';
+    localStorage.setItem('themeMode', themeMode);
+}