From 1812da68d4f8e8bbf0c125ff3de4dd9a5137685f Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Thu, 15 Oct 2015 21:46:14 +0200
Subject: [PATCH] (captiveportal, new) implement frontend for template
 management

---
 .../views/OPNsense/CaptivePortal/index.volt   | 166 +++++++++++++++++-
 1 file changed, 162 insertions(+), 4 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/CaptivePortal/index.volt b/src/opnsense/mvc/app/views/OPNsense/CaptivePortal/index.volt
index 95158d6f5..54dfa5a7b 100644
--- a/src/opnsense/mvc/app/views/OPNsense/CaptivePortal/index.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/CaptivePortal/index.volt
@@ -29,7 +29,6 @@ POSSIBILITY OF SUCH DAMAGE.
 <script type="text/javascript">
 
     $( document ).ready(function() {
-
         /*************************************************************************************************************
          * link grid actions
          *************************************************************************************************************/
@@ -44,6 +43,74 @@ POSSIBILITY OF SUCH DAMAGE.
             }
         );
 
+        var gridopt = {
+            ajax: true,
+            selection: true,
+            multiSelect: true,
+            rowCount:[7,14,20,-1],
+            url: '/api/captiveportal/service/searchTemplates',
+            formatters: {
+                "commands": function (column, row) {
+                    return  "<button type=\"button\" class=\"btn btn-xs btn-default command-download\" data-row-id=\"" + row.fileid + "\"><span class=\"fa fa-download\"></span></button> " +
+                            "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.uuid + "\" data-row-name=\"" + row.name + "\"><span class=\"fa fa-pencil\"></span></button> " +
+                            "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.uuid + "\"><span class=\"fa fa-trash-o\"></span></button>";
+                }
+            }
+        };
+
+        var grid_templates = $("#grid-templates").bootgrid(gridopt).on("loaded.rs.jquery.bootgrid", function (e)
+        {
+            // scale footer on resize
+            $(this).find("tfoot td:first-child").attr('colspan',$(this).find("th").length - 1);
+            $(this).find('tr[data-row-id]').each(function(){
+                if ($(this).find('[class*="command-toggle"]').first().data("value") == "0") {
+                    $(this).addClass("text-muted");
+                }
+            });
+
+        });
+
+        grid_templates.on("loaded.rs.jquery.bootgrid", function(){
+            grid_templates.find(".command-edit").on("click", function(e) {
+                $("#templateUUID").val($(this).data("row-id"));
+                $("#templateName").val($(this).data("row-name"));
+                $("#base64text_upload").val("");
+                $('#DialogTemplate').modal({backdrop: 'static', keyboard: false});
+            });
+            grid_templates.find(".command-delete").on("click", function(e) {
+                var uuid=$(this).data("row-id");
+                stdDialogRemoveItem('Remove selected item?',function() {
+                    ajaxCall(url="/api/captiveportal/service/delTemplate/" + uuid,
+                            sendData={},callback=function(data,status){
+                                // reload grid after delete
+                                $("#grid-templates").bootgrid("reload");
+                            });
+                });
+            });
+            grid_templates.find(".command-download").on("click", function(e) {
+                window.open('/api/captiveportal/service/getTemplate/'+$(this).data("row-id")+'/','downloadTemplate');
+            });
+        });
+
+        /**
+         * Open dialog to add new template
+         */
+        $("#addTemplateAct").click(function(){
+            // clear dialog and open
+            $("#templateUUID").val("");
+            $("#templateName").val("");
+            $("#base64text_upload").val("");
+            $('#DialogTemplate').modal({backdrop: 'static', keyboard: false});
+        });
+
+        /**
+         * download default template
+         */
+        $("#downloadTemplateAct").click(function(){
+            window.open('/api/captiveportal/service/getTemplate/','downloadTemplate');
+        });
+
+
         /*************************************************************************************************************
          * Commands
          *************************************************************************************************************/
@@ -68,6 +135,42 @@ POSSIBILITY OF SUCH DAMAGE.
             });
         });
 
+        /*************************************************************************************************************
+         * File upload action, template dialog
+         *************************************************************************************************************/
+        // catch file select event and save content to textarea as base64 string
+        $("#input_filename").change(function(evt) {
+            if (evt.target.files[0]) {
+                var reader = new FileReader();
+                reader.onload = function(readerEvt) {
+                    var binaryString = readerEvt.target.result;
+                    $("#base64text_upload").val(btoa(binaryString));
+                };
+                reader.readAsBinaryString(evt.target.files[0]);
+            }
+        });
+        $("#act_upload").click(function() {
+            var requestData = {'name' : $("#templateName").val(), 'content': $("#base64text_upload").val()};
+            if ($("#templateUUID").val() != "") {
+                requestData['uuid'] = $("#templateUUID").val();
+            }
+            // save file content to server
+            ajaxCall(url="/api/captiveportal/service/saveTemplate", sendData=requestData, callback=function(data,status) {
+                if (data['error'] == undefined) {
+                    // saved, flush form data and hide modal
+                    $("#grid-templates").bootgrid("reload");
+                    $("#DialogTemplate").modal('hide');
+                } else {
+                    // error saving
+                    BootstrapDialog.show({
+                        type: BootstrapDialog.TYPE_WARNING,
+                        title: "{{ lang._('Error uploading template') }}",
+                        message: data['error'],
+                        draggable: true
+                    });
+                }
+            });
+        });
     });
 
 
@@ -75,7 +178,7 @@ POSSIBILITY OF SUCH DAMAGE.
 
 <ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
     <li class="active"><a data-toggle="tab" href="#zones">{{ lang._('Zones') }}</a></li>
-    <li><a data-toggle="tab" href="#general">{{ lang._('General') }}</a></li>
+    <li><a data-toggle="tab" href="#template">{{ lang._('Templates') }}</a></li>
 </ul>
 <div class="tab-content content-box tab-content">
     <div id="zones" class="tab-pane fade in active">
@@ -103,15 +206,70 @@ POSSIBILITY OF SUCH DAMAGE.
             </tfoot>
         </table>
     </div>
-    <div id="general" class="tab-pane fade in">
-
+    <div id="template" class="tab-pane fade in">
+        <div class="col-md-12">
+            <table id="grid-templates" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogTemplate">
+                <thead>
+                <tr>
+                    <th data-column-id="fileid" data-type="string"  data-visible="false">{{ lang._('Fileid') }}</th>
+                    <th data-column-id="name" data-type="string">{{ lang._('Name') }}</th>
+                    <th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
+                    <th data-column-id="uuid" data-type="string" data-identifier="true"  data-visible="false">{{ lang._('ID') }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td></td>
+                    <td>
+                        <button id="addTemplateAct" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
+                        <button id="downloadTemplateAct" type="button" class="btn btn-xs btn-default"><span class="fa fa-download"></span></button>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
     <div class="col-md-12">
         <hr/>
         <button class="btn btn-primary"  id="reconfigureAct" type="button"><b>{{ lang._('Apply') }}</b><i id="reconfigureAct_progress" class=""></i></button>
+        <br/><br/>
     </div>
 </div>
 
 
 {# include dialogs #}
 {{ partial("layout_partials/base_dialog",['fields':formDialogZone,'id':'DialogZone','label':'Edit zone'])}}
+
+<!-- upload (new) template content dialog -->
+<div class="modal fade" id="DialogTemplate" tabindex="-1" role="dialog" aria-labelledby="formDialogTemplateLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="formDialogTemplateLabel">{{ lang._('Upload file') }}</h4>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <input type="text" id="templateUUID" class="hidden">
+                    <div class="form-group">
+                        <label for="templateName">{{ lang._('Template name') }}</label>
+                        <input type="text" class="form-control" id="templateName" placeholder="Name">
+                    </div>
+                    <div class="form-group">
+                        <label for="input_filename">{{ lang._('File input') }}</label>
+                        <input type="file" id="input_filename">
+                    </div>
+                    <textarea id="base64text_upload" class="hidden"></textarea>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button id="act_upload" type="button" class="btn btn-default">
+                    {{ lang._('Upload') }}
+                    <span class="fa fa-upload"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>