danilob · joviusb7 · Jul 6, 2022 · Jul 6, 2022 · Jul 7, 2022 · Jul 7, 2022
diff --git a/expenses/forms.py b/expenses/forms.py
@@ -1,6 +1,6 @@
 from django import forms
 from django.core.exceptions import ValidationError
-
+from expenses.admin import PaymentAdmin
 from expenses.models import Category
 
 class SelectCategoryForm(forms.Form):
@@ -10,6 +10,20 @@ class SelectCategoryForm(forms.Form):
 
 from django.core.exceptions import ValidationError
 
+from expenses.models import Category
+
+from expenses.models import Payment
+
+class CategoryForm(forms.ModelForm):
+    class Meta:
+        model = Category
+        fields = ['description']
+
+class PaymentForm(forms.ModelForm):
+    class Meta:
+        model = Payment
+        fields = ['description']
+
 
 class ExpenseForm(forms.ModelForm):
     class Meta:

diff --git a/expenses/static/expenses/css/core.css b/expenses/static/expenses/css/core.css
@@ -4,13 +4,37 @@
     image-rendering: smooth;
 }
 
-:root{
+:root {
     --color-yellow: #FCE600;
     --color-red: #F33C40;
     --color-gray: #5A5F63;
     --color-gray-light: #F2F2F2;
 }
 
+html[data-theme='light'] {
+    --color-yellow: #FCE600;
+    --color-red: #F33C40;
+    --color-gray: #5A5F63;
+    --color-gray-light: #F2F2F2;
+}
+
+html[data-theme='dark'] {
+    --color-yellow: #00ADB5;
+    --color-red: #FD7014;
+    --color-gray: #393E46;
+    --color-gray-light: #DDDDDD;
+}
+
+.btn-link{
+    display: flex;
+    width: 5%;  
+
+}
+
+.btn-link-color{
+    filter: invert(38%) sepia(9%) saturate(260%) hue-rotate(165deg) brightness(93%) contrast(95%);
+}
+
 body {
     font-family: 'Poppins', sans-serif;
     font-size: 1rem;

diff --git a/expenses/static/expenses/img/icon/moon.svg b/expenses/static/expenses/img/icon/moon.svg
diff --git a/expenses/static/expenses/img/icon/sun.svg b/expenses/static/expenses/img/icon/sun.svg
diff --git a/expenses/static/expenses/img/irmao-do-jorel-dark-mode.png b/expenses/static/expenses/img/irmao-do-jorel-dark-mode.png
diff --git a/expenses/templates/base.html b/expenses/templates/base.html
@@ -11,9 +11,35 @@
     <body>
         <header id="rect-yellow"></header>
         <div id="img-irmao-jorel">
-            <img src="{% static '/expenses/img/irmao-do-jorel.png' %}" alt="" />
+            <button id="theme-toggle" class="btn-link" type="button">
+                <span><img class="btn-link-color" src="{% static 'expenses/img/icon/moon.svg' %}" /></span>
+                <span><img class="btn-link-color" src="{% static 'expenses/img/icon/sun.svg' %}" /></span>
+            </button>
+
+            <script>
+                var toggle = document.getElementById("theme-toggle");
+
+                var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+                if (storedTheme)
+                    document.documentElement.setAttribute('data-theme', storedTheme)
+
+
+                toggle.onclick = function() {
+                    var currentTheme = document.documentElement.getAttribute("data-theme");
+                    var targetTheme = "light";
+
+                        if (currentTheme === "light") {
+                            targetTheme = "dark";
+                        }
+
+                        document.documentElement.setAttribute('data-theme', targetTheme)
+                        localStorage.setItem('theme', targetTheme);
+                };
+            </script>
+            <img src= "{% static '/expenses/img/irmao-do-jorel-dark-mode.png' %}" alt="" />
         </div>
         <main id="rect-content">
+
             <div id="header-display">
                 <div id="display-total-limit">
                     {% block display-values %}
@@ -50,5 +76,5 @@
                 });
             });
         </script>
-    </body>
+    </body>      
 </html>
diff --git a/expenses/templates/expenses/form/new-category.html b/expenses/templates/expenses/form/new-category.html
@@ -0,0 +1,97 @@
+<form method="POST" id="formCategory">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <div class="btn-position-modal">
+        <input type="button" class="btn btn-red sub white small "  id="cancelModal" value="Cancelar">
+        <input class="btn btn-gray sub white small " type="submit" value="Enviar">
+    </div>
+
+</form>
+<div class="output"></div>
+<script>
+    $(".output").hide();
+    var csrftoken = getCookie('csrftoken');
+    function csrfSafeMethod(method) {
+        // these HTTP methods do not require CSRF protection
+        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+    }
+    $.ajaxSetup({
+        beforeSend: function (xhr, settings) {
+            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+            xhr.setRequestHeader("X-CSRFToken", csrftoken);
+            }
+        }
+    });
+    function sameOrigin(url) {
+
+    var host = document.location.host;
+    var protocol = document.location.protocol;
+    var sr_origin = '//' + host;
+    var origin = protocol + sr_origin;
+
+    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
+    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
+
+    !(/^(\/\/|http:|https:).*/.test(url));
+    }
+
+    function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = jQuery.trim(cookies[i]);
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) == (name + '=')) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+        }
+    }
+    }
+    return cookieValue;
+    }
+    $('#formCategory').on('submit', function(e){     
+        e.preventDefault();
+
+
+        $.ajax({
+            type : "POST", 
+            url: "{% url 'expenses:handle_category' %}",
+            data: {
+                category : $('#id_category').val(),
+                payment : $('#id_payment').val(),
+                description : $('#id_description').val(),
+                value : $('#id_value').val(),
+                date : $('#id_date').val(),
+                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
+                action: 'post'
+            },
+
+            success: function(data){
+                $('.modal-content').html(data.html);
+                $('.output').text(data.response);
+                $(".output").show();
+            },
+
+            failure: function() {
+
+            }
+
+
+        });
+
+
+    }); 
+
+    var modal = document.querySelector("#modal");
+    var modalOverlay = document.querySelector("#modal-overlay");
+    var closeButton = document.querySelector("#close-button");
+    var openButton = document.querySelector("#open-button");
+
+    $('#cancelModal').on('click', function(){
+        modal.classList.remove("open");
+        modal.classList.toggle("closed");
+        modalOverlay.classList.remove("open");
+        modalOverlay.classList.toggle("closed");
+    });
+</script>
diff --git a/expenses/templates/expenses/form/new-limit.html b/expenses/templates/expenses/form/new-limit.html
@@ -0,0 +1,94 @@
+<form method="POST" id="formLimit">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <div class="btn-position-modal">
+        <input type="button" class="btn btn-red sub white small "  id="cancelModal" value="Cancelar">
+        <input class="btn btn-gray sub white small " type="submit" value="Enviar">
+    </div>
+
+</form>
+<div class="output"></div>
+<script>
+    $(".output").hide();
+    var csrftoken = getCookie('csrftoken');
+    function csrfSafeMethod(method) {
+        // these HTTP methods do not require CSRF protection
+        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+    }
+    $.ajaxSetup({
+        beforeSend: function (xhr, settings) {
+            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+            xhr.setRequestHeader("X-CSRFToken", csrftoken);
+            }
+        }
+    });
+    function sameOrigin(url) {
+
+    var host = document.location.host;
+    var protocol = document.location.protocol;
+    var sr_origin = '//' + host;
+    var origin = protocol + sr_origin;
+
+    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
+    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
+
+    !(/^(\/\/|http:|https:).*/.test(url));
+    }
+
+    function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = jQuery.trim(cookies[i]);
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) == (name + '=')) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+        }
+    }
+    }
+    return cookieValue;
+    }
+    $('#formLimit').on('submit', function(e){     
+        e.preventDefault();
+
+
+        $.ajax({
+            type : "POST", 
+            url: "{% url 'expenses:handle_limit' %}",
+            data: {
+                value : $('#id_value').val(),
+                date : $('#id_date').val(),
+                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
+                action: 'post'
+            },
+
+            success: function(data){
+                $('.modal-content').html(data.html);
+                $('.output').text(data.response);
+                $(".output").show();
+            },
+
+            failure: function() {
+
+            }
+
+
+        });
+
+
+    }); 
+
+    var modal = document.querySelector("#modal");
+    var modalOverlay = document.querySelector("#modal-overlay");
+    var closeButton = document.querySelector("#close-button");
+    var openButton = document.querySelector("#open-button");
+
+    $('#cancelModal').on('click', function(){
+        modal.classList.remove("open");
+        modal.classList.toggle("closed");
+        modalOverlay.classList.remove("open");
+        modalOverlay.classList.toggle("closed");
+    });
+</script>