Select Git revision
-
Robert Goldmann authoredRobert Goldmann authored
charts.ftl 11.47 KiB
<html>
<head>
<#import "../helpers/header.ftl" as header>
<@header.globals/>
<@header.header "BudgetMaster - ${locale.getString('menu.charts')}"/>
<@header.style "datepicker"/>
<@header.style "collapsible"/>
<@header.style "charts"/>
<#import "/spring.ftl" as s>
</head>
<@header.body>
<#import "../helpers/navbar.ftl" as navbar>
<@navbar.navbar "charts" settings/>
<#import "chartFunctions.ftl" as chartFunctions>
<#import "../transactions/transactionsMacros.ftl" as transactionsMacros>
<#import "../filter/filterMacros.ftl" as filterMacros>
<main>
<div class="card main-card background-color">
<div class="container">
<div class="section center-align">
<div class="headline"><i class="material-icons">show_chart</i> ${locale.getString("title.charts")}</div>
</div>
</div>
<@header.content>
<div class="row">
<div class="col s12 center-align">
<@header.buttonLink url='' icon='edit' localizationKey='chart.button.settings' noUrl=true id='buttonShowChartSettings' classes='hidden'/>
</div>
</div>
<form name="NewChartSettings" action="<@s.url '/charts'/>" method="post" class="<#if chartSettings.isChartSelected()>hidden</#if>">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<div class="container">
<div class="row">
<div class="col s12 center-align">
<#list displayTypes as displayType>
<@chartTypeButton item=displayType buttonClass="button-display-type" initialItem=chartSettings.getDisplayType()/>
</#list>
</div>
</div>
</div>
<input type="hidden" name="displayType" value="${chartSettings.getDisplayType().name()}">
<div class="container" id="chart-group-type-buttons">
<div class="row">
<div class="col s12 center-align">
<#list groupTypes as groupType>
<@chartTypeButton item=groupType buttonClass="button-group-type" initialItem=chartSettings.getGroupType()/>
</#list>
</div>
</div>
</div>
<input type="hidden" name="groupType" value="${chartSettings.getGroupType().name()}">
<div class="container">
<div class="row">
<#list charts as chart>
<@chartPreview chart/>
</#list>
<div class="col s12 center-align hidden" id="buttonCustomCharts">
<@header.buttonLink url='/charts/manage' icon='edit' localizationKey='chart.button.manage'/>
</div>
</div>
</div>
<input type="hidden" name="chartID" value="">
<script>
selectChartID="${chartSettings.getChartID()!-1}";
</script>
<@dateSelect/>
<@filterOptions/>
<#-- buttons -->
<div class="row center-align">
<div class="col s12">
<button class="btn waves-effect waves-light background-blue" type="submit" name="buttonSave" disabled>
<i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
</button>
</div>
</div>
</form>
<br>
<div class="container-chart">
<#if containerID??>
<div id="${containerID}" class="chart-canvas"></div>
</#if>
</div>
</@header.content>
</div>
</main>
<!-- Pass localization to JS -->
<#import "../helpers/globalDatePicker.ftl" as datePicker>
<@datePicker.datePickerLocalization/>
<script>
filterActive = "${locale.getString("filter.active")}";
filterNotActive = "${locale.getString("title.filter")}";
</script>
<!-- Scripts-->
<#import "../helpers/scripts.ftl" as scripts>
<@scripts.scripts/>
<script src="<@s.url '/js/libs/plotly.min.js'/>"></script>
<script src="<@s.url '/js/libs/moment.min.js'/>"></script>
<script src="<@s.url '/js/charts.js'/>"></script>
<script src="<@s.url '/js/filter.js'/>"></script>
<#if chart??>
<script>
<#if chart.getType().name() == "DEFAULT">
localizedLocale = '${locale.getString("locale")}';
localizedTitle = '${locale.getString(chart.getName())}';
localizedCurrency = '${settings.getCurrency()}';
localizedData = JSON.parse('${locale.getString(chart.getName() + ".localization")}');
</#if>
<#assign chartScript = chart.getScript()/>
<#assign chartScript = chartScript?replace("var transactionData = [];", "var transactionData = ${transactionData};")/>
<#assign chartScript = chartScript?replace("containerID", "${containerID}")/>
${chartScript}
</script>
</#if>
</@header.body>
</html>
<#macro chartTypeButton item buttonClass initialItem>
<#assign isInitialItem=item.name()==initialItem.name()/>
<a class="waves-effect waves-light btn-large text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
<#if item.hasFontAwesomeIcon()>
<i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
<#else>
<i class="material-icons left">${item.getIcon()}</i> ${locale.getString(item.getLocalizationKey())}
</#if>
</a>
</#macro>
<#macro chartPreview chart>
<div class="col s6 m4 l3 center-align chart-preview-column hidden" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}" data-id="${chart.getID()?c}">
<div class="card chart-preview">
<div class="card-image">
<img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
</div>
<div class="card-action bold valign-wrapper">
<span style="margin: auto">
${chartFunctions.getChartName(chart)}
</span>
</div>
</div>
</div>
</#macro>
<#macro dateSelect>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card" id="chart-date-card">
<div class="card-content">
<div class="row">
<div class="input-field col s6 m6 l4 offset-l2">
<#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
<input id="chart-datepicker" type="text" class="datepicker" name="startDate" value="${startDate}">
<label for="chart-datepicker">${locale.getString("chart.steps.second.label.start")}</label>
</div>
<div class="input-field col s6 m6 l4 ">
<#assign endDate = dateService.getLongDateString(chartSettings.getEndDate())/>
<input id="chart-datepicker-end" type="text" class="datepicker" name="endDate" value="${endDate}">
<label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
</div>
</div>
<@quickDateOptions/>
<script>
startDate = "${startDate}".split(".");
startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
endDate = "${endDate}".split(".");
endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
</script>
</div>
</div>
</div>
</div>
</div>
</#macro>
<#macro quickDateOptions>
<div class="row no-margin-bottom">
<div class="col s12 m12 l8 offset-l2 no-margin-top">
<table class="no-border-table">
<tr>
<@quickDateOption index="0" localizationKey="chart.quick.this.week"/>
<@quickDateOption index="1" localizationKey="chart.quick.this.month"/>
<@quickDateOption index="2" localizationKey="chart.quick.this.year"/>
<@quickDateOption index="3" localizationKey="chart.quick.all"/>
</tr>
<tr>
<@quickDateOption index="4" localizationKey="chart.quick.last.week"/>
<@quickDateOption index="5" localizationKey="chart.quick.last.month"/>
<@quickDateOption index="6" localizationKey="chart.quick.last.year"/>
<@quickDateOption index="7" localizationKey="chart.quick.until.endOfLastYear"/>
</tr>
<tr>
<@quickDateOption index="8" localizationKey="chart.quick.last.week.days"/>
<@quickDateOption index="9" localizationKey="chart.quick.last.month.days"/>
<@quickDateOption index="10" localizationKey="chart.quick.last.year.days"/>
<@quickDateOption index="11" localizationKey="chart.quick.until.today"/>
</tr>
</table>
</div>
</div>
</#macro>
<#macro quickDateOption index localizationKey>
<td class="quick-date" data-quick="${index}">${locale.getString(localizationKey)}</td>
</#macro>
<#macro filterOptions>
<div class="container" id="chart-filter-container">
<div class="row">
<div class="col s12 no-margin-top center-align">
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="fas fa-filter"></i>${locale.getString("title.filter")} <span class="badge background-red hidden text-white" id="filterActiveBadge">${locale.getString("filter.active.short")}</span></div>
<div class="collapsible-body left-align">
<@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/>
<div class="center-align">
<@filterMacros.buttonResetChart/>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</#macro>