From 0e710c96e4178b471ace57435312febfc905be12 Mon Sep 17 00:00:00 2001
From: Ivan Filippov <ivan.v.f@gmail.com>
Date: Fri, 22 Apr 2016 01:06:01 -0600
Subject: [PATCH] Converted 'admin_history.html' to new template.

---
 app/static/custom/js/custom.js   |   0
 app/templates/admin_history.html | 289 ++++++++++++++++---------------
 app/templates/base.html          |  11 ++
 3 files changed, 159 insertions(+), 141 deletions(-)
 create mode 100644 app/static/custom/js/custom.js

diff --git a/app/static/custom/js/custom.js b/app/static/custom/js/custom.js
new file mode 100644
index 0000000..e69de29
diff --git a/app/templates/admin_history.html b/app/templates/admin_history.html
index a059e72..4f72df4 100644
--- a/app/templates/admin_history.html
+++ b/app/templates/admin_history.html
@@ -1,144 +1,151 @@
-{% extends "base.html" %}
-{% block head %}
-        {{ super() }}
-        <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='global/plugins/select2/select2.css') }}"/>
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
-        <!-- END PAGE LEVEL PLUGIN STYLES -->
-
-        <!-- BEGIN THEME STYLES -->
-        <!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
-        <link href="{{ url_for('static', filename='global/css/components-md.css') }}" id="style_components" rel="stylesheet" type="text/css"/>
-        <link href="{{ url_for('static', filename='global/css/plugins-md.css') }}" rel="stylesheet" type="text/css"/>
-        <link href="{{ url_for('static', filename='admin/layout2/css/layout.css') }}" rel="stylesheet" type="text/css"/>
-        <link href="{{ url_for('static', filename='admin/layout2/css/themes/grey.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
-        <link href="{{ url_for('static', filename='admin/layout2/css/custom.css') }}" rel="stylesheet" type="text/css"/>
-        <!-- END THEME STYLES -->
-{% endblock %}
-{% block title %}<title>DNS Control Panel - History</title>{% endblock %}
-
-{% block dashboard_stat %}
-                <!-- BEGIN PAGE HEADER-->
-                <h3 class="page-title">
-                History</h3>
-                <div class="page-bar">
-                    <ul class="page-breadcrumb">
-                        <li>
-                            <i class="fa fa-home"></i>
-                            <a href="{{ url_for('dashboard') }}">Home</a>
-                            <i class="fa fa-angle-right"></i>
-                        </li>
-                        <li>
-                            <a href="{{ url_for('admin') }}">Admin</a>
-                            <i class="fa fa-angle-right"></i>
-                        </li>
-                        <li>
-                            <a href="#">History</a>
-                        </li>
-                    </ul>
-                </div>
-                <!-- END PAGE HEADER-->
-{% endblock %}
-
-{% block content %}
-                <div class="clearfix">
-                </div>
-
-                <div class="row">
-                    <div class="col-md-12">
-                        <!-- BEGIN HISTORY TABLE -->
-                        <div class="portlet box blue">
-                            <div class="portlet-title">
-                                <div class="caption">
-                                    <i class="fa fa-users"></i> History Management
-                                </div>
-                                <div class="tools">
-                                    <a href="javascript:;" class="collapse">
-                                    </a>
-                                    <a href="javascript:;" class="reload">
-                                    </a>
-                                </div>
-                            </div>
-                            <div class="portlet-body">
-                                <div class="table-toolbar">
-                                    <div class="row">
-                                        <div class="col-md-12">
-                                            <div class="btn-group pull-right">
-                                                <button id="tbl_history_clear" class="btn red">
-                                                Clear History <i class="fa fa-trash"></i>
-                                                </button>                                                
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <table class="table table-striped table-hover table-bordered" id="tbl_history">
-                                <thead>
-                                <tr>
-                                    <th>
-                                         Changed by
-                                    </th>
-                                    <th>
-                                         Content
-                                    </th>
-                                    <th>
-                                         Time
-                                    </th>
-                                    <th>
-                                         Detail
-                                    </th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {% for history in histories %}
-                                <tr class="odd gradeX">
-                                    <td>
-                                        {{ history.created_by }}
-                                    </td>
-                                    <td>
-                                        {{ history.msg }}
-                                    </td>
-                                    <td>
-                                        {{ history.created_on }}
-                                    </td>
-                                    <td width="6%">
-                                        <input type="hidden" name="history_detail" value="{{ history.detail }}">
-                                        <a class="btn default btn-xs blue history_detail" href="javascript:;"> <i class="fa fa-info"></i>Info</a>
-                                    </td>
-                                </tr>
-                                {% endfor %}
-                                </tbody>
-                                </table>
-                            </div>
-                        </div>
-
-                        <!-- END HISTORY TABLE -->
-                    </div>
-                </div>
-
-                <div class="row">
-                    <!-- MORE CONTENT GO HERE -->
-                </div>
-{% endblock %}
-
-{% block scripts %}
-{{ super() }}
-<!-- BEGIN PAGE LEVEL SCRIPTS -->
-<script src="{{ url_for('static', filename='global/scripts/metronic.js') }}" type="text/javascript"></script>
-<script src="{{ url_for('static', filename='admin/layout2/scripts/layout.js') }}" type="text/javascript"></script>
-<script src="{{ url_for('static', filename='global/plugins/bootbox/bootbox.min.js') }}" type="text/javascript"></script>
-<!-- END PAGE LEVEL SCRIPTS -->
-<!-- TABLE PLUGINS -->
-<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/select2/select2.min.js') }}"></script>
-<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
-<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
-<script src="{{ url_for('static', filename='admin/pages/scripts/table-managed.js') }}"></script>
-<!-- END TABLE PLUGINS -->
+{% extends "base.html" %} {% block title %}
+<title>DNS Control Panel - History</title>
+{% endblock %} {% block dashboard_stat %}
+<!-- Content Header (Page header) -->
+<section class="content-header">
+	<h1>
+		History <small>Recent PowerDNS-Admin events</small>
+	</h1>
+	<ol class="breadcrumb">
+		<li><a href="{{ url_for('dashboard') }}"><i
+				class="fa fa-dashboard"></i> Home</a></li>
+		<li class="active">History</li>
+	</ol>
+</section>
+{% endblock %} {% block content %}
+<section class="content">
+	<div class="row">
+		<div class="col-xs-12">
+			<div class="box">
+				<div class="box-header">
+					<h3 class="box-title">History Management</h3>
+				</div>
+				<div class="box-body clearfix">
+					<button type="button" class="btn btn-flat btn-danger pull-right" data-toggle="modal" data-target="#modal_clear_history">
+						Clear History&nbsp;<i class="fa fa-trash"></i>
+					</button>
+				</div>
+				<div class="box-body">
+					<table id="tbl_history" class="table table-bordered table-striped">
+						<thead>
+							<tr>
+								<th>Changed by</th>
+								<th>Content</th>
+								<th>Time</th>
+								<th>Detail</th>
+							</tr>
+						</thead>
+						<tbody>
+							{% for history in histories %}
+							<tr class="odd gradeX">
+								<td>{{ history.created_by }}</td>
+								<td>{{ history.msg }}</td>
+								<td>{{ history.created_on }}</td>
+								<td width="6%">
+									<button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail|replace("[]","None") }}'>
+										Info&nbsp;<i class="fa fa-info"></i>
+									</button>
+								</td>
+							</tr>
+							{% endfor %}
+						</tbody>
+					</table>
+				</div>
+				<!-- /.box-body -->
+			</div>
+			<!-- /.box -->
+		</div>
+		<!-- /.col -->
+	</div>
+	<!-- /.row -->
+</section>
+{% endblock %} 
+{% block extrascripts %}
 <script>
-jQuery(document).ready(function() {    
-   Metronic.init(); // init metronic core componets
-   Layout.init(); // init layout
-   TableManaged.init();
-});
+	// set up history data table
+	$("#tbl_history").DataTable({
+		"paging" : true,
+		"lengthChange" : false,
+		"searching" : true,
+		"ordering" : true,
+		"info" : true,
+		"autoWidth" : false
+	});
+
+	$(".history-info-button").click(function() {
+		var modal = $("#modal_history_info");
+		var info = $(this).val();
+		modal.find('.modal-body p').text(info);
+		modal.modal('show');
+	});
+
+	// ajax call to clear history table
+	function clearHistoryTable() {
+		$.ajax({
+			type : "POST",
+			url : '/admin/history',
+			data : '',
+			contentType : "application/json; charset=utf-8",
+			crossDomain : true,
+			dataType : "json",
+			success : function(data, status, jqXHR) {
+
+			},
+
+			error : function(jqXHR, status) {
+
+			}
+		});
+	}
 </script>
-<!-- END JAVASCRIPTS -->
+{% endblock %} 
+{% block modals %}
+<!-- Clear History Confirmation Box -->
+<div class="modal fade modal-warning" id="modal_clear_history">
+	<div class="modal-dialog">
+		<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">Confirmation</h4>
+			</div>
+			<div class="modal-body">
+				<p>Are you sure you want to remove all history?</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default pull-left"
+					data-dismiss="modal">Close</button>
+				<button type="button" class="btn btn-danger" onclick="clearHistoryTable();location.reload();">Clear
+					History</button>
+			</div>
+		</div>
+		<!-- /.modal-content -->
+	</div>
+	<!-- /.modal-dialog -->
+</div>
+<div class="modal fade" id="modal_history_info">
+	<div class="modal-dialog">
+		<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">History Details</h4>
+			</div>
+			<div class="modal-body">
+				<p></p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default pull-right"
+					data-dismiss="modal">Close</button>
+			</div>
+		</div>
+		<!-- /.modal-content -->
+	</div>
+	<!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
 {% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
index c6ac57e..69c1ed9 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -16,6 +16,8 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- DataTables -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/datatables/dataTables.bootstrap.css') }}">
   <!-- Theme style -->
   <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
   <!-- AdminLTE Skins. Choose a skin from the css/skins
@@ -272,6 +274,9 @@
 </script>
 <!-- Bootstrap 3.3.6 -->
 <script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
+<!-- DataTables -->
+<script src="{{ url_for('static', filename='adminlte2/plugins/datatables/jquery.dataTables.min.js') }}"></script>
+<script src="{{ url_for('static', filename='adminlte2/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>
 <!-- Morris.js charts -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="{{ url_for('static', filename='adminlte2/plugins/morris/morris.min.js') }}"></script>
@@ -299,6 +304,12 @@
 <script src="{{ url_for('static', filename='adminlte2/dist/js/pages/dashboard.js') }}"></script>
 <!-- AdminLTE for demo purposes -->
 <script src="{{ url_for('static', filename='adminlte2/dist/js/demo.js') }}"></script>
+<!-- PowerDNS-Admin custom.js -->
+<script src="{{ url_for('static', filename='custom/js/custom.js') }}"></script>
+{% endblock %}
+{% block extrascripts %}
+{% endblock %}
+{% block modals %}
 {% endblock %}
 </body>
 </html>