upgrade version

Gemfile

@@ -32,8 +32,9 @@ gem 'coffee-rails', '~> 4.2'
 # gem 'therubyracer', platforms: :ruby
 gem 'simple_form'
 gem 'nested_form'
-gem 'bootstrap', '~> 4.0.0.alpha3'
+# gem 'bootstrap', '~> 4.0.0.alpha3'
 gem 'tether-rails'
+gem 'material_icons'
 gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
 gem 'rack-cors'
 
@@ -54,15 +55,16 @@ gem 'to_xls-rails'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
+gem 'turbolinks'
+gem 'jquery-turbolinks', '~> 2.1'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.5'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 3.0'
 # Use ActiveModel has_secure_password
-gem 'bcrypt', '~> 3.1.7'
 
 # Crypto
+gem 'bcrypt', '~> 3.1.7'
 gem 'aescrypt'
 
 gem 'sidekiq'
@@ -115,7 +117,7 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem 'httparty', '~> 0.15.5'
 
 gem 'momentjs-rails' # for date-range selector
-gem 'bootstrap-daterangepicker-rails' # date-range picker
-gem 'bootstrap-datepicker-rails' # date picker
-gem 'jquery-datetimepicker-rails'
-gem 'select2-rails' # for multi-select and auto-complete select box
+# gem 'bootstrap-daterangepicker-rails' # date-range picker
+# gem 'bootstrap-datepicker-rails' # date picker
+# gem 'jquery-datetimepicker-rails'
+# gem 'select2-rails' # for multi-select and auto-complete select box

Gemfile.lock

@@ -40,17 +40,8 @@ GEM
       tzinfo (~> 1.1)
     aescrypt (1.0.0)
     arel (8.0.0)
-    autoprefixer-rails (7.1.1.2)
-      execjs
     bcrypt (3.1.11)
     bindex (0.5.0)
-    bootstrap (4.0.0.alpha6)
-      autoprefixer-rails (>= 6.0.3)
-      sass (>= 3.4.19)
-    bootstrap-datepicker-rails (1.6.4.1)
-      railties (>= 3.0)
-    bootstrap-daterangepicker-rails (0.0.8)
-      railties (>= 3.1)
     builder (3.2.3)
     byebug (9.0.6)
     cancancan (1.17.0)
@@ -92,11 +83,13 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
-    jquery-datetimepicker-rails (2.4.1.0)
     jquery-rails (4.3.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-turbolinks (2.1.0)
+      railties (>= 3.1.0)
+      turbolinks
     jquery-ui-rails (6.0.1)
       railties (>= 3.2.16)
     kaminari (1.0.1)
@@ -118,6 +111,8 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.6.6)
       mime-types (>= 1.16, < 4)
+    material_icons (2.2.1)
+      railties (>= 3.2)
     method_source (0.8.2)
     mime-types (3.1)
       mime-types-data (~> 3.2015)
@@ -202,8 +197,6 @@ GEM
       tilt (>= 1.1, < 3)
     schema_to_scaffold (0.8.0)
       activesupport (>= 3.2.1)
-    select2-rails (4.0.3)
-      thor (~> 0.14)
     shoulda-matchers (3.1.1)
       activesupport (>= 4.0.0)
     sidekiq (5.0.3)
@@ -260,9 +253,6 @@ PLATFORMS
 DEPENDENCIES
   aescrypt
   bcrypt (~> 3.1.7)
-  bootstrap (~> 4.0.0.alpha3)
-  bootstrap-datepicker-rails
-  bootstrap-daterangepicker-rails
   byebug
   cancancan (~> 1.10)
   carrierwave (~> 1.0)
@@ -275,11 +265,12 @@ DEPENDENCIES
   font-awesome-rails (~> 4.7, >= 4.7.0.2)
   httparty (~> 0.15.5)
   jbuilder (~> 2.5)
-  jquery-datetimepicker-rails
   jquery-rails
+  jquery-turbolinks (~> 2.1)
   jquery-ui-rails
   kaminari (~> 1.0.1)
   listen (~> 3.0.5)
+  material_icons
   momentjs-rails
   mysql2 (>= 0.3.18, < 0.5)
   nested_form
@@ -292,7 +283,6 @@ DEPENDENCIES
   rspec-rails (~> 3.5)
   sass-rails (~> 5.0)
   schema_to_scaffold
-  select2-rails
   shoulda-matchers (~> 3.1)
   sidekiq
   simple_form
@@ -301,7 +291,7 @@ DEPENDENCIES
   spring-watcher-listen (~> 2.0.0)
   tether-rails
   to_xls-rails
-  turbolinks (~> 5)
+  turbolinks
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)

README.md

@@ -80,3 +80,27 @@ ruby 2.4.1p111
 
 
 6. Report
+
+
+* UI Standard
+
+1. Layout
+
+	1. 2-Column => Main Content - col-9, Infomation - col-3
+	2. 3-Column => Sub Lint - col-2, Main Content - col-7, Infomation - col-3
+
+	> Pixel 
+
+	Main Header Bar - height 	=> 50 px
+	Side Navigation - Weight	=> 230 px
+	Main Content Padding		=> 15 px
+
+2. Color
+	
+	> BUTTON
+
+	1. Submit/Add/Edit/Confirm buttons 	=> btn-primary (theme color)
+	2. Show/Detail Buttons     			=> btn-info
+	3. Delete							=> btn-delete
+	4. Cancel/Back						=> btn-default
+

app/assets/javascripts/BSBMaterial/admin.js

@@ -0,0 +1,458 @@
+if (typeof jQuery === "undefined") {
+    throw new Error("jQuery plugins need to be before this file");
+}
+
+$.AdminBSB = {};
+$.AdminBSB.options = {
+    colors: {
+        red: '#F44336',
+        pink: '#E91E63',
+        purple: '#9C27B0',
+        deepPurple: '#673AB7',
+        indigo: '#3F51B5',
+        blue: '#2196F3',
+        lightBlue: '#03A9F4',
+        cyan: '#00BCD4',
+        teal: '#009688',
+        green: '#4CAF50',
+        lightGreen: '#8BC34A',
+        lime: '#CDDC39',
+        yellow: '#ffe821',
+        amber: '#FFC107',
+        orange: '#FF9800',
+        deepOrange: '#FF5722',
+        brown: '#795548',
+        grey: '#9E9E9E',
+        blueGrey: '#607D8B',
+        black: '#000000',
+        white: '#ffffff'
+    },
+    leftSideBar: {
+        scrollColor: 'rgba(0,0,0,0.5)',
+        scrollWidth: '4px',
+        scrollAlwaysVisible: false,
+        scrollBorderRadius: '0',
+        scrollRailBorderRadius: '0',
+        scrollActiveItemWhenPageLoad: true,
+        breakpointWidth: 2230 //1170
+    },
+    dropdownMenu: {
+        effectIn: 'fadeIn',
+        effectOut: 'fadeOut'
+    }
+}
+
+/* Left Sidebar - Function =================================================================================================
+*  You can manage the left sidebar menu options
+*  
+*/
+$.AdminBSB.leftSideBar = {
+    activate: function () {
+        var _this = this;
+        var $body = $('body');
+        var $overlay = $('.overlay');
+
+        //Close sidebar
+        $(window).click(function (e) {
+            var $target = $(e.target);
+            if (e.target.nodeName.toLowerCase() === 'i') { $target = $(e.target).parent(); }
+
+            if (!$target.hasClass('bars') && _this.isOpen() && $target.parents('#leftsidebar').length === 0) {
+                if (!$target.hasClass('js-right-sidebar')) $overlay.fadeOut();
+                $body.removeClass('overlay-open');
+            }
+        });
+
+        $.each($('.menu-toggle.toggled'), function (i, val) {
+            $(val).next().slideToggle(0);
+        });
+
+        //When page load
+        $.each($('.menu .list li.active'), function (i, val) {
+            var $activeAnchors = $(val).find('a:eq(0)');
+
+            $activeAnchors.addClass('toggled');
+            $activeAnchors.next().show();
+        });
+
+        //Collapse or Expand Menu
+        $('.menu-toggle').on('click', function (e) {
+            var $this = $(this);
+            var $content = $this.next();
+
+            if ($($this.parents('ul')[0]).hasClass('list')) {
+                var $not = $(e.target).hasClass('menu-toggle') ? e.target : $(e.target).parents('.menu-toggle');
+
+                $.each($('.menu-toggle.toggled').not($not).next(), function (i, val) {
+                    if ($(val).is(':visible')) {
+                        $(val).prev().toggleClass('toggled');
+                        $(val).slideUp();
+                    }
+                });
+            }
+
+            $this.toggleClass('toggled');
+            $content.slideToggle(320);
+        });
+
+        //Set menu height
+        _this.setMenuHeight();
+        _this.checkStatuForResize(true);
+        $(window).resize(function () {
+            _this.setMenuHeight();
+            _this.checkStatuForResize(false);
+        });
+
+        //Set Waves
+        Waves.attach('.menu .list a', ['waves-block']);
+        Waves.init();
+    },
+    setMenuHeight: function (isFirstTime) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+            var configs = $.AdminBSB.options.leftSideBar;
+            var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
+            var $el = $('.list');
+
+            $el.slimscroll({
+                height: height + "px",
+                color: configs.scrollColor,
+                size: configs.scrollWidth,
+                alwaysVisible: configs.scrollAlwaysVisible,
+                borderRadius: configs.scrollBorderRadius,
+                railBorderRadius: configs.scrollRailBorderRadius
+            });
+
+            //Scroll active menu item when page load, if option set = true
+            if ($.AdminBSB.options.leftSideBar.scrollActiveItemWhenPageLoad) {
+                var activeItemOffsetTop = $('.menu .list li.active')[0].offsetTop
+                if (activeItemOffsetTop > 150) $el.slimscroll({ scrollTo: activeItemOffsetTop + 'px' });
+            }
+        }
+    },
+    checkStatuForResize: function (firstTime) {
+        var $body = $('body');
+        var $openCloseBar = $('.navbar .navbar-header .bars');
+        var width = $body.width();
+
+        if (firstTime) {
+            $body.find('.content, .sidebar').addClass('no-animate').delay(1000).queue(function () {
+                $(this).removeClass('no-animate').dequeue();
+            });
+        }
+
+        if (width < $.AdminBSB.options.leftSideBar.breakpointWidth) {
+            $body.addClass('ls-closed');
+            $openCloseBar.fadeIn();
+        }
+        else {
+            $body.removeClass('ls-closed');
+            $openCloseBar.fadeOut();
+        }
+    },
+    isOpen: function () {
+        return $('body').hasClass('overlay-open');
+    }
+};
+//==========================================================================================================================
+
+/* Right Sidebar - Function ================================================================================================
+*  You can manage the right sidebar menu options
+*  
+*/
+$.AdminBSB.rightSideBar = {
+    activate: function () {
+        var _this = this;
+        var $sidebar = $('#rightsidebar');
+        var $overlay = $('.overlay');
+
+        //Close sidebar
+        $(window).click(function (e) {
+            var $target = $(e.target);
+            if (e.target.nodeName.toLowerCase() === 'i') { $target = $(e.target).parent(); }
+
+            if (!$target.hasClass('js-right-sidebar') && _this.isOpen() && $target.parents('#rightsidebar').length === 0) {
+                if (!$target.hasClass('bars')) $overlay.fadeOut();
+                $sidebar.removeClass('open');
+            }
+        });
+
+        $('.js-right-sidebar').on('click', function () {
+            $sidebar.toggleClass('open');
+            if (_this.isOpen()) { $overlay.fadeIn(); } else { $overlay.fadeOut(); }
+        });
+    },
+    isOpen: function () {
+        return $('.right-sidebar').hasClass('open');
+    }
+}
+//==========================================================================================================================
+
+/* Searchbar - Function ================================================================================================
+*  You can manage the search bar
+*  
+*/
+var $searchBar = $('.search-bar');
+$.AdminBSB.search = {
+    activate: function () {
+        var _this = this;
+
+        //Search button click event
+        $('.js-search').on('click', function () {
+            _this.showSearchBar();
+        });
+
+        //Close search click event
+        $searchBar.find('.close-search').on('click', function () {
+            _this.hideSearchBar();
+        });
+
+        //ESC key on pressed
+        $searchBar.find('input[type="text"]').on('keyup', function (e) {
+            if (e.keyCode == 27) {
+                _this.hideSearchBar();
+            }
+        });
+    },
+    showSearchBar: function () {
+        $searchBar.addClass('open');
+        $searchBar.find('input[type="text"]').focus();
+    },
+    hideSearchBar: function () {
+        $searchBar.removeClass('open');
+        $searchBar.find('input[type="text"]').val('');
+    }
+}
+//==========================================================================================================================
+
+/* Navbar - Function =======================================================================================================
+*  You can manage the navbar
+*  
+*/
+$.AdminBSB.navbar = {
+    activate: function () {
+        var $body = $('body');
+        var $overlay = $('.overlay');
+
+        //Open left sidebar panel
+        $('.bars').on('click', function () {
+            $body.toggleClass('overlay-open');
+            if ($body.hasClass('overlay-open')) { $overlay.fadeIn(); } else { $overlay.fadeOut(); }
+        });
+
+        //Close collapse bar on click event
+        $('.nav [data-close="true"]').on('click', function () {
+            var isVisible = $('.navbar-toggle').is(':visible');
+            var $navbarCollapse = $('.navbar-collapse');
+
+            if (isVisible) {
+                $navbarCollapse.slideUp(function () {
+                    $navbarCollapse.removeClass('in').removeAttr('style');
+                });
+            }
+        });
+    }
+}
+//==========================================================================================================================
+
+/* Input - Function ========================================================================================================
+*  You can manage the inputs(also textareas) with name of class 'form-control'
+*  
+*/
+$.AdminBSB.input = {
+    activate: function () {
+        //On focus event
+        $('.form-control').focus(function () {
+            $(this).parent().addClass('focused');
+        });
+
+        //On focusout event
+        $('.form-control').focusout(function () {
+            var $this = $(this);
+            if ($this.parents('.form-group').hasClass('form-float')) {
+                if ($this.val() == '') { $this.parents('.form-line').removeClass('focused'); }
+            }
+            else {
+                $this.parents('.form-line').removeClass('focused');
+            }
+        });
+
+        //On label click
+        $('body').on('click', '.form-float .form-line .form-label', function () {
+            $(this).parent().find('input').focus();
+        });
+
+        //Not blank form
+        $('.form-control').each(function () {
+            if ($(this).val() !== '') {
+                $(this).parents('.form-line').addClass('focused');
+            }
+        });
+    }
+}
+//==========================================================================================================================
+
+/* Form - Select - Function ================================================================================================
+*  You can manage the 'select' of form elements
+*  
+*/
+$.AdminBSB.select = {
+    activate: function () {
+        if ($.fn.selectpicker) { $('select:not(.ms)').selectpicker(); }
+    }
+}
+//==========================================================================================================================
+
+/* DropdownMenu - Function =================================================================================================
+*  You can manage the dropdown menu
+*  
+*/
+
+$.AdminBSB.dropdownMenu = {
+    activate: function () {
+        var _this = this;
+
+        $('.dropdown, .dropup, .btn-group').on({
+            "show.bs.dropdown": function () {
+                var dropdown = _this.dropdownEffect(this);
+                _this.dropdownEffectStart(dropdown, dropdown.effectIn);
+            },
+            "shown.bs.dropdown": function () {
+                var dropdown = _this.dropdownEffect(this);
+                if (dropdown.effectIn && dropdown.effectOut) {
+                    _this.dropdownEffectEnd(dropdown, function () { });
+                }
+            },
+            "hide.bs.dropdown": function (e) {
+                var dropdown = _this.dropdownEffect(this);
+                if (dropdown.effectOut) {
+                    e.preventDefault();
+                    _this.dropdownEffectStart(dropdown, dropdown.effectOut);
+                    _this.dropdownEffectEnd(dropdown, function () {
+                        dropdown.dropdown.removeClass('open');
+                    });
+                }
+            }
+        });
+
+        //Set Waves
+        Waves.attach('.dropdown-menu li a', ['waves-block']);
+        Waves.init();
+    },
+    dropdownEffect: function (target) {
+        var effectIn = $.AdminBSB.options.dropdownMenu.effectIn, effectOut = $.AdminBSB.options.dropdownMenu.effectOut;
+        var dropdown = $(target), dropdownMenu = $('.dropdown-menu', target);
+
+        if (dropdown.length > 0) {
+            var udEffectIn = dropdown.data('effect-in');
+            var udEffectOut = dropdown.data('effect-out');
+            if (udEffectIn !== undefined) { effectIn = udEffectIn; }
+            if (udEffectOut !== undefined) { effectOut = udEffectOut; }
+        }
+
+        return {
+            target: target,
+            dropdown: dropdown,
+            dropdownMenu: dropdownMenu,
+            effectIn: effectIn,
+            effectOut: effectOut
+        };
+    },
+    dropdownEffectStart: function (data, effectToStart) {
+        if (effectToStart) {
+            data.dropdown.addClass('dropdown-animating');
+            data.dropdownMenu.addClass('animated dropdown-animated');
+            data.dropdownMenu.addClass(effectToStart);
+        }
+    },
+    dropdownEffectEnd: function (data, callback) {
+        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+        data.dropdown.one(animationEnd, function () {
+            data.dropdown.removeClass('dropdown-animating');
+            data.dropdownMenu.removeClass('animated dropdown-animated');
+            data.dropdownMenu.removeClass(data.effectIn);
+            data.dropdownMenu.removeClass(data.effectOut);
+
+            if (typeof callback == 'function') {
+                callback();
+            }
+        });
+    }
+}
+//==========================================================================================================================
+
+/* Browser - Function ======================================================================================================
+*  You can manage browser
+*  
+*/
+var edge = 'Microsoft Edge';
+var ie10 = 'Internet Explorer 10';
+var ie11 = 'Internet Explorer 11';
+var opera = 'Opera';
+var firefox = 'Mozilla Firefox';
+var chrome = 'Google Chrome';
+var safari = 'Safari';
+
+$.AdminBSB.browser = {
+    activate: function () {
+        var _this = this;
+        var className = _this.getClassName();
+
+        if (className !== '') $('html').addClass(_this.getClassName());
+    },
+    getBrowser: function () {
+        var userAgent = navigator.userAgent.toLowerCase();
+
+        if (/edge/i.test(userAgent)) {
+            return edge;
+        } else if (/rv:11/i.test(userAgent)) {
+            return ie11;
+        } else if (/msie 10/i.test(userAgent)) {
+            return ie10;
+        } else if (/opr/i.test(userAgent)) {
+            return opera;
+        } else if (/chrome/i.test(userAgent)) {
+            return chrome;
+        } else if (/firefox/i.test(userAgent)) {
+            return firefox;
+        } else if (!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
+            return safari;
+        }
+
+        return undefined;
+    },
+    getClassName: function () {
+        var browser = this.getBrowser();
+
+        if (browser === edge) {
+            return 'edge';
+        } else if (browser === ie11) {
+            return 'ie11';
+        } else if (browser === ie10) {
+            return 'ie10';
+        } else if (browser === opera) {
+            return 'opera';
+        } else if (browser === chrome) {
+            return 'chrome';
+        } else if (browser === firefox) {
+            return 'firefox';
+        } else if (browser === safari) {
+            return 'safari';
+        } else {
+            return '';
+        }
+    }
+}
+//==========================================================================================================================
+
+$(document).ready(function() {
+    $.AdminBSB.browser.activate();
+    $.AdminBSB.leftSideBar.activate();
+    $.AdminBSB.rightSideBar.activate();
+    $.AdminBSB.navbar.activate();
+    $.AdminBSB.dropdownMenu.activate();
+    $.AdminBSB.input.activate();
+    $.AdminBSB.select.activate();
+    $.AdminBSB.search.activate();
+
+    setTimeout(function () { $('.page-loader-wrapper').fadeOut(); }, 50);
+});

app/assets/javascripts/BSBMaterial/demo.js

@@ -0,0 +1,107 @@
+$(document).ready(function() {
+    skinChanger();
+    activateNotificationAndTasksScroll();
+
+    setSkinListHeightAndScroll(true);
+    setSettingListHeightAndScroll(true);
+    $(window).resize(function () {
+        setSkinListHeightAndScroll(false);
+        setSettingListHeightAndScroll(false);
+    });
+});
+
+//Skin changer
+function skinChanger() {
+    $('.right-sidebar .demo-choose-skin li').on('click', function () {
+        var $body = $('body');
+        var $this = $(this);
+
+        var existTheme = $('.right-sidebar .demo-choose-skin li.active').data('theme');
+        $('.right-sidebar .demo-choose-skin li').removeClass('active');
+        $body.removeClass('theme-' + existTheme);
+        $this.addClass('active');
+
+        $body.addClass('theme-' + $this.data('theme'));
+    });
+}
+
+//Skin tab content set height and show scroll
+function setSkinListHeightAndScroll(isFirstTime) {
+    var height = $(window).height() - ($('.navbar').innerHeight() + $('.right-sidebar .nav-tabs').outerHeight());
+    var $el = $('.demo-choose-skin');
+
+    if (!isFirstTime){
+      $el.slimScroll({ destroy: true }).height('auto');
+      $el.parent().find('.slimScrollBar, .slimScrollRail').remove();
+    }
+
+    $el.slimscroll({
+        height: height + 'px',
+        color: 'rgba(0,0,0,0.5)',
+        size: '6px',
+        alwaysVisible: false,
+        borderRadius: '0',
+        railBorderRadius: '0'
+    });
+}
+
+//Setting tab content set height and show scroll
+function setSettingListHeightAndScroll(isFirstTime) {
+    var height = $(window).height() - ($('.navbar').innerHeight() + $('.right-sidebar .nav-tabs').outerHeight());
+    var $el = $('.right-sidebar .demo-settings');
+
+    if (!isFirstTime){
+      $el.slimScroll({ destroy: true }).height('auto');
+      $el.parent().find('.slimScrollBar, .slimScrollRail').remove();
+    }
+
+    $el.slimscroll({
+        height: height + 'px',
+        color: 'rgba(0,0,0,0.5)',
+        size: '6px',
+        alwaysVisible: false,
+        borderRadius: '0',
+        railBorderRadius: '0'
+    });
+}
+
+//Activate notification and task dropdown on top right menu
+function activateNotificationAndTasksScroll() {
+    $('.navbar-right .dropdown-menu .body .menu').slimscroll({
+        height: '254px',
+        color: 'rgba(0,0,0,0.5)',
+        size: '4px',
+        alwaysVisible: false,
+        borderRadius: '0',
+        railBorderRadius: '0'
+    });
+}
+
+//Google Analiytics ======================================================================================
+// addLoadEvent(loadTracking);
+var trackingId = 'UA-30038099-6';
+
+function addLoadEvent(func) {
+    var oldonload = window.onload;
+    if (typeof window.onload != 'function') {
+        window.onload = func;
+    } else {
+        window.onload = function () {
+            oldonload();
+            func();
+        }
+    }
+}
+
+function loadTracking() {
+    (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+            (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
+        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+    ga('create', trackingId, 'auto');
+    ga('send', 'pageview');
+}
+//========================================================================================================

app/assets/javascripts/BSBMaterial/helpers.js

@@ -0,0 +1,13 @@
+function hexToRgb(hexCode) {
+    var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
+    var matches = patt.exec(hexCode);
+    var rgb = "rgb(" + parseInt(matches[1], 16) + "," + parseInt(matches[2], 16) + "," + parseInt(matches[3], 16) + ")";
+    return rgb;
+}
+
+function hexToRgba(hexCode, opacity) {
+    var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
+    var matches = patt.exec(hexCode);
+    var rgb = "rgba(" + parseInt(matches[1], 16) + "," + parseInt(matches[2], 16) + "," + parseInt(matches[3], 16) + "," + opacity + ")";
+    return rgb;
+}

app/assets/javascripts/BSBMaterial/pages/cards/basic.js

@@ -0,0 +1,21 @@
+$(function () {
+    initLoading();
+});
+
+//Init Loading
+function initLoading() {
+    $('[data-toggle="cardloading"]').on('click', function () {
+        var effect = $(this).data('loadingEffect');
+        var $loading = $(this).parents('.card').waitMe({
+            effect: effect,
+            text: 'Loading...',
+            bg: 'rgba(255,255,255,0.90)',
+            color: '#555'
+        });
+
+        setTimeout(function () {
+            //Loading hide
+            $loading.waitMe('hide');
+        }, 3200);
+    });
+}

app/assets/javascripts/BSBMaterial/pages/cards/colored.js

@@ -0,0 +1,23 @@
+$(function () {
+    initLoading();
+});
+
+//Init Loading
+function initLoading() {
+    $('[data-toggle="cardloading"]').on('click', function () {
+        var effect = $(this).data('loadingEffect');
+        var color = $.AdminBSB.options.colors[$(this).data('loadingColor')];
+
+        var $loading = $(this).parents('.card').waitMe({
+            effect: effect,
+            text: 'Loading...',
+            bg: 'rgba(255,255,255,0.90)',
+            color: color
+        });
+
+        setTimeout(function () {
+            //Loading hide
+            $loading.waitMe('hide');
+        }, 3200);
+    });
+}

app/assets/javascripts/BSBMaterial/pages/charts/chartjs.js

@@ -0,0 +1,117 @@
+$(function () {
+    new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
+    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
+    new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
+    new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
+});
+
+function getChartJs(type) {
+    var config = null;
+
+    if (type === 'line') {
+        config = {
+            type: 'line',
+            data: {
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    label: "My First dataset",
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    borderColor: 'rgba(0, 188, 212, 0.75)',
+                    backgroundColor: 'rgba(0, 188, 212, 0.3)',
+                    pointBorderColor: 'rgba(0, 188, 212, 0)',
+                    pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
+                    pointBorderWidth: 1
+                }, {
+                        label: "My Second dataset",
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        borderColor: 'rgba(233, 30, 99, 0.75)',
+                        backgroundColor: 'rgba(233, 30, 99, 0.3)',
+                        pointBorderColor: 'rgba(233, 30, 99, 0)',
+                        pointBackgroundColor: 'rgba(233, 30, 99, 0.9)',
+                        pointBorderWidth: 1
+                    }]
+            },
+            options: {
+                responsive: true,
+                legend: false
+            }
+        }
+    }
+    else if (type === 'bar') {
+        config = {
+            type: 'bar',
+            data: {
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    label: "My First dataset",
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    backgroundColor: 'rgba(0, 188, 212, 0.8)'
+                }, {
+                        label: "My Second dataset",
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        backgroundColor: 'rgba(233, 30, 99, 0.8)'
+                    }]
+            },
+            options: {
+                responsive: true,
+                legend: false
+            }
+        }
+    }
+    else if (type === 'radar') {
+        config = {
+            type: 'radar',
+            data: {
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    label: "My First dataset",
+                    data: [65, 25, 90, 81, 56, 55, 40],
+                    borderColor: 'rgba(0, 188, 212, 0.8)',
+                    backgroundColor: 'rgba(0, 188, 212, 0.5)',
+                    pointBorderColor: 'rgba(0, 188, 212, 0)',
+                    pointBackgroundColor: 'rgba(0, 188, 212, 0.8)',
+                    pointBorderWidth: 1
+                }, {
+                        label: "My Second dataset",
+                        data: [72, 48, 40, 19, 96, 27, 100],
+                        borderColor: 'rgba(233, 30, 99, 0.8)',
+                        backgroundColor: 'rgba(233, 30, 99, 0.5)',
+                        pointBorderColor: 'rgba(233, 30, 99, 0)',
+                        pointBackgroundColor: 'rgba(233, 30, 99, 0.8)',
+                        pointBorderWidth: 1
+                    }]
+            },
+            options: {
+                responsive: true,
+                legend: false
+            }
+        }
+    }
+    else if (type === 'pie') {
+        config = {
+            type: 'pie',
+            data: {
+                datasets: [{
+                    data: [225, 50, 100, 40],
+                    backgroundColor: [
+                        "rgb(233, 30, 99)",
+                        "rgb(255, 193, 7)",
+                        "rgb(0, 188, 212)",
+                        "rgb(139, 195, 74)"
+                    ],
+                }],
+                labels: [
+                    "Pink",
+                    "Amber",
+                    "Cyan",
+                    "Light Green"
+                ]
+            },
+            options: {
+                responsive: true,
+                legend: false
+            }
+        }
+    }
+    return config;
+}

app/assets/javascripts/BSBMaterial/pages/charts/jquery-knob.js

@@ -0,0 +1,46 @@
+$(function () {
+    $('.knob').knob({
+        draw: function () {
+            // "tron" case
+            if (this.$.data('skin') == 'tron') {
+
+                var a = this.angle(this.cv)  // Angle
+                    , sa = this.startAngle          // Previous start angle
+                    , sat = this.startAngle         // Start angle
+                    , ea                            // Previous end angle
+                    , eat = sat + a                 // End angle
+                    , r = true;
+
+                this.g.lineWidth = this.lineWidth;
+
+                this.o.cursor
+                    && (sat = eat - 0.3)
+                    && (eat = eat + 0.3);
+
+                if (this.o.displayPrevious) {
+                    ea = this.startAngle + this.angle(this.value);
+                    this.o.cursor
+                        && (sa = ea - 0.3)
+                        && (ea = ea + 0.3);
+                    this.g.beginPath();
+                    this.g.strokeStyle = this.previousColor;
+                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
+                    this.g.stroke();
+                }
+
+                this.g.beginPath();
+                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
+                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
+                this.g.stroke();
+
+                this.g.lineWidth = 2;
+                this.g.beginPath();
+                this.g.strokeStyle = this.o.fgColor;
+                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
+                this.g.stroke();
+
+                return false;
+            }
+        }
+    });
+});

app/assets/javascripts/BSBMaterial/pages/charts/morris.js

@@ -0,0 +1,168 @@
+$(function () {
+    getMorris('line', 'line_chart');
+    getMorris('bar', 'bar_chart');
+    getMorris('area', 'area_chart');
+    getMorris('donut', 'donut_chart');
+});
+
+
+function getMorris(type, element) {
+    if (type === 'line') {
+        Morris.Line({
+            element: element,
+            data: [{
+                'period': '2011 Q3',
+                'licensed': 3407,
+                'sorned': 660
+            }, {
+                    'period': '2011 Q2',
+                    'licensed': 3351,
+                    'sorned': 629
+                }, {
+                    'period': '2011 Q1',
+                    'licensed': 3269,
+                    'sorned': 618
+                }, {
+                    'period': '2010 Q4',
+                    'licensed': 3246,
+                    'sorned': 661
+                }, {
+                    'period': '2009 Q4',
+                    'licensed': 3171,
+                    'sorned': 676
+                }, {
+                    'period': '2008 Q4',
+                    'licensed': 3155,
+                    'sorned': 681
+                }, {
+                    'period': '2007 Q4',
+                    'licensed': 3226,
+                    'sorned': 620
+                }, {
+                    'period': '2006 Q4',
+                    'licensed': 3245,
+                    'sorned': null
+                }, {
+                    'period': '2005 Q4',
+                    'licensed': 3289,
+                    'sorned': null
+                }],
+            xkey: 'period',
+            ykeys: ['licensed', 'sorned'],
+            labels: ['Licensed', 'Off the road'],
+            lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)'],
+            lineWidth: 3
+        });
+    } else if (type === 'bar') {
+        Morris.Bar({
+            element: element,
+            data: [{
+                x: '2011 Q1',
+                y: 3,
+                z: 2,
+                a: 3
+            }, {
+                    x: '2011 Q2',
+                    y: 2,
+                    z: null,
+                    a: 1
+                }, {
+                    x: '2011 Q3',
+                    y: 0,
+                    z: 2,
+                    a: 4
+                }, {
+                    x: '2011 Q4',
+                    y: 2,
+                    z: 4,
+                    a: 3
+                }],
+            xkey: 'x',
+            ykeys: ['y', 'z', 'a'],
+            labels: ['Y', 'Z', 'A'],
+            barColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)'],
+        });
+    } else if (type === 'area') {
+        Morris.Area({
+            element: element,
+            data: [{
+                period: '2010 Q1',
+                iphone: 2666,
+                ipad: null,
+                itouch: 2647
+            }, {
+                    period: '2010 Q2',
+                    iphone: 2778,
+                    ipad: 2294,
+                    itouch: 2441
+                }, {
+                    period: '2010 Q3',
+                    iphone: 4912,
+                    ipad: 1969,
+                    itouch: 2501
+                }, {
+                    period: '2010 Q4',
+                    iphone: 3767,
+                    ipad: 3597,
+                    itouch: 5689
+                }, {
+                    period: '2011 Q1',
+                    iphone: 6810,
+                    ipad: 1914,
+                    itouch: 2293
+                }, {
+                    period: '2011 Q2',
+                    iphone: 5670,
+                    ipad: 4293,
+                    itouch: 1881
+                }, {
+                    period: '2011 Q3',
+                    iphone: 4820,
+                    ipad: 3795,
+                    itouch: 1588
+                }, {
+                    period: '2011 Q4',
+                    iphone: 15073,
+                    ipad: 5967,
+                    itouch: 5175
+                }, {
+                    period: '2012 Q1',
+                    iphone: 10687,
+                    ipad: 4460,
+                    itouch: 2028
+                }, {
+                    period: '2012 Q2',
+                    iphone: 8432,
+                    ipad: 5713,
+                    itouch: 1791
+                }],
+            xkey: 'period',
+            ykeys: ['iphone', 'ipad', 'itouch'],
+            labels: ['iPhone', 'iPad', 'iPod Touch'],
+            pointSize: 2,
+            hideHover: 'auto',
+            lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)']
+        });
+    } else if (type === 'donut') {
+        Morris.Donut({
+            element: element,
+            data: [{
+                label: 'Jam',
+                value: 25
+            }, {
+                    label: 'Frosted',
+                    value: 40
+                }, {
+                    label: 'Custard',
+                    value: 25
+                }, {
+                    label: 'Sugar',
+                    value: 10
+                }],
+            colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)'],
+            formatter: function (y) {
+                return y + '%'
+            }
+        });
+    }
+}

app/assets/javascripts/BSBMaterial/pages/charts/sparkline.js

@@ -0,0 +1,156 @@
+$(function () {
+    $(".sparkline").each(function () {
+        var $this = $(this);
+        $this.sparkline('html', $this.data());
+    });
+
+    $('.sparkline-pie').sparkline('html', {
+        type: 'pie',
+        offset: 90,
+        width: '150px',
+        height: '150px',
+        sliceColors: ['#E91E63', '#00BCD4', '#FFC107']
+    })
+
+    drawDocSparklines();
+    drawMouseSpeedDemo();
+});
+
+//Taken from http://omnipotent.net/jquery.sparkline ================
+function drawDocSparklines() {
+
+    // Bar + line composite charts
+    $('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
+    $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
+        { composite: true, fillColor: false, lineColor: 'red' });
+
+
+    // Line charts taking their values from the tag
+    $('.sparkline-1').sparkline();
+
+    // Larger line charts for the docs
+    $('.largeline').sparkline('html',
+        { type: 'line', height: '2.5em', width: '4em' });
+
+    // Customized line chart
+    $('#linecustom').sparkline('html',
+        {
+            height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
+            minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3
+        });
+
+    // Bar charts using inline values
+    $('.sparkbar').sparkline('html', { type: 'bar' });
+
+    $('.barformat').sparkline([1, 3, 5, 3, 8], {
+        type: 'bar',
+        tooltipFormat: '{{value:levels}} - {{value}}',
+        tooltipValueLookups: {
+            levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
+        }
+    });
+
+    // Tri-state charts using inline values
+    $('.sparktristate').sparkline('html', { type: 'tristate' });
+    $('.sparktristatecols').sparkline('html',
+        { type: 'tristate', colorMap: { '-2': '#fa7', '2': '#44f' } });
+
+    // Composite line charts, the second using values supplied via javascript
+    $('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
+    $('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
+        { composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
+
+    // Line charts with normal range marker
+    $('#normalline').sparkline('html',
+        { fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
+    $('#normalExample').sparkline('html',
+        { fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4' });
+
+    // Discrete charts
+    $('.discrete1').sparkline('html',
+        { type: 'discrete', lineColor: 'blue', xwidth: 18 });
+    $('#discrete2').sparkline('html',
+        { type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });
+
+    // Bullet charts
+    $('.sparkbullet').sparkline('html', { type: 'bullet' });
+
+    // Pie charts
+    $('.sparkpie').sparkline('html', { type: 'pie', height: '1.0em' });
+
+    // Box plots
+    $('.sparkboxplot').sparkline('html', { type: 'box' });
+    $('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
+        { type: 'box', raw: true, showOutliers: true, target: 6 });
+
+    // Box plot with specific field order
+    $('.boxfieldorder').sparkline('html', {
+        type: 'box',
+        tooltipFormatFieldlist: ['med', 'lq', 'uq'],
+        tooltipFormatFieldlistKey: 'field'
+    });
+
+    // click event demo sparkline
+    $('.clickdemo').sparkline();
+    $('.clickdemo').bind('sparklineClick', function (ev) {
+        var sparkline = ev.sparklines[0],
+            region = sparkline.getCurrentRegionFields();
+        value = region.y;
+        alert("Clicked on x=" + region.x + " y=" + region.y);
+    });
+
+    // mouseover event demo sparkline
+    $('.mouseoverdemo').sparkline();
+    $('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
+        var sparkline = ev.sparklines[0],
+            region = sparkline.getCurrentRegionFields();
+        value = region.y;
+        $('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
+    }).bind('mouseleave', function () {
+        $('.mouseoverregion').text('');
+    });
+}
+
+/**
+ ** Draw the little mouse speed animated graph
+ ** This just attaches a handler to the mousemove event to see
+ ** (roughly) how far the mouse has moved
+ ** and then updates the display a couple of times a second via
+ ** setTimeout()
+ **/
+function drawMouseSpeedDemo() {
+    var mrefreshinterval = 500; // update display every 500ms
+    var lastmousex = -1;
+    var lastmousey = -1;
+    var lastmousetime;
+    var mousetravel = 0;
+    var mpoints = [];
+    var mpoints_max = 30;
+    $('html').mousemove(function (e) {
+        var mousex = e.pageX;
+        var mousey = e.pageY;
+        if (lastmousex > -1) {
+            mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
+        }
+        lastmousex = mousex;
+        lastmousey = mousey;
+    });
+    var mdraw = function () {
+        var md = new Date();
+        var timenow = md.getTime();
+        if (lastmousetime && lastmousetime != timenow) {
+            var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
+            mpoints.push(pps);
+            if (mpoints.length > mpoints_max)
+                mpoints.splice(0, 1);
+            mousetravel = 0;
+            $('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
+        }
+        lastmousetime = timenow;
+        setTimeout(mdraw, mrefreshinterval);
+    };
+    // We could use setInterval instead, but I prefer to do it this way
+    setTimeout(mdraw, mrefreshinterval);
+}
+
+//=================================================================

app/assets/javascripts/BSBMaterial/pages/examples/forgot-password.js

@@ -0,0 +1,14 @@
+$(function () {
+    $('#forgot_password').validate({
+        highlight: function (input) {
+            console.log(input);
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.input-group').append(error);
+        }
+    });
+});

app/assets/javascripts/BSBMaterial/pages/examples/sign-in.js

@@ -0,0 +1,14 @@
+$(function () {
+    $('#sign_in').validate({
+        highlight: function (input) {
+            console.log(input);
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.input-group').append(error);
+        }
+    });
+});

app/assets/javascripts/BSBMaterial/pages/examples/sign-up.js

@@ -0,0 +1,23 @@
+$(function () {
+    $('#sign_up').validate({
+        rules: {
+            'terms': {
+                required: true
+            },
+            'confirm': {
+                equalTo: '[name="password"]'
+            }
+        },
+        highlight: function (input) {
+            console.log(input);
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.input-group').append(error);
+            $(element).parents('.form-group').append(error);
+        }
+    });
+});

app/assets/javascripts/BSBMaterial/pages/forms/advanced-form-elements.js

@@ -0,0 +1,85 @@
+$(function () {
+    $('.colorpicker').colorpicker();
+
+    //Dropzone
+    Dropzone.options.frmFileUpload = {
+        paramName: "file",
+        maxFilesize: 2
+    };
+
+    //Masked Input ============================================================================================================================
+    var $demoMaskedInput = $('.demo-masked-input');
+
+    //Date
+    $demoMaskedInput.find('.date').inputmask('dd/mm/yyyy', { placeholder: '__/__/____' });
+
+    //Time
+    $demoMaskedInput.find('.time12').inputmask('hh:mm t', { placeholder: '__:__ _m', alias: 'time12', hourFormat: '12' });
+    $demoMaskedInput.find('.time24').inputmask('hh:mm', { placeholder: '__:__ _m', alias: 'time24', hourFormat: '24' });
+
+    //Date Time
+    $demoMaskedInput.find('.datetime').inputmask('d/m/y h:s', { placeholder: '__/__/____ __:__', alias: "datetime", hourFormat: '24' });
+
+    //Mobile Phone Number
+    $demoMaskedInput.find('.mobile-phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
+    //Phone Number
+    $demoMaskedInput.find('.phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
+
+    //Dollar Money
+    $demoMaskedInput.find('.money-dollar').inputmask('99,99 $', { placeholder: '__,__ $' });
+    //Euro Money
+    $demoMaskedInput.find('.money-euro').inputmask('99,99 €', { placeholder: '__,__ €' });
+
+    //IP Address
+    $demoMaskedInput.find('.ip').inputmask('999.999.999.999', { placeholder: '___.___.___.___' });
+
+    //Credit Card
+    $demoMaskedInput.find('.credit-card').inputmask('9999 9999 9999 9999', { placeholder: '____ ____ ____ ____' });
+
+    //Email
+    $demoMaskedInput.find('.email').inputmask({ alias: "email" });
+
+    //Serial Key
+    $demoMaskedInput.find('.key').inputmask('****-****-****-****', { placeholder: '____-____-____-____' });
+    //===========================================================================================================================================
+
+    //Multi-select
+    $('#optgroup').multiSelect({ selectableOptgroup: true });
+
+    //noUISlider
+    var sliderBasic = document.getElementById('nouislider_basic_example');
+    noUiSlider.create(sliderBasic, {
+        start: [30],
+        connect: 'lower',
+        step: 1,
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+    getNoUISliderValue(sliderBasic, true);
+
+    //Range Example
+    var rangeSlider = document.getElementById('nouislider_range_example');
+    noUiSlider.create(rangeSlider, {
+        start: [32500, 62500],
+        connect: true,
+        range: {
+            'min': 25000,
+            'max': 100000
+        }
+    });
+    getNoUISliderValue(rangeSlider, false);
+});
+
+//Get noUISlider Value and write on
+function getNoUISliderValue(slider, percentage) {
+    slider.noUiSlider.on('update', function () {
+        var val = slider.noUiSlider.get();
+        if (percentage) {
+            val = parseInt(val);
+            val += '%';
+        }
+        $(slider).parent().find('span.js-nouislider-value').text(val);
+    });
+}

app/assets/javascripts/BSBMaterial/pages/forms/basic-form-elements.js

@@ -0,0 +1,24 @@
+$(function () {
+    //Textare auto growth
+    autosize($('textarea.auto-growth'));
+
+    //Datetimepicker plugin
+    $('.datetimepicker').bootstrapMaterialDatePicker({
+        format: 'dddd DD MMMM YYYY - HH:mm',
+        clearButton: true,
+        weekStart: 1
+    });
+
+    $('.datepicker').bootstrapMaterialDatePicker({
+        format: 'dddd DD MMMM YYYY',
+        clearButton: true,
+        weekStart: 1,
+        time: false
+    });
+
+    $('.timepicker').bootstrapMaterialDatePicker({
+        format: 'HH:mm',
+        clearButton: true,
+        date: false
+    });
+});

app/assets/javascripts/BSBMaterial/pages/forms/editors.js

@@ -0,0 +1,23 @@
+$(function () {
+    //CKEditor
+    CKEDITOR.replace('ckeditor');
+    CKEDITOR.config.height = 300;
+
+    //TinyMCE
+    tinymce.init({
+        selector: "textarea#tinymce",
+        theme: "modern",
+        height: 300,
+        plugins: [
+            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
+            'searchreplace wordcount visualblocks visualchars code fullscreen',
+            'insertdatetime media nonbreaking save table contextmenu directionality',
+            'emoticons template paste textcolor colorpicker textpattern imagetools'
+        ],
+        toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+        toolbar2: 'print preview media | forecolor backcolor emoticons',
+        image_advtab: true
+    });
+    tinymce.suffix = ".min";
+    tinyMCE.baseURL = '../../plugins/tinymce';
+});

app/assets/javascripts/BSBMaterial/pages/forms/form-validation.js

@@ -0,0 +1,58 @@
+$(function () {
+    $('#form_validation').validate({
+        rules: {
+            'checkbox': {
+                required: true
+            },
+            'gender': {
+                required: true
+            }
+        },
+        highlight: function (input) {
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.form-group').append(error);
+        }
+    });
+
+    //Advanced Form Validation
+    $('#form_advanced_validation').validate({
+        rules: {
+            'date': {
+                customdate: true
+            },
+            'creditcard': {
+                creditcard: true
+            }
+        },
+        highlight: function (input) {
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.form-group').append(error);
+        }
+    });
+
+    //Custom Validations ===============================================================================
+    //Date
+    $.validator.addMethod('customdate', function (value, element) {
+        return value.match(/^\d\d\d\d?-\d\d?-\d\d$/);
+    },
+        'Please enter a date in the format YYYY-MM-DD.'
+    );
+
+    //Credit card
+    $.validator.addMethod('creditcard', function (value, element) {
+        return value.match(/^\d\d\d\d?-\d\d\d\d?-\d\d\d\d?-\d\d\d\d$/);
+    },
+        'Please enter a credit card in the format XXXX-XXXX-XXXX-XXXX.'
+    );
+    //==================================================================================================
+});

app/assets/javascripts/BSBMaterial/pages/forms/form-wizard.js

@@ -0,0 +1,90 @@
+$(function () {
+    //Horizontal form basic
+    $('#wizard_horizontal').steps({
+        headerTag: 'h2',
+        bodyTag: 'section',
+        transitionEffect: 'slideLeft',
+        onInit: function (event, currentIndex) {
+            setButtonWavesEffect(event);
+        },
+        onStepChanged: function (event, currentIndex, priorIndex) {
+            setButtonWavesEffect(event);
+        }
+    });
+
+    //Vertical form basic
+    $('#wizard_vertical').steps({
+        headerTag: 'h2',
+        bodyTag: 'section',
+        transitionEffect: 'slideLeft',
+        stepsOrientation: 'vertical',
+        onInit: function (event, currentIndex) {
+            setButtonWavesEffect(event);
+        },
+        onStepChanged: function (event, currentIndex, priorIndex) {
+            setButtonWavesEffect(event);
+        }
+    });
+
+    //Advanced form with validation
+    var form = $('#wizard_with_validation').show();
+    form.steps({
+        headerTag: 'h3',
+        bodyTag: 'fieldset',
+        transitionEffect: 'slideLeft',
+        onInit: function (event, currentIndex) {
+            $.AdminBSB.input.activate();
+
+            //Set tab width
+            var $tab = $(event.currentTarget).find('ul[role="tablist"] li');
+            var tabCount = $tab.length;
+            $tab.css('width', (100 / tabCount) + '%');
+
+            //set button waves effect
+            setButtonWavesEffect(event);
+        },
+        onStepChanging: function (event, currentIndex, newIndex) {
+            if (currentIndex > newIndex) { return true; }
+
+            if (currentIndex < newIndex) {
+                form.find('.body:eq(' + newIndex + ') label.error').remove();
+                form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
+            }
+
+            form.validate().settings.ignore = ':disabled,:hidden';
+            return form.valid();
+        },
+        onStepChanged: function (event, currentIndex, priorIndex) {
+            setButtonWavesEffect(event);
+        },
+        onFinishing: function (event, currentIndex) {
+            form.validate().settings.ignore = ':disabled';
+            return form.valid();
+        },
+        onFinished: function (event, currentIndex) {
+            swal("Good job!", "Submitted!", "success");
+        }
+    });
+
+    form.validate({
+        highlight: function (input) {
+            $(input).parents('.form-line').addClass('error');
+        },
+        unhighlight: function (input) {
+            $(input).parents('.form-line').removeClass('error');
+        },
+        errorPlacement: function (error, element) {
+            $(element).parents('.form-group').append(error);
+        },
+        rules: {
+            'confirm': {
+                equalTo: '#password'
+            }
+        }
+    });
+});
+
+function setButtonWavesEffect(event) {
+    $(event.currentTarget).find('[role="menu"] li a').removeClass('waves-effect');
+    $(event.currentTarget).find('[role="menu"] li:not(.disabled) a').addClass('waves-effect');
+}

app/assets/javascripts/BSBMaterial/pages/index.js

@@ -0,0 +1,115 @@
+$(document).ready(function(){
+    //Widgets count
+    $('.count-to').countTo();
+
+    //Sales count to
+    $('.sales-count-to').countTo({
+        formatter: function (value, options) {
+            return '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ' ').replace('.', ',');
+        }
+    });
+
+    // initRealTimeChart();
+    // initDonutChart();
+    // initSparkline();
+});
+
+var realtime = 'on';
+function initRealTimeChart() {
+    //Real time ==========================================================================================
+    /*var plot = $.plot('#real_time_chart', [getRandomData()], {
+        series: {
+            shadowSize: 0,
+            color: 'rgb(0, 188, 212)'
+        },
+        grid: {
+            borderColor: '#f3f3f3',
+            borderWidth: 1,
+            tickColor: '#f3f3f3'
+        },
+        lines: {
+            fill: true
+        },
+        yaxis: {
+            min: 0,
+            max: 100
+        },
+        xaxis: {
+            min: 0,
+            max: 100
+        }
+    });
+
+    function updateRealTime() {
+        plot.setData([getRandomData()]);
+        plot.draw();
+
+        var timeout;
+        if (realtime === 'on') {
+            timeout = setTimeout(updateRealTime, 320);
+        } else {
+            clearTimeout(timeout);
+        }
+    }
+
+    updateRealTime();
+
+    $('#realtime').on('change', function () {
+        realtime = this.checked ? 'on' : 'off';
+        updateRealTime();
+    });*/
+    //====================================================================================================
+}
+
+function initSparkline() {
+    $(".sparkline").each(function () {
+        var $this = $(this);
+        $this.sparkline('html', $this.data());
+    });
+}
+
+function initDonutChart() {
+    /*Morris.Donut({
+        element: 'donut_chart',
+        data: [{
+            label: 'Chrome',
+            value: 37
+        }, {
+            label: 'Firefox',
+            value: 30
+        }, {
+            label: 'Safari',
+            value: 18
+        }, {
+            label: 'Opera',
+            value: 12
+        },
+        {
+            label: 'Other',
+            value: 3
+        }],
+        colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)', 'rgb(96, 125, 139)'],
+        formatter: function (y) {
+            return y + '%'
+        }
+    });*/
+}
+
+var data = [], totalPoints = 110;
+function getRandomData() {
+    if (data.length > 0) data = data.slice(1);
+
+    while (data.length < totalPoints) {
+        var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5;
+        if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
+
+        data.push(y);
+    }
+
+    var res = [];
+    for (var i = 0; i < data.length; ++i) {
+        res.push([i, data[i]]);
+    }
+
+    return res;
+}

app/assets/javascripts/BSBMaterial/pages/maps/google.js

@@ -0,0 +1,98 @@
+$(function () {
+    //Basic Map
+    var basicMap = new GMaps({
+        el: '#gmap_basic_example',
+        lat: -12.043333,
+        lng: -77.028333
+    });
+
+    //Markers
+    var markers = new GMaps({
+        div: '#gmap_markers',
+        lat: -12.043333,
+        lng: -77.028333
+    });
+    markers.addMarker({
+        lat: -12.043333,
+        lng: -77.03,
+        title: 'Lima',
+        details: {
+            database_id: 42,
+            author: 'HPNeo'
+        },
+        click: function (e) {
+            if (console.log)
+                console.log(e);
+            alert('You clicked in this marker');
+        }
+    });
+    markers.addMarker({
+        lat: -12.042,
+        lng: -77.028333,
+        title: 'Marker with InfoWindow',
+        infoWindow: {
+            content: '<p>HTML Content</p>'
+        }
+    });
+
+    //Static maps
+    var staticMap = GMaps.staticMapURL({
+        size: [$('#gmap_static_map').width(), 400],
+        lat: -12.043333,
+        lng: -77.028333
+    });
+
+    $('<img/>').attr('src', staticMap).appendTo('#gmap_static_map');
+
+    //Static maps with markers
+    var staticMapWithMarkers = GMaps.staticMapURL({
+        size: [$('#gmap_static_map_with_markers').width(), 400],
+        lat: -12.043333,
+        lng: -77.028333,
+        markers: [
+            { lat: -12.043333, lng: -77.028333 },
+            {
+                lat: -12.045333, lng: -77.034,
+                size: 'small'
+            },
+            {
+                lat: -12.045633, lng: -77.022,
+                color: 'blue'
+            }
+        ]
+    });
+
+    $('<img/>').attr('src', staticMapWithMarkers).appendTo('#gmap_static_map_with_markers');
+
+    //Static maps with polyline
+    var path = [
+        [-12.040397656836609, -77.03373871559225],
+        [-12.040248585302038, -77.03993927003302],
+        [-12.050047116528843, -77.02448169303511],
+        [-12.044804866577001, -77.02154422636042],
+        [-12.040397656836609, -77.03373871559225],
+    ];
+
+    var staticMapPolyline = GMaps.staticMapURL({
+        size: [$('#gmap_static_map_polyline').width(), 400],
+        lat: -12.043333,
+        lng: -77.028333,
+
+        polyline: {
+            path: path,
+            strokeColor: '#131540',
+            strokeOpacity: 0.6,
+            strokeWeight: 6
+            // fillColor: '#ffaf2ecc'
+        }
+    });
+
+    $('<img/>').attr('src', staticMapPolyline).appendTo('#gmap_static_map_polyline');
+
+    //Panorama
+    var panorama = GMaps.createPanorama({
+        el: '#gmap_panorama',
+        lat: 42.3455,
+        lng: -71.0983
+    });
+});

app/assets/javascripts/BSBMaterial/pages/maps/jvectormap.js

@@ -0,0 +1,51 @@
+$(function () {
+    $('#world-map-markers').vectorMap({
+        map: 'world_mill_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: '#009688',
+                stroke: '#000'
+            }
+        },
+        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' }
+        ]
+    });
+});

app/assets/javascripts/BSBMaterial/pages/medias/image-gallery.js

@@ -0,0 +1,6 @@
+$(function () {
+    $('#aniimated-thumbnials').lightGallery({
+        thumbnail: true,
+        selector: 'a'
+    });
+});

app/assets/javascripts/BSBMaterial/pages/tables/editable-table.js

@@ -0,0 +1,3 @@
+$(function () {
+    $('#mainTable').editableTableWidget();
+});

app/assets/javascripts/BSBMaterial/pages/tables/jquery-datatable.js

@@ -0,0 +1,14 @@
+$(function () {
+    $('.js-basic-example').DataTable({
+        responsive: true
+    });
+
+    //Exportable table
+    $('.js-exportable').DataTable({
+        dom: 'Bfrtip',
+        responsive: true,
+        buttons: [
+            'copy', 'csv', 'excel', 'pdf', 'print'
+        ]
+    });
+});

app/assets/javascripts/BSBMaterial/pages/ui/animations.js

@@ -0,0 +1,16 @@
+$(function () {
+    $('.js-animations').bind('change', function () {
+        var animation = $(this).val();
+        $('.js-animating-object').animateCss(animation);
+    });
+});
+
+//Copied from https://github.com/daneden/animate.css
+$.fn.extend({
+    animateCss: function (animationName) {
+        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
+            $(this).removeClass('animated ' + animationName);
+        });
+    }
+});

app/assets/javascripts/BSBMaterial/pages/ui/dialogs.js

@@ -0,0 +1,140 @@
+$(function () {
+    $('.js-sweetalert button').on('click', function () {
+        var type = $(this).data('type');
+        if (type === 'basic') {
+            showBasicMessage();
+        }
+        else if (type === 'with-title') {
+            showWithTitleMessage();
+        }
+        else if (type === 'success') {
+            showSuccessMessage();
+        }
+        else if (type === 'confirm') {
+            showConfirmMessage();
+        }
+        else if (type === 'cancel') {
+            showCancelMessage();
+        }
+        else if (type === 'with-custom-icon') {
+            showWithCustomIconMessage();
+        }
+        else if (type === 'html-message') {
+            showHtmlMessage();
+        }
+        else if (type === 'autoclose-timer') {
+            showAutoCloseTimerMessage();
+        }
+        else if (type === 'prompt') {
+            showPromptMessage();
+        }
+        else if (type === 'ajax-loader') {
+            showAjaxLoaderMessage();
+        }
+    });
+});
+
+//These codes takes from http://t4t5.github.io/sweetalert/
+function showBasicMessage() {
+    swal("Here's a message!");
+}
+
+function showWithTitleMessage() {
+    swal("Here's a message!", "It's pretty, isn't it?");
+}
+
+function showSuccessMessage() {
+    swal("Good job!", "You clicked the button!", "success");
+}
+
+function showConfirmMessage() {
+    swal({
+        title: "Are you sure?",
+        text: "You will not be able to recover this imaginary file!",
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "Yes, delete it!",
+        closeOnConfirm: false
+    }, function () {
+        swal("Deleted!", "Your imaginary file has been deleted.", "success");
+    });
+}
+
+function showCancelMessage() {
+    swal({
+        title: "Are you sure?",
+        text: "You will not be able to recover this imaginary file!",
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "Yes, delete it!",
+        cancelButtonText: "No, cancel plx!",
+        closeOnConfirm: false,
+        closeOnCancel: false
+    }, function (isConfirm) {
+        if (isConfirm) {
+            swal("Deleted!", "Your imaginary file has been deleted.", "success");
+        } else {
+            swal("Cancelled", "Your imaginary file is safe :)", "error");
+        }
+    });
+}
+
+function showWithCustomIconMessage() {
+    swal({
+        title: "Sweet!",
+        text: "Here's a custom image.",
+        imageUrl: "../../images/thumbs-up.png"
+    });
+}
+
+function showHtmlMessage() {
+    swal({
+        title: "HTML <small>Title</small>!",
+        text: "A custom <span style=\"color: #CC0000\">html<span> message.",
+        html: true
+    });
+}
+
+function showAutoCloseTimerMessage() {
+    swal({
+        title: "Auto close alert!",
+        text: "I will close in 2 seconds.",
+        timer: 2000,
+        showConfirmButton: false
+    });
+}
+
+function showPromptMessage() {
+    swal({
+        title: "An input!",
+        text: "Write something interesting:",
+        type: "input",
+        showCancelButton: true,
+        closeOnConfirm: false,
+        animation: "slide-from-top",
+        inputPlaceholder: "Write something"
+    }, function (inputValue) {
+        if (inputValue === false) return false;
+        if (inputValue === "") {
+            swal.showInputError("You need to write something!"); return false
+        }
+        swal("Nice!", "You wrote: " + inputValue, "success");
+    });
+}
+
+function showAjaxLoaderMessage() {
+    swal({
+        title: "Ajax request example",
+        text: "Submit to run ajax request",
+        type: "info",
+        showCancelButton: true,
+        closeOnConfirm: false,
+        showLoaderOnConfirm: true,
+    }, function () {
+        setTimeout(function () {
+            swal("Ajax request finished!");
+        }, 2000);
+    });
+}

app/assets/javascripts/BSBMaterial/pages/ui/modals.js

@@ -0,0 +1,7 @@
+$(function () {
+    $('.js-modal-buttons .btn').on('click', function () {
+        var color = $(this).data('color');
+        $('#mdModal .modal-content').removeAttr('class').addClass('modal-content modal-col-' + color);
+        $('#mdModal').modal('show');
+    });
+});

app/assets/javascripts/BSBMaterial/pages/ui/notifications.js

@@ -0,0 +1,47 @@
+$(function () {
+    $('.jsdemo-notification-button button').on('click', function () {
+        var placementFrom = $(this).data('placement-from');
+        var placementAlign = $(this).data('placement-align');
+        var animateEnter = $(this).data('animate-enter');
+        var animateExit = $(this).data('animate-exit');
+        var colorName = $(this).data('color-name');
+
+        showNotification(colorName, null, placementFrom, placementAlign, animateEnter, animateExit);
+    });
+});
+
+function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
+    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
+    if (text === null || text === '') { text = 'Turning standard Bootstrap alerts'; }
+    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
+    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
+    var allowDismiss = true;
+
+    $.notify({
+        message: text
+    },
+        {
+            type: colorName,
+            allow_dismiss: allowDismiss,
+            newest_on_top: true,
+            timer: 1000,
+            placement: {
+                from: placementFrom,
+                align: placementAlign
+            },
+            animate: {
+                enter: animateEnter,
+                exit: animateExit
+            },
+            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
+            '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
+            '<span data-notify="icon"></span> ' +
+            '<span data-notify="title">{1}</span> ' +
+            '<span data-notify="message">{2}</span>' +
+            '<div class="progress" data-notify="progressbar">' +
+            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
+            '</div>' +
+            '<a href="{3}" target="{4}" data-notify="url"></a>' +
+            '</div>'
+        });
+}

app/assets/javascripts/BSBMaterial/pages/ui/range-sliders.js

@@ -0,0 +1,93 @@
+$(function () {
+    //Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
+
+    $("#range_01").ionRangeSlider();
+
+    $("#range_02").ionRangeSlider({
+        min: 100,
+        max: 1000,
+        from: 550
+    });
+
+    $("#range_03").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: 0,
+        max: 1000,
+        from: 200,
+        to: 800,
+        prefix: "$"
+    });
+
+    $("#range_04").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -1000,
+        max: 1000,
+        from: -500,
+        to: 500
+    });
+
+    $("#range_05").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -1000,
+        max: 1000,
+        from: -500,
+        to: 500,
+        step: 250
+    });
+
+
+    $("#range_06").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -12.8,
+        max: 12.8,
+        from: -3.2,
+        to: 3.2,
+        step: 0.1
+    });
+
+    $("#range_07").ionRangeSlider({
+        type: "double",
+        grid: true,
+        from: 1,
+        to: 5,
+        values: [0, 10, 100, 1000, 10000, 100000, 1000000]
+    });
+
+
+    $("#range_08").ionRangeSlider({
+        grid: true,
+        from: 5,
+        values: [
+            "zero", "one",
+            "two", "three",
+            "four", "five",
+            "six", "seven",
+            "eight", "nine",
+            "ten"
+        ]
+    });
+
+    $("#range_09").ionRangeSlider({
+        grid: true,
+        from: 3,
+        values: [
+            "January", "February", "March",
+            "April", "May", "June",
+            "July", "August", "September",
+            "October", "November", "December"
+        ]
+    });
+
+    $("#range_10").ionRangeSlider({
+        grid: true,
+        min: 1000,
+        max: 1000000,
+        from: 100000,
+        step: 1000,
+        prettify_enabled: false
+    });
+});

app/assets/javascripts/BSBMaterial/pages/ui/sortable-nestable.js

@@ -0,0 +1,10 @@
+$(function () {
+    $('.dd').nestable();
+
+    $('.dd').on('change', function () {
+        var $this = $(this);
+        var serializedData = window.JSON.stringify($($this).nestable('serialize'));
+
+        $this.parents('div.body').find('textarea').val(serializedData);
+    });
+});

app/assets/javascripts/BSBMaterial/pages/ui/tooltips-popovers.js

@@ -0,0 +1,9 @@
+$(function () {
+    //Tooltip
+    $('[data-toggle="tooltip"]').tooltip({
+        container: 'body'
+    });
+
+    //Popover
+    $('[data-toggle="popover"]').popover();
+})

app/assets/javascripts/BSBMaterial/pages/widgets/infobox/infobox-1.js

@@ -0,0 +1,43 @@
+$(function () {
+    initCounters();
+    initCharts();
+});
+
+//Widgets count plugin
+function initCounters() {
+    $('.count-to').countTo();
+}
+
+//Charts
+function initCharts() {
+    //Chart Bar
+    $('.chart.chart-bar').sparkline(undefined, {
+        type: 'bar',
+        barColor: '#fff',
+        negBarColor: '#fff',
+        barWidth: '4px',
+        height: '34px'
+    });
+
+    //Chart Pie
+    $('.chart.chart-pie').sparkline(undefined, {
+        type: 'pie',
+        height: '50px',
+        sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
+    });
+
+    //Chart Line
+    $('.chart.chart-line').sparkline(undefined, {
+        type: 'line',
+        width: '60px',
+        height: '45px',
+        lineColor: '#fff',
+        lineWidth: 1.3,
+        fillColor: 'rgba(0,0,0,0)',
+        spotColor: 'rgba(255,255,255,0.40)',
+        maxSpotColor: 'rgba(255,255,255,0.40)',
+        minSpotColor: 'rgba(255,255,255,0.40)',
+        spotRadius: 3,
+        highlightSpotColor: '#fff'
+    });
+}

app/assets/javascripts/BSBMaterial/pages/widgets/infobox/infobox-2.js

@@ -0,0 +1,43 @@
+$(function () {
+    initCounters();
+    initCharts();
+});
+
+//Widgets count plugin
+function initCounters() {
+    $('.count-to').countTo();
+}
+
+//Charts
+function initCharts() {
+    //Chart Bar
+    $('.chart.chart-bar').sparkline(undefined, {
+        type: 'bar',
+        barColor: '#fff',
+        negBarColor: '#fff',
+        barWidth: '4px',
+        height: '34px'
+    });
+
+    //Chart Pie
+    $('.chart.chart-pie').sparkline(undefined, {
+        type: 'pie',
+        height: '50px',
+        sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
+    });
+
+    //Chart Line
+    $('.chart.chart-line').sparkline(undefined, {
+        type: 'line',
+        width: '60px',
+        height: '45px',
+        lineColor: '#fff',
+        lineWidth: 1.3,
+        fillColor: 'rgba(0,0,0,0)',
+        spotColor: 'rgba(255,255,255,0.40)',
+        maxSpotColor: 'rgba(255,255,255,0.40)',
+        minSpotColor: 'rgba(255,255,255,0.40)',
+        spotRadius: 3,
+        highlightSpotColor: '#fff'
+    });
+}

app/assets/javascripts/BSBMaterial/pages/widgets/infobox/infobox-3.js

@@ -0,0 +1,43 @@
+$(function () {
+    initCounters();
+    initCharts();
+});
+
+//Widgets count plugin
+function initCounters() {
+    $('.count-to').countTo();
+}
+
+//Charts
+function initCharts() {
+    //Chart Bar
+    $('.chart.chart-bar').sparkline(undefined, {
+        type: 'bar',
+        barColor: '#fff',
+        negBarColor: '#fff',
+        barWidth: '4px',
+        height: '34px'
+    });
+
+    //Chart Pie
+    $('.chart.chart-pie').sparkline(undefined, {
+        type: 'pie',
+        height: '50px',
+        sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
+    });
+
+    //Chart Line
+    $('.chart.chart-line').sparkline(undefined, {
+        type: 'line',
+        width: '60px',
+        height: '45px',
+        lineColor: '#fff',
+        lineWidth: 1.3,
+        fillColor: 'rgba(0,0,0,0)',
+        spotColor: 'rgba(255,255,255,0.40)',
+        maxSpotColor: 'rgba(255,255,255,0.40)',
+        minSpotColor: 'rgba(255,255,255,0.40)',
+        spotRadius: 3,
+        highlightSpotColor: '#fff'
+    });
+}

app/assets/javascripts/BSBMaterial/pages/widgets/infobox/infobox-4.js

@@ -0,0 +1,52 @@
+$(function () {
+    initCounters();
+    initCharts();
+});
+
+//Widgets count plugin
+function initCounters() {
+    $('.count-to').countTo();
+}
+
+//Charts
+function initCharts() {
+    //Chart Bar
+    $('.chart.chart-bar:not(.reverse)').sparkline(undefined, {
+        type: 'bar',
+        barColor: 'rgba(0, 0, 0, 0.15)',
+        negBarColor: 'rgba(0, 0, 0, 0.15)',
+        barWidth: '8px',
+        height: '34px'
+    });
+
+    //Chart Bar Reverse
+    $('.chart.chart-bar.reverse').sparkline(undefined, {
+        type: 'bar',
+        barColor: 'rgba(255, 255, 255, 0.15)',
+        negBarColor: 'rgba(255, 255, 255, 0.15)',
+        barWidth: '8px',
+        height: '34px'
+    });
+
+    //Chart Pie
+    $('.chart.chart-pie').sparkline(undefined, {
+        type: 'pie',
+        height: '50px',
+        sliceColors: ['rgba(0,0,0,0.10)', 'rgba(0,0,0,0.15)', 'rgba(0,0,0,0.20)', 'rgba(0,0,0,0.25)']
+    });
+
+    //Chart Line
+    $('.chart.chart-line').sparkline(undefined, {
+        type: 'line',
+        width: '60px',
+        height: '45px',
+        lineColor: 'rgba(0, 0, 0, 0.15)',
+        lineWidth: 2,
+        fillColor: 'rgba(0,0,0,0)',
+        spotColor: 'rgba(0, 0, 0, 0.15)',
+        maxSpotColor: 'rgba(0, 0, 0, 0.15)',
+        minSpotColor: 'rgba(0, 0, 0, 0.15)',
+        spotRadius: 3,
+        highlightSpotColor: 'rgba(0, 0, 0, 0.15)'
+    });
+}

app/assets/javascripts/BSBMaterial/pages/widgets/infobox/infobox-5.js

@@ -0,0 +1,52 @@
+$(function () {
+    initCounters();
+    initCharts();
+});
+
+//Widgets count plugin
+function initCounters() {
+    $('.count-to').countTo();
+}
+
+//Charts
+function initCharts() {
+    //Chart Bar
+    $.each($('.chart.chart-bar'), function (i, key) {
+        var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
+        $(key).sparkline(undefined, {
+            type: 'bar',
+            barColor: chartColor,
+            negBarColor: chartColor,
+            barWidth: '8px',
+            height: '34px'
+        });
+    });
+
+    //Chart Pie
+    $.each($('.chart.chart-pie'), function (i, key) {
+        var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
+        $(key).sparkline(undefined, {
+            type: 'pie',
+            height: '50px',
+            sliceColors: [hexToRgba(chartColor, '0.55'), hexToRgba(chartColor, '0.70'), hexToRgba(chartColor, '0.85'), hexToRgba(chartColor, '1')]
+        });
+    });
+
+    //Chart Line
+    $.each($('.chart.chart-line'), function (i, key) {
+        var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
+        $(key).sparkline(undefined, {
+            type: 'line',
+            width: '60px',
+            height: '45px',
+            lineColor: chartColor,
+            lineWidth: 1.3,
+            fillColor: 'rgba(0,0,0,0)',
+            spotColor: chartColor,
+            maxSpotColor: chartColor,
+            minSpotColor: chartColor,
+            spotRadius: 3,
+            highlightSpotColor: chartColor
+        });
+    });
+}

app/assets/javascripts/BSBMaterial/script.js

@@ -0,0 +1 @@
+

app/assets/javascripts/CRM.js

@@ -9,13 +9,36 @@
 //
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
-//
+
 //= require jquery
 //= require tether
-//= require bootstrap
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
 //= require jquery_ujs
 //= require turbolinks
+<<<<<<< HEAD
 //= require cable
 //= require jquery-ui
 //= require bootstrap-datepicker
+=======
+//= require momentjs/moment
+//= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker
+//= require jquery-slimscroll/jquery.slimscroll.js
+//= require bootstrap-notify/bootstrap-notify.js
+//= require node-waves/waves.js
+//= require sweetalert/sweetalert.min.js
+//= require BSBMaterial/admin.js
+//= require BSBMaterial/demo.js
+//= require custom.js
 
+$(document).on('turbolinks:load', function() {
+>>>>>>> 01c4eeca81e1eac7bf7fe5854142a9663e104249
+
+    $('.datepicker').bootstrapMaterialDatePicker({
+        format: 'DD-MM-YYYY',
+        clearButton: true,
+        weekStart: 1,
+        time: false
+    });
+   
+});

app/assets/javascripts/OQS.js

@@ -12,12 +12,19 @@
 //
 //= require jquery
 //= require tether
-//= require bootstrap
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
 //= require jquery_ujs
 //= require turbolinks
 //= require cable
+//= require jquery-slimscroll/jquery.slimscroll.js
+//= require node-waves/waves.js
+//= require sweetalert/sweetalert.min.js
+//= require BSBMaterial/admin.js
+//= require BSBMaterial/demo.js
+//= require custom.js
 
-$(document).ready(function(){
+$(document).on('turbolinks:load', function() {
 
 	$(".nav-completed").on("click", function(){
        $("#completed").removeClass('hide')
@@ -39,72 +46,71 @@ $(document).ready(function(){
     }); //End Click
  
 	function show_details(url){  
-	   var oqs_append = $('.oqs_append');
-	   oqs_append.empty();
-	   var filter = $('.filter').text();
-	  //Start Ajax
-	  $.ajax({      
-	    type: "GET",         
-	    url: url, 
-	    data: {'filter':filter},
-	    dataType: "json",
-	    success: function(data) {
-	        for(var field in data) {
-	          var price = parseFloat(data[field].price).toFixed(2);
+	     var oqs_append = $('.oqs_append');
+	     oqs_append.empty();
+	     var filter = $('.filter').text();
+	    //Start Ajax
+	    $.ajax({      
+	      type: "GET",         
+	      url: url, 
+	      data: {'filter':filter},
+	      dataType: "json",
+	      success: function(data) {
+	          for(var field in data) {
+	            var price = parseFloat(data[field].price).toFixed(2);
 
-	          if (data[field]["options"] == "[]" || data[field]["options"] == "") {
-	           var options = "";
-	          }else{
-	           var options = data.options;
+	            if (data[field]["options"] == "[]" || data[field]["options"] == "") {
+	             var options = "";
+	            }else{
+	             var options = data.options;
+	            }
+
+	            var date = new Date(data[field]["created_at"]); 
+	          var show_date = date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ' ' +  date.getHours()+ ':' +  date.getMinutes();
+	             
+	            row ='<div class="card queue_station animated " data-date="'+data[field]["order_id"]+'">'
+	                    +'<div class="card-block">'
+	                        +'<h6 class="card-">'
+	                          +'<span class="order-zone-type">'+data[field]["table_type"]+'- </span>'
+	                          +'<span class="order-zone">'+ data[field]["zone"] +'</span>'
+	                          +'<small class="float-right">'+ data[field]["order_id"] +'</small>'
+	                        +'</h6>'
+
+	                        +'<h6>'
+	                          +'<span class="order-item">'+ data[field]["item_name"] +'- </span>'
+	                          +'<span class="order-qty">'+ data[field]["qty"] +' </span>'
+	                        +'</h6>'
+
+	                        +'<p class="card-text item-options">'+ options +'</p>'
+
+	                        +'<p class="card-text">'
+	                          +'<small class="text-muted">Order at'
+	                            +'<span class="order-at">'+ show_date +'</span> - '
+
+	                            +'<span class="order-by">'+ data[field]["item_order_by"] +'</span> '
+	                            +'</small> '
+	                        +'</p>'
+
+	                        +'<p class="hidden order-customer">'+ data[field]["customer_name"] +'</p> '
+	                        +'<p class="hidden assigned-order-item">'+ data[field]["assigned_order_item_id"] +'</p> '
+	                    +'</div>'
+
+	                    +'<div class="card-footer">'
+	                        +'<button id="edit_'+ data[field]["assigned_order_item_id"]+'" class="btn btn-warning order-item order-item-edit">EDIT</button>'
+	                        +' <button id="assigned_queue_' + data[field]["assigned_order_item_id"] +'" class="btn btn-primary order-item order-complete">COMPLETE</button>'
+	                    +'</div>'
+
+	                +'</div>'; 
+	                    
+	                   
+	                   
+	              $('.oqs_append').append(row);
 	          }
-
-	          var date = new Date(data[field]["created_at"]); 
-          var show_date = date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ' ' +  date.getHours()+ ':' +  date.getMinutes();
-	           
-	          row ='<div class="card queue_station" data-date="'+data[field]["order_id"]+'">'
-	                  +'<div class="card-block">'
-	                      +'<h4 class="card-title">'
-	                        +'<span class="order-zone-type">'+data[field]["table_type"]+'- </span>'
-	                        +'<span class="order-zone">'+ data[field]["zone"] +'</span>'
-	                        +'<small class="pull-right">'+ data[field]["order_id"] +'- </small>'
-	                      +'</h4>'
-
-	                      +'<h4>'
-	                        +'<span class="order-item">'+ data[field]["item_name"] +'- </span>'
-	                        +'<span class="order-qty">'+ data[field]["qty"] +'- </span>'
-	                      +'</h4>'
-
-	                      +'<p class="card-text item-options">'+ options +'</p>'
-
-	                      +'<p class="card-text">'
-	                        +'<small class="text-muted">Order at'
-	                          +'<span class="order-at">'+ show_date +'</span> - '
-
-	                          +'<span class="order-by">'+ data[field]["item_order_by"] +'</span> '
-	                          +'</small> '
-	                      +'</p>'
-
-	                      +'<p class="hidden order-customer">'+ data[field]["customer_name"] +'</p> '
-	                      +'<p class="hidden assigned-order-item">'+ data[field]["assigned_order_item_id"] +'</p> '
-	                  +'</div>'
-
-	                  +'<div class="card-footer">'
-	                      +'<button id="edit_'+ data[field]["assigned_order_item_id"]+'" class="btn btn-warning order-item order-item-edit">EDIT</button>'
-	                      +' <button id="assigned_queue_' + data[field]["assigned_order_item_id"] +'" class="btn btn-primary order-item order-complete">COMPLETE</button>'
-	                  +'</div>'
-
-	              +'</div>'; 
-	                  
-	                 
-	                 
-	            $('.oqs_append').append(row);
-	        }
-	        
-	     }
-	  });
-	  //end Ajax 
-
-	}
+	          
+	       }
+	    });
+	    //end Ajax 
+	  }
 
 	$(document).on('click', '.queue_station', function(event){ 
 	    var orderZone=$(this).children().children().children('.order-zone').text().trim();
@@ -191,7 +197,20 @@ $(document).ready(function(){
 	      	// update queue item count in completed station
 	      	$("#completed_count").text(parseInt($("#completed_count").text()) + data.length);
 
-	      	alert("updated!");
+	      	swal({
+		          title: "Infomation !",
+		          text: 'Order has been successfully created',
+		          confirmButtonColor: "green",
+		          confirmButtonText: "Yes!",
+		          closeOnConfirm: false,
+		        }, function () {
+		          if(table_type == "Table"){
+		                  window.location.href = "/origami/table/" + table_id
+		                }
+		                else {
+		                  window.location.href = "/origami/room/" + table_id
+		                }    
+		        });
 	      	// Page reload
 	    	location.reload();
 	      }

app/assets/javascripts/addorder.js

@@ -1,10 +1,90 @@
 $(function(){
+  //click menu sidebar menu category
+  $(".product").on("click", function(){
+    var url = $(this).attr('data-ref');
+    show_product_list(url); 
+    console.log(url)
+  }); 
+  //show menu item list when click menu category
+  function show_product_list(url_item){ 
 
+    var menu_list = $('.menu_items_list');
+    menu_list.empty();
+    //Start Ajax
+    $.ajax({      
+      type: "GET",         
+      url: url_item, 
+      data: {},
+      dataType: "json",
+      success: function(data) {
+        
+        var menu_items_list = $('.menu_items_list');
+        menu_items_list.empty();
+        product = data;
+
+        for(var field in product) {  
+          console.log(product[field].name);
+          if (product[field].unit_price > 0) {
+            console.log("hi");
+            qty             = 1;
+            options         = [];
+            item_attributes = [];
+
+            if (product[field].image_path) {
+              image_path = product[field].image_path.url;
+            }else{
+              image_path = "/image/logo.png";
+            }
+
+            row = '<div class="card custom-card testimonial-card animated fadeInRight" style="">'
+                     +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;">'
+                      +'<div class="col-md-9">'+ product[field].name +'</div>'
+                      +"<div class='col-md-3 add_icon' data-item-code='"
+                        + product[field].item_code +"' data-name='"
+                        + product[field].name +"' data-qty = '"+ qty +"' data-price = '"
+                        + product[field].unit_price +"' data-instance-code = '"+ product[field].item_code +"' data-instance = '"
+                        + product[field].name +"' data-promotion-price = '"+ 1 +"' data-attributes = '"
+                        + JSON.stringify(item_attributes) +"' data-options = '"
+                        + options +"' data-image='"+image_path+"'>"
+                      +"<i class='fa fa-plus material-icons'>"
+                      +'add</i>'
+                      +'</div>'
+                     +'</div>'
+
+                  +"<div class='menu_item_box'  data-item-code='"
+                    + product[field].item_code +"' data-instance = '"
+                    +JSON.stringify(item_attributes)+"' data-id = '"
+                    +JSON.stringify(item_attributes)+"' data-item = '"
+                    +JSON.stringify(item_attributes)+"' data-option = '"
+                    +JSON.stringify(item_attributes)+"' data-item-sets = '"
+                    +JSON.stringify(item_attributes)+"' data-toggle='modal' data-target='.sx_item_detailModal'>"
+
+                    +"<div class='card-block custom-card-block'>"
+                      +"<img id='logo' height='125px' src='"+image_path+"'>"
+                    +"</div>"
+
+                    +'<div class="card-footer custom-card-footer">'
+                      +'<span>'+ product[field].unit_price +'</span>'
+                    +'</div>'
+                  +'</div>'; 
+            $('.menu_items_list').append(row);
+          }
+        }
+      }
+    });
+    //end Ajax 
+  }
+  //end show list function
   //click menu sidebar menu category
   $(".menu_category").on("click", function(){
     var menu_id = $(this).find(".menu-id").text();
+<<<<<<< HEAD
 //    var url = $(this).attr('data-ref');
     var url = "get_menu_category/"+menu_id;
+=======
+    var url = "get_menu_category/"+menu_id;
+    console.log(url)
+>>>>>>> 01c4eeca81e1eac7bf7fe5854142a9663e104249
     show_menu_item_list(url); 
   }); 
   //End menu category Click
@@ -25,7 +105,6 @@ $(function(){
         menu_items_list.empty();
         menu_items = data.menu_items;
 
-
         for(var field in menu_items) {  
           if (menu_items[field].is_sub_item == false) {
             instances = menu_items[field].instances ;
@@ -34,6 +113,7 @@ $(function(){
 
             if (JSON.stringify(menu_items[field].item_sets)!='[]') {
               fa_plus = '';
+              add = '';
               menu_item_box = 'set_item_box';
               data_target = 'sx_item_set_detailModal';
 
@@ -45,7 +125,8 @@ $(function(){
                  item_attributes = menu_items[field].attributes;
                  promotion_price =  menu_items[field].promotion_price;
             }else{
-              fa_plus = 'fa-plus';
+              fa_plus = 'material-icons';
+              add = 'add'
               menu_item_box = 'menu_item_box';
               data_target = 'sx_item_detailModal';
 
@@ -70,38 +151,37 @@ $(function(){
               image_path = "/image/logo.png";
             }
 
-            row = '<div class="card custom-card">'
-            +'<div class="custom-card-head card-head" style="line-height:14px;">'
-            +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
-            +"<div class='col-md-3 add_icon' data-item-code='"
-              + menu_items[field].code +"' data-name='"
-              + menu_items[field].name +"' data-qty = '"+ qty +"' data-price = '"
-              + price +"' data-instance-code = '"+ code +"' data-instance = '"
-              + name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"
-              + JSON.stringify(item_attributes) +"' data-options = '"
-              + options +"' data-image='"+image_path+"'>"
-            +"<i class='fa "+fa_plus+" '"
-            + 'style="margin-top:4px;">'
-            +'</i></div>'
-            +'</div>'
+            row = '<div class="card custom-card testimonial-card animated fadeInRight" style="">'
+                     +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;">'
+                      +'<div class="col-md-9">'+ menu_items[field].name +'</div>'
+                      +"<div class='col-md-3 add_icon' data-item-code='"
+                        + menu_items[field].code +"' data-name='"
+                        + menu_items[field].name +"' data-qty = '"+ qty +"' data-price = '"
+                        + price +"' data-instance-code = '"+ code +"' data-instance = '"
+                        + name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"
+                        + JSON.stringify(item_attributes) +"' data-options = '"
+                        + options +"' data-image='"+image_path+"'>"
+                      +"<i class='fa "+fa_plus+" '>"
+                      +add+ '</i>'
+                      +'</div>'
+                     +'</div>'
 
-            +"<div class='"+menu_item_box+"'  data-item-code='"
-              + menu_items[field].code +"' data-instance = '"
-              +JSON.stringify(menu_items[field].instances)+"' data-id = '"
-              +JSON.stringify(menu_items[field].attributes)+"' data-item = '"
-              +JSON.stringify(item_attributes)+"' data-option = '"
-              +JSON.stringify(menu_items[field].options)+"' data-item-sets = '"
-              +JSON.stringify(menu_items[field].item_sets)+"' data-toggle='modal' data-target='."+data_target+"'>"
+                  +"<div class='"+menu_item_box+"'  data-item-code='"
+                    + menu_items[field].code +"' data-instance = '"
+                    +JSON.stringify(menu_items[field].instances)+"' data-id = '"
+                    +JSON.stringify(menu_items[field].attributes)+"' data-item = '"
+                    +JSON.stringify(item_attributes)+"' data-option = '"
+                    +JSON.stringify(menu_items[field].options)+"' data-item-sets = '"
+                    +JSON.stringify(menu_items[field].item_sets)+"' data-toggle='modal' data-target='."+data_target+"'>"
 
-            +"<div class='card-block custom-card-block'>"
-            +"<img id='logo' src='"+image_path+"'>"
+                    +"<div class='card-block custom-card-block'>"
+                      +"<img id='logo' height='125px' src='"+image_path+"'>"
+                    +"</div>"
 
-            +"</div>"
-
-            +'<div class="card-footer custom-card-footer">'
-            +'<small>'+ price +'</small>'
-            +'</div>'
-            +'</div>'; 
+                    +'<div class="card-footer custom-card-footer">'
+                      +'<span>'+ price +'</span>'
+                    +'</div>'
+                  +'</div>'; 
             $('.menu_items_list').append(row);
           }
         }
@@ -141,14 +221,14 @@ $(function(){
                             +"' data-max-qty='"+item_sets[field]["max_selectable_qty"]
                             +"'>"
                           +'<div class="custom-card-head card-head" style="line-height:14px;">'
-                             +'<small class="">'+result["name"]+'</small>'
+                             +'<span class="">'+result["name"]+'</span>'
                           +'</div>'
                           +'<div class="card-block custom-card-block">'
                             +'<img id="" src="/image/logo.png" height="40px">'
                             +' <small style="float:" id="instance_option"></small>'
                           +'</div>'
                           +'<div class="card-footer custom-card-footer">'
-                             +' <small>'+result["price"]+'</small>'
+                             +' <span>'+result["price"]+'</span>'
                              // +' <small style="float:right" id="instance_option"></small>'
                           +'</div>'
                         +'</div>'
@@ -303,9 +383,9 @@ $(function(){
     item_options       = $(this).data('option');
 
     if (data.attr('data-image')) {
-      image = "<img id='' src='"+data.attr('data-image')+"'>";
+      image = "<img id='' width='200px' src='"+data.attr('data-image')+"'>";
     }else{
-       image = "<img id='' src='/image/logo.png'>";
+       image = "<img id='' width='200px' src='/image/logo.png'>";
     }
     
     $('#modal_box_img').append(image);
@@ -359,8 +439,8 @@ console.log("hi")
           disabled = "disabled";
         }
         row +="<button id='selected-attribute' data-instances='"+JSON.stringify(instances)+"' data-type='"
-        +type+"' data-value='"+value[i]+"' class='btn btn-default attribute_btn "
-        + status +" "+ type +" "+ disabled +" '>"
+        +type+"' data-value='"+value[i]+"' class='btn btn- waves-effect attribute_btn "
+        + status +" "+ type +" '"+ disabled +" >"
         +value[i]
         +"</button>";   
       });
@@ -372,7 +452,7 @@ console.log("hi")
       type  = item_options[field]["type"];
       row = "<h4>"+type+"</h4>"
       $(value).each(function(i){
-        row +="<button class='btn btn-default option_btn "+ type +"' data-type='"
+        row +="<button class='btn btn- waves-effect option_btn "+ type +"' data-type='"
         +type+"' data-value='"+value[i]+"' data-group='simple_menu'>"+value[i]+"</button>";   
       });
       $(".options-list").append(row); 
@@ -589,25 +669,21 @@ console.log("hi")
       data: params,
       dataType: "json",
       success:function(result){ 
-        $("#loading_wrapper").hide();                         
-        $.confirm({
-          title: 'Infomation!',
-          content: "Order has been successfully created",
-          buttons: {
-            confirm: {
-              text: 'Ok',
-              btnClass: 'btn-green',
-              action: function(){
-                if(table_type == "Table"){
+        $("#loading_wrapper").hide(); 
+        swal({
+          title: "Infomation !",
+          text: 'Order has been successfully created',
+          confirmButtonColor: "green",
+          confirmButtonText: "Yes!",
+          closeOnConfirm: false,
+        }, function () {
+          if(table_type == "Table"){
                   window.location.href = "/origami/table/" + table_id
                 }
                 else {
                   window.location.href = "/origami/room/" + table_id
-                }
-              }
-            }
-          }
-        });                   
+                }    
+        });                 
       }
     });
   });

app/assets/javascripts/application.js

@@ -11,34 +11,106 @@
 // about supported directives.
 //
 //= require jquery
-//= require jquery_nested_form
-//= require tether
-//= require bootstrap
 //= require jquery_ujs
-//= require turbolinks
+//= require tether
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
+//= require jquery_nested_form
 //= require cable
+//= require tether
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
+//= require momentjs/moment
+//= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker
+//= require multi-select/js/jquery.multi-select.js
+//= require jquery-slimscroll/jquery.slimscroll.js
+//= require bootstrap-notify/bootstrap-notify.js
+//= require node-waves/waves.js
+//= require sweetalert/sweetalert.min.js
+//= require autosize/autosize.js
+//= require jquery-countto/jquery.countTo.js
+//= require raphael/raphael.min
+//= require chartjs/Chart.bundle.js
+//= require fileinput.min
 //= require settings/processing_items
-//= require jquery-ui
-//= require bootstrap-datepicker
-//= require moment
-//= require daterangepicker
-//= require select2
-//= require jquery.datetimepicker
-//= require Chart
+//= require BSBMaterial/admin.js
+//= require BSBMaterial/demo.js
+//= require custom.js
 
+$(document).ready(function() {
+  $('.count-to').countTo();
 
-$(document).on('turbolinks:load', function() {
-  $('.datepicker').datepicker({
-     format : 'dd-mm-yyyy',
-     autoclose: true
+  //Sales count to
+  $('.sales-count-to').countTo({
+      formatter: function (value, options) {
+          return '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ' ').replace('.', ',');
+      }
   });
-  $('.datepicker').attr('ReadOnly','true');
-  $('.datepicker').css('cursor','pointer');
-});
 
- $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
-    $(this).datepicker({"format": "yyyy-M-dd", "weekStart": 1, "autoclose": true});
-  $('.dropdown-toggle').dropdown();
+  $('.datetimepicker').bootstrapMaterialDatePicker({
+      format: 'DD-MM-YYYY - HH:mm',
+      clearButton: true,
+      weekStart: 1
+  });
+
+  $('.datepicker').bootstrapMaterialDatePicker({
+      format: 'DD-MM-YYYY',
+      clearButton: true,
+      weekStart: 1,
+      time: false
+  });
+
+  $('.timepicker').bootstrapMaterialDatePicker({
+      format: 'HH:mm',
+      clearButton: true,
+      date: false
+  });
+  
+  // Image Upload
+  $("#simple_menu_item_image_path").fileinput({
+      previewFileType: "image",
+      allowedFileExtensions: ["jpg", "gif", "png"],
+      browseClass: "btn btn-success",
+      browseLabel: "Pick Image",
+      browseIcon: "<i class=\"fa fa-image\"></i> ",
+      removeClass: "btn btn-danger",
+      removeLabel: "Delete",
+      removeIcon: "<i class=\"fa fa-trash\"></i> ",
+      showUpload: false,
+      // uploadClass: "btn btn-info",
+      // uploadLabel: "Upload",
+      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+      previewTemplates: {
+        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                '</div>\n',
+      }
+  });
+
+  $("#product_image_path").fileinput({
+      previewFileType: "image",
+      allowedFileExtensions: ["jpg", "gif", "png"],
+      browseClass: "btn btn-success",
+      browseLabel: "Pick Image",
+      browseIcon: "<i class=\"fa fa-image\"></i> ",
+      removeClass: "btn btn-danger",
+      removeLabel: "Delete",
+      removeIcon: "<i class=\"fa fa-trash\"></i> ",
+      showUpload: false,
+      // uploadClass: "btn btn-info",
+      // uploadLabel: "Upload",
+      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+      previewTemplates: {
+        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                '</div>\n',
+    }
+  });
+
+// $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
+//   $(this).datepicker({"format": "yyyy-M-dd", "weekStart": 1, "autoclose": true});
+//   $('.dropdown-toggle').dropdown();
+// });
 });
 
 function export_to(path)
@@ -277,3 +349,4 @@ $(document).ready(function(){
 });
 
 
+

app/assets/javascripts/application_backup.js

@@ -0,0 +1,47 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_nested_form
+//= require tether
+//= require bootstrap
+//= require jquery_ujs
+//= require turbolinks
+//= require cable
+//= require settings/processing_items
+//= require jquery-ui
+//= require bootstrap-datepicker
+//= require moment
+//= require daterangepicker
+//= require select2
+//= require jquery.datetimepicker
+
+
+$(document).on('turbolinks:load', function() {
+  $('.datepicker').datepicker({
+     format : 'dd-mm-yyyy',
+     autoclose: true
+  });
+  $('.datepicker').attr('ReadOnly','true');
+  $('.datepicker').css('cursor','pointer');
+});
+
+ $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
+    $(this).datepicker({"format": "yyyy-M-dd", "weekStart": 1, "autoclose": true});
+  $('.dropdown-toggle').dropdown();
+});
+
+function export_to(path)
+{
+  var form_params = $("#frm_report").serialize();
+  window.location = path+"?"+ form_params;
+}

app/assets/javascripts/channels/order_queue_station.js

@@ -34,7 +34,7 @@ App.order_queue_station = App.cable.subscriptions.create('OrderQueueStationChann
 
   		if (oqs_id == items[field]["order_queue_station_id"]) {
 
-  			row ='<div class="card queue_station queue_station_box" data-date="'+items[field]["order_id"]+'">'
+  			row ='<div class="card queue_station animated shake queue_station_box" data-date="'+items[field]["order_id"]+'">'
           +'<strong class="hidden">'+items[field]["order_id"]+'</strong>'
 		  		+'<div class="card-block">'
 		  		+'<h4 class="card-title">'

app/assets/javascripts/custom.js

@@ -0,0 +1,99 @@
+$(document).ready(function() {
+  $('body').bootstrapMaterialDesign();
+
+  var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
+
+  $('#custom-slimscroll').slimScroll({
+    height: height,
+    size: '5px',
+    color: 'rgba(0,0,0,0.5)',
+    alwaysVisible: false,
+    borderRadius: '0',
+    railBorderRadius: '0'
+  });
+
+  $('#order-detail-slimscroll').slimScroll({
+    height: height-180,
+    size: '5px',
+    color: 'rgba(0,0,0,0.5)',
+    alwaysVisible: false,
+    borderRadius: '0',
+    railBorderRadius: '0'
+  });
+
+  $('.delete').click(function(){
+    var method    = $(this).attr('data-method');
+    var url       = $(this).attr('data-ref');
+    var html_text = $(this).siblings( "#delete_text" ).html();
+    //var page = url.substring(url.lastIndexOf('/') + 1);
+    console.log(location.href);
+    swal({
+        title: "Confirmation",
+        text: html_text,
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        html: true
+    }, function (isConfirm) {
+        if (isConfirm) {
+          $.ajax({
+            type: method,
+            url: url ,            
+            success: function(data) {
+              // console.log(data.url);
+              location.href = data.url;
+            }
+         });          
+        } else {
+            swal("Cancelled", "Your imaginary file is safe :)", "error");
+        }
+    });
+  });
+
+  // for Notificaiotn message
+  var placementFrom  = $("#notify_message").attr('data-placement-from');
+  var placementAlign = $("#notify_message").attr('data-placement-align');
+  var animateEnter   = $("#notify_message").attr('data-animate-enter');
+  var animateExit    = $("#notify_message").attr('data-animate-exit');
+  var colorName      = $("#notify_message").attr('data-color-name');
+  var text           = $("#notify_message").attr('data-message');
+
+  if (text != null || colorName != null){
+     showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit); 
+  }
+
+  function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
+    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
+    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
+    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
+    var allowDismiss = true;
+    $.notify({
+        message: text
+    },
+        {
+            type: colorName,
+            allow_dismiss: allowDismiss,
+            newest_on_top: true,
+            timer: 1000,
+            placement: {
+                from: placementFrom,
+                align: placementAlign
+            },
+            animate: {
+                enter: animateEnter,
+                exit: animateExit
+            },
+            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
+            '<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
+            '<span data-notify="icon"></span> ' +
+            '<span data-notify="title">{1}</span> ' +
+            '<span data-notify="message">{2}</span>' +
+            '<div class="progress" data-notify="progressbar">' +
+            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
+            '</div>' +
+            '<a href="{3}" target="{4}" data-notify="url"></a>' +
+            '</div>'
+        });
+   }
+  //end Notificaiotn message
+});

app/assets/javascripts/inventory.js

@@ -0,0 +1,12 @@
+//= require jquery
+//= require tether
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
+//= require jquery_ujs
+//= require turbolinks
+//= require jquery-slimscroll/jquery.slimscroll.js
+//= require node-waves/waves.js
+//= require sweetalert/sweetalert.min.js
+//= require BSBMaterial/admin.js
+//= require BSBMaterial/demo.js
+//= require custom.js

app/assets/javascripts/login.js

@@ -0,0 +1,20 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_nested_form
+//= require tether
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
+//= require node-waves/waves.js
+//= require BSBMaterial/admin.js
+//= require bootstrap-notify/bootstrap-notify.js

app/assets/javascripts/origami.js

@@ -1,25 +1,46 @@
 //= require jquery
 //= require tether
-//= require bootstrap
 //= require jquery_ujs
-//= require turbolinks
+//= require bootstrap/js/popper.min
+//= require bootstrap/js/bootstrap-material-design.min
+//= require momentjs/moment
+//= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker
+//= require jquery-slimscroll/jquery.slimscroll.js
+//= require bootstrap-notify/bootstrap-notify.js
+//= require node-waves/waves.js
+//= require sweetalert/sweetalert.min.js
 //= require cable
-//= require jquery-ui
-//= require bootstrap-datepicker
-//= require jquery.datetimepicker
+//= require turbolinks
+//= require BSBMaterial/admin.js
+//= require BSBMaterial/demo.js
+//= require custom.js
 
-$(document).ready(function(){
-	// auto refresh every 60 seconds
-	// setTimeout(function(){
-	//    window.location.reload(1);
-	// }, 60000);
+$(document).on('turbolinks:load', function() {
+	$('.datetimepicker').bootstrapMaterialDatePicker({
+	  format: 'DD-MM-YYYY - HH:mm',
+	  clearButton: true,
+	  weekStart: 1
+	});
+
+	$('.datepicker').bootstrapMaterialDatePicker({
+	  format: 'DD-MM-YYYY',
+	  clearButton: true,
+	  weekStart: 1,
+	  time: false
+	});
+
+	$('.timepicker').bootstrapMaterialDatePicker({
+	  format: 'HH:mm',
+	  clearButton: true,
+	  date: false
+	});
 
 	// For selected order return
 	var order_status = "";
 	order_status = $(".selected-item").children().find(".orders-order-status").text().substr(0,6).trim();
 
 	// Enable/Disable Button
-	control_button(order_status);
+	//control_button(order_status);
 
 	$(".orders").on('click', function(){
 		$("#order-sub-total").text('');
@@ -35,7 +56,7 @@ $(document).ready(function(){
 		var order_status=$(this).find(".orders-order-status").text().trim();
 
 		// Enable/Disable Button
-		control_button(order_status);
+		//control_button(order_status);
 
 		var customer_id=$(this).find(".customer-id").text();
 		show_customer_details(customer_id);
@@ -109,64 +130,6 @@ $(document).ready(function(){
 	    $(this).addClass('selected-item');
 	});
 
-	// Bill Request
-	$('#request_bills').click(function() {
-		var order_id=$(".selected-item").find(".orders-id").text().substr(0,16);
-		if(order_id!=""){
-			window.location.href = '/origami/' + order_id + '/request_bills'
-		}
-		else {
-			alert("Please select an order!");
-		}
-		return false;
-	});
-
-	// Discount for Payment
-	$('#discount').click(function() {
-		var order_id=$(".selected-item").find(".orders-id").text().substr(0,16);
-		
-		if(order_id!=""){
-			window.location.href = '/origami/' + order_id + '/discount'
-		}
-		else {
-			alert("Please select an order!");
-		}
-
-		return false;
-	});
-
-	// Pay Discount for Payment
-	$("#pay-discount").on('click', function(e){
-		e.preventDefault();
-		var sale_id = $('#sale-id').text();
-		var sale_item_id = $('.selected-item').attr('id').substr(0,16);
-		var sub_total = $('#order-sub-total').text();
-		var grand_total = $('#order-grand-total').text();
-		var discount_type = $('#discount-type').val();
-		var discount_value = $('#discount-amount').val();
-		var discount_amount = discount_value;
-		var ajax_url = "/origami/" + sale_id + "/discount";
-
-		if(sale_item_id != null){
-			ajax_url = "/origami/" + sale_item_id + "/discount";
-			sub_total =  $("#"+sale_item_id).children().find("#item-total-price").text();
-		}
-
-		// For Percentage Discount
-		if(discount_type == 1){			
-			discount_amount=(sub_total*discount_value)/100;
-		}
-
-		var params = {'sale_id': sale_id, 'sale_item_id': sale_item_id, 'grand_total' : grand_total, 'discount_type':discount_type, 'discount_value':discount_value, 'discount_amount':discount_amount};
-		$.ajax({
-			type: "POST",
-		    url: ajax_url,
-		    data: params,
-		    success:function(result){	}
-		});
-	});
-
-
 	// Payment for Bill
 	$('#pay-bill').click(function() {
 		var sale_id=$(".selected-item").find(".orders-id").text().substr(0,16);
@@ -179,123 +142,4 @@ $(document).ready(function(){
 
 		return false;
 	});
-
-	$('#customer').click(function() {
-		var sale = $(".selected-item").find(".orders-id").text().substr(0,16);
-		if (sale.substring(0, 3)=="SAL") {
-			var sale_id = sale
-		}else{
-			var sale_id = $(".selected-item").find(".order-cid").text();
-		}
-		window.location.href = '/origami/'+ sale_id  + "/customers"
-
-		return false;
-	});
-
-	$('#re-print').click(function() {
-		var sale_id = $(".selected-item").find(".orders-id").text().substr(0,16);
-		
-		window.location.href = '/origami/'+ sale_id  + "/reprint"
-
-		return false;
-	});
-
-	function show_customer_details(customer_id){
-
-		if(window.location.pathname.substring(0, 12) == "/origami/SAL"){
-	    	var url = customer_id+"/get_customer/"
-	    }else{
-	    	var url = "origami/"+customer_id+"/get_customer/"
-	    }
-
-		$('.customer_detail').removeClass('hide');
-
-		  //Start Ajax
-		  $.ajax({
-		  	type: "GET",
-		  	url: url,
-		  	data: {},
-		  	dataType: "json",
-		  	success: function(data) {
-		  		$("#customer_name").text(data["customer"].name);
-		  		if (data["response_data"]["data"].length) {
-		  			$.each(data["response_data"]["data"], function (i) {
-			  			if(data["response_data"]["data"][i]["accountable_type"] == "RebateAccount"){
-			  				var balance = data["response_data"]["data"][i]["balance"];
-			  				if (data["response_data"]["status"]==true) {
-			  					$('.rebate_amount').removeClass('hide');
-				  				row =
-				                 '<td class="charges-name">' + data["response_data"]["data"][i]["accountable_type"] +'</td>'
-				                 +'<td class="item-attr">' + balance + '</td>';
-
-				                 $(".rebate_amount").html(row);
-			  				}
-
-			  			}
-			  		});
-		  	    }else{
-		  	    	$('.rebate_amount').addClass('hide');
-		  	    }
-		  	}
-		  });
-		    //End Ajax
-	}
-
-	/* For Receipt - Calculate discount or tax */
-	$('.cashier_number').on('click', function(event){
-	    if(event.handled !== true) {
-	        var original_value=0;
-	        original_value = $('#discount-amount').val();
-
-	        var input_type = $(this).attr("data-type");
-
-	        switch (input_type) {
-	          case 'num':
-					var input_value = $(this).attr("data-value");
-					if (original_value == "0.0"){
-						$('#discount-amount').val(input_value);
-						update_balance();
-					}
-					else{
-						$('#discount-amount').val(original_value + '' + input_value);
-						update_balance();
-					}
-					break;
-
-	          case 'add':
-					var input_value = $(this).attr("data-value");
-					amount = parseInt(input_value);
-					$('#discount-amount').val(amount);
-					$('#discount-type').val(1);
-					update_balance();
-					break;
-
-			  case 'del' :
-			  		var discount_text=$('#discount-amount').val();
-			  		$('#discount-amount').val(discount_text.substr(0,discount_text.length-1));
-					update_balance();
-					break;
-
-	          case 'clr':
-	             $('#discount-amount').val("0.0");
-	             update_balance();
-	          break;
-			}
-
-	      event.handled = true;
-	    } else {
-	        return false;
-	    }
-	});
-
-	$('.discount-item-row').on('click',function(){
-		$('.discount-item-row').removeClass('selected-item');
-		$(this).addClass('selected-item');
-	});
-
-  // $(".orders").on('click', function(){
-  //     var dining_id = $(this).attr("data-id");
-  //     window.location.href = '/origami/' + dining_id;
-  // })
-
 });

app/assets/javascripts/settings/processing_items.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).ready(function() {
   $(".processitems").click(function(event){
     event.preventDefault();
     console.log($(this).data("id"));