added some filter stuff
This commit is contained in:
parent
48470e905a
commit
701733eb90
5 changed files with 71 additions and 32 deletions
|
|
@ -3,6 +3,7 @@ package web
|
|||
import (
|
||||
"html/template"
|
||||
"net/http"
|
||||
"strconv"
|
||||
|
||||
"bytes"
|
||||
"context"
|
||||
|
|
@ -87,8 +88,12 @@ func getDashboard(w http.ResponseWriter, req *http.Request) {
|
|||
}
|
||||
|
||||
func getTransactionsPage(w http.ResponseWriter, req *http.Request) {
|
||||
component := transactions_page(1);
|
||||
accounts := make([]string, 10);
|
||||
for i := 0; i < 10; i++ {
|
||||
accounts[i] = strconv.Itoa(i) + " Account";
|
||||
}
|
||||
|
||||
component := transactions_page(1, &accounts);
|
||||
_, ok := req.Header["Hx-Request"]
|
||||
if ok {
|
||||
err := component.Render(context.Background(), w);
|
||||
|
|
|
|||
|
|
@ -190,6 +190,21 @@ table.table-striped {
|
|||
background-color: var(--#{$prefix}-overlay2);
|
||||
color: var(--#{$prefix}-bg);
|
||||
border-radius: 0px 0px $border-radius $border-radius;
|
||||
transition: all 0.2s linear;
|
||||
overflow: hidden;
|
||||
border-style: solid;
|
||||
border-color: var(--#{$prefix}-overlay2);
|
||||
border-width: thin;
|
||||
transition: max-height 0.2s linear;
|
||||
}
|
||||
|
||||
.popup-menu select {
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.popup-menu input {
|
||||
width: 5em;
|
||||
font-size: 1em;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,39 +23,31 @@ function update_position(button, dropdown_div) {
|
|||
function setup_dropdown(button) {
|
||||
const dropdown_div = document.querySelector("#" + button.dataset.dropdownTarget);
|
||||
update_position(button, dropdown_div);
|
||||
dropdown_div.style.display = "none";
|
||||
dropdown_div.style.maxHeight = "0px";
|
||||
return function () {
|
||||
if (dropdown_div.style.display == "none") {
|
||||
|
||||
dropdown_div.style.removeProperty("display");
|
||||
if (button.dataset.dropdownMotion == "expand-down") {
|
||||
dropdown_div.style.display = "block";
|
||||
dropdown_div.style.maxHeight = "0px";
|
||||
|
||||
button.style.borderBottomLeftRadius = "0px";
|
||||
button.style.borderBottomRightRadius = "0px";
|
||||
}
|
||||
|
||||
update_position(button, dropdown_div);
|
||||
button.style.borderBottomLeftRadius = "0px";
|
||||
button.style.borderBottomRightRadius = "0px";
|
||||
|
||||
dropdown_div.style.overflow = "hidden";
|
||||
dropdown_div.style.display = "block";
|
||||
dropdown_div.style.maxHeight = "0px";
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
if (button.dataset.dropdownMotion == "expand-down") {
|
||||
dropdown_div.style.maxHeight = "100px";
|
||||
} else {
|
||||
dropdown_div.style.opacity = 1;
|
||||
}
|
||||
}, 110);
|
||||
dropdown_div.style.maxHeight = "150px";
|
||||
dropdown_div.style.removeProperty("overflow");
|
||||
}, 200);
|
||||
} else {
|
||||
if (button.dataset.dropdownMotion == "expand-down") {
|
||||
dropdown_div.style.maxHeight = "0px";
|
||||
} else {
|
||||
dropdown_div.style.opacity = 0;
|
||||
}
|
||||
dropdown_div.style.overflow = "hidden";
|
||||
dropdown_div.style.maxHeight = "0px";
|
||||
setTimeout(function () {
|
||||
if (button.dataset.dropdownMotion == "expand-down") {
|
||||
button.style.removeProperty("border-bottom-left-radius");
|
||||
button.style.removeProperty("border-bottom-right-radius");
|
||||
}
|
||||
button.style.removeProperty("border-bottom-left-radius");
|
||||
button.style.removeProperty("border-bottom-right-radius");
|
||||
dropdown_div.style.display = "none";
|
||||
dropdown_div.style.removeProperty("overflow");
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="module" src="/static/index.js"></script>
|
||||
<script type="module">
|
||||
import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
|
||||
feather.replace();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
package web
|
||||
|
||||
templ transactions_page(userID int) {
|
||||
templ transactions_page(userID int, accounts *[]string) {
|
||||
<title>Transactions</title>
|
||||
<div class="d-flex-col mx-4 h-100">
|
||||
<div class="c-crust row cr-all p-5" style="height: fit-content">
|
||||
|
|
@ -14,8 +14,36 @@ templ transactions_page(userID int) {
|
|||
<i class="" data-feather="filter"></i>
|
||||
<span class="ms-3 my-auto">Add Filter</span>
|
||||
</button>
|
||||
<div class="popup-menu" id="filter-popup" role="tooltip" style="display: none; max-height: 0px;">
|
||||
<p>Hey there</p>
|
||||
<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>
|
||||
<div id="filter-two-inputs" style="display: none;">
|
||||
<input type="text"></input>
|
||||
<select>
|
||||
<option>></option>
|
||||
<option>=</option>
|
||||
<option>{"<"}</option>
|
||||
</select>
|
||||
<input type="text"></input>
|
||||
</div>
|
||||
<div id="filter-accounts">
|
||||
<select class="ms-3">
|
||||
<option>=</option>
|
||||
</select>
|
||||
<select>
|
||||
for _, value := range *accounts {
|
||||
<option>{value}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="ms-5 borderless-btn">
|
||||
|
|
|
|||
Loading…
Reference in a new issue