first commit
This commit is contained in:
@@ -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 © <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 © <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 © <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: '© <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 © <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 © <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,
|
||||
})
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user