arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first init

Browse Source
This commit is contained in:
arifal
2025-01-16 17:16:14 +07:00
commit 84d8f3ca6a
227 changed files with 43922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
resources/js/app.js Executable file
View File

@@ -0,0 +1,351 @@
import bootstrap from 'bootstrap/dist/js/bootstrap'
window.bootstrap = bootstrap;
import 'iconify-icon';
import 'simplebar/dist/simplebar'
class Components {
initBootstrapComponents() {
[...document.querySelectorAll('[data-bs-toggle="popover"]')].map(
(e) => new bootstrap.Popover(e)
),
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')].map(
(e) => new bootstrap.Tooltip(e)
),
[...document.querySelectorAll(".offcanvas")].map(
(e) => new bootstrap.Offcanvas(e)
);
var e = document.getElementById("toastPlacement"),
t =
(e &&
document
.getElementById("selectToastPlacement")
.addEventListener("change", function () {
e.dataset.originalClass ||
(e.dataset.originalClass = e.className),
(e.className =
e.dataset.originalClass + " " + this.value);
}),
[].slice
.call(document.querySelectorAll(".toast"))
.map(function (e) {
return new bootstrap.Toast(e);
}),
document.getElementById("liveAlertBtn"));
t &&
t.addEventListener("click", () => {
alert("Nice, you triggered this alert message!", "success");
});
}
initfullScreenListener() {
var e = document.querySelector('[data-toggle="fullscreen"]');
e &&
e.addEventListener("click", function (e) {
e.preventDefault(),
document.body.classList.toggle("fullscreen-enable"),
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement
? document.cancelFullScreen
? document.cancelFullScreen()
: document.mozCancelFullScreen
? document.mozCancelFullScreen()
: document.webkitCancelFullScreen &&
document.webkitCancelFullScreen()
: document.documentElement.requestFullscreen
? document.documentElement.requestFullscreen()
: document.documentElement.mozRequestFullScreen
? document.documentElement.mozRequestFullScreen()
: document.documentElement.webkitRequestFullscreen &&
document.documentElement.webkitRequestFullscreen(
Element.ALLOW_KEYBOARD_INPUT
);
});
}
initCounter() {
var e = document.querySelectorAll(".counter-value");
function a(e) {
return e.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
e &&
e.forEach(function (i) {
!(function e() {
var t = +i.getAttribute("data-target"),
n = +i.innerText,
o = t / 250;
o < 1 && (o = 1),
n < t
? ((i.innerText = (n + o).toFixed(0)),
setTimeout(e, 1))
: (i.innerText = a(t)),
a(i.innerText);
})();
});
}
init() {
this.initBootstrapComponents(),
this.initfullScreenListener(),
this.initCounter();
}
}
class FormValidation {
initFormValidation() {
document.querySelectorAll(".needs-validation").forEach((t) => {
t.addEventListener(
"submit",
(e) => {
t.checkValidity() ||
(e.preventDefault(), e.stopPropagation()),
t.classList.add("was-validated");
},
!1
);
});
}
init() {
this.initFormValidation();
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new Components().init(), new FormValidation().init();
});
class ThemeLayout {
constructor() {
(this.html = document.getElementsByTagName("html")[0]),
(this.config = {}),
(this.defaultConfig = window.config);
}
initVerticalMenu() {
var e = document.querySelectorAll(".navbar-nav li .collapse");
document
.querySelectorAll(".navbar-nav li [data-bs-toggle='collapse']")
.forEach((e) => {
e.addEventListener("click", function (e) {
e.preventDefault();
});
}),
e.forEach((e) => {
e.addEventListener("show.bs.collapse", function (t) {
let n = t.target.closest(".collapse.show");
document
.querySelectorAll(".navbar-nav .collapse.show")
.forEach((e) => {
e !== t.target &&
e !== n &&
new bootstrap.Collapse(e).hide();
});
});
}),
document.querySelector(".navbar-nav") &&
(document
.querySelectorAll(".navbar-nav a")
.forEach(function (t) {
var e = window.location.href.split(/[?#]/)[0];
if (t.href === e) {
t.classList.add("active"),
t.parentNode.classList.add("active");
let e = t.closest(".collapse");
for (; e; )
e.classList.add("show"),
e.parentElement.children[0].classList.add(
"active"
),
e.parentElement.children[0].setAttribute(
"aria-expanded",
"true"
),
(e = e.parentElement.closest(".collapse"));
}
}),
setTimeout(function () {
var e,
n,
o,
i,
a,
t = document.querySelector(".nav-item li a.active");
null != t &&
((e = document.querySelector(
".app-sidebar .simplebar-content-wrapper"
)),
(t = t.offsetTop - 300),
e) &&
100 < t &&
((o = (n = e).scrollTop),
(i = t - o),
(a = 0),
(function e() {
var t = (a += 20),
t =
(t /= 300) < 1
? (i / 2) * t * t + o
: (-i / 2) * (--t * (t - 2) - 1) + o;
(n.scrollTop = t), a < 600 && setTimeout(e, 20);
})());
}, 200));
}
initConfig() {
(this.defaultConfig = JSON.parse(JSON.stringify(window.defaultConfig))),
(this.config = JSON.parse(JSON.stringify(window.config))),
this.setSwitchFromConfig();
}
changeMenuColor(e) {
(this.config.menu.color = e),
this.html.setAttribute("data-sidebar-color", e),
this.setSwitchFromConfig();
}
changeMenuSize(e, t = !0) {
this.html.setAttribute("data-sidebar-size", e),
t && ((this.config.menu.size = e), this.setSwitchFromConfig());
}
changeThemeMode(e) {
(this.config.theme = e),
this.html.setAttribute("data-bs-theme", e),
this.setSwitchFromConfig();
}
changeTopbarColor(e) {
(this.config.topbar.color = e),
this.html.setAttribute("data-topbar-color", e),
this.setSwitchFromConfig();
}
resetTheme() {
(this.config = JSON.parse(JSON.stringify(window.defaultConfig))),
this.changeMenuColor(this.config.menu.color),
this.changeMenuSize(this.config.menu.size),
this.changeThemeMode(this.config.theme),
this.changeTopbarColor(this.config.topbar.color),
this._adjustLayout();
}
initSwitchListener() {
var n = this,
e =
(document
.querySelectorAll("input[name=data-sidebar-color]")
.forEach(function (t) {
t.addEventListener("change", function (e) {
n.changeMenuColor(t.value);
});
}),
document
.querySelectorAll("input[name=data-sidebar-size]")
.forEach(function (t) {
t.addEventListener("change", function (e) {
n.changeMenuSize(t.value);
});
}),
document
.querySelectorAll("input[name=data-bs-theme]")
.forEach(function (t) {
t.addEventListener("change", function (e) {
n.changeThemeMode(t.value);
});
}),
document
.querySelectorAll("input[name=data-topbar-color]")
.forEach(function (t) {
t.addEventListener("change", function (e) {
n.changeTopbarColor(t.value);
});
}),
document.getElementById("light-dark-mode"));
e &&
e.addEventListener("click", function (e) {
"light" === n.config.theme
? n.changeThemeMode("dark")
: n.changeThemeMode("light");
}),
(e = document.querySelector("#reset-layout")) &&
e.addEventListener("click", function (e) {
n.resetTheme();
}),
(e = document.querySelector(".button-toggle-menu")) &&
e.addEventListener("click", function () {
var e = n.config.menu.size,
t = n.html.getAttribute("data-sidebar-size", e);
"hidden" !== t
? "condensed" === t
? n.changeMenuSize(
"condensed" == e ? "default" : e,
!1
)
: n.changeMenuSize("condensed", !1)
: n.showBackdrop(),
n.html.classList.toggle("sidebar-enable");
});
}
showBackdrop() {
let t = document.createElement("div"),
n =
((t.classList = "offcanvas-backdrop fade show"),
document.body.appendChild(t),
(document.body.style.overflow = "hidden"),
1040 < window.innerWidth &&
(document.body.style.paddingRight = "15px"),
this);
t.addEventListener("click", function (e) {
n.html.classList.remove("sidebar-enable"),
document.body.removeChild(t),
(document.body.style.overflow = null),
(document.body.style.paddingRight = null);
});
}
initWindowSize() {
var t = this;
window.addEventListener("resize", function (e) {
t._adjustLayout();
});
}
_adjustLayout() {
window.innerWidth <= 1140
? this.changeMenuSize("hidden", !1)
: this.changeMenuSize(this.config.menu.size);
}
setSwitchFromConfig() {
sessionStorage.setItem(
"__DARKONE_CONFIG__",
JSON.stringify(this.config)
),
document
.querySelectorAll(".settings-bar input[type=radio]")
.forEach(function (e) {
e.checked = !1;
});
var e,
t,
n,
o = this.config;
o &&
((e = document.querySelector(
"input[type=radio][name=data-bs-theme][value=" + o.theme + "]"
)),
(t = document.querySelector(
"input[type=radio][name=data-topbar-color][value=" +
o.topbar.color +
"]"
)),
(n = document.querySelector(
"input[type=radio][name=data-sidebar-size][value=" +
o.menu.size +
"]"
)),
(o = document.querySelector(
"input[type=radio][name=data-sidebar-color][value=" +
o.menu.color +
"]"
)),
e && (e.checked = !0),
t && (t.checked = !0),
n && (n.checked = !0),
o) &&
(o.checked = !0);
}
init() {
this.initVerticalMenu(),
this.initConfig(),
this.initSwitchListener(),
this.initWindowSize(),
this._adjustLayout(),
this.setSwitchFromConfig();
}
}
new ThemeLayout().init();

29
resources/js/config.js Executable file
View File

@@ -0,0 +1,29 @@
!(function () {
var t = sessionStorage.getItem("__DARKONE_CONFIG__"),
e = document.getElementsByTagName("html")[0],
o = {
theme: "dark",
topbar: { color: "light" },
menu: { size: "default", color: "light" },
};
var html = document.getElementsByTagName("html")[0];
var config = Object.assign(JSON.parse(JSON.stringify(o)), {});
(html),
((config = Object.assign(JSON.parse(JSON.stringify(o)), {})).theme =
e.getAttribute("data-bs-theme") || o.theme),
(config.topbar.color =
e.getAttribute("data-topbar-color") || o.topbar.color),
(config.menu.color =
e.getAttribute("data-sidebar-color") || o.menu.color),
(config.menu.size = e.getAttribute("data-sidebar-size") || o.menu.size),
(window.defaultConfig = JSON.parse(JSON.stringify(config))),
null !== t && (config = JSON.parse(t)),
(window.config = config) &&
(e.setAttribute("data-bs-theme", config.theme),
e.setAttribute("data-topbar-color", config.topbar.color),
e.setAttribute("data-sidebar-color", config.menu.color),
window.innerWidth <= 1140
? e.setAttribute("data-sidebar-size", "hidden")
: e.setAttribute("data-sidebar-size", config.menu.size));
})();

0
resources/js/irregular-data-series.js Executable file
View File

1128
resources/js/pages/chart.js Executable file
View File

File diff suppressed because it is too large Load Diff

464
resources/js/pages/dashboard.js Executable file
View File

@@ -0,0 +1,464 @@
import ApexCharts from "apexcharts";
import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
import 'jsvectormap/dist/maps/world-merc.js'
import 'jsvectormap/dist/maps/world.js'
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [25, 28, 32, 38, 43, 55, 60, 48, 42, 51, 35]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart01"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart02"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart03"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart04"), options1).render();
// Conversions
var options = {
chart: {
height: 180,
type: 'donut',
},
series: [44.25, 52.68, 45.98],
legend: {
show: false
},
stroke: {
width: 0
},
plotOptions: {
pie: {
donut: {
size: '70%',
labels: {
show: false,
total: {
showAlways: true,
show: true
}
}
}
}
},
labels: ["Direct", "Affilliate", "Sponsored"],
colors: ["#7e67fe", "#17c553", "#7942ed"],
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
}
}
}],
fill: {
type: 'gradient'
}
}
var chart = new ApexCharts(
document.querySelector("#conversions"),
options
);
chart.render();
//Sales Report -chart
var options = {
series: [{
name: "Page Views",
type: "bar",
data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67],
},
{
name: "Clicks",
type: "area",
data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35],
},
{
name: "Revenue",
type: "area",
data: [12, 16, 11, 22, 28, 25, 15, 29, 35, 45, 42, 48],
}
],
chart: {
height: 330,
type: "line",
toolbar: {
show: false,
},
},
stroke: {
dashArray: [0, 0, 2],
width: [0, 2, 2],
curve: 'smooth'
},
fill: {
opacity: [1, 1, 1],
type: ['solid', 'gradient', 'gradient'],
gradient: {
type: "vertical",
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90]
},
},
markers: {
size: [0, 0],
strokeWidth: 2,
hover: {
size: 4,
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
yaxis: {
min: 0,
axisBorder: {
show: false,
}
},
grid: {
show: true,
strokeDashArray: 3,
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
padding: {
top: 0,
right: -2,
bottom: 10,
left: 10,
},
},
legend: {
show: true,
horizontalAlign: "center",
offsetX: 0,
offsetY: 5,
markers: {
width: 9,
height: 9,
radius: 6,
},
itemMargin: {
horizontal: 10,
vertical: 0,
},
},
plotOptions: {
bar: {
columnWidth: "30%",
barHeight: "70%",
borderRadius: 3,
},
},
colors: ["#7e67fe", "#17c553", "#7942ed"],
tooltip: {
shared: true,
y: [{
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(1) + "k";
}
return y;
},
},
{
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(1) + "k";
}
return y;
},
},
],
},
}
var chart = new ApexCharts(
document.querySelector("#dash-performance-chart"),
options
);
chart.render();
class VectorMap {
initWorldMapMarker() {
const map = new jsVectorMap({
map: 'world',
selector: '#world-map-markers',
zoomOnScroll: true,
zoomButtons: false,
markersSelectable: true,
markers: [
{ name: "Canada", coords: [56.1304, -106.3468] },
{ name: "Brazil", coords: [-14.2350, -51.9253] },
{ name: "Russia", coords: [61, 105] },
{ name: "China", coords: [35.8617, 104.1954] },
{ name: "United States", coords: [37.0902, -95.7129] }
],
markerStyle: {
initial: { fill: "#7f56da" },
selected: { fill: "#1bb394" }
},
labels: {
markers: {
render: marker => marker.name
}
},
regionStyle: {
initial: {
fill: 'rgba(169,183,197, 0.3)',
fillOpacity: 1,
},
},
});
}
init() {
this.initWorldMapMarker();
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new VectorMap().init();
});

17
resources/js/pages/form-fileupload.js Executable file
View File

@@ -0,0 +1,17 @@
import { Dropzone } from "dropzone";
Dropzone.autoDiscover = false;
var previewTemplate,
dropzone,
dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
(dropzonePreviewNode.id = ""),
dropzonePreviewNode &&
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
(dropzone = new Dropzone(".dropzone", {
url: "https://httpbin.org/post",
method: "post",
previewTemplate: previewTemplate,
previewsContainer: "#dropzone-preview",
})));

83
resources/js/pages/form-flatepicker.js Executable file
View File

@@ -0,0 +1,83 @@
import 'flatpickr/dist/flatpickr'
class FlatpickrDemo {
init() {
document.getElementById("basic-datepicker").flatpickr(),
document
.getElementById("datetime-datepicker")
.flatpickr({ enableTime: !0, dateFormat: "Y-m-d H:i" }),
document
.getElementById("humanfd-datepicker")
.flatpickr({
altInput: !0,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
}),
document
.getElementById("minmax-datepicker")
.flatpickr({ minDate: "2020-01", maxDate: "2020-03" }),
document.getElementById("disable-datepicker").flatpickr({
onReady: function () {
this.jumpToDate("2025-01");
},
disable: [
"2025-01-10",
"2025-01-21",
"2025-01-30",
new Date(2025, 4, 9),
],
dateFormat: "Y-m-d",
}),
document
.getElementById("multiple-datepicker")
.flatpickr({ mode: "multiple", dateFormat: "Y-m-d" }),
document
.getElementById("conjunction-datepicker")
.flatpickr({
mode: "multiple",
dateFormat: "Y-m-d",
conjunction: " :: ",
}),
document
.getElementById("range-datepicker")
.flatpickr({ mode: "range" }),
document
.getElementById("inline-datepicker")
.flatpickr({ inline: !0 }),
document
.getElementById("basic-timepicker")
.flatpickr({
enableTime: !0,
noCalendar: !0,
dateFormat: "H:i",
}),
document
.getElementById("24hours-timepicker")
.flatpickr({
enableTime: !0,
noCalendar: !0,
dateFormat: "H:i",
time_24hr: !0,
}),
document
.getElementById("minmax-timepicker")
.flatpickr({
enableTime: !0,
noCalendar: !0,
dateFormat: "H:i",
minDate: "16:00",
maxDate: "22:30",
}),
document
.getElementById("preloading-timepicker")
.flatpickr({
enableTime: !0,
noCalendar: !0,
dateFormat: "H:i",
defaultDate: "01:45",
});
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new FlatpickrDemo().init();
});

27
resources/js/pages/form-quilljs.js Executable file
View File

@@ -0,0 +1,27 @@
import Quill from 'quill';
var quill = new Quill("#snow-editor", {
theme: "snow",
modules: {
toolbar: [
[{ font: [] }, { size: [] }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ script: "super" }, { script: "sub" }],
[
{ header: [!1, 1, 2, 3, 4, 5, 6] },
"blockquote",
"code-block",
],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
["direction", { align: [] }],
["link", "image", "video"],
["clean"],
],
},
}),
quill = new Quill("#bubble-editor", { theme: "bubble" });

1
resources/js/pages/maps-canada.js Executable file
View File

File diff suppressed because one or more lines are too long

314
resources/js/pages/maps-google.js Executable file
View File

@@ -0,0 +1,314 @@
import GMaps from 'gmaps';
class GoogleMap {
initBasicGoogleMap() {
new GMaps({ div: "#gmaps-basic", lat: -12.043333, lng: -77.028333 });
}
initMarkerGoogleMap() {
new GMaps({ div: "#gmaps-markers", lat: -12.043333, lng: -77.028333 });
}
initStreetViewGoogleMap() {
GMaps.createPanorama({ el: "#panorama", lat: 42.3455, lng: -71.0983 });
}
initMapTypes() {
var e = new GMaps({
el: "#gmaps-types",
lat: 42.3455,
lng: -71.0983,
mapTypeControlOptions: {
mapTypeIds: [
"hybrid",
"roadmap",
"satellite",
"terrain",
"osm",
"cloudmade",
],
},
});
return (
e.addMapType("osm", {
getTileUrl: function (e, t) {
return (
"http://tile.openstreetmap.org/" +
t +
"/" +
e.x +
"/" +
e.y +
".png"
);
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18,
}),
e.addMapType("cloudmade", {
getTileUrl: function (e, t) {
return (
"http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" +
t +
"/" +
e.x +
"/" +
e.y +
".png"
);
},
tileSize: new google.maps.Size(256, 256),
name: "CloudMade",
maxZoom: 18,
}),
e.setMapTypeId("osm"),
e
);
}
initUltraLightMap() {
new GMaps({
div: "#ultra-light",
lat: 42.3455,
lng: -71.0983,
styles: [
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{ color: "#ffffff" }, { lightness: 17 }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{ color: "#ffffff" },
{ lightness: 29 },
{ weight: 0.2 },
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{ color: "#ffffff" }, { lightness: 18 }],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{ color: "#ffffff" }, { lightness: 16 }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#dedede" }, { lightness: 21 }],
},
{
elementType: "labels.text.stroke",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" },
{ lightness: 16 },
],
},
{
elementType: "labels.text.fill",
stylers: [
{ saturation: 36 },
{ color: "#333333" },
{ lightness: 40 },
],
},
{
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#f2f2f2" }, { lightness: 19 }],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{ color: "#fefefe" }, { lightness: 20 }],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{ color: "#fefefe" },
{ lightness: 17 },
{ weight: 1.2 },
],
},
],
});
}
initDarkMap() {
new GMaps({
div: "#dark",
lat: 42.3455,
lng: -71.0983,
styles: [
{
featureType: "all",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
{
featureType: "all",
elementType: "labels.text.fill",
stylers: [
{ saturation: 36 },
{ color: "#000000" },
{ lightness: 40 },
],
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "on" },
{ color: "#000000" },
{ lightness: 16 },
],
},
{
featureType: "all",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{ color: "#000000" }, { lightness: 20 }],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{ color: "#000000" },
{ lightness: 17 },
{ weight: 1.2 },
],
},
{
featureType: "administrative.country",
elementType: "labels.text.fill",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [{ color: "#c4c4c4" }],
},
{
featureType: "administrative.neighborhood",
elementType: "labels.text.fill",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 20 }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{ color: "#000000" },
{ lightness: 21 },
{ visibility: "on" },
],
},
{
featureType: "poi.business",
elementType: "geometry",
stylers: [{ visibility: "on" }],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{ color: "#e5c163" }, { lightness: "0" }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{ visibility: "off" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 18 }],
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{ color: "#575757" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [{ color: "#2c2c2c" }],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 16 }],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{ color: "#999999" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 19 }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 17 }],
},
],
});
}
init() {
this.initBasicGoogleMap(),
this.initMarkerGoogleMap(),
this.initStreetViewGoogleMap(),
this.initMapTypes(),
this.initUltraLightMap(),
this.initDarkMap();
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new GoogleMap().init();
});

1
resources/js/pages/maps-in-mill-en.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-iraq.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-russia.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-spain.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-us-aea-en.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-us-lcc-en.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-us-merc-en.js Executable file
View File

File diff suppressed because one or more lines are too long

1
resources/js/pages/maps-us-mill-en.js Executable file
View File

File diff suppressed because one or more lines are too long

85
resources/js/pages/maps-vector.js Executable file
View File

@@ -0,0 +1,85 @@
import jsVectorMap from 'jsvectormap/dist/jsvectormap.js'
// Import the desired map(s)
import 'jsvectormap/dist/maps/world.js';
import 'jsvectormap/dist/maps/world-merc.js';
class VectorMap {
initWorldMapMarker() {
new jsVectorMap({
map: "world",
selector: "#world-map-markers",
zoomOnScroll: !1,
zoomButtons: !0,
markersSelectable: !0,
markers: [
{ name: "Greenland", coords: [72, -42] },
{ name: "Canada", coords: [56.1304, -106.3468] },
{ name: "Brazil", coords: [-14.235, -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] },
],
markerStyle: {
initial: { fill: "#5B8DEC" },
selected: { fill: "#ed5565" },
},
labels: { markers: { render: (a) => a.name } },
regionStyle: {
initial: { fill: "rgba(169,183,197, 0.2)", fillOpacity: 1 },
},
});
}
initCanadaVectorMap() {
new jsVectorMap({
map: "canada",
selector: "#canada-vector-map",
zoomOnScroll: !1,
regionStyle: { initial: { fill: "#1e84c4" } },
});
}
initRussiaVectorMap() {
new jsVectorMap({
map: "russia",
selector: "#russia-vector-map",
zoomOnScroll: !1,
regionStyle: { initial: { fill: "#1bb394" } },
});
}
initIraqVectorMap() {
new jsVectorMap({
map: "iraq",
selector: "#iraq-vector-map",
zoomOnScroll: !1,
regionStyle: { initial: { fill: "#f8ac59" } },
});
}
initSpainVectorMap() {
new jsVectorMap({
map: "spain",
selector: "#spain-vector-map",
zoomOnScroll: !1,
regionStyle: { initial: { fill: "#23c6c8" } },
});
}
initUsaVectorMap() {
new jsVectorMap({
map: "us_merc_en",
selector: "#usa-vector-map",
regionStyle: { initial: { fill: "#ffe381" } },
});
}
init() {
this.initWorldMapMarker(),
this.initCanadaVectorMap(),
this.initRussiaVectorMap(),
this.initIraqVectorMap(),
this.initSpainVectorMap();
}
}
document.addEventListener("DOMContentLoaded", function (a) {
new VectorMap().init();
});

228
resources/js/pages/table-gridjs.js Executable file
View File

@@ -0,0 +1,228 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import 'gridjs/dist/gridjs.umd.js'
class GridDatatable {
init() {
this.GridjsTableInit();
}
GridjsTableInit() {
// Basic Table
if (document.getElementById("table-gridjs"))
new Grid({
columns: [{
name: 'ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"Name",
{
name: 'Email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"Position", "Company", "Country",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" + "Details" + "</a>");
})
},
],
pagination: {
limit: 5
},
sort: true,
search: true,
data: [
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("table-gridjs"));
// pagination Table
if (document.getElementById("table-pagination"))
new Grid({
columns: [{
name: 'ID',
width: '120px',
formatter: (function (cell) {
return gridjs.html('<a href="" class="fw-medium">' + cell + '</a>');
})
}, "Name", "Date", "Total",
{
name: 'Actions',
width: '100px',
formatter: (function (cell) {
return gridjs.html("<button type='button' class='btn btn-sm btn-light'>" +
"Details" +
"</button>");
})
},
],
pagination: {
limit: 5
},
data: [
["#RB2320", "Alice", "07 Oct, 2024", "$24.05"],
["#RB8652", "Bob", "07 Oct, 2024", "$26.15"],
["#RB8520", "Charlie", "06 Oct, 2024", "$21.25"],
["#RB9512", "David", "05 Oct, 2024", "$25.03"],
["#RB7532", "Eve", "05 Oct, 2024", "$22.61"],
["#RB9632", "Frank", "04 Oct, 2024", "$24.05"],
["#RB7456", "Grace", "04 Oct, 2024", "$26.15"],
["#RB3002", "Hannah", "04 Oct, 2024", "$21.25"],
["#RB9857", "Ian", "03 Oct, 2024", "$22.61"],
["#RB2589", "Jane", "03 Oct, 2024", "$25.03"],
]
}).render(document.getElementById("table-pagination"));
// search Table
if (document.getElementById("table-search"))
new Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
search: true,
data: [
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("table-search"));
// Sorting Table
if (document.getElementById("table-sorting"))
new Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: [
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("table-sorting"));
// Loading State Table
if (document.getElementById("table-loading-state"))
new Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
])
}, 2000);
});
}
}).render(document.getElementById("table-loading-state"));
// Fixed Header
if (document.getElementById("table-fixed-header"))
new Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
sort: true,
pagination: true,
fixedHeader: true,
height: '400px',
data: [
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("table-fixed-header"));
// Hidden Columns
if (document.getElementById("table-hidden-column"))
new Grid({
columns: ["Name", "Email", "Position", "Company",
{
name: 'Country',
hidden: true
},
],
pagination: {
limit: 5
},
sort: true,
data: [
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("table-hidden-column"));
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new GridDatatable().init();
});

1
resources/js/vendor.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long