From 7016f8e2eb9ef612915b892c981a431e9b44b0e8 Mon Sep 17 00:00:00 2001 From: FECR Date: Tue, 26 Mar 2024 01:42:52 -0300 Subject: [PATCH 1/2] feature: dynamic dark-light mode --- app/settings.py | 5 +- app/templates/base.html | 28 ++++++- app/templates/components/_dashboard.html | 93 +++++++++++++++++++++++ app/templates/components/_header.html | 4 +- app/templates/home.html | 95 +----------------------- static/js/themeMode.js | 30 ++++++++ 6 files changed, 156 insertions(+), 99 deletions(-) create mode 100644 app/templates/components/_dashboard.html create mode 100644 static/js/themeMode.js diff --git a/app/settings.py b/app/settings.py index 1173b05..528f6b4 100644 --- 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 index 5d01d36..7cb34fd 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1,5 +1,7 @@ +{% load static %} + - + @@ -7,7 +9,6 @@ {% block title %}{% endblock %} - @@ -16,8 +17,20 @@
-
-
+
+
+
+
+ + +
+
+
+
+
+
+
+
- - - 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 - }, - } - } - }); - }); - {% endblock %} diff --git a/static/js/themeMode.js b/static/js/themeMode.js new file mode 100644 index 0000000..1c993d2 --- /dev/null +++ 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); +} \ No newline at end of file From 8890f4183d0bfb491fe3fac24164c782425c511d Mon Sep 17 00:00:00 2001 From: FECR Date: Tue, 26 Mar 2024 02:48:35 -0300 Subject: [PATCH 2/2] feature: use SweetAlert2 as Delete Modal --- app/templates/base.html | 4 +++ app/templates/home.html | 3 ++- brands/templates/brand_list.html | 37 +++++++++++++++++++++++-- brands/views.py | 10 ++++--- products/templates/product_list.html | 40 +++++++++++++++++++++++++++- products/views.py | 12 ++++++--- static/js/deleteConfirm.js | 40 ++++++++++++++++++++++++++++ 7 files changed, 135 insertions(+), 11 deletions(-) create mode 100644 static/js/deleteConfirm.js diff --git a/app/templates/base.html b/app/templates/base.html index 7cb34fd..3a7945a 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -10,6 +10,10 @@ + + + {% block styles %} + {% endblock %} diff --git a/app/templates/home.html b/app/templates/home.html index 2d1624f..0e9a3e8 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -1,6 +1,7 @@ -{% load static %} {% extends 'base.html' %} +{% load static %} + {% block title %} SGE - Home {% endblock %} diff --git a/brands/templates/brand_list.html b/brands/templates/brand_list.html index 6403944..85789aa 100644 --- a/brands/templates/brand_list.html +++ b/brands/templates/brand_list.html @@ -1,11 +1,39 @@ {% extends 'base.html' %} +{% load static %} + {% block title %} SGE - Marcas {% endblock %} -{% block content %} +{% block styles %} + +{% endblock %} +{% block content %} + {% for msg in messages %} + + + + + + + + + + + + {% if msg.tags == 'error' %} +