From 60d2743adecf5935767405b618ad5569ff23729a Mon Sep 17 00:00:00 2001
From: Nickiel12 <nicholasyoungsumner@gmail.com>
Date: Sun, 21 Jan 2024 20:46:11 -0800
Subject: [PATCH] added filter dropdown values

---
 2                             | 195 ----------------------------------
 web/sass/utility-classes.scss |  15 ++-
 web/sass/variables.scss       |  17 +++
 web/static/dropdowns.js       |  13 +++
 web/transactions.templ        |  34 +++---
 5 files changed, 66 insertions(+), 208 deletions(-)
 delete mode 100644 2

diff --git a/2 b/2
deleted file mode 100644
index 6a7b7c0..0000000
--- a/2
+++ /dev/null
@@ -1,195 +0,0 @@
-$sizes: (
-    "auto": auto,
-    "0": 0px,
-    "1": 2px,
-    "2": 5px,
-    "3": 8px,
-    "4": 10px,
-    "5": 15px
-);
-$directions: (
-    "s": "left",
-    "e": "right",
-    "t": "top",
-    "b": "bottom"
-);
-
-
-
-@each $size, $val in $sizes {
-    .m-#{$size} {
-        margin: $val;
-    }
-    .p-#{$size} {
-        padding: $val;
-    }
-    @each $dir, $dir-val in $directions {
-        .m#{$dir}-#{$size} {
-            margin-#{$dir-val}: $val;
-        }
-        .p#{$dir}-#{$size} {
-            padding-#{$dir-val}: $val;
-        }
-
-    }
-    .mx-#{$size} {
-        margin-left: $val;
-        margin-right: $val;
-    }
-    .my-#{$size} {
-        margin-top: $val;
-        margin-bottom: $val;
-    }
-    .px-#{$size} {
-        padding-left: $val;
-        padding-right: $val;
-    }
-    .py-#{$size} {
-        padding-top: $val;
-        padding-bottom: $val;
-    }
-}
-.m-auto {
-    margin: auto;
-}
-.my-auto {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-.mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-$w_h_sizes: (
-  '25': 25%,
-  '50': 50%,
-  '75': 75%,
-  '80': 80%,
-  '100': 100%,
-  'auto': auto,
-);
-
-// Loop through the sizes and generate classes
-@each $name, $value in $w_h_sizes {
-  .h-#{$name} {
-    height: $value;
-  }
-
-  .w-#{$name} {
-    width: $value;
-  }
-}
-
-.d-flex {
-    display: flex;
-}
-.d-flex-col {
-    display: flex;
-    flex-direction: column;
-}
-.d-block {
-    display: block;
-}
-.cr-all {
-    border-radius: $border-radius;
-}
-.cr-top {
-    border-radius: $border-radius $border-radius 0px 0px;
-}
-.cr-right {
-    border-radius: 0px $border-radius $border-radius 0px;
-}
-.cr-left {
-    border-radius: $border-radius 0px 0px $border-radius;
-}
-.cr-bottom {
-    border-radius: 0px 0px $border-radius $border-radius;
-}
-
-.t-s {
-    text-align: start;  
-}
-.t-e {
-    text-align: end;
-}
-.t-m {
-    text-align: center;
-}
-
-.borderless-btn {
-    display: flex;
-    color: var(--#{$prefix}-text);
-    font-size: 1em;
-    border: none;
-    padding: 10px 15px 10px 15px;
-    border-radius: 20px;
-    background-color: var(--#{$prefix}-surface2);
-    transition: all 0.1s linear;
-}
-.borderless-btn:hover {
-    background-color: var(--#{$prefix}-overlay1);
-    color: var(--#{$prefix}-nav-active-color);
-}
-
-table.table {
-    color: var(--#{$prefix}-text);
-    td {
-        padding-right: 10px;
-    }
-}
-
-table.table-striped {
-    border-collapse: collapse;
-    overflow: hidden;
-    thead {
-        background-color: var(--#{$prefix}-surface0);
-    }
-    tbody {
-        tr {
-            &.row_awaiting_processing {
-                background-color: var(--#{$prefix}-bg) !important;
-                max-width: 0px;
-                div {
-                    opacity: 0;
-                    max-height: 0px;
-                }
-            }
-            div {
-                display: block;
-                overflow: hidden;
-                max-height: 50px;
-                transition: max-height 0.6s cubic-bezier(0.02, 0.15, 0.84, 0.98),
-                    opacity 0.5s ease-in;
-            }
-            max-width: 100%;
-            transition: all 0.5s ease-in;
-            &:nth-child(odd) {
-                background-color: var(--#{$prefix}-crust);
-            }
-            &:nth-child(even) {
-                background-color: var(--#{$prefix}-mantle);
-            }
-        }
-    }
-    .positive {
-        color: var(--#{$prefix}-green);
-    }
-    .negative {
-        color: var(--#{$prefix}-red);
-    }
-}
-
-.popup-menu {
-    width: max-content;
-    height: max-content;
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: 1em;
-    background-color: var(--#{$prefix}-overlay2);
-    color: var(--#{$prefix}-bg);
-    border-radius: 0px 0px $border-radius $border-radius;
-    transition: all 0.2s linear;
-    overflow: hidden;
-}
diff --git a/web/sass/utility-classes.scss b/web/sass/utility-classes.scss
index ec6a253..9204ca7 100644
--- a/web/sass/utility-classes.scss
+++ b/web/sass/utility-classes.scss
@@ -117,6 +117,17 @@ $w_h_sizes: (
     text-align: center;
 }
 
+.btn-c-invert {
+    color: var(--#{$prefix}-bg) !important;
+}
+.btn-c-invert:hover {
+    color: var(--#{$prefix}-text) !important;
+}
+
+.borderless-btn.btn-sm {
+    padding: 4px 8px 4px 8px;
+}
+
 .borderless-btn {
     display: flex;
     color: var(--#{$prefix}-text);
@@ -187,7 +198,7 @@ table.table-striped {
     top: 0;
     left: 0;
     font-size: 1em;
-    background-color: var(--#{$prefix}-overlay2);
+    background-color: var(--#{$prefix}-overlay0);
     color: var(--#{$prefix}-bg);
     border-radius: 0px 0px $border-radius $border-radius;
     border-style: solid;
@@ -200,6 +211,8 @@ table.table-striped {
     font-size: 1em;
     border: none;
     border-radius: $border-radius;
+    background-color: var(--#{$prefix}-mantle);
+    color: var(--#{$prefix}-text);
 }
 .popup-menu input {
     width: 5em;
diff --git a/web/sass/variables.scss b/web/sass/variables.scss
index dd7eed5..6bbb8c5 100644
--- a/web/sass/variables.scss
+++ b/web/sass/variables.scss
@@ -14,6 +14,11 @@
         --#{$prefix}-text: #{map-get($color, 'text')};
         --#{$prefix}-green: #{map-get($color, 'green')};
         --#{$prefix}-red: #{map-get($color, 'red')};
+        --#{$prefix}-sky: #{map-get($color, 'sky')};
+        --#{$prefix}-sapphire: #{map-get($color, 'sapphire')};
+        --#{$prefix}-teal: #{map-get($color, 'teal')};
+        --#{$prefix}-maroon: #{map-get($color, 'maroon')};
+        --#{$prefix}-mauve: #{map-get($color, 'mauve')};
 
         --#{$prefix}-nav-bg: #{map-get($color, 'crust')};
         --#{$prefix}-nav-color: #{map-get($color, 'text')};
@@ -39,3 +44,15 @@
 .c-mantle {
     background-color: var(--#{$prefix}-mantle);
 }
+.c-mauve {
+    background-color: var(--#{$prefix}-mauve);
+}
+.c-teal {
+    background-color: var(--#{$prefix}-teal) !important;
+}
+.c-green {
+    background-color: var(--#{$prefix}-green) !important;
+}
+.c-maroon {
+    background-color: var(--#{$prefix}-maroon) !important;
+}
diff --git a/web/static/dropdowns.js b/web/static/dropdowns.js
index af62d34..4b99a64 100644
--- a/web/static/dropdowns.js
+++ b/web/static/dropdowns.js
@@ -53,10 +53,23 @@ function setup_dropdown(button) {
     };
 }
 
+function select_value_change(el) {
+    return function () {
+        var enable_div = el.options[el.selectedIndex].dataset.selectDiv;
+        el.parentNode.querySelectorAll("div").forEach(function (div_el) {
+            div_el.style.display = "none";
+        });
+        el.parentNode.querySelector("#" + enable_div).style.removeProperty("display");
+    }
+}
+
 function register_dropdowns() {
     document.querySelectorAll(".dropdown-button").forEach(function (el) {
         el.addEventListener("click", setup_dropdown(el));
     });
+    document.querySelectorAll(".select-swapout").forEach(function (el) {
+        el.addEventListener("change", select_value_change(el));
+    });
 }
 
 export {register_dropdowns}
diff --git a/web/transactions.templ b/web/transactions.templ
index 43e6a86..4722a4d 100644
--- a/web/transactions.templ
+++ b/web/transactions.templ
@@ -16,32 +16,42 @@ templ transactions_page(userID int, accounts *[]string) {
             </button>
             <div class="popup-menu" id="filter-popup" role="tooltip" style="display:none;">
                 <div class="d-flex p-3">
-                    <select>
-                        <option>Account</option>
-                        <option>Amount</option>
-                        <option>Date</option>
-                        <option>Desc. Contains</option>
-                        <option>ID</option>
+                    <select class="select-swapout">
+                        <option data-select-div="filter-accounts">Account</option>
+                        <option data-select-div="filter-two-inputs">Amount</option>
+                        <option data-select-div="filter-two-inputs">Date</option>
+                        <option data-select-div="filter-contains">Desc. Contains</option>
+                        <option data-select-div="filter-two-inputs">ID</option>
                     </select>
-                    <div id="filter-two-inputs" style="display: none;">
+                    <div id="filter-two-inputs" class="d-flex" style="display: none;">
                         <input type="text"></input>
-                        <select>
+                        <select class="ms-2">
                             <option>></option>
                             <option>=</option>
                             <option>{"<"}</option>
                         </select>
-                        <input type="text"></input>
+                        <input class="ms-2" type="text"></input>
                     </div>
-                    <div id="filter-accounts">
-                        <select class="ms-3">
+                    <div id="filter-contains" class="d-flex" style="display: none;">
+                        <select class="ms-2">
+                            <option>Contains</option>
+                        </select>
+                        <input class="ms-2" type="text"></input>
+                    </div>
+                    <div id="filter-accounts" class="d-flex">
+                        <select class="ms-2">
                             <option>=</option>
                         </select>
-                        <select>
+                        <select class="ms-2">
                         for _, value := range *accounts {
                             <option>{value}</option>
                         }
                         </select>
                     </div>
+                    <button 
+                        class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
+                    >Add
+                    </button>
                 </div>
 
             </div>