panda/bettafish-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【Bootstrap4】Bootstrap 4管理仪表板模板，用于管理面板和仪表板以及添加页面监听器

Browse Source
This commit is contained in:
戒酒的李白
2024-07-03 14:35:11 +08:00
parent ad11069b05
commit ff7cef5dd5
2 changed files with 738 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app.js
+600
View File
@@ -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);
static/js/sweetalert.js
+138
View File
@@ -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}`);
});
});
});