diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl index ca6ba1a25b522704a26054f0ffa5ab4e91da4940..68ac7dc85533236c28dd94e5f6f44f0d2c631ba5 100644 --- a/src/main/resources/templates/charts/charts.ftl +++ b/src/main/resources/templates/charts/charts.ftl @@ -63,61 +63,14 @@ </div> <input type="hidden" name="chartID" value=""> - <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> - - <div class="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>Filter</div> - <div class="collapsible-body"><@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/></div> - </li> - </ul> - </div> - </div> - </div> + <@dateSelect/> - <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/> + <@filterOptions/> <#-- buttons --> <div class="row center-align"> <div class="col s12"> - <button class="btn waves-effect waves-light background-blue" type="submit" - name="buttonSave"> + <button class="btn waves-effect waves-light background-blue" type="submit" name="buttonSave"> <i class="material-icons left">show_chart</i>${locale.getString("chart.show")} </button> </div> @@ -195,6 +148,43 @@ </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"> @@ -225,3 +215,20 @@ <#macro quickDateOption index localizationKey> <td class="quick-date" data-quick="${index}">${locale.getString(localizationKey)}</td> </#macro> + +<#macro filterOptions> + <div class="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>Filter</div> + <div class="collapsible-body"><@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/></div> + </li> + </ul> + </div> + </div> + </div> + + <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/> +</#macro>