eliminazione file superflui, spostamento file read.php all'interno del progetto, aggiunta astrazione classe Qrcode, miglioramento download bulk, refactoring generale

Signed-off-by: giandonato.inverso@edempg.it <giandonato.inverso@studenti.unimi.it>

src/dist/css/alt/adminlte.pages.css

@@ -0,0 +1,445 @@
+/*!
+ *   AdminLTE v3.0.5
+ *     Only Pages
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+.close, .mailbox-attachment-close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: .5;
+}
+
+.close:hover, .mailbox-attachment-close:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close, button.mailbox-attachment-close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+a.close.disabled, a.disabled.mailbox-attachment-close {
+  pointer-events: none;
+}
+
+.mailbox-messages > .table {
+  margin: 0;
+}
+
+.mailbox-controls {
+  padding: 5px;
+}
+
+.mailbox-controls.with-border {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 10px;
+}
+
+.mailbox-read-info h3 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.mailbox-read-info h5 {
+  margin: 0;
+  padding: 5px 0 0;
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  padding-left: 0;
+  list-style: none;
+}
+
+.mailbox-attachments li {
+  border: 1px solid #eee;
+  float: left;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 200px;
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: bold;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background: #f8f9fa;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+}
+
+.mailbox-attachment-size > span {
+  display: inline-block;
+  padding-top: 0.75rem;
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.mailbox-attachment-icon.has-img {
+  padding: 0;
+}
+
+.mailbox-attachment-icon.has-img > img {
+  height: auto;
+  max-width: 100%;
+}
+
+.lockscreen {
+  background: #e9ecef;
+}
+
+.lockscreen .lockscreen-name {
+  font-weight: 600;
+  text-align: center;
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.lockscreen-logo a {
+  color: #495057;
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+.lockscreen-item {
+  border-radius: 4px;
+  background: #ffffff;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+.lockscreen-image {
+  border-radius: 50%;
+  background: #ffffff;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+}
+
+.lockscreen-image > img {
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+}
+
+.lockscreen-credentials {
+  margin-left: 70px;
+}
+
+.lockscreen-credentials .form-control {
+  border: 0;
+}
+
+.lockscreen-credentials .btn {
+  background-color: #ffffff;
+  border: 0;
+  padding: 0 10px;
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+}
+
+.login-logo a,
+.register-logo a {
+  color: #495057;
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background: #e9ecef;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+}
+
+@media (max-width: 576px) {
+  .login-box,
+  .register-box {
+    margin-top: .5rem;
+    width: 90%;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background: #ffffff;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+}
+
+.login-card-body .input-group .form-control,
+.register-card-body .input-group .form-control {
+  border-right: 0;
+}
+
+.login-card-body .input-group .form-control:focus,
+.register-card-body .input-group .form-control:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
+  border-color: #80bdff;
+}
+
+.login-card-body .input-group .form-control.is-valid:focus,
+.register-card-body .input-group .form-control.is-valid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
+  border-color: #28a745;
+}
+
+.login-card-body .input-group .form-control.is-invalid:focus,
+.register-card-body .input-group .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
+  border-color: #dc3545;
+}
+
+.login-card-body .input-group .input-group-text,
+.register-card-body .input-group .input-group-text {
+  background-color: transparent;
+  border-bottom-right-radius: 0.25rem;
+  border-left: 0;
+  border-top-right-radius: 0.25rem;
+  color: #777;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}
+
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page {
+    width: 100%;
+  }
+}
+
+.error-page > .headline {
+  float: left;
+  font-size: 100px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .headline {
+    float: none;
+    text-align: center;
+  }
+}
+
+.error-page > .error-content {
+  display: block;
+  margin-left: 190px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content {
+    margin-left: 0;
+  }
+}
+
+.error-page > .error-content > h3 {
+  font-size: 25px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content > h3 {
+    text-align: center;
+  }
+}
+
+.invoice {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}
+
+.profile-user-img {
+  border: 3px solid #adb5bd;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid #adb5bd;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+}
+
+.post:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.post .user-block {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.post .row {
+  width: 100%;
+}
+
+.product-image {
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+}
+
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+.product-image-thumb {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  border-radius: 0.25rem;
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 7rem;
+  padding: 0.5rem;
+}
+
+.product-image-thumb img {
+  max-width: 100%;
+  height: auto;
+  align-self: center;
+}
+
+.product-image-thumb:hover {
+  opacity: 0.5;
+}
+
+.product-share a {
+  margin-right: .5rem;
+}
+
+.projects td {
+  vertical-align: middle;
+}
+
+.projects .list-inline {
+  margin-bottom: 0;
+}
+
+.projects img.table-avatar,
+.projects .table-avatar img {
+  border-radius: 50%;
+  display: inline;
+  width: 2.5rem;
+}
+
+.projects .project-state {
+  text-align: center;
+}
+
+/*# sourceMappingURL=adminlte.pages.css.map */

src/dist/css/custom.css

@@ -0,0 +1,9 @@
+
+
+.bulk-action-wrapper {
+    padding: 10px 0;
+}
+#err-msg {
+    display: none;
+    color: red;
+}

src/dist/js/custom.js

@@ -0,0 +1,489 @@
+/**
+ * AdminLTE Demo Menu
+ * ------------------
+ */
+(function ($) {
+  'use strict'
+
+  var $sidebar   = $('.control-sidebar')
+  var $container = $('<div />', {
+    class: 'p-3 control-sidebar-content'
+  })
+
+  $sidebar.append($container)
+
+  var navbar_dark_skins = [
+    'navbar-primary',
+    'navbar-secondary',
+    'navbar-info',
+    'navbar-success',
+    'navbar-danger',
+    'navbar-indigo',
+    'navbar-purple',
+    'navbar-pink',
+    'navbar-navy',
+    'navbar-lightblue',
+    'navbar-teal',
+    'navbar-cyan',
+    'navbar-dark',
+    'navbar-gray-dark',
+    'navbar-gray',
+  ]
+
+  var navbar_light_skins = [
+    'navbar-light',
+    'navbar-warning',
+    'navbar-white',
+    'navbar-orange',
+  ]
+
+  $container.append(
+    '<h5>Customize</h5><hr class="mb-2"/>'
+  )
+
+  var $no_border_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-header').hasClass('border-bottom-0'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('border-bottom-0')
+    } else {
+      $('.main-header').removeClass('border-bottom-0')
+    }
+  })
+  var $no_border_container = $('<div />', {'class': 'mb-1'}).append($no_border_checkbox).append('<span>No Navbar border</span>')
+  $container.append($no_border_container)
+
+  var $text_sm_body_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('body').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('text-sm')
+    } else {
+      $('body').removeClass('text-sm')
+    }
+  })
+  var $text_sm_body_container = $('<div />', {'class': 'mb-1'}).append($text_sm_body_checkbox).append('<span>Body small text</span>')
+  $container.append($text_sm_body_container)
+
+  var $text_sm_header_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-header').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('text-sm')
+    } else {
+      $('.main-header').removeClass('text-sm')
+    }
+  })
+  var $text_sm_header_container = $('<div />', {'class': 'mb-1'}).append($text_sm_header_checkbox).append('<span>Navbar small text</span>')
+  $container.append($text_sm_header_container)
+
+  var $text_sm_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('text-sm')
+    } else {
+      $('.nav-sidebar').removeClass('text-sm')
+    }
+  })
+  var $text_sm_sidebar_container = $('<div />', {'class': 'mb-1'}).append($text_sm_sidebar_checkbox).append('<span>Sidebar nav small text</span>')
+  $container.append($text_sm_sidebar_container)
+
+  var $text_sm_footer_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-footer').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-footer').addClass('text-sm')
+    } else {
+      $('.main-footer').removeClass('text-sm')
+    }
+  })
+  var $text_sm_footer_container = $('<div />', {'class': 'mb-1'}).append($text_sm_footer_checkbox).append('<span>Footer small text</span>')
+  $container.append($text_sm_footer_container)
+
+  var $flat_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-flat'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-flat')
+    } else {
+      $('.nav-sidebar').removeClass('nav-flat')
+    }
+  })
+  var $flat_sidebar_container = $('<div />', {'class': 'mb-1'}).append($flat_sidebar_checkbox).append('<span>Sidebar nav flat style</span>')
+  $container.append($flat_sidebar_container)
+
+  var $legacy_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-legacy'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-legacy')
+    } else {
+      $('.nav-sidebar').removeClass('nav-legacy')
+    }
+  })
+  var $legacy_sidebar_container = $('<div />', {'class': 'mb-1'}).append($legacy_sidebar_checkbox).append('<span>Sidebar nav legacy style</span>')
+  $container.append($legacy_sidebar_container)
+
+  var $compact_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-compact'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-compact')
+    } else {
+      $('.nav-sidebar').removeClass('nav-compact')
+    }
+  })
+  var $compact_sidebar_container = $('<div />', {'class': 'mb-1'}).append($compact_sidebar_checkbox).append('<span>Sidebar nav compact</span>')
+  $container.append($compact_sidebar_container)
+
+  var $child_indent_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-child-indent'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-child-indent')
+    } else {
+      $('.nav-sidebar').removeClass('nav-child-indent')
+    }
+  })
+  var $child_indent_sidebar_container = $('<div />', {'class': 'mb-1'}).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
+  $container.append($child_indent_sidebar_container)
+
+  var $no_expand_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-sidebar').addClass('sidebar-no-expand')
+    } else {
+      $('.main-sidebar').removeClass('sidebar-no-expand')
+    }
+  })
+  var $no_expand_sidebar_container = $('<div />', {'class': 'mb-1'}).append($no_expand_sidebar_checkbox).append('<span>Main Sidebar disable hover/focus auto expand</span>')
+  $container.append($no_expand_sidebar_container)
+
+  var $text_sm_brand_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.brand-link').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.brand-link').addClass('text-sm')
+    } else {
+      $('.brand-link').removeClass('text-sm')
+    }
+  })
+  var $text_sm_brand_container = $('<div />', {'class': 'mb-4'}).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
+  $container.append($text_sm_brand_container)
+
+  $container.append('<h6>Navbar Variants</h6>')
+
+  var $navbar_variants        = $('<div />', {
+    'class': 'd-flex'
+  })
+  var navbar_all_colors       = navbar_dark_skins.concat(navbar_light_skins)
+  var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
+    var color = $(this).data('color')
+    var $main_header = $('.main-header')
+    $main_header.removeClass('navbar-dark').removeClass('navbar-light')
+    navbar_all_colors.map(function (color) {
+      $main_header.removeClass(color)
+    })
+
+    if (navbar_dark_skins.indexOf(color) > -1) {
+      $main_header.addClass('navbar-dark')
+    } else {
+      $main_header.addClass('navbar-light')
+    }
+
+    $main_header.addClass(color)
+  })
+
+  $navbar_variants.append($navbar_variants_colors)
+
+  $container.append($navbar_variants)
+
+  var sidebar_colors = [
+    'bg-primary',
+    'bg-warning',
+    'bg-info',
+    'bg-danger',
+    'bg-success',
+    'bg-indigo',
+    'bg-lightblue',
+    'bg-navy',
+    'bg-purple',
+    'bg-fuchsia',
+    'bg-pink',
+    'bg-maroon',
+    'bg-orange',
+    'bg-lime',
+    'bg-teal',
+    'bg-olive'
+  ]
+
+  var accent_colors = [
+    'accent-primary',
+    'accent-warning',
+    'accent-info',
+    'accent-danger',
+    'accent-success',
+    'accent-indigo',
+    'accent-lightblue',
+    'accent-navy',
+    'accent-purple',
+    'accent-fuchsia',
+    'accent-pink',
+    'accent-maroon',
+    'accent-orange',
+    'accent-lime',
+    'accent-teal',
+    'accent-olive'
+  ]
+
+  var sidebar_skins = [
+    'sidebar-dark-primary',
+    'sidebar-dark-warning',
+    'sidebar-dark-info',
+    'sidebar-dark-danger',
+    'sidebar-dark-success',
+    'sidebar-dark-indigo',
+    'sidebar-dark-lightblue',
+    'sidebar-dark-navy',
+    'sidebar-dark-purple',
+    'sidebar-dark-fuchsia',
+    'sidebar-dark-pink',
+    'sidebar-dark-maroon',
+    'sidebar-dark-orange',
+    'sidebar-dark-lime',
+    'sidebar-dark-teal',
+    'sidebar-dark-olive',
+    'sidebar-light-primary',
+    'sidebar-light-warning',
+    'sidebar-light-info',
+    'sidebar-light-danger',
+    'sidebar-light-success',
+    'sidebar-light-indigo',
+    'sidebar-light-lightblue',
+    'sidebar-light-navy',
+    'sidebar-light-purple',
+    'sidebar-light-fuchsia',
+    'sidebar-light-pink',
+    'sidebar-light-maroon',
+    'sidebar-light-orange',
+    'sidebar-light-lime',
+    'sidebar-light-teal',
+    'sidebar-light-olive'
+  ]
+
+  $container.append('<h6>Accent Color Variants</h6>')
+  var $accent_variants = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($accent_variants)
+  $container.append(createSkinBlock(accent_colors, function () {
+    var color         = $(this).data('color')
+    var accent_class = color
+    var $body      = $('body')
+    accent_colors.map(function (skin) {
+      $body.removeClass(skin)
+    })
+
+    $body.addClass(accent_class)
+  }))
+
+  $container.append('<h6>Dark Sidebar Variants</h6>')
+  var $sidebar_variants_dark = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($sidebar_variants_dark)
+  $container.append(createSkinBlock(sidebar_colors, function () {
+    var color         = $(this).data('color')
+    var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
+    var $sidebar      = $('.main-sidebar')
+    sidebar_skins.map(function (skin) {
+      $sidebar.removeClass(skin)
+    })
+
+    $sidebar.addClass(sidebar_class)
+  }))
+
+  $container.append('<h6>Light Sidebar Variants</h6>')
+  var $sidebar_variants_light = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($sidebar_variants_light)
+  $container.append(createSkinBlock(sidebar_colors, function () {
+    var color         = $(this).data('color')
+    var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
+    var $sidebar      = $('.main-sidebar')
+    sidebar_skins.map(function (skin) {
+      $sidebar.removeClass(skin)
+    })
+
+    $sidebar.addClass(sidebar_class)
+  }))
+
+  var logo_skins = navbar_all_colors
+  $container.append('<h6>Brand Logo Variants</h6>')
+  var $logo_variants = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($logo_variants)
+  var $clear_btn = $('<a />', {
+    href: 'javascript:void(0)'
+  }).text('clear').on('click', function () {
+    var $logo = $('.brand-link')
+    logo_skins.map(function (skin) {
+      $logo.removeClass(skin)
+    })
+  })
+  $container.append(createSkinBlock(logo_skins, function () {
+    var color = $(this).data('color')
+    var $logo = $('.brand-link')
+    logo_skins.map(function (skin) {
+      $logo.removeClass(skin)
+    })
+    $logo.addClass(color)
+  }).append($clear_btn))
+
+  function createSkinBlock(colors, callback) {
+    var $block = $('<div />', {
+      'class': 'd-flex flex-wrap mb-3'
+    })
+
+    colors.map(function (color) {
+      var $color = $('<div />', {
+        'class': (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2'
+      })
+
+      $block.append($color)
+
+      $color.data('color', color)
+
+      $color.css({
+        width       : '40px',
+        height      : '20px',
+        borderRadius: '25px',
+        marginRight : 10,
+        marginBottom: 10,
+        opacity     : 0.8,
+        cursor      : 'pointer'
+      })
+
+      $color.hover(function () {
+        $(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4')
+      }, function () {
+        $(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2')
+      })
+
+      if (callback) {
+        $color.on('click', callback)
+      }
+    })
+
+    return $block
+  }
+
+  $('.product-image-thumb').on('click', function() {
+    const image_element = $(this).find('img');
+    $('.product-image').prop('src', $(image_element).attr('src'))
+    $('.product-image-thumb.active').removeClass('active');
+    $(this).addClass('active');
+  });
+
+  const bulk_action = $('input[name=bulk-select]');
+
+  if (bulk_action) {
+    bulk_action.on('change', function() {
+      if ($(this).prop('checked')) {
+        $('input[name^=action]').each(function() {
+          $(this).prop('checked', true);
+        });
+      } else {
+        $('input[name^=action]').each(function() {
+          $(this).prop('checked', false);
+        });
+      }
+    });
+  }
+
+  const bulk_form = $('form#bulk-action');
+
+  bulk_form.on('submit', function(e) {
+    e.preventDefault();
+    const paramsElements = document.querySelectorAll('input[name^=action]');
+    console.log(paramsElements);
+    let params = [];
+
+    paramsElements.forEach((val) => {
+      if (val.checked) {
+        params.push(val.value);
+      }
+    });
+
+    const data = {
+      action: $('select[name=bulk-action]').val(),
+      params: params,
+      type: $('input[name=type]').val()
+    }
+
+    $.ajax({
+      url: window.location.origin + '/bulk_action.php',
+      method: "POST",
+      data: JSON.stringify(data),
+      dataType: "json",
+      contentType: 'application/json',
+      success: (res) => {
+        if (res.status == 200) {
+          window.location.href = res.data;
+          $('#err-msg').css('display', 'none');
+        }
+
+        if (res.status == 400) {
+          $('#err-msg').empty();
+          $('#err-msg').append('<i class="fas fa-exclamation-circle"></i> ' + res.data);
+          $('#err-msg').css('display', 'block');
+        }
+      },
+      error: (err) => {
+        $('#err-msg').empty();
+        $('#err-msg').append('<i class="fas fa-exclamation-circle"></i> ' + res.data);
+        $('#err-msg').css('display', 'block');
+        console.log(err);
+      }
+    });
+
+    return false;
+  });
+})(jQuery)