From 3f404abdb630dff3306668f18f644b05c33cfbbf Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Mon, 19 Jul 2021 22:26:30 +0200
Subject: [PATCH] #585 - added macro for filter options

---
 .../resources/templates/charts/charts.ftl     | 107 ++++++++++--------
 1 file changed, 57 insertions(+), 50 deletions(-)

diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index ca6ba1a25..68ac7dc85 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>
-- 
GitLab