Intgration assets of adminator

package.json

@@ -11,11 +11,25 @@
     },
     "devDependencies": {
         "axios": "^0.17",
-        "bootstrap-sass": "^3.3.7",
         "cross-env": "^5.1",
-        "jquery": "^3.2",
         "laravel-mix": "^1.0",
+        "babel-polyfill": "^6.26.0",
+        "bootstrap": "4.0.0-beta.2",
+        "bootstrap-datepicker": "^1.7.1",
+        "chart.js": "^2.7.1",
+        "datatables": "^1.10.13",
+        "easy-pie-chart": "^2.1.7",
+        "file-loader": "^1.1.5",
+        "fullcalendar": "^3.6.2",
+        "jquery": "^3.2.1",
+        "jquery-sparkline": "^2.4.0",
+        "jvectormap": "^2.0.4",
+        "load-google-maps-api": "^1.0.0",
         "lodash": "^4.17.4",
-        "vue": "^2.5.7"
+        "masonry-layout": "^4.2.0",
+        "moment": "^2.19.1",
+        "perfect-scrollbar": "^1.1.0",
+        "popper.js": "^1.12.6",
+        "skycons": "^1.0.0"
     }
 }

public/mix-manifest.json

@@ -0,0 +1,6 @@
+{
+    "/js/app.js": "/js/app.js?id=7baf84accdd984967067",
+    "/css/app.css": "/css/app.css?id=5b9d4e7dd3e064f823ac",
+    "/js/app.js.map": "/js/app.js.map?id=40b226af22cf347b621a",
+    "/css/app.css.map": "/css/app.css.map?id=618315323a7a44763f07"
+}

resources/assets/js/app.js

@@ -1,22 +1 @@
-
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
 require('./bootstrap');
-
-window.Vue = require('vue');
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
-
-const app = new Vue({
-    el: '#app'
-});

resources/assets/js/bootstrap.js

@@ -10,7 +10,6 @@ window._ = require('lodash');
 try {
     window.$ = window.jQuery = require('jquery');
 
-    require('bootstrap-sass');
 } catch (e) {}
 
 /**
@@ -37,19 +36,19 @@ if (token) {
     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }
 
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo'
-
-// window.Pusher = require('pusher-js');
 
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: 'your-pusher-key',
-//     cluster: 'mt1',
-//     encrypted: true
-// });
+import './masonry';
+import './charts';
+import './popover';
+import './scrollbar';
+import './search';
+import './sidebar';
+import './skycons';
+import './vectorMaps';
+import './chat';
+import './datatable';
+import './datepicker';
+import './email';
+import './fullcalendar';
+import './googleMaps';
+import './utils';

resources/assets/js/charts/chartJS/index.js

@@ -0,0 +1,147 @@
+import Chart from 'chart.js';
+import { COLORS } from '../../constants/colors';
+
+export default (function () {
+  // ------------------------------------------------------
+  // @Line Charts
+  // ------------------------------------------------------
+
+  const lineChartBox = document.getElementById('line-chart');
+
+  if (lineChartBox) {
+    const lineCtx = lineChartBox.getContext('2d');
+    lineChartBox.height = 80;
+
+    new Chart(lineCtx, {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label                : 'Series A',
+          backgroundColor      : 'rgba(237, 231, 246, 0.5)',
+          borderColor          : COLORS['deep-purple-500'],
+          pointBackgroundColor : COLORS['deep-purple-700'],
+          borderWidth          : 2,
+          data                 : [60, 50, 70, 60, 50, 70, 60],
+        }, {
+          label                : 'Series B',
+          backgroundColor      : 'rgba(232, 245, 233, 0.5)',
+          borderColor          : COLORS['blue-500'],
+          pointBackgroundColor : COLORS['blue-700'],
+          borderWidth          : 2,
+          data                 : [70, 75, 85, 70, 75, 85, 70],
+        }],
+      },
+
+      options: {
+        legend: {
+          display: false,
+        },
+      },
+
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Bar Charts
+  // ------------------------------------------------------
+
+  const barChartBox = document.getElementById('bar-chart');
+
+  if (barChartBox) {
+    const barCtx = barChartBox.getContext('2d');
+
+    new Chart(barCtx, {
+      type: 'bar',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label           : 'Dataset 1',
+          backgroundColor : COLORS['deep-purple-500'],
+          borderColor     : COLORS['deep-purple-800'],
+          borderWidth     : 1,
+          data            : [10, 50, 20, 40, 60, 30, 70],
+        }, {
+          label           : 'Dataset 2',
+          backgroundColor : COLORS['light-blue-500'],
+          borderColor     : COLORS['light-blue-800'],
+          borderWidth     : 1,
+          data            : [10, 50, 20, 40, 60, 30, 70],
+        }],
+      },
+
+      options: {
+        responsive: true,
+        legend: {
+          position: 'bottom',
+        },
+      },
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Area Charts
+  // ------------------------------------------------------
+
+  const areaChartBox = document.getElementById('area-chart');
+
+  if (areaChartBox) {
+    const areaCtx = areaChartBox.getContext('2d');
+
+    new Chart(areaCtx, {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          backgroundColor : 'rgba(3, 169, 244, 0.5)',
+          borderColor     : COLORS['light-blue-800'],
+          data            : [10, 50, 20, 40, 60, 30, 70],
+          label           : 'Dataset',
+          fill            : 'start',
+        }],
+      },
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Scatter Charts
+  // ------------------------------------------------------
+
+  const scatterChartBox = document.getElementById('scatter-chart');
+
+  if (scatterChartBox) {
+    const scatterCtx = scatterChartBox.getContext('2d');
+
+    Chart.Scatter(scatterCtx, {
+      data: {
+        datasets: [{
+          label           : 'My First dataset',
+          borderColor     : COLORS['red-500'],
+          backgroundColor : COLORS['red-500'],
+          data: [
+            { x: 10, y: 20 },
+            { x: 30, y: 40 },
+            { x: 50, y: 60 },
+            { x: 70, y: 80 },
+            { x: 90, y: 100 },
+            { x: 110, y: 120 },
+            { x: 130, y: 140 },
+          ],
+        }, {
+          label           : 'My Second dataset',
+          borderColor     : COLORS['green-500'],
+          backgroundColor : COLORS['green-500'],
+          data: [
+            { x: 150, y: 160 },
+            { x: 170, y: 180 },
+            { x: 190, y: 200 },
+            { x: 210, y: 220 },
+            { x: 230, y: 240 },
+            { x: 250, y: 260 },
+            { x: 270, y: 280 },
+          ],
+        }],
+      },
+    });
+  }
+}())

resources/assets/js/charts/easyPieChart/index.js

@@ -0,0 +1,13 @@
+import * as $ from 'jquery';
+import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
+
+export default (function () {
+  if ($('.easy-pie-chart').length > 0) {
+    $('.easy-pie-chart').easyPieChart({
+      onStep(from, to, percent) {
+        this.el.children[0].innerHTML = `${Math.round(percent)} %`;
+      },
+    });
+  }
+}())
+

resources/assets/js/charts/index.js

@@ -0,0 +1,3 @@
+import './chartJS';
+import './easyPieChart';
+import './sparkline';