initial commit

frontend/src/application/autosize.js

@@ -0,0 +1,54 @@
+import autosize from "autosize/dist/autosize";
+
+let autosize_textareas = document.querySelectorAll('textarea[autosize]');
+
+autosize(autosize_textareas);
+
+document.addEventListener('shown.bs.collapse', function () {
+    autosize.update(autosize_textareas);
+});
+
+// UPDATE AUTOSIZE TEXT AREAS FOR FORMS INSIDE HTMX MODALS
+document.addEventListener('updated.bs.modal', function () {
+    let new_autosize_textareas = document.querySelectorAll('textarea[autosize]');
+    autosize(new_autosize_textareas);
+});
+
+let charcount_textareas = document.querySelectorAll('textarea[countchars], input[countchars]');
+charcount_textareas.forEach(formElement => {
+    countTextArea(formElement);
+    formElement.addEventListener('input', () => countTextArea(formElement));
+});
+
+function countTextArea(formElement) {
+    let name = formElement.name;
+
+    let max_chars = null;
+    if (formElement.dataset.maxChars) {
+        max_chars = formElement.dataset.maxChars;
+    } else if (formElement.hasAttribute("maxlength")) {
+        max_chars = formElement.getAttribute("maxlength");
+    }
+
+    let cur_chars = formElement.value.length;
+
+    let wrapper = document.querySelector(`#charcount-${name}`);
+    let char_counter = document.querySelector(`#char-counter-${name}`);
+    let max_counter = document.querySelector(`#max-counter-${name}`);
+
+    char_counter.textContent = cur_chars;
+    if (max_counter) {
+        max_counter.textContent = max_chars;
+        wrapper.classList.remove("text-bg-warning", "text-bg-normal", "text-bg-success", "text-bg-danger");
+
+        if (cur_chars === 0) {
+            wrapper.classList.add("text-bg-secondary");
+        } else if (cur_chars > max_chars - 1) {
+            wrapper.classList.add("text-bg-danger");
+        } else if (cur_chars < max_chars && cur_chars > max_chars * (90 / 100)) {
+            wrapper.classList.add("text-bg-warning");
+        } else if (cur_chars < max_chars - ((max_chars * (10 / 100)) - 1)) {
+            wrapper.classList.add("text-bg-success");
+        }
+    }
+}

frontend/src/application/bootstrap.js

@@ -0,0 +1,76 @@
+// Import all of Bootstrap's JS
+import * as bootstrap from 'bootstrap'; // eslint-disable-line no-unused-vars
+window.bootstrap = bootstrap;
+
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+[...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));  // eslint-disable-line no-undef
+
+
+function initiateTooltips() {
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger: 'hover', container: 'body'}));  // eslint-disable-line no-undef
+}
+
+document.addEventListener('updated.bs.modal', initiateTooltips, false);
+document.addEventListener('htmx:afterSwap', initiateTooltips, false);
+initiateTooltips();
+
+
+function initiateToasts() {
+    const toastElList = document.querySelectorAll('.toast');
+    const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl));  // eslint-disable-line no-undef
+
+    for (let i = 0; i < toastList.length; i++) {
+        toastList[i].show();
+        toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
+            event.target.remove();
+        });
+    }
+}
+
+document.addEventListener('htmx:afterSwap', initiateToasts, false);
+initiateToasts();
+
+(function ($bs) {
+    const CLASS_NAME = 'has-child-dropdown-show';
+    $bs.Dropdown.prototype.toggle = function (_orginal) {
+        return function () {
+            document.querySelectorAll('.' + CLASS_NAME).forEach(function (e) {
+                e.classList.remove(CLASS_NAME);
+            });
+            let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
+            for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
+                dd.classList.add(CLASS_NAME);
+            }
+            return _orginal.call(this);
+        };
+    }($bs.Dropdown.prototype.toggle);
+
+    document.querySelectorAll('.dropdown').forEach(function (dd) {
+        dd.addEventListener('hide.bs.dropdown', function (e) {
+            if (this.classList.contains(CLASS_NAME)) {
+                this.classList.remove(CLASS_NAME);
+                e.preventDefault();
+            }
+            e.stopPropagation(); // do not need pop in multi level mode
+        });
+    });
+
+    // for hover
+    document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function (dd) {
+        dd.addEventListener('mouseenter', function (e) {
+            let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
+            if (!toggle.classList.contains('show')) {
+                $bs.Dropdown.getOrCreateInstance(toggle).toggle();
+                dd.classList.add(CLASS_NAME);
+                $bs.Dropdown.clearMenus(e);
+            }
+        });
+        dd.addEventListener('mouseleave', function (e) {
+            let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
+            if (toggle.classList.contains('show')) {
+                $bs.Dropdown.getOrCreateInstance(toggle).toggle();
+            }
+        });
+    });
+})(bootstrap);

frontend/src/application/font-awesome.js

@@ -0,0 +1,5 @@
+// import '@fortawesome/fontawesome-free/js/fontawesome';
+// import '@fortawesome/fontawesome-free/js/solid';
+// import '@fortawesome/fontawesome-free/js/regular';
+// import '@fortawesome/fontawesome-free/js/brands';
+// DEPRECATED

frontend/src/application/htmx.js

@@ -0,0 +1,37 @@
+import htmx from "htmx.org";
+import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
+
+_hyperscript.browserInit();
+
+let modalEle = document.getElementById("modal");
+
+if (modalEle) {
+    const modal = new bootstrap.Modal(modalEle); // eslint-disable-line no-undef
+
+    htmx.on("htmx:beforeSwap", (e) => {
+        // Empty response targeting #dialog => hide the modal
+        if (e.detail.target.id === "dialog" && !e.detail.xhr.response) {
+            modal.hide();
+            e.detail.shouldSwap = false;
+        }
+    });
+
+    htmx.on("hidden.bs.modal", () => {
+        document.getElementById("dialog").innerHTML = "";
+    });
+}
+
+let successAudio = new Audio("/static/sounds/success.mp3");
+let popAudio = new Audio("/static/sounds/pop.mp3");
+
+htmx.on("paid", () => {
+    successAudio.pause();
+    successAudio.currentTime = 0;
+    successAudio.play();
+});
+
+htmx.on("unpaid", () => {
+    popAudio.pause();
+    popAudio.currentTime = 0;
+    popAudio.play();
+});

frontend/src/application/jquery.js

@@ -0,0 +1,3 @@
+const $ = require('jquery');
+window.jQuery = $;
+window.$ = $;

frontend/src/application/jquery_mask.js

@@ -0,0 +1 @@
+import 'jquery-mask-plugin/dist/jquery.mask.min';

frontend/src/application/select.js

@@ -0,0 +1,89 @@
+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',
+        }
+    },
+    render: {
+        no_results: function () {
+            return '<div class="no-results">Nenhum resultado encontrado...</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",
+            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();
+    }
+};
+
+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);
+});

frontend/src/application/style.js

@@ -0,0 +1,2 @@
+// Import our custom CSS
+import '../styles/style.scss';

frontend/src/application/sweetalert2.js

@@ -0,0 +1,2 @@
+import Swal from 'sweetalert2';
+window.Swal = Swal;