Newer
Older
<html>
<head>
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster - ${locale.getString('menu.charts')}"/>
<@header.style "collapsible"/>
<#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>
Robert Goldmann
committed
<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">
Robert Goldmann
committed
<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>
<input type="hidden" name="displayType" value="${chartSettings.getDisplayType().name()}">
<div class="container" id="chart-group-type-buttons">
Robert Goldmann
committed
<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>
<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">
Robert Goldmann
committed
<@header.buttonLink url='/charts/manage' icon='edit' localizationKey='chart.button.manage'/>
</div>
<input type="hidden" name="chartID" value="">
<script>
selectChartID="${chartSettings.getChartID()!-1}";
</script>
<#-- 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>
</form>
Robert Goldmann
committed
<br>
<div class="container-chart">
<#if containerID??>
<div id="${containerID}" class="chart-canvas"></div>
</#if>
</div>
</@header.content>
<!-- Pass localization to JS -->
<#import "../helpers/globalDatePicker.ftl" as datePicker>
<@datePicker.datePickerLocalization/>
filterActive = "${locale.getString("filter.active")}";
filterNotActive = "${locale.getString("title.filter")}";
<!-- Scripts-->
<#import "../helpers/scripts.ftl" as scripts>
<@scripts.scripts/>
<script src="<@s.url '/js/libs/plotly.min.js'/>"></script>
Robert Goldmann
committed
<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>
localizedLocale = '${locale.getString("locale")}';
localizedTitle = '${locale.getString(chart.getName())}';
localizedCurrency = '${settings.getCurrency()}';
localizedData = JSON.parse('${locale.getString(chart.getName() + ".localization")}');
<#assign chartScript = chart.getScript()/>
<#assign chartScript = chartScript?replace("var transactionData = [];", "var transactionData = ${transactionData};")/>
<#assign chartScript = chartScript?replace("containerID", "${containerID}")/>
${chartScript}
</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())}
<i class="material-icons left">${item.getIcon()}</i> ${locale.getString(item.getLocalizationKey())}
</#if>
</a>
</#macro>
<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}">
<img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
<div class="card-action bold valign-wrapper">
<span style="margin: auto">
${chartFunctions.getChartName(chart)}
</span>
</div>
</div>
</div>
</#macro>
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<#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>
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<#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>
<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>