first commit

This commit is contained in:
2025-09-01 15:06:58 +02:00
commit d8b89fc4fe
5702 changed files with 1021992 additions and 0 deletions
+577
View File
@@ -0,0 +1,577 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Version: 1.0.0
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Main Js File
*/
(function () {
'use strict';
var language = localStorage.getItem('language');
// Default Language
var default_lang = 'en';
function initLanguage() {
// Set new language
if (language != "null" && language !== default_lang)
setLanguage(language);
var languages = document.getElementsByClassName("language");
languages && languages.forEach(function (dropdown) {
dropdown.addEventListener('click', function (event) {
setLanguage(dropdown.getAttribute('data-lang'));
});
});
}
function setLanguage(lang) {
document.getElementsByClassName("header-lang-img").forEach(function (el) {
if (el) {
switch (lang) {
case "eng":
el.src = "assets/images/flags/us.jpg";
break;
case "sp":
el.src = "assets/images/flags/spain.jpg";
break;
case "gr":
el.src = "assets/images/flags/germany.jpg";
break;
case "it":
el.src = "assets/images/flags/italy.jpg";
break;
case "ru":
el.src = "assets/images/flags/russia.jpg";
break;
default:
el.src = "assets/images/flags/us.jpg";
break;
}
localStorage.setItem('language', lang);
language = localStorage.getItem('language');
getLanguage();
}
});
}
// Multi language setting
function getLanguage() {
(language == null) ? setLanguage(default_lang) : false;
var request = new XMLHttpRequest();
// Instantiating the request object
request.open("GET", '/assets/lang/' + language + '.json');
// Defining event listener for readystatechange event
request.onreadystatechange = function () {
// Check if the request is compete and was successful
if (this.readyState === 4 && this.status === 200) {
var data = JSON.parse(this.responseText);
Object.keys(data).forEach(function (key) {
var elements = document.querySelectorAll("[data-key='" + key + "']");
elements.forEach(function (elem) {
elem.textContent = data[key];
});
});
}
};
// Sending the request to the server
request.send();
}
function initMetisMenu() {
// MetisMenu js
document.addEventListener("DOMContentLoaded", function (event) {
if (document.getElementById("side-menu"))
new MetisMenu('#side-menu');
});
}
function initCounterNumber() {
var counter = document.querySelectorAll('.counter-value');
var speed = 250; // The lower the slower
counter && counter.forEach(function (counter_value) {
function updateCount() {
var target = +counter_value.getAttribute('data-target');
var count = +counter_value.innerText;
var inc = target / speed;
if (inc < 1) {
inc = 1;
}
// Check if target is reached
if (count < target) {
// Add inc to count and output in counter_value
counter_value.innerText = (count + inc).toFixed(0);
// Call function every ms
setTimeout(updateCount, 1);
} else {
counter_value.innerText = target;
}
};
updateCount();
});
}
function initLeftMenuCollapse() {
var currentSIdebarSize = document.body.getAttribute('data-sidebar-size');
window.onload = function () {
if (window.innerWidth >= 1024 && window.innerWidth <= 1366) {
document.body.setAttribute('data-sidebar-size', 'sm');
updateRadio('sidebar-size-small');
}
};
var verticalButton = document.getElementsByClassName("vertical-menu-btn");
for (var i = 0; i < verticalButton.length; i++) {
(function (index) {
verticalButton[index] && verticalButton[index].addEventListener('click', function (event) {
event.preventDefault();
document.body.classList.toggle('sidebar-enable');
if (window.innerWidth >= 992) {
if (currentSIdebarSize == null) {
(document.body.getAttribute('data-sidebar-size') == null || document.body.getAttribute('data-sidebar-size') == "lg") ? document.body.setAttribute('data-sidebar-size', 'sm') : document.body.setAttribute('data-sidebar-size', 'lg');
} else if (currentSIdebarSize == "md") {
(document.body.getAttribute('data-sidebar-size') == "md") ? document.body.setAttribute('data-sidebar-size', 'sm') : document.body.setAttribute('data-sidebar-size', 'md');
} else {
(document.body.getAttribute('data-sidebar-size') == "sm") ? document.body.setAttribute('data-sidebar-size', 'lg') : document.body.setAttribute('data-sidebar-size', 'sm');
}
} else {
initMenuItemScroll();
}
});
})(i);
}
}
function initActiveMenu() {
setTimeout(function () {
// === following js will activate the menu in left side bar based on url ====
var menuItems = document.querySelectorAll("#sidebar-menu a");
menuItems && menuItems.forEach(function (item) {
var pageUrl = window.location.href.split(/[?#]/)[0];
if (item.href == pageUrl) {
item.classList.add("active");
var parent = item.parentElement;
if (parent && parent.id !== "side-menu") {
parent.classList.add("mm-active");
var parent2 = parent.parentElement; // ul .
if (parent2 && parent2.id !== "side-menu") {
parent2.classList.add("mm-show"); // ul tag
if (parent2.classList.contains('mm-collapsing')) {
console.log('has mm-collapsing');
}
var parent3 = parent2.parentElement; // li tag
if (parent3 && parent3.id !== "side-menu") {
parent3.classList.add("mm-active"); // li
var parent4 = parent3.parentElement; // ul
if (parent4 && parent4.id !== "side-menu") {
parent4.classList.add("mm-show"); // ul
var parent5 = parent4.parentElement;
if (parent5 && parent5.id !== "side-menu") {
parent5.classList.add("mm-active"); // li
}
}
}
}
}
}
});
}, 0);
}
function initMenuItemScroll() {
setTimeout(function () {
var sidebarMenu = document.getElementById("side-menu");
if (sidebarMenu) {
var activeMenu = sidebarMenu.querySelector(".mm-active .active");
var offset = (activeMenu) ? activeMenu.offsetTop : 0;
if (offset > 300) {
offset = offset - 100;
var verticalMenu = (document.getElementsByClassName("vertical-menu")) ? document.getElementsByClassName("vertical-menu")[0] : '';
if (verticalMenu && verticalMenu.querySelector(".simplebar-content-wrapper")) {
setTimeout(function () {
verticalMenu.querySelector(".simplebar-content-wrapper").scrollTop = offset;
}, 0);
}
}
}
}, 0);
}
function initHoriMenuActive() {
var navlist = document.querySelectorAll(".navbar-nav a");
navlist && navlist.forEach(function (item) {
var pageUrl = window.location.href.split(/[?#]/)[0];
if (item.href == pageUrl) {
item.classList.add("active");
var parent = item.parentElement;
if (parent) {
parent.classList.add("active"); // li
var parent2 = parent.parentElement;
parent2.classList.add("active"); // li
var parent3 = parent2.parentElement;
if (parent3) {
parent3.classList.add("active"); // li
var parent4 = parent3.parentElement;
if (parent4.closest("li"))
parent4.closest("li").classList.add("active");
if (parent4) {
parent4.classList.add("active"); // li
var parent5 = parent4.parentElement;
if (parent5) {
parent5.classList.add("active"); // li
var parent6 = parent5.parentElement;
if (parent6) {
parent6.classList.add("active"); // li
}
}
}
}
}
}
});
}
function initFullScreen() {
var fullscreenBtn = document.querySelector('[data-toggle="fullscreen"]');
fullscreenBtn && fullscreenBtn.addEventListener('click', function (e) {
e.preventDefault();
document.body.classList.toggle('fullscreen-enable');
if (!document.fullscreenElement && /* alternative standard method */ !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
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.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
});
document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener("webkitfullscreenchange", exitHandler);
document.addEventListener("mozfullscreenchange", exitHandler);
function exitHandler() {
if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
document.body.classList.remove('fullscreen-enable');
}
}
}
function initDropdownMenu() {
if (document.getElementById("topnav-menu-content")) {
var elements = document.getElementById("topnav-menu-content").getElementsByTagName("a");
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function (elem) {
if (elem.target.getAttribute("href") === "#") {
elem.target.parentElement.classList.toggle("active");
elem.target.nextElementSibling.classList.toggle("show");
}
};
}
window.addEventListener("resize", updateMenu);
}
}
function updateMenu() {
var elements = document.getElementById("topnav-menu-content").getElementsByTagName("a");
for (var i = 0, len = elements.length; i < len; i++) {
if (elements[i].parentElement.getAttribute("class") === "nav-item dropdown active") {
elements[i].parentElement.classList.remove("active");
elements[i].nextElementSibling.classList.remove("show");
}
}
}
function initComponents() {
// tooltip
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// toast
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl);
});
}
function fadeOutEffect(elem, delay) {
var fadeTarget = document.getElementById(elem);
fadeTarget.style.display = 'block';
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.2;
} else {
clearInterval(fadeEffect);
fadeTarget.style.display = 'none';
}
}, 200);
}
function initPreloader() {
window.onload = function () {
if (document.getElementById("preloader")) {
fadeOutEffect('pre-status', 300);
fadeOutEffect('preloader', 400);
}
};
}
function initSettings() {
// Eva Icons
eva.replace();
if (window.sessionStorage) {
var alreadyVisited = sessionStorage.getItem("is_visited");
if (!alreadyVisited) {
sessionStorage.setItem("is_visited", "layout-direction-ltr");
} else {
var value = document.querySelector("#" + alreadyVisited);
if (value !== null) {
value.checked = true;
changeDirection(alreadyVisited);
}
}
}
var body = document.getElementsByTagName("body")[0];
if (body.hasAttribute("data-layout") && body.getAttribute("data-layout") == "horizontal") {
updateRadio("layout-horizontal");
document.getElementById("sidebar-setting").style.display = "none";
document.getElementsByClassName("vertical-menu")[0].style.display = "none";
document.getElementsByClassName("ishorizontal-topbar")[0].style.display = "block";
document.getElementsByClassName("isvertical-topbar")[0].style.display = "none";
document.getElementsByClassName("topnav")[0].style.display = "block";
document.getElementsByClassName("footer")[0].style.display = "block";
if (body.hasAttribute("data-topbar") == "light") {
updateRadio('topbar-color-light');
document.body.setAttribute("data-topbar", "light");
} else if (body.hasAttribute("data-topbar") == "dark") {
updateRadio('topbar-color-dark');
document.body.setAttribute("data-topbar", "dark");
}
document.body.removeAttribute("data-sidebar");
} else {
// document.body.setAttribute("data-sidebar", "light");
document.getElementsByClassName("isvertical-topbar")[0].style.display = "block";
updateRadio("layout-vertical");
document.getElementsByClassName("topnav")[0].style.display = "none";
// document.getElementsByClassName("vertical-menu")[0].style.display =
// "block";
document.getElementsByClassName("ishorizontal-topbar")[0].style.display = "none";
}
}
function changeDirection(id) {
if (document.getElementById("layout-direction-ltr").checked == true && id === "layout-direction-ltr") {
document.getElementsByTagName("html")[0].removeAttribute("dir");
document.getElementById("layout-direction-rtl").checked = false;
document.getElementById('bootstrap-style').setAttribute('href', 'assets/css/bootstrap.min.css');
document.getElementById('app-style').setAttribute('href', 'assets/css/app.min.css');
sessionStorage.setItem("is_visited", "layout-direction-ltr");
} else if (document.getElementById("layout-direction-rtl").checked == true && id === "layout-direction-rtl") {
document.getElementById("layout-direction-ltr").checked = false;
document.getElementById('bootstrap-style').setAttribute('href', 'assets/css/bootstrap-rtl.min.css');
document.getElementById('app-style').setAttribute('href', 'assets/css/app-rtl.min.css');
document.getElementsByTagName("html")[0].setAttribute("dir", "rtl");
sessionStorage.setItem("is_visited", "layout-direction-rtl");
}
}
function updateRadio(radioId) {
if (document.getElementById(radioId))
document.getElementById(radioId).checked = true;
}
function layoutSetting() {
var body = document.body;
var rightSidebar = document.getElementsByClassName("right-bar-toggle");
rightSidebar.forEach(function (element) {
element.addEventListener('click', function (e) {
body.classList.toggle('right-bar-enabled');
});
});
body.addEventListener('click', function (e) {
if (e.target.parentElement.classList.contains("right-bar-toggle-close")) {
document.body.classList.remove('right-bar-enabled');
return;
} else if (e.target.closest('.right-bar-toggle, .right-bar')) {
return;
}
document.body.classList.remove('right-bar-enabled');
return;
});
var body = document.getElementsByTagName("body")[0];
if (body.hasAttribute("data-layout") && body.getAttribute("data-layout") == "horizontal") {
updateRadio('layout-horizontal');
if (body.hasAttribute("data-topbar") == "light") {
updateRadio('topbar-color-light');
document.body.setAttribute("data-topbar", "light");
} else if (body.hasAttribute("data-topbar") == "dark") {
updateRadio('topbar-color-dark');
document.body.setAttribute("data-topbar", "dark");
}
document.getElementById('sidebar-setting').style.display = "none";
document.body.removeAttribute("data-sidebar");
// (body.hasAttribute("data-topbar") ? body.removeAttribute("data-topbar") : body.setAttribute("data-topbar", ""));
} else {
updateRadio('layout-vertical');
document.getElementById('sidebar-setting').style.display = "block";
}
(body.hasAttribute("data-layout-mode") && body.getAttribute("data-layout-mode") == "dark") ? updateRadio('layout-mode-dark') : updateRadio('layout-mode-light');
(body.hasAttribute("data-layout-size") && body.getAttribute("data-layout-size") == "boxed") ? updateRadio('layout-width-boxed') : updateRadio('layout-width-fluid');
(body.hasAttribute("data-layout-scrollable") && body.getAttribute("data-layout-scrollable") == "true") ? updateRadio('layout-position-scrollable') : updateRadio('layout-position-fixed');
(body.hasAttribute("data-topbar") && body.getAttribute("data-topbar") == "dark") ? updateRadio('topbar-color-dark') : updateRadio('topbar-color-light');
(body.hasAttribute("data-sidebar-size") && body.getAttribute("data-sidebar-size") == "sm") ? updateRadio('sidebar-size-small') : (body.hasAttribute("data-sidebar-size") && body.getAttribute("data-sidebar-size") == "md") ? updateRadio('sidebar-size-compact') : updateRadio('sidebar-size-default');
(body.hasAttribute("data-sidebar") && body.getAttribute("data-sidebar") == "brand") ? updateRadio('sidebar-color-brand') : (body.hasAttribute("data-sidebar") && body.getAttribute("data-sidebar") == "dark") ? updateRadio('sidebar-color-dark') : updateRadio('sidebar-color-light');
(document.getElementsByTagName("html")[0].hasAttribute("dir") && document.getElementsByTagName("html")[0].getAttribute("dir") == "rtl") ? updateRadio('layout-direction-rtl') : updateRadio('layout-direction-ltr');
// on layout change
document.querySelectorAll("input[name='layout'").forEach(function (input) {
input.addEventListener("change", function (e) {
if (e && e.target && e.target.value == "vertical") {
updateRadio("layout-vertical");
updateRadio('topbar-color-light');
document.body.setAttribute("data-layout", "vertical");
document.body.setAttribute("data-topbar", "light");
document.getElementsByClassName("isvertical-topbar")[0].style.display = "block";
document.getElementsByClassName("ishorizontal-topbar")[0].style.display = "none";
document.getElementsByClassName("vertical-menu")[0].style.display = "block";
document.getElementById("sidebar-setting").style.display = "block";
document.getElementsByClassName("topnav")[0].style.display = "none";
if (window.innerWidth <= 992) {
document.getElementsByClassName("vertical-menu")[0].removeAttribute('style');
}
document.getElementsByClassName("footer")[0].style.display = "none";
} else {
updateRadio("layout-horizontal");
updateRadio('topbar-color-light');
document.body.setAttribute('data-topbar', 'light');
document.body.setAttribute("data-layout", "horizontal");
document.body.removeAttribute("data-sidebar");
document.getElementById("sidebar-setting").style.display = "none";
document.getElementsByClassName("vertical-menu")[0].style.display =
"none";
document.getElementsByClassName("ishorizontal-topbar")[0].style.display = "block";
document.getElementsByClassName("isvertical-topbar")[0].style.display = "none";
document.getElementsByClassName("topnav")[0].style.display = "block";
document.getElementsByClassName("footer")[0].style.display = "block";
}
});
});
// on layout light mode change
document.querySelectorAll("input[name='layout-mode']").forEach(function (input) {
input.addEventListener('change', function (e) {
if (e && e.target && e.target.value) {
if (e.target.value == "light") {
document.body.setAttribute('data-layout-mode', 'light');
document.body.setAttribute('data-topbar', 'light');
document.body.setAttribute('data-sidebar', 'light');
(body.hasAttribute("data-layout") && body.getAttribute("data-layout") == "horizontal") ? '' : document.body.setAttribute('data-sidebar', 'light');
updateRadio('topbar-color-light');
updateRadio('sidebar-color-light');
} else if(e.target.value == "dark"){
document.body.setAttribute('data-layout-mode', 'dark');
document.body.setAttribute('data-topbar', 'dark');
document.body.setAttribute('data-sidebar', 'dark');
(body.hasAttribute("data-layout") && body.getAttribute("data-layout") == "horizontal") ? '' : document.body.setAttribute('data-sidebar', 'dark');
updateRadio('topbar-color-dark');
// updateRadio('sidebar-color-dark');
} else if(e.target.value == "bordered") {
document.body.setAttribute('data-layout-mode', 'bordered');
}
}
});
});
// on layout direction change
document.querySelectorAll("input[name='layout-direction']").forEach(function (input) {
input.addEventListener('change', function (e) {
if (e && e.target && e.target.value) {
if (e.target.value == "ltr") {
document.getElementsByTagName("html")[0].removeAttribute("dir");
document.getElementById('bootstrap-style').setAttribute('href', 'assets/css/bootstrap.min.css');
document.getElementById('app-style').setAttribute('href', 'assets/css/app.min.css');
sessionStorage.setItem("is_visited", "layout-direction-ltr");
} else {
document.getElementById('bootstrap-style').setAttribute('href', 'assets/css/bootstrap-rtl.min.css');
document.getElementById('app-style').setAttribute('href', 'assets/css/app-rtl.min.css');
document.getElementsByTagName("html")[0].setAttribute("dir", "rtl");
sessionStorage.setItem("is_visited", "layout-direction-rtl");
}
}
});
});
}
function initCheckAll() {
var checkAll = document.getElementById("checkAll");
if (checkAll) {
checkAll.onclick = function () {
var checkboxes = document.querySelectorAll('.table-check input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
};
}
}
function init() {
initPreloader();
initSettings();
initMetisMenu();
initCounterNumber();
initLeftMenuCollapse();
initActiveMenu();
initHoriMenuActive();
initFullScreen();
initDropdownMenu();
initComponents();
initLanguage();
layoutSetting();
initMenuItemScroll();
initCheckAll();
}
init();
})();
Binary file not shown.
@@ -0,0 +1,23 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Alert init js
*/
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'primary')
})
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,209 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Calendar init js
*/
document.addEventListener("DOMContentLoaded", function () {
var addEvent = new bootstrap.Modal(document.getElementById('event-modal'), {
keyboard: false
})
document.getElementById('event-modal');
var modalTitle = document.getElementById('modal-title');
var formEvent = document.getElementById('form-event');
var selectedEvent = null;
var newEventData = null;
var forms = document.getElementsByClassName('needs-validation');
var selectedEvent = null;
var newEventData = null;
var eventObject = null;
/* initialize the calendar */
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var Draggable = FullCalendar.Draggable;
var externalEventContainerEl = document.getElementById('external-events');
// init dragable
new Draggable(externalEventContainerEl, {
itemSelector: '.external-event',
eventData: function (eventEl) {
return {
title: eventEl.innerText,
start: new Date(),
className: eventEl.getAttribute('data-class')
};
}
});
var defaultEvents = [{
title: 'All Day Event',
start: new Date(y, m, 1),
className: 'bg-primary'
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
className: 'bg-warning'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: 'bg-info'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: 'bg-primary'
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
className: 'bg-success'
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: 'bg-danger'
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
className: 'bg-success'
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
className: 'bg-dark'
}];
var draggableEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
function addNewEvent(info) {
addEvent.show();
formEvent.classList.remove("was-validated");
formEvent.reset();
selectedEvent = null;
modalTitle.innerText = 'Add Event';
newEventData = info;
}
function getInitialView() {
if (window.innerWidth >= 768 && window.innerWidth < 1200) {
return 'timeGridWeek';
} else if (window.innerWidth <= 768) {
return 'listMonth';
} else {
return 'dayGridMonth';
}
}
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'local',
editable: true,
droppable: true,
selectable: true,
initialView: getInitialView(),
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
// responsive
windowResize: function (view) {
var newView = getInitialView();
calendar.changeView(newView);
},
eventDidMount: function (info) {
if (info.event.extendedProps.status === 'done') {
// Change background color of row
info.el.style.backgroundColor = 'red';
// Change color of dot marker
var dotEl = info.el.getElementsByClassName('fc-event-dot')[0];
if (dotEl) {
dotEl.style.backgroundColor = 'white';
}
}
},
eventClick: function (info) {
document.getElementById("btn-delete-event").style.display = "block";
addEvent.show();
formEvent.reset();
document.getElementById("event-title").value[0] = "";
selectedEvent = info.event;
document.getElementById("event-title").value = selectedEvent.title;
document.getElementById('event-category').value = selectedEvent.classNames[0];
newEventData = null;
modalTitle.innerText = 'Edit Event';
newEventData = null;
},
dateClick: function (info) {
document.getElementById("btn-delete-event").style.display = "none";
addNewEvent(info);
},
events: defaultEvents
});
calendar.render();
/*Add new event*/
// Form to add new event
formEvent.addEventListener('submit', function (ev) {
ev.preventDefault();
var updatedTitle = document.getElementById("event-title").value;
var updatedCategory = document.getElementById('event-category').value;
// validation
if (forms[0].checkValidity() === false) {
forms[0].classList.add('was-validated');
} else {
if (selectedEvent) {
selectedEvent.setProp("title", updatedTitle);
selectedEvent.setProp("classNames", [updatedCategory]);
} else {
var newEvent = {
title: updatedTitle,
start: newEventData.date,
allDay: newEventData.allDay,
className: updatedCategory
}
calendar.addEvent(newEvent);
}
addEvent.hide();
}
});
document.getElementById("btn-delete-event").addEventListener("click", function (e) {
if (selectedEvent) {
selectedEvent.remove();
selectedEvent = null;
selectedEvent.hide();
}
});
document.getElementById("btn-new-event").addEventListener("click", function (e) {
document.getElementById("btn-delete-event").style.display = "none";
addNewEvent({ date: new Date(), allDay: true });
});
});
@@ -0,0 +1,200 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: chartjs init js
*/
// get colors array from the string
function getChartColorsArray(chartId) {
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
var colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
// line chart
var islinechart = document.getElementById('lineChart');
lineChartColor = getChartColorsArray('lineChart');
islinechart.setAttribute("width", islinechart.parentElement.offsetWidth);
var lineChart = new Chart(islinechart, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
datasets: [
{
label: "Sales Analytics",
fill: true,
lineTension: 0.5,
backgroundColor: lineChartColor[0],
borderColor: lineChartColor[1],
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: lineChartColor[1],
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: lineChartColor[1],
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
},
{
label: "Monthly Earnings",
fill: true,
lineTension: 0.5,
backgroundColor: lineChartColor[2],
borderColor: lineChartColor[3],
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: lineChartColor[3],
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: lineChartColor[3],
pointHoverBorderColor: "#eef0f2",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
}
]
},
});
var isbarchart = document.getElementById('bar');
barChartColor = getChartColorsArray('bar');
isbarchart.setAttribute("width", isbarchart.parentElement.offsetWidth);
var barChart = new Chart(isbarchart, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Sales Analytics",
backgroundColor: barChartColor[0],
borderColor: barChartColor[0],
borderWidth: 1,
hoverBackgroundColor: barChartColor[1],
hoverBorderColor: barChartColor[1],
data: [65, 59, 81, 45, 56, 80, 50,20]
}
]
},
});
var ispiechart = document.getElementById('pieChart');
pieChartColors = getChartColorsArray('pieChart');
var pieChart = new Chart(ispiechart, {
type: 'pie',
data: {
labels: [
"Desktops",
"Tablets"
],
datasets: [
{
data: [300, 180],
backgroundColor: pieChartColors,
hoverBackgroundColor: pieChartColors,
hoverBorderColor: "#fff"
}]
}
});
var isdoughnutchart = document.getElementById('doughnut');
doughnutChartColors = getChartColorsArray('doughnut');
var lineChart = new Chart(isdoughnutchart, {
type: 'doughnut',
data: {
labels: [
"Desktops",
"Tablets"
],
datasets: [
{
data: [300, 210],
backgroundColor: doughnutChartColors,
hoverBackgroundColor: doughnutChartColors,
hoverBorderColor: "#fff"
}]
}
});
var ispolarAreachart = document.getElementById('polarArea');
polarAreaChartColors = getChartColorsArray('polarArea');
var lineChart = new Chart(ispolarAreachart, {
type: 'polarArea',
data: {
labels: [
"Series 1",
"Series 2",
"Series 3",
"Series 4"
],
datasets: [{
data: [
11,
16,
7,
18
],
backgroundColor: polarAreaChartColors,
label: 'My dataset', // for legend
hoverBorderColor: "#fff"
}]
}
});
var isradarchart = document.getElementById('radar');
radarChartColors = getChartColorsArray('radar');
var lineChart = new Chart(isradarchart, {
type: 'radar',
data: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "Desktops",
backgroundColor: radarChartColors[0], //"rgba(42, 181, 125, 0.2)",
borderColor: radarChartColors[1], //"#2ab57d",
pointBackgroundColor: radarChartColors[1], //"#2ab57d",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: radarChartColors[1], //"#2ab57d",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "Tablets",
backgroundColor: radarChartColors[2], //"rgba(81, 86, 190, 0.2)",
borderColor: radarChartColors[3], //"#5156be",
pointBackgroundColor: radarChartColors[3], //"#5156be",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: radarChartColors[3], //"#5156be",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
});
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,53 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: coming soon Init Js File
*/
document.addEventListener('DOMContentLoaded', function () {
// Set the date we're counting down to
var countDownDate = new Date("Jan 1, 2023").getTime();
// Update the count down every 1 second
var countDown = setInterval(function () {
// Get today's date and time
var currentTime = new Date().getTime();
// Find the distance between currentTime and the count down date
var distance = countDownDate - currentTime;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var countDownBlock = '<div class="countdownlist-item">'+
'<div class="count-title">Days</div>'+'<div class="count-num">'+ days +'</div>'+
'</div>'+
'<div class="countdownlist-item">'+
'<div class="count-title">Hours</div>'+'<div class="count-num">'+ hours +'</div>'+
'</div>'+
'<div class="countdownlist-item">'+
'<div class="count-title">Minutes</div>'+'<div class="count-num">'+ minutes +'</div>'+
'</div>'+
'<div class="countdownlist-item">'+
'<div class="count-title">Seconds</div>'+'<div class="count-num">'+ seconds +'</div>'+
'</div>';
// Output the result in an element with id="countDownBlock"
document.getElementById("countdown").innerHTML = countDownBlock;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(countDown);
document.getElementById("countdown").innerHTML = '<div class="countdown-endtxt">The countdown has ended!</div>';
}
}, 1000);
});
@@ -0,0 +1,679 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Dashboard sales
*/
// chart sparkline1
function getChartColorsArray(chartId) {
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
// mini-1
var barchartColors = getChartColorsArray("mini-1");
var options1 = {
series: [{
data: [25, 66, 41, 89, 63, 25, 44, 23, 40, 40, 54, 41]
}],
fill: {
colors: barchartColors,
opacity: 1,
},
chart: {
type: 'bar',
height: 50,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '65%',
borderRadius: 4,
}
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var chart1 = new ApexCharts(document.querySelector("#mini-1"), options1);
chart1.render();
// mini-2
var barchartColors = getChartColorsArray("mini-2");
var options1 = {
series: [{
data: [56, 20, 80, 40, 75, 41,25, 66, 41, 89, 63, 25,]
}],
fill: {
colors: barchartColors,
opacity: 1,
},
chart: {
type: 'bar',
height: 50,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '65%',
borderRadius: 4,
}
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var chart1 = new ApexCharts(document.querySelector("#mini-2"), options1);
chart1.render();
// mini-3
var barchartColors = getChartColorsArray("mini-3");
var options1 = {
series: [{
data: [59, 63, 35, 75, 50, 66, 25, 66, 41, 40, 54, 41]
}],
fill: {
colors: barchartColors,
opacity: 1,
},
chart: {
type: 'bar',
height: 50,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '65%',
borderRadius: 4,
}
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var chart1 = new ApexCharts(document.querySelector("#mini-3"), options1);
chart1.render();
// mini-4
var barchartColors = getChartColorsArray("mini-4");
var options1 = {
series: [{
data: [45, 36, 40, 64, 41, 66, 41, 89, 63, 25, 44, 20,]
}],
fill: {
colors: barchartColors,
opacity: 1,
},
chart: {
type: 'bar',
height: 50,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '65%',
borderRadius: 4,
}
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var chart1 = new ApexCharts(document.querySelector("#mini-4"), options1);
chart1.render();
// Stacked Area Charts
var barchartColors = getChartColorsArray("sales-report");
var options1 = {
chart: {
type: 'area',
height: 360,
toolbar: {
show: false
},
},
series: [{
name: 'Incomes',
data: [0, 20, 35, 45, 35, 55, 65, 50, 65, 75, 60, 75]
}, {
name: 'Expenses',
data: [15, 09, 17, 32, 25, 68, 80, 68, 84, 94, 74, 62]
}
],
stroke: {
curve: 'straight',
width: ['4', '4'],
},
grid:{
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
},
colors: barchartColors,
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Now','Des'],
},
legend: {
show: false,
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.40,
opacityTo: 0.1,
stops: [30, 100, 100, 100]
},
},
dataLabels: {
enabled: false
},
tooltip: {
fixed: {
enabled: false
}
,
x: {
show: false
}
,
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
}
,
marker: {
show: false
}
}
}
new ApexCharts(document.querySelector("#sales-report"), options1).render();
// radialBar
var barchartColors = getChartColorsArray("chart-radialBar");
var options = {
series: [76],
chart: {
type: 'radialBar',
height: 370,
sparkline: {
enabled: true
}
},
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: "#e6ecf9",
strokeWidth: '97%',
margin: 5, // margin is in pixels
dropShadow: {
enabled: false,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
hollow: {
margin: 15,
size: "65%"
},
dataLabels: {
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '22px'
}
}
}
},
grid: {
padding: {
top: -10
}
},
fill: {
opacity: 1,
},
colors: barchartColors,
labels: ['Average Results'],
};
var chart = new ApexCharts(document.querySelector("#chart-radialBar"), options);
chart.render();
// Sales Countries
var barchartColors = getChartColorsArray("sales-countries");
var options = {
series: [{
data: [430, 570, 640, 680, 790, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 323,
toolbar: {
show: false,
},
},
labels: ['Canada', 'Netherlands','Italy','France','Japan','United States','China','Germany'],
colors: barchartColors,
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Canada', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
};
var chart = new ApexCharts(document.querySelector("#sales-countries"), options);
chart.render();
// sparkline-1
var barchartColors = getChartColorsArray("chart-sparkline1");
var sparklineoptions1 = {
series: [{
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54 ,84]
}],
chart: {
type: 'area',
width: 200,
height: 40,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#chart-sparkline1"), sparklineoptions1);
sparklinechart1.render();
// sparkline-2
var barchartColors = getChartColorsArray("chart-sparkline2");
var sparklineoptions1 = {
series: [{
data: [50, 15, 35, 62, 23, 56, 44, 12, 36, 9, 54,23]
}],
chart: {
type: 'area',
width: 200,
height: 40,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#chart-sparkline2"), sparklineoptions1);
sparklinechart1.render();
// sparkline-3
var barchartColors = getChartColorsArray("chart-sparkline3");
var sparklineoptions1 = {
series: [{
data: [25, 35, 35, 89, 63, 25, 44, 12, 36, 9, 54, 25]
}],
chart: {
type: 'area',
width: 200,
height: 40,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#chart-sparkline3"), sparklineoptions1);
sparklinechart1.render();
// sparkline-4
var barchartColors = getChartColorsArray("chart-sparkline4");
var sparklineoptions1 = {
series: [{
data: [50, 15, 35, 34, 23, 56, 65, 41, 36, 41, 32, 25]
}],
chart: {
type: 'area',
width: 200,
height: 40,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#chart-sparkline4"), sparklineoptions1);
sparklinechart1.render();
// sparkline-5
var barchartColors = getChartColorsArray("chart-sparkline5");
var sparklineoptions1 = {
series: [{
data: [45, 53, 24, 89, 63, 60, 36, 50, 36, 32, 54, 63]
}],
chart: {
type: 'area',
width: 200,
height: 40,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#chart-sparkline5"), sparklineoptions1);
sparklinechart1.render();
@@ -0,0 +1,397 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Dashboard Ecommerce
*/
function getChartColorsArray(chartId) {
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
// Chart Mini-1
var barchartColors = getChartColorsArray("mini-1");
var sparklineoptions1 = {
series: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 110,
height: 35,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-1"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-2
var barchartColors = getChartColorsArray("mini-2");
var sparklineoptions1 = {
series: [{
data: [65, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 110,
height: 35,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-2"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-3
var barchartColors = getChartColorsArray("mini-3");
var sparklineoptions1 = {
series: [{
data: [12, 75, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 110,
height: 35,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-3"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-4
var barchartColors = getChartColorsArray("mini-4");
var sparklineoptions1 = {
series: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 70]
}],
chart: {
type: 'area',
width: 110,
height: 35,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: barchartColors,
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-4"), sparklineoptions1);
sparklinechart1.render();
// Sales Statistics
var barchartColors = getChartColorsArray("overview");
var options = {
series: [{
data: [4, 6, 10, 17, 15, 19, 23, 27, 29, 25, 32, 35]
}],
chart: {
toolbar: {
show: false,
},
height: 323,
type: 'bar',
events: {
click: function (chart, w, e) {
}
}
},
plotOptions: {
bar: {
columnWidth: '80%',
distributed: true,
borderRadius: 8,
}
},
fill: {
opacity: 1,
},
stroke: {
show: false,
},
dataLabels: {
enabled: false,
},
legend: {
show: false
},
colors: barchartColors,
xaxis: {
categories: ['Jan', 'Feb','Mar','Apr','May', 'jun', 'Jul','Aug', 'Sep', 'Oct','Nov', 'Dec'],
}
};
var chart = new ApexCharts(document.querySelector("#overview"), options);
chart.render();
// Saleing Categories
var barchartColors = getChartColorsArray("saleing-categories");
var options = {
chart: {
height: 350,
type: 'donut',
},
series: [24, 18, 13, 15],
labels: ["Fashion", "Beauty", "Clothing", "Others"],
colors: barchartColors,
plotOptions: {
pie: {
startAngle: 25,
donut: {
size: '72%',
labels: {
show: true,
total: {
show: true,
label: 'Products',
fontSize: '22px',
fontFamily: 'Montserrat,sans-serif',
fontWeight: 600,
}
}
}
}
},
legend: {
show: false,
position: 'bottom',
horizontalAlign: 'center',
verticalAlign: 'middle',
floating: false,
fontSize: '14px',
offsetX: 0,
},
dataLabels: {
style: {
fontSize: '11px',
fontFamily: 'Montserrat,sans-serif',
fontWeight: 'bold',
colors: undefined
},
background: {
enabled: true,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 1,
},
},
responsive: [{
breakpoint: 600,
options: {
chart: {
height: 240
},
legend: {
show: false
},
}
}]
}
var chart = new ApexCharts(
document.querySelector("#saleing-categories"),
options
);
chart.render();
// world map with markers
var worldemapmarkers = new jsVectorMap({
map: 'world_merc',
selector: '#world-map-markers',
zoomOnScroll: false,
zoomButtons: false,
selectedMarkers: [0, 2],
markersSelectable: true,
regionStyle : {
initial : {
fill : '#cfd9ed'
}
},
markers:[
{ name: "United States", coords: [31.9474,35.2272] },
{ name: "Italy", coords: [61.524,105.3188] },
{ name: "French", coords: [56.1304,-106.3468] },
{ name: "Spain", coords: [71.7069,-42.6043] },
],
markerStyle:{
initial: { fill: "#1f58c7" },
selected: { fill: "#1f58c7" }
},
labels: {
markers: {
render: function(marker){
return marker.name
}
}
}
})
Binary file not shown.
@@ -0,0 +1,20 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Ecommerce Choices Js File
*/
// Chocies Select plugin
document.addEventListener('DOMContentLoaded', function () {
var genericExamples = document.querySelectorAll('[data-trigger]');
for (i = 0; i < genericExamples.length; ++i) {
var element = genericExamples[i];
new Choices(element, {
placeholderValue: 'This is a placeholder set in the config',
searchPlaceholderValue: 'This is a search placeholder',
});
}
});
@@ -0,0 +1,86 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Ecommerce customers Js File
*/
// Basic Table
new gridjs.Grid({
columns:
[
{
name: '#',
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="form-check font-size-16"><input class="form-check-input" type="checkbox" id="orderidcheck01"><label class="form-check-label" for="orderidcheck01"></label></div>');
})
},
{
name: 'Username',
formatter: (function (cell) {
return gridjs.html('<img src="assets/images/users/'+ cell[0]+'" alt="" class="avatar-sm rounded-circle me-2" /><a href="#" class="text-body">' + cell[1] + "</a>");
})
},
{
name: 'Phone / Email',
formatter: (function (cell) {
return gridjs.html('<p class="mb-1">'+ cell[0] +'</p><p class="mb-0">'+ cell[1] +'</p>');
})
},
, "Address",
{
name: "Rating",
formatter: (function (cell) {
return gridjs.html('<span class="badge bg-success font-size-12"><i class="mdi mdi-star me-1"></i>' + cell +'</span>');
})
},
"Wallet Balance", "Joining Date",
{
name: "Action",
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="dropdown"><a href="#" class="dropdown-toggle card-drop" data-bs-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal font-size-18"></i></a><ul class="dropdown-menu dropdown-menu-end"><li><a href="#" class="dropdown-item"><i class="mdi mdi-pencil font-size-16 text-success me-1"></i> Edit</a></li><li><a href="#" class="dropdown-item"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i> Delete</a></li></ul></div>');
})
}
],
pagination: {
limit: 6
},
sort: true,
search: true,
data: [
["", ["avatar-1.jpg","Stephen Rash"], ["325-250-1106", "StephenRash@teleworm.us"], "2470 Grove Street Bethpage, NY 11714", "4.2", "$5,412", "07 Oct, 2021" ],
["", ["avatar-2.jpg","Juan Mays"], ["443-523-4726", "JuanMays@armyspy.com"], "3755 Harron Drive Salisbury, MD 21875", "4.3", "$5,632", "06 Oct, 2021"],
["", ["avatar-3.jpg","Scott Henry"], ["704-629-9535", "ScottHenry@jourrapide.com"], "3632 Snyder Avenue Bessemer City, NC 28016", "4.1", "$7,523", "06 Oct, 2021"],
["", ["avatar-4.jpg","Cody Menendez"], ["701-832-5838", "CodyMenendez@armyspy.com"], "4401 Findley Avenue Minot, ND 58701", "4.0", "$6,325", "05 Oct, 2021"],
["", ["avatar-5.jpg","Jason Merino"], ["706-219-4095", "JasonMerino@dayrep.com"], "3159 Holly Street Cleveland, GA 30528", "4.2", "$4,523", "04 Oct, 2021" ],
["", ["avatar-6.jpg","Kyle Aquino"], ["415-232-5443", "KyleAquino@teleworm.us"], "4861 Delaware Avenue San Francisco, CA 94143", "4.1", "$5,412", "03 Oct, 2021"],
["", ["avatar-7.jpg","David Gaul"], ["314-483-4679", "DavidGaul@teleworm.us"], "1207 Cottrill Lane Stlouis, MO 63101", "4.4", "$5,412", "02 Oct, 2021"],
["", ["avatar-8.jpg","John McCray"], ["253-661-7551", "JohnMcCray@armyspy.com"], "3309 Horizon Circle Tacoma, WA 98423", "3.2", "$5,287", "02 Oct, 2021"],
["", ["avatar-1.jpg","John Fane"], ["325-250-1106", "StephenRash@teleworm.us"], "2470 Grove Street Bethpage, NY 11714", "4.2", "$5,412", "07 Oct, 2021" ],
["", ["avatar-2.jpg","Stacie Parker"], ["443-523-4726", "JuanMays@armyspy.com"], "3755 Harron Drive Salisbury, MD 21875", "4.3", "$5,632", "06 Oct, 2021"],
["", ["avatar-3.jpg","Betty Wilson"], ["704-629-9535", "ScottHenry@jourrapide.com"], "3632 Snyder Avenue Bessemer City, NC 28016", "4.1", "$7,523", "06 Oct, 2021"],
["", ["avatar-4.jpg","Roman Crabtree"], ["701-832-5838", "CodyMenendez@armyspy.com"], "4401 Findley Avenue Minot, ND 58701", "4.0", "$6,325", "05 Oct, 2021"],
["", ["avatar-5.jpg","Marisela Butler"], ["706-219-4095", "JasonMerino@dayrep.com"], "3159 Holly Street Cleveland, GA 30528", "4.2", "$4,523", "04 Oct, 2021" ],
["", ["avatar-6.jpg","Roger Slayton"], ["415-232-5443", "KyleAquino@teleworm.us"], "4861 Delaware Avenue San Francisco, CA 94143", "4.1", "$5,412", "03 Oct, 2021"],
["", ["avatar-7.jpg","Barbara Torres"], ["314-483-4679", "DavidGaul@teleworm.us"], "1207 Cottrill Lane Stlouis, MO 63101", "4.4", "$5,412", "02 Oct, 2021"],
["", ["avatar-8.jpg","Daniel Rigney"], ["253-661-7551", "JohnMcCray@armyspy.com"], "3309 Horizon Circle Tacoma, WA 98423", "3.2", "$5,287", "02 Oct, 2021"],
]
}).render(document.getElementById("table-ecommerce-customers"));
flatpickr('#customers-date', {
defaultDate: new Date(),
dateFormat: "d M, Y",
});
@@ -0,0 +1,327 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Ecommerce order Js File
*/
// Chart Mini-1
var sparklineoptions1 = {
series: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 150,
height: 50,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: ['#1f58c7'],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-1"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-2
var sparklineoptions1 = {
series: [{
data: [65, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 150,
height: 50,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: ['#1f58c7'],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-2"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-3
var sparklineoptions1 = {
series: [{
data: [12, 75, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
chart: {
type: 'area',
width: 150,
height: 50,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: ['#1f58c7'],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-3"), sparklineoptions1);
sparklinechart1.render();
// Chart Mini-4
var sparklineoptions1 = {
series: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 70]
}],
chart: {
type: 'area',
width: 150,
height: 50,
sparkline: {
enabled: true
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
stroke: {
curve: 'smooth',
width: 2,
},
colors: ['#1f58c7'],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
};
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-4"), sparklineoptions1);
sparklinechart1.render();
// Basic Table
new gridjs.Grid({
columns:
[
{
name: '#',
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="form-check font-size-16"><input class="form-check-input" type="checkbox" id="orderidcheck01"><label class="form-check-label" for="orderidcheck01"></label></div>');
})
},
{
name: 'Order ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
{
name: 'Billing Name',
formatter: (function (cell) {
return gridjs.html('<img src="assets/images/users/'+ cell[0]+'" alt="" class="avatar-sm rounded-circle me-2" /><a href="#" class="text-body">' + cell[1] + "</a>");
})
},
"Date", "Total",
{
name: 'Payment Status',
formatter: (function (cell) {
switch (cell) {
case "Paid":
return gridjs.html('<span class="badge badge-pill badge-soft-success font-size-12">' + cell + '</span>');
case "Chargeback":
return gridjs.html('<span class="badge badge-pill badge-soft-danger font-size-12">' + cell + '</span>');
case "Refund":
return gridjs.html('<span class="badge badge-pill badge-soft-warning font-size-12">' + cell + '</span>');
default:
return gridjs.html('<span class="badge badge-pill badge-soft-success font-size-12">' + cell + '</span>');
}
})
},
{
name: "Payment Method",
formatter: (function (cell) {
switch (cell) {
case "Mastercard":
return gridjs.html('<i class="fab fa-cc-mastercard me-2"></i>' + cell);
case "Visa":
return gridjs.html('<i class="fab fa-cc-visa me-2"></i>' + cell);
case "Paypal":
return gridjs.html('<i class="fab fa-cc-paypal me-2"></i>' + cell);
case "COD":
return gridjs.html('<i class="fas fa-money-bill-alt me-2"></i>' + cell);
}
})
},
{
name: "View Details",
formatter: (function (cell) {
return gridjs.html('<button type="button" class="btn btn-primary btn-sm btn-rounded" data-bs-toggle="modal" data-bs-target=".orderdetailsModal">'+ cell + '</button>');
})
},
{
name: "Action",
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="d-flex gap-3"><a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="text-success"><i class="mdi mdi-pencil font-size-18"></i></a><a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="text-danger"><i class="mdi mdi-delete font-size-18"></i></a></div>');
})
}
],
pagination: {
limit: 7
},
sort: true,
search: true,
data: [
["", "#SK2540", ["avatar-1.jpg","Neal Matthews"],"07 Oct, 2021", "$400", "Paid", "Mastercard", "View Details" ],
["", "#SK5623", ["avatar-2.jpg","Jamal Burnett"],"05 Oct, 2021", "$452", "Chargeback", "Visa", "View Details"],
["", "#SK6263", ["avatar-3.jpg","Juan Mitchell"],"06 Oct, 2021", "$632", "Refund", "Paypal", "View Details"],
["", "#SK4521", ["avatar-4.jpg","Barry Dick"], "07 Oct, 2021", "$521", "Refund", "COD", "View Details"],
["", "#SK5263", ["avatar-5.jpg","Ronald Taylor"],"07 Oct, 2021", "$521", "Paid", "Mastercard", "View Details" ],
["", "#SK4526", ["avatar-6.jpg","Jacob Hunter"], "06 Oct, 2021", "$365", "Chargeback", "Visa", "View Details"],
["", "#SK8965", ["avatar-7.jpg","William Cruz"], "07 Oct, 2021", "$452", "Paid", "Paypal", "View Details"],
["", "#SK9658", ["avatar-8.jpg","Dustin Moser"], "08 Oct, 2021", "$365", "Paid", "COD", "View Details"],
["", "#SK7458", ["avatar-6.jpg","Clark Benson"], "09 Oct, 2021", "$254", "Refund", "COD", "View Details"],
["", "#SK2685", ["avatar-2.jpg","John Fane"], "07 Oct, 2021", "$400", "Paid", "Mastercard", "View Details" ],
["", "#SK4526", ["avatar-1.jpg","Stacie Parker"],"05 Oct, 2021", "$452", "Chargeback", "Visa", "View Details"],
["", "#SK8522", ["avatar-2.jpg","Betty Wilson"], "06 Oct, 2021", "$632", "Refund", "Paypal", "View Details"],
["", "#SK4545", ["avatar-3.jpg","Roman Crabtree"], "07 Oct, 2021", "$521", "Refund", "COD", "View Details"],
["", "#SK9652", ["avatar-4.jpg","Marisela Butler"], "07 Oct, 2021", "$521", "Paid", "Mastercard", "View Details" ],
["", "#SK4256", ["avatar-5.jpg","Roger Slayton"], "06 Oct, 2021", "$365", "Chargeback", "Visa", "View Details"],
["", "#SK4125", ["avatar-6.jpg","Barbara Torres"], "07 Oct, 2021", "$452", "Paid", "Paypal", "View Details"],
["", "#SK6523", ["avatar-7.jpg","Daniel Rigney"], "08 Oct, 2021", "$365", "Paid", "COD", "View Details"],
["", "#SK6563", ["avatar-8.jpg","Kenneth Linck"], "09 Oct, 2021", "$254", "Refund", "COD", "View Details"],
]
}).render(document.getElementById("table-ecommerce-orders"));
flatpickr('#order-date', {
defaultDate: new Date(),
dateFormat: "d M, Y",
});
@@ -0,0 +1,28 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Ecommerce product detail Js File
*/
var productNavSlider = new Swiper(".product-nav-slider", {
loop: false,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var productThubnailSlider = new Swiper(".product-thumbnail-slider", {
loop: false,
spaceBetween: 24,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: productNavSlider,
},
});
@@ -0,0 +1,87 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Ecommerce shops Js File
*/
// Basic Table
new gridjs.Grid({
columns:
[
{
name: 'Brand',
sort: {
enabled: false
},
formatter: (function (cell) {
switch (cell) {
case "M":
return gridjs.html('<div class="avatar"><span class="avatar-title bg-soft-primary text-primary font-size-16 rounded-circle"> ' + cell + ' </span></div>');
case "B":
return gridjs.html('<div class="avatar"><span class="avatar-title bg-soft-warning text-warning font-size-16 rounded-circle"> ' + cell + ' </span></div>');
case "K":
return gridjs.html('<div class="avatar"><span class="avatar-title bg-soft-success text-success font-size-16 rounded-circle"> ' + cell + ' </span></div>');
case "P":
return gridjs.html('<div class="avatar"><span class="avatar-title bg-soft-danger text-danger font-size-16 rounded-circle"> ' + cell + ' </span></div>');
default:
return gridjs.html('<div class="avatar"><span class="avatar-title bg-soft-primary text-primary font-size-16 rounded-circle"> ' + cell + ' </span></div>');
}
})
},
{
name: 'Name',
formatter: (function (cell) {
return gridjs.html('<h5 class="font-size-15">'+ cell[0] +'</h5><p class="text-muted mb-0"> <i class="mdi mdi-account me-1"></i>'+ cell[1] +'</p>');
})
},
, "Email", "Date", "Product", "Current Balance",
{
name: "Action",
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="dropdown">'+
'<a class="text-muted dropdown-toggle font-size-20" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">'+
'<i class="bx bx-dots-horizontal-rounded"></i></a>'+
'<div class="dropdown-menu dropdown-menu-end">'+
'<a class="dropdown-item" href="#">Edit</a>'+
'<a class="dropdown-item" href="#">Action</a>'+
'<a class="dropdown-item" href="#">Remove</a>'+
'</div>'+
'</div>');
})
}
],
pagination: {
limit: 7
},
sort: true,
search: true,
data: [
[ "M", ["Nedick's", "Wayne McClain"], "WayneMcclain@gmail.com", "07/10/2021", "86", "$12,456" ],
[ "B", ["Brendle's", "David Marshall"], "Davidmarshall@gmail.com", "12/10/2021", "82", "$34,523"],
[ "K", ["Tech Hifi", "Katia Stapleton"], "Katiastapleton@gmail.com", "14/11/2021", "75", "$63,265"],
[ "P", ["Packer", "Mae Rankin"], "Maerankingmail.com", "14/11/2021", "62", "$42,652"],
[ "L", ["Lafayette", "Andrew Bivens"], "Andrewbivens@gmail.com", "15/11/2021", "55", "$52,652" ],
[ "B", ["Tech Hifi", "John McLeroy"], "JohnmcLeroy@gmail.com", "20/11/2021", "53", "$12,523"],
[ "K", ["Packer", "Katia Stapleton"], "Katiastapleton@gmail.com", "23/11/2021", "66", "63,523"],
[ "P", ["Packer", "Mae Rankin"], "Maerankingmail.com", "14/11/2021", "62", "$42,652"],
[ "L", ["Lafayette", "Andrew Bivens"], "Andrewbivens@gmail.com", "15/11/2021", "55", "$52,652" ],
[ "B", ["Tech Hifi", "John McLeroy"], "JohnmcLeroy@gmail.com", "20/11/2021", "53", "$12,523"],
[ "K", ["Packer", "Katia Stapleton"], "Katiastapleton@gmail.com", "23/11/2021", "66", "63,523"],
]
}).render(document.getElementById("table-ecommerce-shops"));
@@ -0,0 +1,16 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Email summernote Js File
*/
ClassicEditor
.create( document.querySelector( '#email-editor' ) )
.then( function(editor) {
editor.ui.view.editable.element.style.height = '200px';
})
.catch( function(error) {
console.error( error );
});
@@ -0,0 +1,87 @@
/*
Template Name: Borex - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: file manager Init Js File
*/
function getChartColorsArray(chartId) {
console.log(chartId);
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
// radialBar
var barchartColors = getChartColorsArray("chart-radialBar");
var options = {
series: [76],
chart: {
type: 'radialBar',
height: 260,
sparkline: {
enabled: true
}
},
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: "#f3f2f9",
strokeWidth: '97%',
margin: 5, // margin is in pixels
dropShadow: {
enabled: false,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
hollow: {
margin: 15,
size: "65%"
},
dataLabels: {
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '22px'
}
}
}
},
stroke: {
lineCap: "round",
},
grid: {
padding: {
top: -10
}
},
fill: {
opacity: 1,
},
colors: barchartColors,
labels: ['Average Results'],
};
var chart = new ApexCharts(document.querySelector("#chart-radialBar"), options);
chart.render();
File diff suppressed because one or more lines are too long
@@ -0,0 +1,243 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form Advanced Js File
*/
// Chocies Select plugin
document.addEventListener('DOMContentLoaded', function () {
var genericExamples = document.querySelectorAll('[data-trigger]');
for (i = 0; i < genericExamples.length; ++i) {
var element = genericExamples[i];
new Choices(element, {
placeholderValue: 'This is a placeholder set in the config',
searchPlaceholderValue: 'This is a search placeholder',
});
}
// singleNoSearch
var singleNoSearch = new Choices('#choices-single-no-search', {
searchEnabled: false,
removeItemButton: true,
choices: [
{ value: 'One', label: 'Label One' },
{ value: 'Two', label: 'Label Two', disabled: true },
{ value: 'Three', label: 'Label Three' },
],
}).setChoices(
[
{ value: 'Four', label: 'Label Four', disabled: true },
{ value: 'Five', label: 'Label Five' },
{ value: 'Six', label: 'Label Six', selected: true },
],
'value',
'label',
false
);
// singleNoSorting
var singleNoSorting = new Choices('#choices-single-no-sorting', {
shouldSort: false,
});
// multiple Remove CancelButton
var multipleCancelButton = new Choices(
'#choices-multiple-remove-button',
{
removeItemButton: true,
}
);
//choices-multiple-groups
var multipleDefault = new Choices(
document.getElementById('choices-multiple-groups')
);
// text inputs example
var textRemove = new Choices(
document.getElementById('choices-text-remove-button'),
{
delimiter: ',',
editItems: true,
maxItemCount: 5,
removeItemButton: true,
}
);
// choices-text-unique-values
var textUniqueVals = new Choices('#choices-text-unique-values', {
paste: false,
duplicateItemsAllowed: false,
editItems: true,
});
//choices-text-disabled
var textDisabled = new Choices('#choices-text-disabled', {
addItems: false,
removeItems: false,
}).disable();
});
// colorpicker
// classic color picker
var classicPickr = Pickr.create({
el: '.classic-colorpicker',
theme: 'classic', // or 'monolith', or 'nano'
default: '#038edc',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: true,
save: true
}
}
});
// monolith color picker
var monolithPickr = Pickr.create({
el: '.monolith-colorpicker',
theme: 'monolith',
default: '#5fd0f3',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)'
],
defaultRepresentation: 'HEXA',
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsva: false,
input: true,
clear: true,
save: true
}
}
});
// nano color picker
var nanoPickr = Pickr.create({
el: '.nano-colorpicker',
theme: 'nano',
default: '#f7cc53',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)'
],
defaultRepresentation: 'HEXA',
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsva: false,
input: true,
clear: true,
save: true
}
}
});
// flatpickr
flatpickr('#datepicker-basic');
flatpickr('#datepicker-datetime', {
enableTime: true,
dateFormat: "m-d-Y H:i"
});
flatpickr('#datepicker-humanfd', {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
});
flatpickr('#datepicker-minmax', {
minDate: "today",
maxDate: new Date().fp_incr(14) // 14 days from now
});
flatpickr('#datepicker-disable', {
onReady: function () {
this.jumpToDate("2025-01")
},
disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9)],
dateFormat: "Y-m-d",
});
flatpickr('#datepicker-multiple', {
mode: "multiple",
dateFormat: "Y-m-d"
});
flatpickr('#datepicker-range', {
mode: "range"
});
flatpickr('#datepicker-timepicker', {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
flatpickr('#datepicker-inline', {
inline: true
});
@@ -0,0 +1,34 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form editor Js File
*/
// ckeditor
ClassicEditor
.create( document.querySelector( '#ckeditor-classic' ) )
.then( function(editor) {
editor.ui.view.editable.element.style.height = '200px';
} )
.catch( function(error) {
console.error( error );
} );
// Quilljs
// Snow theme
var quill = new Quill('#snow-editor', {
theme: 'snow',
modules: {
'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }], ['link', 'image', 'video'], ['clean']]
},
});
// Bubble theme
var quill = new Quill('#bubble-editor', {
theme: 'bubble'
});
@@ -0,0 +1,60 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form mask Js File
*/
document.addEventListener("DOMContentLoaded", function () {
// RegExp (Russian postal code)
var regExpMask = IMask(document.getElementById('regexp-mask'), {
mask: /^[1-6]\d{0,5}$/
});
// Pattern (Phone)
var phoneMask = IMask(document.getElementById('phone-mask'), {
mask: '+{7}(000)000-00-00'
});
// Number mask
var numberMask = IMask(document.getElementById('number-mask'), {
mask: Number,
min: -10000,
max: 10000,
thousandsSeparator: ' '
});
// date mask
var dateMask = IMask(document.getElementById('date-mask'), {
mask: Date,
min: new Date(1990, 0, 1),
max: new Date(2020, 0, 1),
lazy: false
});
// dynamic mask
var dynamicMask = IMask(document.getElementById('dynamic-mask'), {
mask: [
{
mask: '+{7}(000)000-00-00'
},
{
mask: /^\S*@?\S*$/
}
]
});
// Pattern (Phone)
var currencyMask = IMask(document.getElementById('currency-mask'), {
mask: '$num',
blocks: {
num: {
// nested masks are available!
mask: Number,
thousandsSeparator: ' '
}
}
});
});
@@ -0,0 +1,26 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form validation Js File
*/
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
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);
})();
@@ -0,0 +1,60 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form wizard Js File
*/
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("wizard-tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("wizard-tab");
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
currentTab = currentTab - n;
x[currentTab].style.display = "block";
}
// Otherwise, display the correct tab:
showTab(currentTab)
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("list-item");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
// flatpickr
flatpickr('#datepicker-basic');
@@ -0,0 +1,71 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: gmaps init Js File
*/
var map;
document.addEventListener("DOMContentLoaded", function(event) {
// Markers
map = new GMaps({
div: '#gmaps-markers',
lat: -12.043333,
lng: -77.028333
});
map.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');
}
});
// Overlays
map = new GMaps({
div: '#gmaps-overlay',
lat: -12.043333,
lng: -77.028333
});
map.drawOverlay({
lat: map.getCenter().lat(),
lng: map.getCenter().lng(),
content: '<div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div>',
verticalAlign: 'top',
horizontalAlign: 'center'
});
//panorama
map = GMaps.createPanorama({
el: '#panorama',
lat : 42.3455,
lng : -71.0983
});
//Map type
map = new GMaps({
div: '#gmaps-types',
lat: -12.043333,
lng: -77.028333,
mapTypeControlOptions: {
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm"]
}
});
map.addMapType("osm", {
getTileUrl: function(coord, zoom) {
return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
});
map.setMapTypeId("osm");
});
@@ -0,0 +1,167 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: grid Js File
*/
// Basic Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
search: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-gridjs"));
// pagination Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-pagination"));
// search Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
search: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-search"));
// Sorting Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-sorting"));
// Loading State Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: function() {
return new Promise(function(resolve) {
setTimeout(function() {
resolve([
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"]
])}, 2000);
});
}
}).render(document.getElementById("table-loading-state"));
// Fixed Header
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
sort: true,
pagination: true,
fixedHeader: true,
height: '400px',
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-fixed-header"));
// Hidden Columns
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company",
{
name: 'Country',
hidden: true
},],
pagination: {
limit: 5
},
sort: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-hidden-column"));
@@ -0,0 +1,142 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: invoive list Js File
*/
// Basic Table
new gridjs.Grid({
columns:
[
{
name: '#',
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="form-check font-size-16"><input class="form-check-input" type="checkbox" id="orderidcheck01"><label class="form-check-label" for="orderidcheck01"></label></div>');
})
},
{
name: 'Order ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"Date", "Billing Name", "Amount",
{
name: 'Status',
formatter: (function (cell) {
switch (cell) {
case "Paid":
return gridjs.html('<span class="badge badge-pill badge-soft-success font-size-12">' + cell + '</span>');
case "Pending":
return gridjs.html('<span class="badge badge-pill badge-soft-warning font-size-12">' + cell + '</span>');
default:
return gridjs.html('<span class="badge badge-pill badge-soft-success font-size-12">' + cell + '</span>');
}
})
},
{
name: "Action",
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('<div class="dropdown"><button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-dots-horizontal-rounded"></i></button><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="#">Edit</a></li><li><a class="dropdown-item" href="#">Print</a></li><li><a class="dropdown-item" href="#">Delete</a></li></ul></div>');
})
}
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: [
["", "#DS0215", "07 Oct, 2021", "Connie Franco", "$26.30", "Paid", "View Details" ],
["", "#DS0214", "05 Oct, 2021", "Paul Reynolds", "$24.20", "Paid", "View Details"],
["", "#DS0214", "06 Oct, 2021", "Ronald Patterson", "$65.32", "Pending", "View Details"],
["", "#DS0212", "07 Oct, 2021", "Adella Perez", "$53.32", "Paid", "View Details"],
["", "#DS0211", "07 Oct, 2021", "Theresa Mayers", "$13.21", "Paid", "View Details" ],
["", "#DS0210", "06 Oct, 2021", "Michael Wallace", "$23.41", "Pending", "View Details"],
["", "#DS0209", "07 Oct, 2021", "Oliver Gonzales", "$41.23", "Pending", "View Details"],
["", "#DS0208", "08 Oct, 2021", "David Burke", "$32.25", "Paid", "View Details"],
["", "#DS0207", "09 Oct, 2021", "Willie Verner", "$53.21", "Pending", "View Details"],
["", "#DS0206", "07 Oct, 2021", "Felix Perry", "$63.21", "Paid", "View Details" ],
["", "#SK4526", "05 Oct, 2021", "Stacie Parker", "$63.85", "Pending", "View Details"],
["", "#SK8522", "06 Oct, 2021", "Betty Wilson", "$32.12", "Pending", "View Details"],
["", "#SK4545", "07 Oct, 2021", "Roman Crabtree", "$45.62", "Paid", "View Details"],
["", "#SK9652", "07 Oct, 2021", "Marisela Butler", "$62.35", "Pending", "View Details" ],
["", "#SK4256", "06 Oct, 2021", "Roger Slayton", "$45.62", "Paid", "View Details"],
["", "#SK4125", "07 Oct, 2021", "Barbara Torres", "$42.63", "Paid", "View Details"],
["", "#SK6523", "08 Oct, 2021", "Daniel Rigney", "$32.54", "Pending", "View Details"],
["", "#SK6563", "09 Oct, 2021", "Kenneth Linck", "$52.62", "Pending", "View Details"],
]
}).render(document.getElementById("table-invoices-list"));
// Range datepicker
flatpickr('#datepicker-range', {
mode: "range"
});
// Invoice date
flatpickr('#datepicker-invoice');
// form step wizard
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("wizard-tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Add";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("wizard-tab");
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
currentTab = currentTab - n;
x[currentTab].style.display = "block";
}
// Otherwise, display the correct tab:
showTab(currentTab)
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("list-item");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
@@ -0,0 +1,188 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Leaflet init js
*/
// leaflet-map
var mymap = L.map('leaflet-map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
// leaflet-map-marker
var markermap = L.map('leaflet-map-marker').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(markermap);
L.marker([51.5, -0.09]).addTo(markermap);
L.circle([51.508, -0.11], {
color: '#28b765',
fillColor: '#28b765',
fillOpacity: 0.5,
radius: 500
}).addTo(markermap);
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
],{
color: '#1f58c7',
fillColor: '#1f58c7',
}).addTo(markermap);
// Working with popups
var popupmap = L.map('leaflet-map-popup').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(popupmap);
L.marker([51.5, -0.09]).addTo(popupmap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: '#ed5555',
fillColor: '#ed5555',
fillOpacity: 0.5
}).addTo(popupmap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
],{
color: '#1f58c7',
fillColor: '#1f58c7',
}).addTo(popupmap).bindPopup("I am a polygon.");
var popup = L.popup();
// leaflet-map-custom-icons
var customiconsmap = L.map('leaflet-map-custom-icons').setView([51.5, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(customiconsmap);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [45, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'assets/images/logo-dark-sm.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(customiconsmap);
// Interactive Choropleth Map
var interactivemap = L.map('leaflet-map-interactive-map').setView([37.8, -96], 4);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(interactivemap);
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#1f58c7' :
d > 500 ? '#1f58c7' :
d > 200 ? '#1f58c7' :
d > 100 ? '#1f58c7' :
d > 50 ? '#376fdc' :
d > 20 ? '#376fdc' :
d > 10 ? '#3d79ee' :
'#3d79ee';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
var geojson = L.geoJson(statesData, {
style: style,
}).addTo(interactivemap);
// leaflet-map-group-control
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
var layergroupcontrolmap = L.map('leaflet-map-group-control', {
center: [39.73, -104.99],
zoom: 10,
layers: [streets, cities]
});
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(layergroupcontrolmap);
File diff suppressed because one or more lines are too long
@@ -0,0 +1,29 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Lightbox Js File
*/
// GLightbox Popup
var lightbox = GLightbox({
selector: '.image-popup',
title: false,
});
// GLightbox Popup
var lightboxDesc = GLightbox({
selector: '.image-popup-desc',
});
// GLightbox Popup
var lightboxvideo = GLightbox({
selector: '.image-popup-video-map',
title: false,
});
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
/*
Template Name: Minia - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Modal init js
*/
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
@@ -0,0 +1,56 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Toastr init js
*/
// alert
document.getElementById("alert").addEventListener("click", function() {
alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); });
});
// alert-confirm
document.getElementById("alert-confirm").addEventListener("click", function() {
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
});
// alert-prompt
document.getElementById("alert-prompt").addEventListener("click", function() {
alertify.prompt("This is a prompt dialog.", "Default value",
function(evt, value ){
alertify.success('Ok: ' + value);
},
function(){
alertify.error('Cancel');
});
});
// alert success
document.getElementById("alert-success").addEventListener("click", function() {
alertify.success('Success message');
});
// alert error
document.getElementById("alert-error").addEventListener("click", function() {
alertify.error('Error message');
});
// alert warning
document.getElementById("alert-warning").addEventListener("click", function() {
alertify.warning('Warning message');
});
// alert normal
document.getElementById("alert-message").addEventListener("click", function() {
alertify.message('Normal message');
});
@@ -0,0 +1,17 @@
/*
Template Name: Dason - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Password Addon Js File
*/
// show password input value
document.getElementById('password-addon').addEventListener('click', function () {
var passwordInput = document.getElementById("password-input");
if (passwordInput.type === "password") {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
});
@@ -0,0 +1,46 @@
/*
Template Name: Dason - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Property list filter init js
*/
var slider = document.getElementById('priceslider');
noUiSlider.create(slider, {
start: [250, 800],
connect: true,
tooltips: true,
range: {
'min': 1,
'max': 1000
},
});
// slider
var swiper = new Swiper(".slider", {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay:
{
delay: 2000,
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 1,
},
1024: {
slidesPerView: 1,
},
},
});
@@ -0,0 +1,93 @@
/*
Template Name: Dason - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: profile Js File
*/
function getChartColorsArray(chartId) {
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
var barchartColors = getChartColorsArray("overview-chart");
var options = {
chart: {
height: 280,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
borderRadius: 6
}
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
series: [{
name: 'Overview',
data: [52, 66, 50, 74, 36, 52, 66]
}],
grid: {
yaxis: {
lines: {
show: false,
}
}
},
yaxis: {
labels: {
formatter: function (value) {
return value + "hrs";
}
},
title: {
text: '% (Percentage)'
}
},
xaxis: {
labels: {
rotate: -90
},
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
title: {
text: 'Week',
}
},
colors: barchartColors,
}
var chart = new ApexCharts(
document.querySelector("#overview-chart"),
options
);
chart.render();
@@ -0,0 +1,325 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Range sliders Js File
*/
/*********************
basic example
**********************/
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
/*********************
Colorpicker
**********************/
var resultElement = document.getElementById('result');
var sliders = document.getElementsByClassName('sliders');
var colors = [0, 0, 0];
[].slice.call(sliders).forEach(function (slider, index) {
noUiSlider.create(slider, {
start: 127,
connect: [true, false],
orientation: "vertical",
range: {
'min': 0,
'max': 255
},
format: wNumb({
decimals: 0
})
});
// Bind the color changing function to the update event.
slider.noUiSlider.on('update', function () {
colors[index] = slider.noUiSlider.get();
var color = 'rgb(' + colors.join(',') + ')';
resultElement.style.background = color;
resultElement.style.color = color;
});
});
/*********************
Using HTML5 input elements
**********************/
var select = document.getElementById('input-select');
// Append the option elements
for (var i = -20; i <= 40; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
select.appendChild(option);
}
var html5Slider = document.getElementById('html5');
noUiSlider.create(html5Slider, {
start: [10, 30],
connect: true,
range: {
'min': -20,
'max': 40
}
});
var inputNumber = document.getElementById('input-number');
html5Slider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
if (handle) {
inputNumber.value = value;
} else {
select.value = Math.round(value);
}
});
select.addEventListener('change', function () {
html5Slider.noUiSlider.set([this.value, null]);
});
inputNumber.addEventListener('change', function () {
html5Slider.noUiSlider.set([null, this.value]);
});
/*********************
Non linear slider
**********************/
var nonLinearSlider = document.getElementById('nonlinear');
noUiSlider.create(nonLinearSlider, {
connect: true,
behaviour: 'tap',
start: [500, 4000],
range: {
// Starting at 500, step the value by 500,
// until 4000 is reached. From there, step by 1000.
'min': [0],
'10%': [500, 500],
'50%': [4000, 1000],
'max': [10000]
}
});
var nodes = [
document.getElementById('lower-value'), // 0
document.getElementById('upper-value') // 1
];
// Display the slider value and how far the handle moved
// from the left edge of the slider.
nonLinearSlider.noUiSlider.on('update', function (values, handle, unencoded, isTap, positions) {
nodes[handle].innerHTML = values[handle] + ', ' + positions[handle].toFixed(2) + '%';
});
/*********************
Locking sliders together
**********************/
var lockedState = false;
var lockedSlider = false;
var lockedValues = [60, 80];
var slider1 = document.getElementById('slider1');
var slider2 = document.getElementById('slider2');
var lockButton = document.getElementById('lockbutton');
var slider1Value = document.getElementById('slider1-span');
var slider2Value = document.getElementById('slider2-span');
// When the button is clicked, the locked state is inverted.
lockButton.addEventListener('click', function () {
lockedState = !lockedState;
this.textContent = lockedState ? 'unlock' : 'lock';
});
function crossUpdate(value, slider) {
// If the sliders aren't interlocked, don't
// cross-update.
if (!lockedState) return;
// Select whether to increase or decrease
// the other slider value.
var a = slider1 === slider ? 0 : 1;
// Invert a
var b = a ? 0 : 1;
// Offset the slider value.
value -= lockedValues[b] - lockedValues[a];
// Set the value
slider.noUiSlider.set(value);
}
noUiSlider.create(slider1, {
start: 60,
// Disable animation on value-setting,
// so the sliders respond immediately.
animate: false,
range: {
min: 50,
max: 100
}
});
noUiSlider.create(slider2, {
start: 80,
animate: false,
range: {
min: 50,
max: 100
}
});
slider1.noUiSlider.on('update', function (values, handle) {
slider1Value.innerHTML = values[handle];
});
slider2.noUiSlider.on('update', function (values, handle) {
slider2Value.innerHTML = values[handle];
});
function setLockedValues() {
lockedValues = [
Number(slider1.noUiSlider.get()),
Number(slider2.noUiSlider.get())
];
}
slider1.noUiSlider.on('change', setLockedValues);
slider2.noUiSlider.on('change', setLockedValues);
slider1.noUiSlider.on('slide', function (values, handle) {
crossUpdate(values[handle], slider2);
});
slider2.noUiSlider.on('slide', function (values, handle) {
crossUpdate(values[handle], slider1);
});
/*********************
tooltip
**********************/
var hidingTooltipSlider = document.getElementById('slider-hide');
noUiSlider.create(hidingTooltipSlider, {
range: {
min: 0,
max: 100
},
start: [20, 80],
tooltips: true
});
/*********************
Colored Connect Elements
**********************/
var slider = document.getElementById('slider-color');
noUiSlider.create(slider, {
start: [4000, 8000, 12000, 16000],
connect: [false, true, true, true, true],
range: {
'min': [2000],
'max': [20000]
}
});
var connect = slider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
for (var i = 0; i < connect.length; i++) {
connect[i].classList.add(classes[i]);
}
/*********************
toggle slider
**********************/
var toggleSlider = document.getElementById('slider-toggle');
noUiSlider.create(toggleSlider, {
orientation: "vertical",
start: 0,
range: {
'min': [0, 1],
'max': 1
},
format: wNumb({
decimals: 0
})
});
toggleSlider.noUiSlider.on('update', function (values, handle) {
if (values[handle] === '1') {
toggleSlider.classList.add('off');
} else {
toggleSlider.classList.remove('off');
}
});
/*********************
Soft limits
**********************/
var softSlider = document.getElementById('soft');
noUiSlider.create(softSlider, {
start: 50,
range: {
min: 0,
max: 100
},
pips: {
mode: 'values',
values: [20, 80],
density: 4
}
});
softSlider.noUiSlider.on('change', function (values, handle) {
if (values[handle] < 20) {
softSlider.noUiSlider.set(20);
} else if (values[handle] > 80) {
softSlider.noUiSlider.set(80);
}
});
@@ -0,0 +1,91 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Rating Js File
*/
// basic-rater
var basicRating = raterJs( {
starSize:22,
rating: 3,
element:document.querySelector("#basic-rater"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
// rater-step
var starRatingStep = raterJs( {
starSize:22,
step:0.5,
element:document.querySelector("#rater-step"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
// rater-message
var messageDataService = {
rate:function(rating) {
return {then:function (callback) {
setTimeout(function () {
callback((Math.random() * 5));
}, 1000);
}
}
}
}
var starRatingmessage = raterJs( {isBusyText:"Rating in progress. Please wait...",
starSize:22,
element:document.querySelector("#rater-message"),
rateCallback:function rateCallback(rating, done) {
starRatingmessage.setRating(rating);
messageDataService.rate().then(function (avgRating) {
starRatingmessage.setRating(avgRating);
done();
});
}});
// rater-unlimitedstar
var starRatingunlimited = raterJs( {
max:16,
readOnly:true,
rating:4.4,
element:document.querySelector("#rater-unlimitedstar")
});
// rater-onhover
var starRatinghover = raterJs( {
starSize:22,
element:document.querySelector("#rater-onhover"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
},
onHover:function(currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentIndex;
},
onLeave:function(currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentRating;
}
});
// rater-reset
var starRatingreset = raterJs( {
starSize:22,
element:document.querySelector("#raterreset"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
document.querySelector('#raterreset-button').addEventListener("click", function() {
starRatingreset.clear();
console.log(starRatingreset.getRating());
}, false);
@@ -0,0 +1,213 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Sweetalert Js File
*/
//Basic
document.getElementById("sa-basic").addEventListener("click", function() {
Swal.fire(
{
title: 'Any fool can use a computer',
confirmButtonColor: '#038edc',
}
)
});
//A title with a text under
document.getElementById("sa-title").addEventListener("click", function() {
Swal.fire(
{
title: "The Internet?",
text: 'That thing is still around?',
icon: 'question',
confirmButtonColor: '#038edc'
}
)
});
//Success Message
document.getElementById("sa-success").addEventListener("click", function() {
Swal.fire(
{
title: 'Good job!',
text: 'You clicked the button!',
icon: 'success',
showCancelButton: true,
confirmButtonColor: '#038edc',
cancelButtonColor: "#f34e4e"
}
)
});
//Warning Message
document.getElementById("sa-warning").addEventListener("click", function() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#51d28c",
cancelButtonColor: "#f34e4e",
confirmButtonText: "Yes, delete it!"
}).then(function (result) {
if (result.value) {
Swal.fire("Deleted!", "Your file has been deleted.", "success"
);
}
});
});
//Parameter
document.getElementById("sa-params").addEventListener("click", function() {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success mt-2',
cancelButtonClass: 'btn btn-danger ms-2 mt-2',
buttonsStyling: false
}).then(function (result) {
if (result.value) {
Swal.fire({
title: 'Deleted!',
text: 'Your file has been deleted.',
icon: 'success',
confirmButtonColor: '#038edc',
})
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire({
title: 'Cancelled',
text: 'Your imaginary file is safe :)',
icon: 'error',
confirmButtonColor: '#038edc',
})
}
});
});
//Custom Image
document.getElementById("sa-image").addEventListener("click", function() {
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'assets/images/logo-sm.png',
imageHeight: 40,
confirmButtonColor: "#038edc",
animation: false
})
});
//Auto Close Timer
document.getElementById("sa-close").addEventListener("click", function() {
var timerInterval;
Swal.fire({
title: 'Auto close alert!',
html: 'I will close in <strong></strong> seconds.',
timer: 2000,
timerProgressBar: true,
didOpen:function () {
Swal.showLoading()
timerInterval = setInterval(function() {
var content = Swal.getHtmlContainer()
if (content) {
var b = content.querySelector('b')
if (b) {
b.textContent = Swal.getTimerLeft()
}
}
}, 100)
},
onClose: function () {
clearInterval(timerInterval)
}
}).then(function (result) {
/* Read more about handling dismissals below */
if (result.dismiss === Swal.DismissReason.timer) {
console.log('I was closed by the timer')
}
})
});
//custom html alert
document.getElementById("custom-html-alert").addEventListener("click", function() {
Swal.fire({
title: '<i>HTML</i> <u>example</u>',
icon: 'info',
html: 'You can use <b>bold text</b>, ' +
'<a href="//Themesdesign.in/">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger ml-1',
confirmButtonColor: "#47bd9a",
cancelButtonColor: "#f34e4e",
confirmButtonText: '<i class="fas fa-thumbs-up me-1"></i> Great!',
cancelButtonText: '<i class="fas fa-thumbs-down"></i>'
})
});
//position
document.getElementById("sa-position").addEventListener("click", function() {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
});
//Custom width padding
document.getElementById("custom-padding-width-alert").addEventListener("click", function() {
Swal.fire({
title: 'Custom width, padding, background.',
width: 600,
padding: 100,
confirmButtonColor: "#038edc",
background: '#fff url(assets/images/auth-bg-2.jpg)'
})
});
//Ajax
document.getElementById("ajax-alert").addEventListener("click", function() {
Swal.fire({
title: 'Submit email to run ajax request',
input: 'email',
inputPlaceholder:"Enter your email address",
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
confirmButtonColor: "#038edc",
cancelButtonColor: "#f34e4e",
preConfirm: function (email) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (email === 'taken@example.com') {
reject('This email is already taken.')
} else {
resolve()
}
}, 2000)
})
},
allowOutsideClick: false
}).then(function (email) {
Swal.fire({
icon: 'success',
title: 'Ajax request finished!',
confirmButtonColor: "#038edc",
html: 'Submitted email: ' + email
})
})
});
@@ -0,0 +1,39 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Timeline Init Js File
*/
var swiper = new Swiper(".slider", {
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 4,
},
},
});
var swiper = new Swiper("#timeline-card-slider", {
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 5,
},
},
});
@@ -0,0 +1,95 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Todo Js File
*/
function getChartColorsArray(chartId) {
console.log(chartId);
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf("--") != -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(
newValue
);
if (color) return color;
} else {
return newValue;
}
});
}
}
var barchartColors = getChartColorsArray("overview-chart");
var options = {
chart: {
height: 280,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
borderRadius: 6
}
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
series: [{
name: 'Tasks',
data: [52, 66, 50, 74, 36, 52, 66]
}],
grid: {
yaxis: {
lines: {
show: false,
}
}
},
yaxis: {
labels: {
formatter: function (value) {
return value + "hrs";
}
}
},
xaxis: {
labels: {
rotate: -90
},
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
colors: barchartColors,
}
var chart = new ApexCharts(
document.querySelector("#overview-chart"),
options
);
chart.render();
// flatpickr
flatpickr('#CreateTask-due-date');
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,38 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: two step verification Init Js File
*/
// move next
function moveToNext(elem, count) {
if (elem.value.length > 0) {
document.querySelector("#digit" + count + "-input").focus();
}
}
var count = 1;
var value = document.querySelectorAll(".two-step");
value.forEach(function (el) {
el.addEventListener('keyup', function (e) {
if (count == 0) {
count = 1;
}
if (e.keyCode === 8) {
if (count == 5) {
count = 3;
}
if (document.querySelector("#digit" + count + "-input"))
document.querySelector("#digit" + count + "-input").focus();
count--;
} else {
if (count > 0) {
count++;
if (document.querySelector("#digit" + count + "-input"))
document.querySelector("#digit" + count + "-input").focus();
}
}
});
});
@@ -0,0 +1,171 @@
/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Vector Maps init Js File
*/
// world map with line & markers
var worldlinemap = new jsVectorMap({
map: "world_merc",
selector: "#world-map-line-markers",
zoomOnScroll: false,
zoomButtons: false,
markers: [{
name: "Greenland",
coords: [72, -42]
},
{
name: "Canada",
coords: [56.1304, -106.3468]
},
{
name: "Brazil",
coords: [-14.2350, -51.9253]
},
{
name: "Egypt",
coords: [26.8206, 30.8025]
},
{
name: "Russia",
coords: [61, 105]
},
{
name: "China",
coords: [35.8617, 104.1954]
},
{
name: "United States",
coords: [37.0902, -95.7129]
},
{
name: "Norway",
coords: [60.472024, 8.468946]
},
{
name: "Ukraine",
coords: [48.379433, 31.16558]
},
],
lines: [{
from: "Canada",
to: "Egypt"
},
{
from: "Russia",
to: "Egypt"
},
{
from: "Greenland",
to: "Egypt"
},
{
from: "Brazil",
to: "Egypt"
},
{
from: "United States",
to: "Egypt"
},
{
from: "China",
to: "Egypt"
},
{
from: "Norway",
to: "Egypt"
},
{
from: "Ukraine",
to: "Egypt"
},
],
lineStyle: {
animation: true,
strokeDasharray: "6 3 6",
},
})
// world map with markers
var worldemapmarkers = new jsVectorMap({
map: 'world_merc',
selector: '#world-map-markers',
zoomOnScroll: false,
zoomButtons: false,
selectedMarkers: [0, 2],
markersSelectable: true,
markers:[
{ name: "Palestine", coords: [31.9474,35.2272] },
{ name: "Russia", coords: [61.524,105.3188] },
{ name: "Canada", coords: [56.1304,-106.3468] },
{ name: "Greenland", coords: [71.7069,-42.6043] },
],
markerStyle:{
initial: { fill: "#1f58c7" },
selected: { fill: "red" }
},
labels: {
markers: {
render: function(marker){
return marker.name
}
}
}
})
// world map with image markers
var worldemapmarkersimage = new jsVectorMap({
map: 'world_merc',
selector: '#world-map-markers-image',
zoomOnScroll: false,
zoomButtons: false,
selectedMarkers: [0, 2],
markersSelectable: true,
markers:[
{ name: "Palestine", coords: [31.9474,35.2272] },
{ name: "Russia", coords: [61.524,105.3188] },
{ name: "Canada", coords: [56.1304,-106.3468] },
{ name: "Greenland", coords: [71.7069,-42.6043] },
],
markerStyle: {
initial: {
image: "assets/images/logo-dark-sm.png"
}
},
labels: {
markers: {
render: function(marker){
return marker.name
}
}
}
})
// US Map
var usmap = new jsVectorMap({
map: 'us_merc_en',
selector: "#usa-vectormap",
zoomOnScroll: false,
zoomButtons: false,
})
// canada Map
var canadamap = new jsVectorMap({
map: 'canada',
selector: "#canada-vectormap",
zoomOnScroll: false,
zoomButtons: false,
})