diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..d306a65 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,600 @@ +/* +Template: Datum - Responsive Bootstrap 4 Admin Dashboard Template +Author: iqonic.design +Design and Developed by: iqonic.design +NOTE: This file contains the styling for responsive Template. +*/ + +/*---------------------------------------------- +Index Of Script +------------------------------------------------ + +:: Tooltip +:: Fixed Nav +:: Magnific Popup +:: Ripple Effect +:: Sidebar Widget +:: FullScreen +:: Page Loader +:: Counter +:: Progress Bar +:: Page Menu +:: Close navbar Toggle +:: Mailbox +:: chatuser +:: chatuser main +:: Chat start +:: todo Page +:: user toggle +:: Data tables +:: Form Validation +:: Active Class for Pricing Table +:: Flatpicker +:: Scrollbar +:: checkout +:: Datatables +:: image-upload +:: video +:: dark mode +:: Button +:: Pricing tab +:: SVG Animation +:: Date Picker +:: Choies.js +------------------------------------------------ +Index Of Script +----------------------------------------------*/ + +(function(jQuery) { + + + + "use strict"; + + jQuery(document).ready(function() { + + /*--------------------------------------------------------------------- + Tooltip + -----------------------------------------------------------------------*/ + jQuery('[data-toggle="popover"]').popover(); + jQuery('[data-toggle="tooltip"]').tooltip(); + + /*--------------------------------------------------------------------- + Fixed Nav + -----------------------------------------------------------------------*/ + + $(window).on('scroll', function () { + if ($(window).scrollTop() > 0) { + $('.iq-top-navbar').addClass('fixed'); + } else { + $('.iq-top-navbar').removeClass('fixed'); + } + }); + + $(window).on('scroll', function () { + if ($(window).scrollTop() > 0) { + $('.white-bg-menu').addClass('sticky-menu'); + } else { + $('.white-bg-menu').removeClass('sticky-menu'); + } + }); + + + /*--------------------------------------------------------------------- + Sidebar Widget + -----------------------------------------------------------------------*/ + + jQuery(document).on("click", '.side-menu > li > a', function() { + jQuery('.side-menu > li > a').parent().removeClass('active'); + jQuery(this).parent().addClass('active'); + }); + + // Active menu + var parents = jQuery('li.active').parents('.submenu.collapse'); + + parents.addClass('show'); + + + parents.parents('li').addClass('active'); + jQuery('li.active > a[aria-expanded="false"]').attr('aria-expanded', 'true'); + + /*--------------------------------------------------------------------- + FullScreen + -----------------------------------------------------------------------*/ + jQuery(document).on('click', '.full-screen', function() { + let elem = jQuery(this); + elem.find('i').addClass('d-none'); + elem.find('i').addClass('d-none'); + if (!document.fullscreenElement && + !document.mozFullScreenElement && // Mozilla + !document.webkitFullscreenElement && // Webkit-Browser + !document.msFullscreenElement) { // MS IE ab version 11 + elem.find('.min').removeClass('d-none'); + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } else if (document.documentElement.msRequestFullscreen) { + document.documentElement.msRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } + } else { + elem.find('.max').removeClass('d-none'); + if (document.cancelFullScreen) { + document.cancelFullScreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + } + }); + + + /*--------------------------------------------------------------------- + Page Loader + -----------------------------------------------------------------------*/ + jQuery("#load").fadeOut(); + jQuery("#loading").delay().fadeOut(""); + + + /*--------------------------------------------------------------------- + Counter + -----------------------------------------------------------------------*/ + if (window.counterUp !== undefined) { + const counterUp = window.counterUp["default"] + const $counters = $(".counter"); + $counters.each(function (ignore, counter) { + var waypoint = new Waypoint( { + element: $(this), + handler: function() { + counterUp(counter, { + duration: 1000, + delay: 10 + }); + this.destroy(); + }, + offset: 'bottom-in-view', + } ); + }); + } + + + /*--------------------------------------------------------------------- + Progress Bar + -----------------------------------------------------------------------*/ + jQuery('.iq-progress-bar > span').each(function() { + let progressBar = jQuery(this); + let width = jQuery(this).data('percent'); + progressBar.css({ + 'transition': 'width 2s' + }); + setTimeout(function() { + progressBar.css('width', width + '%'); + }, 100); + }); + + jQuery('.progress-bar-vertical > span').each(function () { + let progressBar = jQuery(this); + let height = jQuery(this).data('percent'); + progressBar.css({ + 'transition': 'height 2s' + }); + setTimeout(function () { + progressBar.css('height', height + '%'); + }, 100); + }); + + + /*--------------------------------------------------------------------- + Page Menu + -----------------------------------------------------------------------*/ + jQuery(document).on('click', '.wrapper-menu', function() { + jQuery(this).toggleClass('open'); + }); + + jQuery(document).on('click', ".wrapper-menu", function() { + jQuery("body").toggleClass("sidebar-main"); + }); + + + /*--------------------------------------------------------------------- + Close navbar Toggle + -----------------------------------------------------------------------*/ + + jQuery('.close-toggle').on('click', function () { + jQuery('.h-collapse.navbar-collapse').collapse('hide'); + }); + + /*--------------------------------------------------------------------- + user toggle + -----------------------------------------------------------------------*/ + jQuery(document).on('click', '.user-toggle', function() { + jQuery(this).parent().addClass('show-data'); + }); + + jQuery(document).on('click', ".close-data", function() { + jQuery('.user-toggle').parent().removeClass('show-data'); + }); + jQuery(document).on("click", function(event){ + var $trigger = jQuery(".user-toggle"); + if($trigger !== event.target && !$trigger.has(event.target).length){ + jQuery(".user-toggle").parent().removeClass('show-data'); + } + }); + + /*--------------------------------------------------------------------- + Data tables + -----------------------------------------------------------------------*/ + if($.fn.DataTable){ + const table = $('.data-table').DataTable(); + } + + + /*--------------------------------------------------------------------- + Form Validation + -----------------------------------------------------------------------*/ + + // Example starter JavaScript for disabling form submissions if there are invalid fields + window.addEventListener('load', function() { + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.getElementsByClassName('needs-validation'); + // Loop over them and prevent submission + var validation = Array.prototype.filter.call(forms, function(form) { + form.addEventListener('submit', function(event) { + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); + }); + }, false); + + /*--------------------------------------------------------------------- + Active Class for Pricing Table + -----------------------------------------------------------------------*/ + jQuery("#my-table tr th").click(function () { + jQuery('#my-table tr th').children().removeClass('active'); + jQuery(this).children().addClass('active'); + jQuery("#my-table td").each(function () { + if (jQuery(this).hasClass('active')) { + jQuery(this).removeClass('active') + } + }); + var col = jQuery(this).index(); + jQuery("#my-table tr td:nth-child(" + parseInt(col + 1) + ")").addClass('active'); + }); + + + /*--------------------------------------------------------------------- + Scrollbar + -----------------------------------------------------------------------*/ + + jQuery('.data-scrollbar').each(function () { + var attr = $(this).attr('data-scroll'); + if (typeof attr !== typeof undefined && attr !== false){ + let Scrollbar = window.Scrollbar; + var a = jQuery(this).data('scroll'); + Scrollbar.init(document.querySelector('div[data-scroll= "' + a + '"]')); + } + }); + + + /*--------------------------------------------------------------------- + image-upload + -----------------------------------------------------------------------*/ + + $('.form_gallery-upload').on('change', function() { + var length = $(this).get(0).files.length; + var galleryLabel = $(this).attr('data-name'); + + if( length > 1 ){ + $(galleryLabel).text(length + " files selected"); + } else { + $(galleryLabel).text($(this)[0].files[0].name); + } + }); + + /*--------------------------------------------------------------------- + video + -----------------------------------------------------------------------*/ + $(document).ready(function(){ + $('.form_video-upload input').change(function () { + $('.form_video-upload p').text(this.files.length + " file(s) selected"); + }); + }); + /*--------------------------------------------------------------------- + dark mode + -----------------------------------------------------------------------*/ + const urlParams = new URLSearchParams(window.location.search); + const mode = urlParams.get('dark'); + if (mode !== null) { + $('body').removeClass('sidebar-dark', 'sidebar-light') + switch (mode) { + case "true": + $('body').addClass('dark') + break; + case "false": + $('body').removeClass('sidebar-dark', 'sidebar-light') + break; + default: + $('body').removeClass('sidebar-dark').removeClass('sidebar-light') + break; + } + } + + + /*--------------------------------------------------------------------- + Button + -----------------------------------------------------------------------*/ + + jQuery('.qty-btn').on('click',function(){ + var id = jQuery(this).attr('id'); + + var val = parseInt(jQuery('#quantity').val()); + + if(id == 'btn-minus') + { + if(val != 0) + { + jQuery('#quantity').val(val-1); + } + else + { + jQuery('#quantity').val(0); + } + + } + else + { + jQuery('#quantity').val(val+1); + } + }); + + }); + + + $(document).on('click', '[data-toggel-extra="side-nav"]', function () { + const pannel = $(this).attr('data-expand-extra') + $(pannel).addClass('active') + }) + + $(document).on('click', '[data-toggel-extra="side-nav-close"]', function () { + const pannel = $(this).attr('data-expand-extra') + $(pannel).removeClass('active') + }) + + $(document).on('click', '[data-toggel-extra="right-sidenav"]', function () { + const target = $(this).data('target') + $(target).addClass('active') + }) + + $(document).on('click', '[data-extra-dismiss="right-sidenav"]', function () { + $(this).closest('.right-sidenav').removeClass('active') + }) + + $(document).on('click', '[data-toggle="end-call"]', function(){ + $(this).closest('.tab-pane').removeClass('active').removeClass('show') + $($(this).attr('data-target')).tab('show') + $('.chat-action').find('[data-toggle="tab"]').removeClass('active') + }) + + $(document).on('click', '[data-toggle-extra="tab"]', function () { + const target = $(this).attr('data-target-extra') + $('[data-toggle-extra="tab-content"]').removeClass('active') + $(target).addClass('active') + $(this).parent().find('.active').removeClass('active') + $(this).addClass('active') + }) + + $('emoji-picker').on('emoji-click', function(e){ + $(e.target.dataset.targetInput).val($(e.target.dataset.targetInput).val()+e.detail.unicode) + }) + + $('.dropdown-menu').on('click', function(event){ + event.stopPropagation(); + }); + + var board = $('.draggable-item'); + + var selector = []; + if(board.length > 0 ) + { + for(var i = 0 ; i < board.length ; i++) { + selector.push(document.querySelector('#draggable-item-'+i)); + selector.push(document.querySelector('#list-draggable-item-'+i)); + } + } + dragula( selector ).on('drop', function(el) { + $(el).addClass(' animate__animated animate__rubberBand') + setTimeout(function () { + $(el).removeClass(' animate__animated animate__rubberBand') + }, 1000) + }); + + // calender 1 js + var calendar1; + if (jQuery('#calendar1').length) { + var calendarEl = document.getElementById('calendar1'); + + calendar1 = new FullCalendar.Calendar(calendarEl, { + selectable: true, + plugins: ["timeGrid", "dayGrid", "list", "interaction"], + timeZone: "UTC", + defaultView: "dayGridMonth", + contentHeight: "auto", + eventLimit: true, + dayMaxEvents: 4, + header: { + left: "prev,next today", + center: "title", + right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek" + }, + dateClick: function (info) { + $('#schedule-start-date').val(info.dateStr) + $('#schedule-end-date').val(info.dateStr) + $('#date-event').modal('show') + }, + events: [ + { + title: 'Click for Google', + url: 'http://google.com/', + start: moment(new Date(), 'YYYY-MM-DD').add(-20, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#4731b6' + }, + { + title: 'All Day Event', + start: moment(new Date(), 'YYYY-MM-DD').add(-18, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#465af7' + }, + { + title: 'Long Event', + start: moment(new Date(), 'YYYY-MM-DD').add(-16, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + end: moment(new Date(), 'YYYY-MM-DD').add(-13, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#7858d7' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(-14, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#465af7' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(-12, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#5baa73' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(-10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#01041b' + }, + { + title: 'Birthday Party', + start: moment(new Date(), 'YYYY-MM-DD').add(-8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#4731b6' + }, + { + title: 'Meeting', + start: moment(new Date(), 'YYYY-MM-DD').add(-6, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#15ca92' + }, + { + title: 'Birthday Party', + start: moment(new Date(), 'YYYY-MM-DD').add(-5, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#f4a965' + }, + { + title: 'Birthday Party', + start: moment(new Date(), 'YYYY-MM-DD').add(-2, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#ea643f' + }, + + { + title: 'Meeting', + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#15ca92' + }, + { + title: 'Click for Google', + url: 'http://google.com/', + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T06:30:00.000Z', + color: '#4731b6' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T07:30:00.000Z', + color: '#5baa73' + }, + { + title: 'Birthday Party', + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T08:30:00.000Z', + color: '#f4a965' + }, + { + title: 'Doctor Meeting', + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#f4a965' + }, + { + title: 'All Day Event', + start: moment(new Date(), 'YYYY-MM-DD').add(1, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#465af7' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#465af7' + }, + { + groupId: '999', + title: 'Repeating Event', + start: moment(new Date(), 'YYYY-MM-DD').add(10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z', + color: '#5baa73' + } + ] + }); + calendar1.render(); + + $(document).on("submit", "#submit-schedule", function (e) { + e.preventDefault() + const title = $(this).find('#schedule-title').val() + const startDate = moment(new Date($(this).find('#schedule-start-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z' + const endDate = moment(new Date($(this).find('#schedule-end-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z' + const color = $(this).find('#schedule-color').val() + const event = { + title: title, + start: startDate || '2020-12-22T02:30:00', + end: endDate || '2020-12-12T14:30:00', + color: color || '#7858d7' + } + $(this).closest('#date-event').modal('hide') + calendar1.addEvent(event) + }) + } + + const progressBar = document.getElementsByClassName('circle-progress') + Array.from(progressBar, (elem) => { + const minValue = elem.getAttribute('data-min-value') + const maxValue = elem.getAttribute('data-max-value') + const value = elem.getAttribute('data-value') + const type = elem.getAttribute('data-type') + if (elem.getAttribute('id') !== '' && elem.getAttribute('id') !== null) { + new CircleProgress('#'+elem.getAttribute('id'), { + min: minValue, + max: maxValue, + value: value, + textFormat: type, + }); + } + }) + /*--------------------------------------------------------------------- + Vanila Datepicker + -----------------------------------------------------------------------*/ + const datepickers = document.querySelectorAll('.vanila-datepicker') + Array.from(datepickers, (elem) => { + new Datepicker(elem) + }) + const daterangePickers = document.querySelectorAll('.vanila-daterangepicker') + Array.from(daterangePickers, (elem) => { + new DateRangePicker(elem) + }) + + /*--------------------------------------------------------------------- + Choies.js + -----------------------------------------------------------------------*/ + const choies = document.querySelectorAll('.choicesjs') + Array.from(choies,(elem) => { + new Choices(elem, { + removeItemButton: true, + }) + }) +})(jQuery); diff --git a/static/js/sweetalert.js b/static/js/sweetalert.js new file mode 100644 index 0000000..a51cdf3 --- /dev/null +++ b/static/js/sweetalert.js @@ -0,0 +1,138 @@ + + $(document).ready(function () { + $('#basic').on('click', function () { + Swal.fire('Hello! This is a Basic Message.') + }); + $('#basic-title').on('click', function () { + Swal.fire( + 'The Internet?', + 'That thing is still around?', + 'question' + ) + }); + $('#success').on('click', function () { + Swal.fire({ + icon: 'success', + title: 'Your work has been saved', + showConfirmButton: false, + }) + }); + $('#info').on('click', function () { + Swal.fire({ + icon: 'info', + title: 'Good Job!', + showConfirmButton: false, + }) + }); + $('#warning').on('click', function () { + Swal.fire({ + icon: 'warning', + title: 'Changes are not saved', + showConfirmButton: false, + + }) + }); + $('#danger').on('click', function () { + Swal.fire({ + icon: 'error', + title: 'OOps!!', + text: 'Something went Wrong', + showConfirmButton: false, + }) + }); + $('#confirmation').on('click', function () { + Swal.fire({ + title: "Are you sure?", + text: "Once deleted, you will not be able to recover this imaginary file!", + icon: "warning", + buttons: true, + dangerMode: true, + }) + .then((willDelete) => { + if (willDelete) { + Swal.fire("Poof! Your imaginary file has been deleted!", { + icon: "success", + }); + } else { + Swal.fire("Your imaginary file is safe!"); + } + }); + }); + $('#custom-buttons').on('click', function () { + Swal.fire("A wild Pikachu appeared! What do you want to do?", { + buttons: { + cancel: "Run away!", + catch: { + text: "Throw Pokéball!", + value: "catch", + }, + defeat: true, + }, + }) + .then((value) => { + switch (value) { + + case "defeat": + Swal.fire("Pikachu fainted! You gained 500 XP!"); + break; + + case "catch": + Swal.fire("Gotcha!", "Pikachu was caught!", "success"); + break; + + default: + Swal.fire("Got away safely!"); + } + }); + }); + $('#ajax-request').on('click', function () { + Swal.fire({ + text: 'Search for a movie. e.g. "La La Land".', + content: "input", + button: { + text: "Search!", + closeModal: false, + }, + }) + .then(name => { + if (!name) throw null; + + return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`); + }) + .then(results => { + return results.json(); + }) + .then(json => { + const movie = json.results[0]; + + if (!movie) { + return Swal.fire("No movie was found!"); + } + + const name = movie.trackName; + const imageURL = movie.artworkUrl100; + + Swal.fire({ + title: "Top result:", + text: name, + icon: imageURL, + }); + }) + .catch(err => { + if (err) { + Swal.fire("Oh noes!", "The AJAX request failed!", "error"); + } else { + Swal.fire.stopLoading(); + Swal.fire.close(); + } + }); + }); + $('#form-input').on('click', function () { + Swal.fire("Write something here:", { + content: "input", + }) + .then((value) => { + Swal.fire(`You typed: ${value}`); + }); + }); + }); \ No newline at end of file