first init
This commit is contained in:
arifal
1128
resources/js/pages/chart.js
Executable file
1128
resources/js/pages/chart.js
Executable file
File diff suppressed because it is too large
Load Diff
464
resources/js/pages/dashboard.js
Executable file
464
resources/js/pages/dashboard.js
Executable 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
17
resources/js/pages/form-fileupload.js
Executable 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
83
resources/js/pages/form-flatepicker.js
Executable 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
27
resources/js/pages/form-quilljs.js
Executable 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
1
resources/js/pages/maps-canada.js
Executable file
File diff suppressed because one or more lines are too long
314
resources/js/pages/maps-google.js
Executable file
314
resources/js/pages/maps-google.js
Executable 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
1
resources/js/pages/maps-in-mill-en.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-iraq.js
Executable file
1
resources/js/pages/maps-iraq.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-russia.js
Executable file
1
resources/js/pages/maps-russia.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-spain.js
Executable file
1
resources/js/pages/maps-spain.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-us-aea-en.js
Executable file
1
resources/js/pages/maps-us-aea-en.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-us-lcc-en.js
Executable file
1
resources/js/pages/maps-us-lcc-en.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-us-merc-en.js
Executable file
1
resources/js/pages/maps-us-merc-en.js
Executable file
File diff suppressed because one or more lines are too long
1
resources/js/pages/maps-us-mill-en.js
Executable file
1
resources/js/pages/maps-us-mill-en.js
Executable file
File diff suppressed because one or more lines are too long
85
resources/js/pages/maps-vector.js
Executable file
85
resources/js/pages/maps-vector.js
Executable 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
228
resources/js/pages/table-gridjs.js
Executable 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();
|
||||
});
|
||||
Reference in New Issue
Block a user