changes

2026-03-31 06:23:17 +02:00 · 2024-10-09 00:31:21 -03:00
parent e78e4cc5e1
commit 3dde44b1cd
139 changed files with 4965 additions and 1004 deletions
--- a/frontend/src/application/htmx.js
+++ b/frontend/src/application/htmx.js
@@ -26,17 +26,34 @@ if (modalEle) {
    });
 }

-let successAudio = new Audio("/static/sounds/success.mp3");
-let popAudio = new Audio("/static/sounds/pop.mp3");
+const successAudio = new Audio("/static/sounds/success.mp3");
+const popAudio = new Audio("/static/sounds/pop.mp3");
+window.paidSound = successAudio;
+window.unpaidSound = popAudio;

-htmx.on("paid", () => {
-    successAudio.pause();
-    successAudio.currentTime = 0;
-    successAudio.play();
-});
+// htmx.on("paid", () => {
+//     successAudio.pause();
+//     successAudio.currentTime = 0;
+//     successAudio.play();
+// });
+//
+// htmx.on("unpaid", () => {
+//     popAudio.pause();
+//     popAudio.currentTime = 0;
+//     popAudio.play();
+// });

-htmx.on("unpaid", () => {
-    popAudio.pause();
-    popAudio.currentTime = 0;
-    popAudio.play();
-});
+/**
+ * Parse a localized number to a float.
+ * @param {string} stringNumber - the localized number
+ * @param {string} locale - [optional] the locale that the number is represented in. Omit this parameter to use the current locale.
+ */
+window.parseLocaleNumber = function parseLocaleNumber(stringNumber, locale) {
+    let thousandSeparator = Intl.NumberFormat(locale).format(11111).replace(/\p{Number}/gu, '');
+    let decimalSeparator = Intl.NumberFormat(locale).format(1.1).replace(/\p{Number}/gu, '');
+
+    return parseFloat(stringNumber
+        .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
+        .replace(new RegExp('\\' + decimalSeparator), '.')
+    );
+};
--- a/frontend/src/application/select.js
+++ b/frontend/src/application/select.js
@@ -2,57 +2,24 @@ import TomSelect from "tom-select";
 import * as Popper from "@popperjs/core";


-const multiple_config = {
-    plugins: {
-        'checkbox_options': {
-            'checkedClassNames': ['ts-checked'],
-            'uncheckedClassNames': ['ts-unchecked'],
-        },
-        'clear_button': {
-            'title': 'Limpar',
-        },
-        "remove_button": {
-            "title": 'Remover',
-        }
-    },
+window.TomSelect = function createDynamicTomSelect(element) {
+  // Basic configuration
+  const config = {
+    plugins: {},
+
+    // Extract 'create' option from data attribute
+    create: element.dataset.create === 'true',
+
+    allowEmptyOption: element.dataset.allowEmptyOption === 'true',
    render: {
        no_results: function () {
-            return '<div class="no-results">Nenhum resultado encontrado...</div>';
+            return `<div class="no-results">${element.dataset.txtNoResults || 'No results...'}</div>`;
        },
+        option_create: function(data, escape) {
+			return `<div class="create">${element.dataset.txtCreate || 'Add'} <strong>${escape(data.input)}</strong>&hellip;</div>`;
+		},
    },
-    onInitialize: function () {
-        //this.popper = Popper.createPopper(this.control,this.dropdown);

-
-        this.popper = Popper.createPopper(this.control, this.dropdown, {
-            placement: "bottom-start",
-            modifiers: [
-                {
-                    name: "sameWidth",
-                    enabled: true,
-                    fn: ({state}) => {
-                        state.styles.popper.width = `${state.rects.reference.width}px`;
-                    },
-                    phase: "beforeWrite",
-                    requires: ["computeStyles"],
-                }
-            ]
-
-        });
-    },
-    onDropdownOpen: function () {
-        this.popper.update();
-    }
-};
-
-
-const single_config = {
-    allowEmptyOption: false,
-    // render: {
-    //     no_results: function () {
-    //         return '<div class="no-results">-------</div>';
-    //     },
-    // },
    onInitialize: function () {
        this.popper = Popper.createPopper(this.control, this.dropdown, {
            placement: "bottom-start",
@@ -65,7 +32,13 @@ const single_config = {
                    },
                    phase: "beforeWrite",
                    requires: ["computeStyles"],
-                }
+                },
+                {
+                    name: 'flip',
+                    options: {
+                      fallbackPlacements: ['top-start'],
+                    },
+               },
            ]

        });
@@ -74,16 +47,27 @@ const single_config = {
    onDropdownOpen: function () {
        this.popper.update();
    }
+  };
+
+  if (element.dataset.checkboxes === 'true') {
+      config.plugins.checkbox_options = {
+            'checkedClassNames': ['ts-checked'],
+            'uncheckedClassNames': ['ts-unchecked'],
+        };
+  }
+
+  if (element.dataset.clearButton === 'true') {
+      config.plugins.clear_button = {
+            'title': element.dataset.txtClear || 'Clear',
+        };
+  }
+
+  if (element.dataset.removeButton === 'true') {
+      config.plugins.remove_button = {
+            'title': element.dataset.txtRemove || 'Remove',
+        };
+  }
+
+  // Create and return the TomSelect instance
+  return new TomSelect(element, config);
 };
-
-document.querySelectorAll('.selectmultiple').forEach((el)=>{
-    new TomSelect(el, multiple_config);
-});
-
-document.querySelectorAll('.select').forEach((el)=>{
-    new TomSelect(el, single_config);
-});
-
-document.querySelectorAll('.csvselect').forEach((el)=>{
-    new TomSelect(el, single_config);
-});
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -0,0 +1,87 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2024-10-8 16:39:17
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation swing-in-top-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+}
+@keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+}
+
+.swing-in-top-fwd {
+	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+}
+
+//HTMX Loading
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+#transactions.htmx-request, #summary.htmx-request {
+  position: relative;
+  top: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    backdrop-filter: blur(4px);
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    margin-top: -20px;
+    margin-left: -20px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid $primary;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    z-index: 2;
+  }
+}
--- a/frontend/src/styles/_bootstrap.scss
+++ b/frontend/src/styles/_bootstrap.scss
@@ -8,6 +8,31 @@
  font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
  font-weight: bold;
 }
+
+$theme-colors: map-merge($theme-colors, (
+  "primary": $primary
+));
+
+
+@media all and (min-width: 992px) {
+  .navbar .nav-item .dropdown-menu {
+    display: none;
+  }
+
+  .navbar .nav-item:hover .dropdown-menu {
+    display: block;
+    left: 0;
+  }
+
+  .navbar .nav-item .dropdown-menu {
+    margin-top: 0;
+  }
+}
+
+.table .col-auto {
+  width: 1%;
+  white-space: nowrap;
+}
 //
 ////body {
 ////  background-color: $background-color;
--- a/frontend/src/styles/_scrollbar.scss
+++ b/frontend/src/styles/_scrollbar.scss
@@ -0,0 +1,21 @@
+@import "variables";
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $primary;
+  border-radius: 20px;
+  border: 4px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #ae8000;
+}
--- a/frontend/src/styles/_variables.scss
+++ b/frontend/src/styles/_variables.scss
@@ -28,8 +28,9 @@ $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        $red !default;
 //$light:         $gray-500 !default;
-$dark:          $gray-800 !default;
+$dark:          $gray-700 !default;

 $min-contrast-ratio:   1.9 !default;

-$nav-pills-link-active-color: $black
+$nav-pills-link-active-color: $gray-900;
+$dropdown-link-active-color: $gray-900;
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -1,8 +1,10 @@
-@import "_variables";
-@import "_font-awesome.scss";
-@import "_tailwind.scss";
-@import "_bootstrap.scss";
-@import "_tom-select.scss";
+@import "variables";
+@import "font-awesome.scss";
+@import "tailwind.scss";
+@import "bootstrap.scss";
+@import "tom-select.scss";
+@import "animations.scss";
+@import "scrollbar.scss";

 .sticky-sidebar {
  position: sticky;
@@ -13,3 +15,12 @@
 select[multiple] {
  visibility: hidden;
 }
+
+.font-base {
+  font-family: $font-family-base;
+}
+
+::selection {
+  color: $gray-800;
+  background-color: $primary;
+}