From 52f09b340f2a5af70a16f9c0d85c8d65a78b142e Mon Sep 17 00:00:00 2001
From: Jos Schellevis <jos.schellevis@deciso.com>
Date: Tue, 7 Apr 2015 17:08:58 +0200
Subject: [PATCH] Proxy server WIP, added submenus and other GUI optimizations

---
 .../mvc/app/views/OPNsense/Proxy/index.volt   | 113 +++++++----
 .../app/views/layout_partials/base_tabs.volt  | 180 +++++++++++++++---
 .../views/layout_partials/form_input_tr.volt  |  30 ++-
 3 files changed, 262 insertions(+), 61 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt b/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
index 42f3c78fc..35407102e 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
@@ -1,3 +1,31 @@
+{#
+
+OPNsense® is Copyright © 2014 – 2015 by Deciso B.V.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1.  Redistributions of source code must retain the above copyright notice,
+    this list of conditions and the following disclaimer.
+
+2.  Redistributions in binary form must reproduce the above copyright notice,
+    this list of conditions and the following disclaimer in the documentation
+    and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+#}
+
 <script type="text/javascript">
 
     $( document ).ready(function() {
@@ -80,10 +108,25 @@
             }
         });
 
+        // handle advanced show/hide
+        $('[data-advanced*="true"]').hide(function(){
+            $('[data-advanced*="true"]').after("<tr data-advanced='hidden_row'></tr>"); // the table row is added to keep correct table striping
+        });
+        $('[id*="show_advanced"]').click(function() {
+            $('[id*="show_advanced"]').toggleClass("fa-toggle-on fa-toggle-off");
+            $('[id*="show_advanced"]').toggleClass("text-success text-danger");
+            if ($('[id*="show_advanced"]').hasClass("fa-toggle-on")) {
+                $('[data-advanced*="true"]').show();
+                $('[data-advanced*="hidden_row"]').remove(); // the table row is deleted to keep correct table striping
+            } else {
+                $('[data-advanced*="true"]').after("<tr data-advanced='hidden_row'></tr>").hide(); // the table row is added to keep correct table striping
+            }
+        });
+
+        // Apply tokenizer
         setTimeout(function(){
             $('select[class="tokenize"]').each(function(){
                 if ($(this).prop("size")==0) {
-                    //number_of_items = $(this).children('option').length;
                     maxDropdownHeight=String(36*5)+"px"; // default number of items
 
                 } else {
@@ -113,7 +156,7 @@
 
 </script>
 
-<!-- TODO: explain TABS
+<!-- TODO: explain TABS and SUBTABS
 content_location,tab_name,
     field_array
 activetab: content_location
@@ -134,38 +177,42 @@ maxheight: define max height of select box, default=170px to hold 5 items
             'label':'Enable proxy',
             'type':'checkbox',
             'help':'Enable or disable the proxy service.'
-             ]}
+            ]}
         ],
-        ['proxy-forward','Forward Proxy',
-            {['id': 'proxy.forward.interfaces',
-            'label':'Proxy interfaces',
-            'type':'select_multiple',
-            'style':'tokenize',
-            'help':'Select interface(s) the proxy will bind to.',
-            'hint':'Type or select interface'
-            ],
-            ['id': 'proxy.forward.port',
-            'label':'Proxy port',
-            'type':'text',
-            'help':'The port the proxy service will listen to.'
-            ],
-            ['id': 'proxy.forward.addACLforInterfaceSubnets',
-            'label':'Allow interface subnets',
-            'type':'checkbox',
-            'help':'When enabled the subnets of the selected interfaces will be added to the allow access list.'
-            ],
-            ['id': 'proxy.forward.transparentProxyMode',
-            'label':'Enable Transparent HTTP proxy',
-            'type':'checkbox',
-            'help':'Enable transparent proxe mode to forward all requests for destination port 80 to the proxy server without any additional configuration.'
-            ],
-            ['id': 'proxy.forward.alternateDNSservers',
-            'label':'Use alternate DNS-servers',
-            'type':'select_multiple',
-            'style':'tokenize',
-            'help':'Type IPs of alternative DNS servers you like to use.',
-            'hint':'Type or select interface',
-            'allownew':'true'
+        ['proxy-forward','Forward Proxy','subtabs': {
+            [ 'proxy-forward-general','General Forward Settings',
+                {['id': 'proxy.forward.interfaces',
+                'label':'Proxy interfaces',
+                'type':'select_multiple',
+                'style':'tokenize',
+                'help':'Select interface(s) the proxy will bind to.',
+                'hint':'Type or select interface.'
+                ],
+                ['id': 'proxy.forward.port',
+                'label':'Proxy port',
+                'type':'text',
+                'help':'The port the proxy service will listen to.'
+                ],
+                ['id': 'proxy.forward.transparentProxyMode',
+                'label':'Enable Transparent HTTP proxy',
+                'type':'checkbox',
+                'help':'Enable transparent proxe mode to forward all requests for destination port 80 to the proxy server without any additional configuration.'
+                ],
+                ['id': 'proxy.forward.addACLforInterfaceSubnets',
+                'label':'Allow interface subnets',
+                'type':'checkbox',
+                'help':'When enabled the subnets of the selected interfaces will be added to the allow access list.',
+                'advanced':'true'
+                ],
+                ['id': 'proxy.forward.alternateDNSservers',
+                'label':'Use alternate DNS-servers',
+                'type':'select_multiple',
+                'style':'tokenize',
+                'help':'Type IPs of alternative DNS servers you like to use.',
+                'hint':'Type IP adresses, followed by Enter.',
+                'allownew':'true',
+                'advanced':'true'
+                ]}
             ]}
         ]
     },
diff --git a/src/opnsense/mvc/app/views/layout_partials/base_tabs.volt b/src/opnsense/mvc/app/views/layout_partials/base_tabs.volt
index 8acd4bbfd..426130087 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_tabs.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_tabs.volt
@@ -1,35 +1,161 @@
-<ul class="nav nav-tabs " role="tablist"  id="maintabs">
-    {% for tab in tabs|default([]) %}
-        <li {% if activetab|default("") == tab[0] %} class="active" {% endif %}><a data-toggle="tab" href="#tab_{{tab[0]}}"><b>{{tab[1]}}</b></a></li>
-    {% endfor %}
+{#
+
+OPNsense® is Copyright © 2014 – 2015 by Deciso B.V.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1.  Redistributions of source code must retain the above copyright notice,
+    this list of conditions and the following disclaimer.
+
+2.  Redistributions in binary form must reproduce the above copyright notice,
+    this list of conditions and the following disclaimer in the documentation
+    and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+#}
+
+<ul class="nav nav-tabs" role="tablist"  id="maintabs">
+{% for tab in tabs|default([]) %}
+    {% if tab['subtabs']|default(false) %}
+        {# Tab with dropdown #}
+
+        {# Find active subtab #}
+            {% set active_subtab="" %}
+            {% for subtab in tab['subtabs']|default({}) %}
+                {% if subtab[0]==activetab|default("") %}
+                    {% set active_subtab=subtab[0] %}
+                {% endif %}
+            {% endfor %}
+
+        <li role="presentation" class="dropdown {% if activetab|default("") == active_subtab %}active{% endif %}">
+            <a data-toggle="dropdown" href="#" class="dropdown-toggle" role="button">
+                <b>{{tab[1]}} <span class="caret"></span></b>
+            </a>
+             <ul class="dropdown-menu" role="menu">
+                 {% for subtab in tab['subtabs']|default({})%}
+                 <li class="{% if activetab|default("") == subtab[0] %}active{% endif %}"><a data-toggle="tab" href="#subtab_{{subtab[0]}}"><i class="fa fa-check-square"></i> {{subtab[1]}}</a></li>
+                 {% endfor %}
+             </ul>
+        </li>
+    {% else %}
+        {# Standard Tab #}
+            <li {% if activetab|default("") == tab[0] %} class="active" {% endif %}>
+                    <a data-toggle="tab" href="#tab_{{tab[0]}}">
+                        <b>{{tab[1]}}</b>
+                    </a>
+            </li>
+    {% endif %}
+{% endfor %}
 </ul>
 
 <div class="content-box tab-content">
-{% for tab in tabs|default([]) %}
-        <div id="tab_{{tab[0]}}" class="tab-pane fade{% if activetab|default("") == tab[0] %} in active {% endif %}">
-            <form id="frm_{{tab[0]}}" class="form-inline">
-                <table class="table table-striped table-condensed table-responsive">
-                    <colgroup>
-                        <col class="col-md-3"/>
-                        <col class="col-md-4"/>
-                        <col class="col-md-5"/>
-                    </colgroup>
-                    <tbody>
+    {% for tab in tabs|default([]) %}
+        {% if tab['subtabs']|default(false) %}
+            {# Tab with dropdown #}
+            {% for subtab in tab['subtabs']|default({})%}
+
+                {# Find if there are help supported or advanced field on this page #}
+                    {% set help=false %}
+                    {% set advanced=false %}
+                    {% for field in subtab[2]|default({})%}
+                        {% for name,element in field %}
+                            {% if name=='help' %}
+                                {% set help=true %}
+                            {% endif %}
+
+                            {% if name=='advanced' %}
+                                {% set advanced=true %}
+                            {% endif %}
+                        {% endfor %}
+                        {% if help|default(false) and advanced|default(false) %}
+                            {% break %}
+                        {% endif %}
+                    {% endfor %}
+
+                <div id="subtab_{{subtab[0]}}" class="tab-pane fade{% if activetab|default("") == subtab[0] %} in active {% endif %}">
+                    <form id="frm_{{subtab[0]}}" class="form-inline">
+                        <table class="table table-striped table-condensed table-responsive">
+                            <colgroup>
+                                <col class="col-md-3"/>
+                                <col class="col-md-4"/>
+                                <col class="col-md-5"/>
+                            </colgroup>
+                            <tbody>
+                                <tr>
+                                    <td align="left"><a href="#">{% if advanced|default(false) %}<i class="fa fa-toggle-off text-danger" id="show_advanced_{{subtab[0]}}" type="button"></i> </a><small>{{ lang._('advanced mode') }} </small>{% endif %}</td>
+                                    <td colspan="2" align="right">
+                                        {% if help|default(false) %}<small>{{ lang._('full help') }} </small><a href="#"><i class="fa fa-toggle-off text-danger" id="show_all_help_{{subtab[0]}}" type="button"></i></a>{% endif %}
+                                    </td>
+                                </tr>
+                                    {% for field in subtab[2]|default({})%}
+                                        {{ partial("layout_partials/form_input_tr",field) }}
+                                    {% endfor %}
+                            <tr>
+                                <td colspan="3"><button class="btn btn-primary"  id="save_{{subtab[0]}}" type="button"><b>Apply </b><i id="frm_{{subtab[0]}}_progress" class=""></i></button></td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </form>
+                </div>
+            {% endfor %}
+        {% endif %}
+        {% if tab['subtabs']|default(false)==false %}
+
+            {# Find if there are help supported or advanced field on this page #}
+                {% set help=false %}
+                {% set advanced=false %}
+                {% for field in tab[2]|default({})%}
+                    {% for name,element in field %}
+                        {% if name=='help' %}
+                            {% set help=true %}
+                        {% endif %}
+
+                        {% if name=='advanced' %}
+                            {% set advanced=true %}
+                        {% endif %}
+                    {% endfor %}
+                        {% if help|default(false) and advanced|default(false) %}
+                        {% break %}
+                    {% endif %}
+                {% endfor %}
+
+            <div id="tab_{{tab[0]}}" class="tab-pane fade{% if activetab|default("") == tab[0] %} in active {% endif %}">
+                <form id="frm_{{tab[0]}}" class="form-inline">
+                    <table class="table table-striped table-condensed table-responsive">
+                        <colgroup>
+                            <col class="col-md-3"/>
+                            <col class="col-md-4"/>
+                            <col class="col-md-5"/>
+                        </colgroup>
+                        <tbody>
                         <tr>
-                            <td colspan="3" align="right">
-                                <small>{{ lang._('toggle full help on/off') }} </small><a href="#"><i class="fa fa-toggle-off text-danger" id="show_all_help_{{tab[0]}}" type="button"></i></a>
+                            <td align="left"><a href="#">{% if advanced|default(false) %}<i class="fa fa-toggle-off text-danger" id="show_advanced_{{tab[0]}}" type="button"></i> </a><small>{{ lang._('advanced mode') }} </small>{% endif %}</td>
+                            <td colspan="2" align="right">
+                                {% if help|default(false) %}<small>{{ lang._('full help') }} </small><a href="#"><i class="fa fa-toggle-off text-danger" id="show_all_help_{{tab[0]}}" type="button"></i></a>{% endif %}
                             </td>
                         </tr>
                         {% for field in tab[2]|default({})%}
-                        {{ partial("layout_partials/form_input_tr",field)}}
+                            {{ partial("layout_partials/form_input_tr",field)}}
                         {% endfor %}
-                    <tr>
-                        <td colspan="3"><button class="btn btn-primary"  id="save_{{tab[0]}}" type="button">Apply <i id="frm_{{tab[0]}}_progress" class=""></i></button></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </form>
-        </div>
-
-{% endfor %}
-</div>
+                        <tr>
+                            <td colspan="3"><button class="btn btn-primary"  id="save_{{tab[0]}}" type="button"><b>Apply </b><i id="frm_{{tab[0]}}_progress" class=""></i></button></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </form>
+            </div>
+        {% endif %}
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
index f49a7a68c..cdcbb2568 100644
--- a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
@@ -1,4 +1,32 @@
-<tr for="{{ id }}">
+{#
+
+OPNsense® is Copyright © 2014 – 2015 by Deciso B.V.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1.  Redistributions of source code must retain the above copyright notice,
+    this list of conditions and the following disclaimer.
+
+2.  Redistributions in binary form must reproduce the above copyright notice,
+    this list of conditions and the following disclaimer in the documentation
+    and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+#}
+
+<tr for="{{ id }}" {% if advanced|default(false)=='true' %} data-advanced="true"{% endif %}>
     <td >
         <div class="control-label" for="{{ id }}">
             {% if help|default(false) %}