Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: Recount:e8d6c53974291222131bc42b91453b7bec4f03b8
Branches Tags
Recount:main
..
compare: Recount:60d2743adecf5935767405b618ad5569ff23729a
Branches Tags
Recount:main

No commits in common. "e8d6c53974291222131bc42b91453b7bec4f03b8" and "60d2743adecf5935767405b618ad5569ff23729a" have entirely different histories.
e8d6c53974 ... 60d2743ade

7 changed files with 69 additions and 91 deletions
Show stats Expand all files Collapse all files

18
web/dashboard.templ
View file

@ -2,13 +2,13 @@ package web
templ dashboard() {
<title>Dashboard</title>
<div class="container" data-main-body="true">
<div class="container">
<div class="row" style="margin-top: -20px">
<div class="c-crust col card mx-auto cr-all d-flex-col">
<div class="c-surface0 d-flex w-100 cr-top">
<i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
<span class="mx-auto my-auto tc-text">Income/Expenses</span>
<i class="my-auto tc-text py-3 pe-3 me-1" data-feather="arrow-right"></i>
<div class="c-s0 d-flex w-100 cr-top">
<i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
<span class="mx-auto my-auto c-text">Income/Expenses</span>
<i class="my-auto c-text py-3 pe-3 me-1" data-feather="arrow-right"></i>
</div>
<div class="d-flex" style="height: 88%">
<div class="w-50">
@ -19,7 +19,7 @@ templ dashboard() {
id="IncomeVsExpenditureChart"
></canvas>
</div>
<div class="w-50 c-surface1" style="overflow-y: scroll">
<div class="w-50 c-s1" style="overflow-y: scroll">
<div class="m-4 my-5"
hx-trigger="load delay:0.25s"
hx-get="web/account_summaries"
@ -30,9 +30,9 @@ templ dashboard() {
</div>
<div class="c-crust col card mx-auto cr-all">
<div class="c-surface0 d-flex w-100 cr-top">
<i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
<i class="my-auto tc-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
<div class="c-s0 d-flex w-100 cr-top">
<i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
<i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
</div>
</div>
</div>

32
web/sass/utility-classes.scss
View file

@ -137,7 +137,6 @@ $w_h_sizes: (
border-radius: 20px;
background-color: var(--#{$prefix}-surface2);
transition: all 0.1s linear;
cursor: pointer;
}
.borderless-btn:hover {
background-color: var(--#{$prefix}-overlay1);
@ -206,22 +205,19 @@ table.table-striped {
border-color: var(--#{$prefix}-overlay2);
border-width: thin;
transition: max-height 0.2s linear;
select {
font-size: 1em;
border: none;
border-radius: $border-radius;
background-color: var(--#{$prefix}-mantle);
color: var(--#{$prefix}-text);
}
input {
width: 5em;
font-size: 1em;
margin-left: 10px;
margin-right: 10px;
border-radius: $border-radius;
border-style: solid;
border-color: var(--#{$prefix}-text);
}
}
.popup-menu select {
font-size: 1em;
border: none;
border-radius: $border-radius;
background-color: var(--#{$prefix}-mantle);
color: var(--#{$prefix}-text);
}
.popup-menu input {
width: 5em;
font-size: 1em;
margin-left: 10px;
margin-right: 10px;
}

26
web/sass/variables.scss
View file

@ -29,13 +29,7 @@
}
}
@each $color, $_ in map-get(catppuccin.$palette, 'latte') {
.c-#{$color} {
background-color: var(--#{$prefix}-#{$color}) !important;
}
}
.tc-text {
.c-text {
color: var(--#{$prefix}-text);
}
.c-s0 {
@ -44,3 +38,21 @@
.c-s1 {
background-color: var(--#{$prefix}-surface1);
}
.c-crust {
background-color: var(--#{$prefix}-crust);
}
.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;
}

41
web/static/chart_functions.js
View file

@ -144,30 +144,27 @@ function sparkline_summary_chart(jsonData, element) {
function fill_charts() {
document.querySelectorAll(".chartjs-chart").forEach(function (el) {
fill_chart(el);
});
}
var url = el.dataset.chartEndpoint;
var type = el.dataset.chartType;
function fill_chart(el) {
var url = el.dataset.chartEndpoint;
var type = el.dataset.chartType;
fetch(url)
.then(response => {
if (!response.ok) {
console.log(response);
throw new Error("Fetch response was not ok!")
}
return response.json();
}).then(jsonData => {
if (type == "historical_vs_current") {
historical_vs_current_chart(jsonData, el);
} else if (type == "sparkline_summary") {
sparkline_summary_chart(jsonData, el);
fetch(url)
.then(response => {
if (!response.ok) {
console.log(response);
throw new Error("Fetch response was not ok!")
}
}).catch(error => {
console.error("Unable to set up chart: ", error)
return response.json();
}).then(jsonData => {
if (type == "historical_vs_current") {
historical_vs_current_chart(jsonData, el);
} else if (type == "sparkline_summary") {
sparkline_summary_chart(jsonData, el);
}
}).catch(error => {
console.error("Unable to set up chart: ", error)
});
});
}
export {fill_charts, fill_chart}
export {fill_charts}

6
web/static/index.js
View file

@ -1,4 +1,4 @@
import {fill_charts, fill_chart} from "./chart_functions.js";
import {fill_charts} from "./chart_functions.js";
import {register_dropdowns} from "./dropdowns.js";
@ -33,7 +33,7 @@ function register_nav_links() {
function register_handlers() {
register_nav_links();
//fill_charts();
fill_charts();
register_dropdowns();
}
@ -57,4 +57,4 @@ const trigger_table_animation = debounce(load_in_table, 100);
const trigger_reset_handlers = debounce(register_handlers, 200);
export {trigger_reset_handlers, trigger_table_animation, fill_chart};
export {trigger_reset_handlers, trigger_table_animation};

27
web/templates/index.html
View file

@ -61,34 +61,15 @@
</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">
import {trigger_reset_handlers, trigger_table_animation, fill_chart} from "/static/index.js";
import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
feather.replace();
htmx.onLoad(function (element) {
feather.replace();
if (element.dataset.mainBody) {
trigger_reset_handlers();
}
if (element.localName === "tr") {
trigger_table_animation();
}
if (element.querySelectorAll("canvas").length > 0) {
element.querySelectorAll("canvas").forEach(function (el) {
fill_chart(el);
});
} else {
trigger_reset_handlers();
}
});
document.body.addEventListener('htmx:beforeSwap', function (event) {
// Get the target element where content will be replaced
var target = event.detail.target;
// Check if the target has Chart.js charts
var charts = target.querySelectorAll('.chartjs-chart');
charts.forEach(function (chart) {
// Destroy each Chart.js chart before swapping content
Chart.getChart(chart).destroy();
});
});
trigger_reset_handlers();
</script>
</body>
</html>

10
web/transactions.templ
View file

@ -2,7 +2,7 @@ package web
templ transactions_page(userID int, accounts *[]string) {
<title>Transactions</title>
<div class="d-flex-col mx-4 h-100" data-main-body="true">
<div class="d-flex-col mx-4 h-100">
<div class="c-crust row cr-all p-5" style="height: fit-content">
<button
class="borderless-btn dropdown-button"
@ -59,14 +59,6 @@ templ transactions_page(userID int, accounts *[]string) {
<button class="ms-5 borderless-btn">
<span class="my-auto mx-3">No Filters</span>
</button>
<button
class="borderless-btn ms-auto me-3 c-green ch-teal"
style="color: var(--pf-bg);"
>
<i class="" data-feather="plus"></i>
Add New
</button>
</div>
<div class="row mt-5">