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;

frontend/src/styles/_bootstrap.scss

@@ -0,0 +1,101 @@
+@import 'bootstrap/scss/functions';
+
+@import "_variables";
+// Import all of Bootstrap's CSS
+@import "bootstrap/scss/bootstrap";
+
+.form-label {
+  font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
+  font-weight: bold;
+}
+//
+////body {
+////  background-color: $background-color;
+////}
+//
+
+//
+//// ===== Scrollbar CSS =====
+//* {
+//  scrollbar-width: thin;
+//  scrollbar-color: $scroll-thumb-color #dfe9eb;
+//}
+//
+//// Chrome, Edge and Safari
+//*::-webkit-scrollbar {
+//  height: 10px;
+//  width: 10px;
+//}
+//
+//*::-webkit-scrollbar-track {
+//  border-radius: 5px;
+//  background-color: $scroll-track-color;
+//}
+//
+//*::-webkit-scrollbar-track:hover {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-track:active {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-thumb {
+//  border-radius: 5px;
+//  background-color: $scroll-thumb-color;
+//}
+//
+//*::-webkit-scrollbar-thumb:hover {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//*::-webkit-scrollbar-thumb:active {
+//  background-color: $scroll-thumb-active-color;
+//}
+//
+//// ===== Scrollbar CSS =====
+//
+//.gradient-background {
+//  background: linear-gradient(109deg, #652e7c, #1a7976);
+//  background-size: 120% 120%;
+//  animation: gradient-animation 8s ease infinite;
+//}
+//
+//@keyframes gradient-animation {
+//  0% {
+//    background-position: 0% 50%;
+//  }
+//
+//  50% {
+//    background-position: 100% 50%;
+//  }
+//
+//  100% {
+//    background-position: 0% 50%;
+//  }
+//}
+//
+
+//
+//.fade-me-in.htmx-added {
+//  opacity: 0;
+//}
+//
+//.fade-me-in {
+//  opacity: 1;
+//  transition: opacity 500ms ease-out;
+//}
+
+
+.offcanvas-size-xl {
+    --#{$prefix}offcanvas-width: min(95vw, 600px) !important;
+}
+.offcanvas-size-xxl {
+    --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
+}
+.offcanvas-size-md { /* add Responsivenes to default offcanvas */
+    --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
+}
+.offcanvas-size-sm {
+    --#{$prefix}offcanvas-width: min(95vw, 250px) !important;
+}

frontend/src/styles/_font-awesome.scss

@@ -0,0 +1,4 @@
+@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
+@import "@fortawesome/fontawesome-free/css/solid.min.css";
+@import "@fortawesome/fontawesome-free/css/regular.min.css";
+@import "@fortawesome/fontawesome-free/css/brands.min.css";

frontend/src/styles/_tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/styles/_tom-select.scss

@@ -0,0 +1,45 @@
+@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
+@import "_variables.scss";
+
+/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
+.ts-dropdown, .ts-control, .ts-control input {
+  color: var(--bs-body-color);
+}
+.ts-wrapper.plugin-remove_button .item .remove {
+  color: $red;
+}
+.plugin-clear_button .clear-button {
+  color: $red;
+  right: 60px;
+}
+
+.ts-wrapper.multi .ts-control > div.active {
+  background: $primary;
+  color: $body-color;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.focus .ts-control {
+  color: $input-focus-color;
+  background-color: $input-focus-bg;
+  border-color: $input-focus-border-color;
+  //border-color: $form-select-focus-border-color;
+  outline: 0;
+  @if $enable-shadows {
+    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+  } @else {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    box-shadow: $input-focus-box-shadow;
+  }
+}
+
+.focus.ts-wrapper {
+  border-color: $form-select-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+}

frontend/src/styles/_variables.scss

@@ -0,0 +1,33 @@
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #fbb700 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $yellow !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+//$light:         $gray-500 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.9 !default;

frontend/src/styles/style.scss

@@ -0,0 +1,15 @@
+@import "_variables";
+@import "_font-awesome.scss";
+@import "_tailwind.scss";
+@import "_bootstrap.scss";
+@import "_tom-select.scss";
+
+.sticky-sidebar {
+  position: sticky;
+  top: 10px;
+}
+
+// Somewhat prevents flickering when replacing with Tom-select
+select[multiple] {
+  visibility: hidden;
+}