From b2a0e96fbd6975d73b103d5100683e071864f3bd Mon Sep 17 00:00:00 2001 From: Daniel García Moreno Date: Tue, 1 Jun 2021 11:40:51 +0200 Subject: Add initial AdminLTE template files Add the open source AdminLTE bootstrap dashboard template to the static folder, and some plugins that we'll use in the following changes to the templates. Plugins: * jquery * bootstrap * font-awesome https://adminlte.io/ --- ogcp/static/AdminLTE/dist/js/pages/dashboard.js | 267 ++++++++++++++++++++++ ogcp/static/AdminLTE/dist/js/pages/dashboard2.js | 270 +++++++++++++++++++++++ ogcp/static/AdminLTE/dist/js/pages/dashboard3.js | 147 ++++++++++++ 3 files changed, 684 insertions(+) create mode 100644 ogcp/static/AdminLTE/dist/js/pages/dashboard.js create mode 100644 ogcp/static/AdminLTE/dist/js/pages/dashboard2.js create mode 100644 ogcp/static/AdminLTE/dist/js/pages/dashboard3.js (limited to 'ogcp/static/AdminLTE/dist/js/pages') diff --git a/ogcp/static/AdminLTE/dist/js/pages/dashboard.js b/ogcp/static/AdminLTE/dist/js/pages/dashboard.js new file mode 100644 index 0000000..56539f2 --- /dev/null +++ b/ogcp/static/AdminLTE/dist/js/pages/dashboard.js @@ -0,0 +1,267 @@ +/* + * Author: Abdullah A Almsaeed + * Date: 4 Jan 2014 + * Description: + * This is a demo file used only for the main dashboard (index.html) + **/ + +/* global moment:false, Chart:false, Sparkline:false */ + +$(function () { + 'use strict' + + // Make the dashboard widgets sortable Using jquery UI + $('.connectedSortable').sortable({ + placeholder: 'sort-highlight', + connectWith: '.connectedSortable', + handle: '.card-header, .nav-tabs', + forcePlaceholderSize: true, + zIndex: 999999 + }) + $('.connectedSortable .card-header').css('cursor', 'move') + + // jQuery UI sortable for the todo list + $('.todo-list').sortable({ + placeholder: 'sort-highlight', + handle: '.handle', + forcePlaceholderSize: true, + zIndex: 999999 + }) + + // bootstrap WYSIHTML5 - text editor + $('.textarea').summernote() + + $('.daterange').daterangepicker({ + ranges: { + Today: [moment(), moment()], + Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')], + 'Last 7 Days': [moment().subtract(6, 'days'), moment()], + 'Last 30 Days': [moment().subtract(29, 'days'), moment()], + 'This Month': [moment().startOf('month'), moment().endOf('month')], + 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] + }, + startDate: moment().subtract(29, 'days'), + endDate: moment() + }, function (start, end) { + // eslint-disable-next-line no-alert + alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')) + }) + + /* jQueryKnob */ + $('.knob').knob() + + // jvectormap data + var visitorsData = { + US: 398, // USA + SA: 400, // Saudi Arabia + CA: 1000, // Canada + DE: 500, // Germany + FR: 760, // France + CN: 300, // China + AU: 700, // Australia + BR: 600, // Brazil + IN: 800, // India + GB: 320, // Great Britain + RU: 3000 // Russia + } + // World map by jvectormap + $('#world-map').vectorMap({ + map: 'usa_en', + backgroundColor: 'transparent', + regionStyle: { + initial: { + fill: 'rgba(255, 255, 255, 0.7)', + 'fill-opacity': 1, + stroke: 'rgba(0,0,0,.2)', + 'stroke-width': 1, + 'stroke-opacity': 1 + } + }, + series: { + regions: [{ + values: visitorsData, + scale: ['#ffffff', '#0154ad'], + normalizeFunction: 'polynomial' + }] + }, + onRegionLabelShow: function (e, el, code) { + if (typeof visitorsData[code] !== 'undefined') { + el.html(el.html() + ': ' + visitorsData[code] + ' new visitors') + } + } + }) + + // Sparkline charts + var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) + var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) + var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) + + sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]) + sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]) + sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]) + + // The Calender + $('#calendar').datetimepicker({ + format: 'L', + inline: true + }) + + // SLIMSCROLL FOR CHAT WIDGET + $('#chat-box').overlayScrollbars({ + height: '250px' + }) + + /* Chart.js Charts */ + // Sales chart + var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d') + // $('#revenue-chart').get(0).getContext('2d'); + + var salesChartData = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Digital Goods', + backgroundColor: 'rgba(60,141,188,0.9)', + borderColor: 'rgba(60,141,188,0.8)', + pointRadius: false, + pointColor: '#3b8bba', + pointStrokeColor: 'rgba(60,141,188,1)', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(60,141,188,1)', + data: [28, 48, 40, 19, 86, 27, 90] + }, + { + label: 'Electronics', + backgroundColor: 'rgba(210, 214, 222, 1)', + borderColor: 'rgba(210, 214, 222, 1)', + pointRadius: false, + pointColor: 'rgba(210, 214, 222, 1)', + pointStrokeColor: '#c1c7d1', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(220,220,220,1)', + data: [65, 59, 80, 81, 56, 55, 40] + } + ] + } + + var salesChartOptions = { + maintainAspectRatio: false, + responsive: true, + legend: { + display: false + }, + scales: { + xAxes: [{ + gridLines: { + display: false + } + }], + yAxes: [{ + gridLines: { + display: false + } + }] + } + } + + // This will get the first returned node in the jQuery collection. + // eslint-disable-next-line no-unused-vars + var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable] + type: 'line', + data: salesChartData, + options: salesChartOptions + }) + + // Donut Chart + var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d') + var pieData = { + labels: [ + 'Instore Sales', + 'Download Sales', + 'Mail-Order Sales' + ], + datasets: [ + { + data: [30, 12, 20], + backgroundColor: ['#f56954', '#00a65a', '#f39c12'] + } + ] + } + var pieOptions = { + legend: { + display: false + }, + maintainAspectRatio: false, + responsive: true + } + // Create pie or douhnut chart + // You can switch between pie and douhnut using the method below. + // eslint-disable-next-line no-unused-vars + var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable] + type: 'doughnut', + data: pieData, + options: pieOptions + }) + + // Sales graph chart + var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d') + // $('#revenue-chart').get(0).getContext('2d'); + + var salesGraphChartData = { + labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'], + datasets: [ + { + label: 'Digital Goods', + fill: false, + borderWidth: 2, + lineTension: 0, + spanGaps: true, + borderColor: '#efefef', + pointRadius: 3, + pointHoverRadius: 7, + pointColor: '#efefef', + pointBackgroundColor: '#efefef', + data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432] + } + ] + } + + var salesGraphChartOptions = { + maintainAspectRatio: false, + responsive: true, + legend: { + display: false + }, + scales: { + xAxes: [{ + ticks: { + fontColor: '#efefef' + }, + gridLines: { + display: false, + color: '#efefef', + drawBorder: false + } + }], + yAxes: [{ + ticks: { + stepSize: 5000, + fontColor: '#efefef' + }, + gridLines: { + display: true, + color: '#efefef', + drawBorder: false + } + }] + } + } + + // This will get the first returned node in the jQuery collection. + // eslint-disable-next-line no-unused-vars + var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable] + type: 'line', + data: salesGraphChartData, + options: salesGraphChartOptions + }) +}) diff --git a/ogcp/static/AdminLTE/dist/js/pages/dashboard2.js b/ogcp/static/AdminLTE/dist/js/pages/dashboard2.js new file mode 100644 index 0000000..100a4fb --- /dev/null +++ b/ogcp/static/AdminLTE/dist/js/pages/dashboard2.js @@ -0,0 +1,270 @@ +/* global Chart:false */ + +$(function () { + 'use strict' + + /* ChartJS + * ------- + * Here we will create a few charts using ChartJS + */ + + //----------------------- + // - MONTHLY SALES CHART - + //----------------------- + + // Get context with jQuery - using jQuery's .get() method. + var salesChartCanvas = $('#salesChart').get(0).getContext('2d') + + var salesChartData = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Digital Goods', + backgroundColor: 'rgba(60,141,188,0.9)', + borderColor: 'rgba(60,141,188,0.8)', + pointRadius: false, + pointColor: '#3b8bba', + pointStrokeColor: 'rgba(60,141,188,1)', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(60,141,188,1)', + data: [28, 48, 40, 19, 86, 27, 90] + }, + { + label: 'Electronics', + backgroundColor: 'rgba(210, 214, 222, 1)', + borderColor: 'rgba(210, 214, 222, 1)', + pointRadius: false, + pointColor: 'rgba(210, 214, 222, 1)', + pointStrokeColor: '#c1c7d1', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(220,220,220,1)', + data: [65, 59, 80, 81, 56, 55, 40] + } + ] + } + + var salesChartOptions = { + maintainAspectRatio: false, + responsive: true, + legend: { + display: false + }, + scales: { + xAxes: [{ + gridLines: { + display: false + } + }], + yAxes: [{ + gridLines: { + display: false + } + }] + } + } + + // This will get the first returned node in the jQuery collection. + // eslint-disable-next-line no-unused-vars + var salesChart = new Chart(salesChartCanvas, { + type: 'line', + data: salesChartData, + options: salesChartOptions + } + ) + + //--------------------------- + // - END MONTHLY SALES CHART - + //--------------------------- + + //------------- + // - PIE CHART - + //------------- + // Get context with jQuery - using jQuery's .get() method. + var pieChartCanvas = $('#pieChart').get(0).getContext('2d') + var pieData = { + labels: [ + 'Chrome', + 'IE', + 'FireFox', + 'Safari', + 'Opera', + 'Navigator' + ], + datasets: [ + { + data: [700, 500, 400, 600, 300, 100], + backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'] + } + ] + } + var pieOptions = { + legend: { + display: false + } + } + // Create pie or douhnut chart + // You can switch between pie and douhnut using the method below. + // eslint-disable-next-line no-unused-vars + var pieChart = new Chart(pieChartCanvas, { + type: 'doughnut', + data: pieData, + options: pieOptions + }) + + //----------------- + // - END PIE CHART - + //----------------- + + /* jVector Maps + * ------------ + * Create a world map with markers + */ + $('#world-map-markers').mapael({ + map: { + name: 'usa_states', + zoom: { + enabled: true, + maxLevel: 10 + } + } + }) + + // $('#world-map-markers').vectorMap({ + // map : 'world_en', + // normalizeFunction: 'polynomial', + // hoverOpacity : 0.7, + // hoverColor : false, + // backgroundColor : 'transparent', + // regionStyle : { + // initial : { + // fill : 'rgba(210, 214, 222, 1)', + // 'fill-opacity' : 1, + // stroke : 'none', + // 'stroke-width' : 0, + // 'stroke-opacity': 1 + // }, + // hover : { + // 'fill-opacity': 0.7, + // cursor : 'pointer' + // }, + // selected : { + // fill: 'yellow' + // }, + // selectedHover: {} + // }, + // markerStyle : { + // initial: { + // fill : '#00a65a', + // stroke: '#111' + // } + // }, + // markers : [ + // { + // latLng: [41.90, 12.45], + // name : 'Vatican City' + // }, + // { + // latLng: [43.73, 7.41], + // name : 'Monaco' + // }, + // { + // latLng: [-0.52, 166.93], + // name : 'Nauru' + // }, + // { + // latLng: [-8.51, 179.21], + // name : 'Tuvalu' + // }, + // { + // latLng: [43.93, 12.46], + // name : 'San Marino' + // }, + // { + // latLng: [47.14, 9.52], + // name : 'Liechtenstein' + // }, + // { + // latLng: [7.11, 171.06], + // name : 'Marshall Islands' + // }, + // { + // latLng: [17.3, -62.73], + // name : 'Saint Kitts and Nevis' + // }, + // { + // latLng: [3.2, 73.22], + // name : 'Maldives' + // }, + // { + // latLng: [35.88, 14.5], + // name : 'Malta' + // }, + // { + // latLng: [12.05, -61.75], + // name : 'Grenada' + // }, + // { + // latLng: [13.16, -61.23], + // name : 'Saint Vincent and the Grenadines' + // }, + // { + // latLng: [13.16, -59.55], + // name : 'Barbados' + // }, + // { + // latLng: [17.11, -61.85], + // name : 'Antigua and Barbuda' + // }, + // { + // latLng: [-4.61, 55.45], + // name : 'Seychelles' + // }, + // { + // latLng: [7.35, 134.46], + // name : 'Palau' + // }, + // { + // latLng: [42.5, 1.51], + // name : 'Andorra' + // }, + // { + // latLng: [14.01, -60.98], + // name : 'Saint Lucia' + // }, + // { + // latLng: [6.91, 158.18], + // name : 'Federated States of Micronesia' + // }, + // { + // latLng: [1.3, 103.8], + // name : 'Singapore' + // }, + // { + // latLng: [1.46, 173.03], + // name : 'Kiribati' + // }, + // { + // latLng: [-21.13, -175.2], + // name : 'Tonga' + // }, + // { + // latLng: [15.3, -61.38], + // name : 'Dominica' + // }, + // { + // latLng: [-20.2, 57.5], + // name : 'Mauritius' + // }, + // { + // latLng: [26.02, 50.55], + // name : 'Bahrain' + // }, + // { + // latLng: [0.33, 6.73], + // name : 'São Tomé and Príncipe' + // } + // ] + // }) +}) + +// lgtm [js/unused-local-variable] diff --git a/ogcp/static/AdminLTE/dist/js/pages/dashboard3.js b/ogcp/static/AdminLTE/dist/js/pages/dashboard3.js new file mode 100644 index 0000000..c4895eb --- /dev/null +++ b/ogcp/static/AdminLTE/dist/js/pages/dashboard3.js @@ -0,0 +1,147 @@ +/* global Chart:false */ + +$(function () { + 'use strict' + + var ticksStyle = { + fontColor: '#495057', + fontStyle: 'bold' + } + + var mode = 'index' + var intersect = true + + var $salesChart = $('#sales-chart') + // eslint-disable-next-line no-unused-vars + var salesChart = new Chart($salesChart, { + type: 'bar', + data: { + labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], + datasets: [ + { + backgroundColor: '#007bff', + borderColor: '#007bff', + data: [1000, 2000, 3000, 2500, 2700, 2500, 3000] + }, + { + backgroundColor: '#ced4da', + borderColor: '#ced4da', + data: [700, 1700, 2700, 2000, 1800, 1500, 2000] + } + ] + }, + options: { + maintainAspectRatio: false, + tooltips: { + mode: mode, + intersect: intersect + }, + hover: { + mode: mode, + intersect: intersect + }, + legend: { + display: false + }, + scales: { + yAxes: [{ + // display: false, + gridLines: { + display: true, + lineWidth: '4px', + color: 'rgba(0, 0, 0, .2)', + zeroLineColor: 'transparent' + }, + ticks: $.extend({ + beginAtZero: true, + + // Include a dollar sign in the ticks + callback: function (value) { + if (value >= 1000) { + value /= 1000 + value += 'k' + } + + return '$' + value + } + }, ticksStyle) + }], + xAxes: [{ + display: true, + gridLines: { + display: false + }, + ticks: ticksStyle + }] + } + } + }) + + var $visitorsChart = $('#visitors-chart') + // eslint-disable-next-line no-unused-vars + var visitorsChart = new Chart($visitorsChart, { + data: { + labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], + datasets: [{ + type: 'line', + data: [100, 120, 170, 167, 180, 177, 160], + backgroundColor: 'transparent', + borderColor: '#007bff', + pointBorderColor: '#007bff', + pointBackgroundColor: '#007bff', + fill: false + // pointHoverBackgroundColor: '#007bff', + // pointHoverBorderColor : '#007bff' + }, + { + type: 'line', + data: [60, 80, 70, 67, 80, 77, 100], + backgroundColor: 'tansparent', + borderColor: '#ced4da', + pointBorderColor: '#ced4da', + pointBackgroundColor: '#ced4da', + fill: false + // pointHoverBackgroundColor: '#ced4da', + // pointHoverBorderColor : '#ced4da' + }] + }, + options: { + maintainAspectRatio: false, + tooltips: { + mode: mode, + intersect: intersect + }, + hover: { + mode: mode, + intersect: intersect + }, + legend: { + display: false + }, + scales: { + yAxes: [{ + // display: false, + gridLines: { + display: true, + lineWidth: '4px', + color: 'rgba(0, 0, 0, .2)', + zeroLineColor: 'transparent' + }, + ticks: $.extend({ + beginAtZero: true, + suggestedMax: 200 + }, ticksStyle) + }], + xAxes: [{ + display: true, + gridLines: { + display: false + }, + ticks: ticksStyle + }] + } + } + }) +}) + +// lgtm [js/unused-local-variable] -- cgit v1.2.3-18-g5258