diff --git a/ci4/app/Views/themes/backend/vuexy/form/tarifas/preimpresion/viewTarifapreimpresionList.php b/ci4/app/Views/themes/backend/vuexy/form/tarifas/preimpresion/viewTarifapreimpresionList.php
index e83b5917..12b04991 100755
--- a/ci4/app/Views/themes/backend/vuexy/form/tarifas/preimpresion/viewTarifapreimpresionList.php
+++ b/ci4/app/Views/themes/backend/vuexy/form/tarifas/preimpresion/viewTarifapreimpresionList.php
@@ -31,7 +31,7 @@
= empty($item->nombre) || strlen($item->nombre) < 51 ? esc($item->nombre) : character_limiter(esc($item->nombre), 50) ?>
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- },
- initComplete: function () {
- // Adding role filter once table initialized
- this.api()
- .columns(3)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.user_role')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- }
- });
- }
-
- // Delete Record
- $('.datatables-permissions tbody').on('click', '.delete-record', function () {
- dt_permission.row($(this).parents('tr')).remove().draw();
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-});
diff --git a/httpdocs/themes/vuexy/js/app-access-roles.js b/httpdocs/themes/vuexy/js/app-access-roles.js
deleted file mode 100755
index d55a6734..00000000
--- a/httpdocs/themes/vuexy/js/app-access-roles.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * App user list
- */
-
-'use strict';
-
-// Datatable (jquery)
-$(function () {
- var dtUserTable = $('.datatables-users'),
- statusObj = {
- 1: { title: 'Pending', class: 'bg-label-warning' },
- 2: { title: 'Active', class: 'bg-label-success' },
- 3: { title: 'Inactive', class: 'bg-label-secondary' }
- };
-
- var userView = 'app-user-view-account.html';
-
- // Users List datatable
- if (dtUserTable.length) {
- var dtUser = dtUserTable.DataTable({
- ajax: assetsPath + 'json/user-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'full_name' },
- { data: 'role' },
- { data: 'current_plan' },
- { data: 'billing' },
- { data: 'status' },
- { data: '' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- orderable: false,
- searchable: false,
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // User full name and email
- targets: 1,
- responsivePriority: 4,
- render: function (data, type, full, meta) {
- var $name = full['full_name'],
- $email = full['email'],
- $image = full['avatar'];
- if ($image) {
- // For Avatar image
- var $output =
- '
';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6);
- var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
- var $state = states[stateNum],
- $name = full['full_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '
';
- }
- // Creates full output for row
- var $row_output =
- '
';
- return $row_output;
- }
- },
- {
- // User Role
- targets: 2,
- render: function (data, type, full, meta) {
- var $role = full['role'];
- var roleBadgeObj = {
- Subscriber:
- '
';
- }
- },
- {
- // Plans
- targets: 3,
- render: function (data, type, full, meta) {
- var $plan = full['current_plan'];
-
- return '
';
- }
- },
- {
- // User Status
- targets: 5,
- render: function (data, type, full, meta) {
- var $status = full['status'];
-
- return (
- '
'
- );
- }
- },
- {
- // Actions
- targets: -1,
- title: 'Actions',
- searchable: false,
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"row mx-2"' +
- '<"col-sm-12 col-md-4 col-lg-6" l>' +
- '<"col-sm-12 col-md-8 col-lg-6"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center align-items-center flex-sm-nowrap flex-wrap me-1"<"me-3"f><"user_role w-px-200 pb-3 pb-sm-0">>>' +
- '>t' +
- '<"row mx-2"' +
- '<"col-sm-12 col-md-6"i>' +
- '<"col-sm-12 col-md-6"p>' +
- '>',
- language: {
- sLengthMenu: 'Show _MENU_',
- search: 'Search',
- searchPlaceholder: 'Search..'
- },
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- },
- initComplete: function () {
- // Adding role filter once table initialized
- this.api()
- .columns(2)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.user_role')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- }
- });
- }
- // Delete Record
- $('.datatables-users tbody').on('click', '.delete-record', function () {
- dtUser.row($(this).parents('tr')).remove().draw();
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-});
-
-(function () {
- // On edit role click, update text
- var roleEditList = document.querySelectorAll('.role-edit-modal'),
- roleAdd = document.querySelector('.add-new-role'),
- roleTitle = document.querySelector('.role-title');
-
- roleAdd.onclick = function () {
- roleTitle.innerHTML = 'Add New Role'; // reset text
- };
- if (roleEditList) {
- roleEditList.forEach(function (roleEditEl) {
- roleEditEl.onclick = function () {
- roleTitle.innerHTML = 'Edit Role'; // reset text
- };
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/app-calendar-events.js b/httpdocs/themes/vuexy/js/app-calendar-events.js
deleted file mode 100755
index 83781e7a..00000000
--- a/httpdocs/themes/vuexy/js/app-calendar-events.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * App Calendar Events
- */
-
-'use strict';
-
-let date = new Date();
-let nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
-// prettier-ignore
-let nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1);
-// prettier-ignore
-let prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1);
-
-let events = [
- {
- id: 1,
- url: '',
- title: 'Design Review',
- start: date,
- end: nextDay,
- allDay: false,
- extendedProps: {
- calendar: 'Business'
- }
- },
- {
- id: 2,
- url: '',
- title: 'Meeting With Client',
- start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
- allDay: true,
- extendedProps: {
- calendar: 'Business'
- }
- },
- {
- id: 3,
- url: '',
- title: 'Family Trip',
- allDay: true,
- start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
- extendedProps: {
- calendar: 'Holiday'
- }
- },
- {
- id: 4,
- url: '',
- title: "Doctor's Appointment",
- start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
- extendedProps: {
- calendar: 'Personal'
- }
- },
- {
- id: 5,
- url: '',
- title: 'Dart Game?',
- start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
- allDay: true,
- extendedProps: {
- calendar: 'ETC'
- }
- },
- {
- id: 6,
- url: '',
- title: 'Meditation',
- start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
- allDay: true,
- extendedProps: {
- calendar: 'Personal'
- }
- },
- {
- id: 7,
- url: '',
- title: 'Dinner',
- start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
- extendedProps: {
- calendar: 'Family'
- }
- },
- {
- id: 8,
- url: '',
- title: 'Product Review',
- start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
- end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
- allDay: true,
- extendedProps: {
- calendar: 'Business'
- }
- },
- {
- id: 9,
- url: '',
- title: 'Monthly Meeting',
- start: nextMonth,
- end: nextMonth,
- allDay: true,
- extendedProps: {
- calendar: 'Business'
- }
- },
- {
- id: 10,
- url: '',
- title: 'Monthly Checkup',
- start: prevMonth,
- end: prevMonth,
- allDay: true,
- extendedProps: {
- calendar: 'Personal'
- }
- }
-];
diff --git a/httpdocs/themes/vuexy/js/app-calendar.js b/httpdocs/themes/vuexy/js/app-calendar.js
deleted file mode 100755
index f98c7034..00000000
--- a/httpdocs/themes/vuexy/js/app-calendar.js
+++ /dev/null
@@ -1,571 +0,0 @@
-/**
- * App Calendar
- */
-
-/**
- * ! If both start and end dates are same Full calendar will nullify the end date value.
- * ! Full calendar will end the event on a day before at 12:00:00AM thus, event won't extend to the end date.
- * ! We are getting events from a separate file named app-calendar-events.js. You can add or remove events from there.
- *
- **/
-
-'use strict';
-
-let direction = 'ltr';
-
-if (isRtl) {
- direction = 'rtl';
-}
-
-document.addEventListener('DOMContentLoaded', function () {
- (function () {
- const calendarEl = document.getElementById('calendar'),
- appCalendarSidebar = document.querySelector('.app-calendar-sidebar'),
- addEventSidebar = document.getElementById('addEventSidebar'),
- appOverlay = document.querySelector('.app-overlay'),
- calendarsColor = {
- Business: 'primary',
- Holiday: 'success',
- Personal: 'danger',
- Family: 'warning',
- ETC: 'info'
- },
- offcanvasTitle = document.querySelector('.offcanvas-title'),
- btnToggleSidebar = document.querySelector('.btn-toggle-sidebar'),
- btnSubmit = document.querySelector('button[type="submit"]'),
- btnDeleteEvent = document.querySelector('.btn-delete-event'),
- btnCancel = document.querySelector('.btn-cancel'),
- eventTitle = document.querySelector('#eventTitle'),
- eventStartDate = document.querySelector('#eventStartDate'),
- eventEndDate = document.querySelector('#eventEndDate'),
- eventUrl = document.querySelector('#eventURL'),
- eventLabel = $('#eventLabel'), // ! Using jquery vars due to select2 jQuery dependency
- eventGuests = $('#eventGuests'), // ! Using jquery vars due to select2 jQuery dependency
- eventLocation = document.querySelector('#eventLocation'),
- eventDescription = document.querySelector('#eventDescription'),
- allDaySwitch = document.querySelector('.allDay-switch'),
- selectAll = document.querySelector('.select-all'),
- filterInput = [].slice.call(document.querySelectorAll('.input-filter')),
- inlineCalendar = document.querySelector('.inline-calendar');
-
- let eventToUpdate,
- currentEvents = events, // Assign app-calendar-events.js file events (assume events from API) to currentEvents (browser store/object) to manage and update calender events
- isFormValid = false,
- inlineCalInstance;
-
- // Init event Offcanvas
- const bsAddEventSidebar = new bootstrap.Offcanvas(addEventSidebar);
-
- //! TODO: Update Event label and guest code to JS once select removes jQuery dependency
- // Event Label (select2)
- if (eventLabel.length) {
- function renderBadges(option) {
- if (!option.id) {
- return option.text;
- }
- var $badge =
- "
').select2({
- placeholder: 'Select value',
- dropdownParent: eventLabel.parent(),
- templateResult: renderBadges,
- templateSelection: renderBadges,
- minimumResultsForSearch: -1,
- escapeMarkup: function (es) {
- return es;
- }
- });
- }
-
- // Event Guests (select2)
- if (eventGuests.length) {
- function renderGuestAvatar(option) {
- if (!option.id) {
- return option.text;
- }
- var $avatar =
- "
').select2({
- placeholder: 'Select value',
- dropdownParent: eventGuests.parent(),
- closeOnSelect: false,
- templateResult: renderGuestAvatar,
- templateSelection: renderGuestAvatar,
- escapeMarkup: function (es) {
- return es;
- }
- });
- }
-
- // Event start (flatpicker)
- if (eventStartDate) {
- var start = eventStartDate.flatpickr({
- enableTime: true,
- altFormat: 'Y-m-dTH:i:S',
- onReady: function (selectedDates, dateStr, instance) {
- if (instance.isMobile) {
- instance.mobileInput.setAttribute('step', null);
- }
- }
- });
- }
-
- // Event end (flatpicker)
- if (eventEndDate) {
- var end = eventEndDate.flatpickr({
- enableTime: true,
- altFormat: 'Y-m-dTH:i:S',
- onReady: function (selectedDates, dateStr, instance) {
- if (instance.isMobile) {
- instance.mobileInput.setAttribute('step', null);
- }
- }
- });
- }
-
- // Inline sidebar calendar (flatpicker)
- if (inlineCalendar) {
- inlineCalInstance = inlineCalendar.flatpickr({
- monthSelectorType: 'static',
- inline: true
- });
- }
-
- // Event click function
- function eventClick(info) {
- eventToUpdate = info.event;
- if (eventToUpdate.url) {
- info.jsEvent.preventDefault();
- window.open(eventToUpdate.url, '_blank');
- }
- bsAddEventSidebar.show();
- // For update event set offcanvas title text: Update Event
- if (offcanvasTitle) {
- offcanvasTitle.innerHTML = 'Update Event';
- }
- btnSubmit.innerHTML = 'Update';
- btnSubmit.classList.add('btn-update-event');
- btnSubmit.classList.remove('btn-add-event');
- btnDeleteEvent.classList.remove('d-none');
-
- eventTitle.value = eventToUpdate.title;
- start.setDate(eventToUpdate.start, true, 'Y-m-d');
- eventToUpdate.allDay === true ? (allDaySwitch.checked = true) : (allDaySwitch.checked = false);
- eventToUpdate.end !== null
- ? end.setDate(eventToUpdate.end, true, 'Y-m-d')
- : end.setDate(eventToUpdate.start, true, 'Y-m-d');
- eventLabel.val(eventToUpdate.extendedProps.calendar).trigger('change');
- eventToUpdate.extendedProps.location !== undefined
- ? (eventLocation.value = eventToUpdate.extendedProps.location)
- : null;
- eventToUpdate.extendedProps.guests !== undefined
- ? eventGuests.val(eventToUpdate.extendedProps.guests).trigger('change')
- : null;
- eventToUpdate.extendedProps.description !== undefined
- ? (eventDescription.value = eventToUpdate.extendedProps.description)
- : null;
-
- // // Call removeEvent function
- // btnDeleteEvent.addEventListener('click', e => {
- // removeEvent(parseInt(eventToUpdate.id));
- // // eventToUpdate.remove();
- // bsAddEventSidebar.hide();
- // });
- }
-
- // Modify sidebar toggler
- function modifyToggler() {
- const fcSidebarToggleButton = document.querySelector('.fc-sidebarToggle-button');
- fcSidebarToggleButton.classList.remove('fc-button-primary');
- fcSidebarToggleButton.classList.add('d-lg-none', 'd-inline-block', 'ps-0');
- while (fcSidebarToggleButton.firstChild) {
- fcSidebarToggleButton.firstChild.remove();
- }
- fcSidebarToggleButton.setAttribute('data-bs-toggle', 'sidebar');
- fcSidebarToggleButton.setAttribute('data-overlay', '');
- fcSidebarToggleButton.setAttribute('data-target', '#app-calendar-sidebar');
- fcSidebarToggleButton.insertAdjacentHTML('beforeend', '');
- }
-
- // Filter events by calender
- function selectedCalendars() {
- let selected = [],
- filterInputChecked = [].slice.call(document.querySelectorAll('.input-filter:checked'));
-
- filterInputChecked.forEach(item => {
- selected.push(item.getAttribute('data-value'));
- });
-
- return selected;
- }
-
- // --------------------------------------------------------------------------------------------------
- // AXIOS: fetchEvents
- // * This will be called by fullCalendar to fetch events. Also this can be used to refetch events.
- // --------------------------------------------------------------------------------------------------
- function fetchEvents(info, successCallback) {
- // Fetch Events from API endpoint reference
- /* $.ajax(
- {
- url: '../../../app-assets/data/app-calendar-events.js',
- type: 'GET',
- success: function (result) {
- // Get requested calendars as Array
- var calendars = selectedCalendars();
-
- return [result.events.filter(event => calendars.includes(event.extendedProps.calendar))];
- },
- error: function (error) {
- console.log(error);
- }
- }
- ); */
-
- let calendars = selectedCalendars();
- // We are reading event object from app-calendar-events.js file directly by including that file above app-calendar file.
- // You should make an API call, look into above commented API call for reference
- let selectedEvents = currentEvents.filter(function (event) {
- // console.log(event.extendedProps.calendar.toLowerCase());
- return calendars.includes(event.extendedProps.calendar.toLowerCase());
- });
- // if (selectedEvents.length > 0) {
- successCallback(selectedEvents);
- // }
- }
-
- // Init FullCalendar
- // ------------------------------------------------
- let calendar = new Calendar(calendarEl, {
- initialView: 'dayGridMonth',
- events: fetchEvents,
- plugins: [dayGridPlugin, interactionPlugin, listPlugin, timegridPlugin],
- editable: true,
- dragScroll: true,
- dayMaxEvents: 2,
- eventResizableFromStart: true,
- customButtons: {
- sidebarToggle: {
- text: 'Sidebar'
- }
- },
- headerToolbar: {
- start: 'sidebarToggle, prev,next, title',
- end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
- },
- direction: direction,
- initialDate: new Date(),
- navLinks: true, // can click day/week names to navigate views
- eventClassNames: function ({ event: calendarEvent }) {
- const colorName = calendarsColor[calendarEvent._def.extendedProps.calendar];
- // Background Color
- return ['fc-event-' + colorName];
- },
- dateClick: function (info) {
- let date = moment(info.date).format('YYYY-MM-DD');
- resetValues();
- bsAddEventSidebar.show();
-
- // For new event set offcanvas title text: Add Event
- if (offcanvasTitle) {
- offcanvasTitle.innerHTML = 'Add Event';
- }
- btnSubmit.innerHTML = 'Add';
- btnSubmit.classList.remove('btn-update-event');
- btnSubmit.classList.add('btn-add-event');
- btnDeleteEvent.classList.add('d-none');
- eventStartDate.value = date;
- eventEndDate.value = date;
- },
- eventClick: function (info) {
- eventClick(info);
- },
- datesSet: function () {
- modifyToggler();
- },
- viewDidMount: function () {
- modifyToggler();
- }
- });
-
- // Render calendar
- calendar.render();
- // Modify sidebar toggler
- modifyToggler();
-
- const eventForm = document.getElementById('eventForm');
- const fv = FormValidation.formValidation(eventForm, {
- fields: {
- eventTitle: {
- validators: {
- notEmpty: {
- message: 'Please enter event title '
- }
- }
- },
- eventStartDate: {
- validators: {
- notEmpty: {
- message: 'Please enter start date '
- }
- }
- },
- eventEndDate: {
- validators: {
- notEmpty: {
- message: 'Please enter end date '
- }
- }
- }
- },
- plugins: {
- trigger: new FormValidation.plugins.Trigger(),
- bootstrap5: new FormValidation.plugins.Bootstrap5({
- // Use this for enabling/changing valid/invalid class
- eleValidClass: '',
- rowSelector: function (field, ele) {
- // field is the field name & ele is the field element
- return '.mb-3';
- }
- }),
- submitButton: new FormValidation.plugins.SubmitButton(),
- // Submit the form when all fields are valid
- // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
- autoFocus: new FormValidation.plugins.AutoFocus()
- }
- })
- .on('core.form.valid', function () {
- // Jump to the next step when all fields in the current step are valid
- isFormValid = true;
- })
- .on('core.form.invalid', function () {
- // if fields are invalid
- isFormValid = false;
- });
-
- // Sidebar Toggle Btn
- if (btnToggleSidebar) {
- btnToggleSidebar.addEventListener('click', e => {
- btnCancel.classList.remove('d-none');
- });
- }
-
- // Add Event
- // ------------------------------------------------
- function addEvent(eventData) {
- // ? Add new event data to current events object and refetch it to display on calender
- // ? You can write below code to AJAX call success response
-
- currentEvents.push(eventData);
- calendar.refetchEvents();
-
- // ? To add event directly to calender (won't update currentEvents object)
- // calendar.addEvent(eventData);
- }
-
- // Update Event
- // ------------------------------------------------
- function updateEvent(eventData) {
- // ? Update existing event data to current events object and refetch it to display on calender
- // ? You can write below code to AJAX call success response
- eventData.id = parseInt(eventData.id);
- currentEvents[currentEvents.findIndex(el => el.id === eventData.id)] = eventData; // Update event by id
- calendar.refetchEvents();
-
- // ? To update event directly to calender (won't update currentEvents object)
- // let propsToUpdate = ['id', 'title', 'url'];
- // let extendedPropsToUpdate = ['calendar', 'guests', 'location', 'description'];
-
- // updateEventInCalendar(eventData, propsToUpdate, extendedPropsToUpdate);
- }
-
- // Remove Event
- // ------------------------------------------------
-
- function removeEvent(eventId) {
- // ? Delete existing event data to current events object and refetch it to display on calender
- // ? You can write below code to AJAX call success response
- currentEvents = currentEvents.filter(function (event) {
- return event.id != eventId;
- });
- calendar.refetchEvents();
-
- // ? To delete event directly to calender (won't update currentEvents object)
- // removeEventInCalendar(eventId);
- }
-
- // (Update Event In Calendar (UI Only)
- // ------------------------------------------------
- const updateEventInCalendar = (updatedEventData, propsToUpdate, extendedPropsToUpdate) => {
- const existingEvent = calendar.getEventById(updatedEventData.id);
-
- // --- Set event properties except date related ----- //
- // ? Docs: https://fullcalendar.io/docs/Event-setProp
- // dateRelatedProps => ['start', 'end', 'allDay']
- // eslint-disable-next-line no-plusplus
- for (var index = 0; index < propsToUpdate.length; index++) {
- var propName = propsToUpdate[index];
- existingEvent.setProp(propName, updatedEventData[propName]);
- }
-
- // --- Set date related props ----- //
- // ? Docs: https://fullcalendar.io/docs/Event-setDates
- existingEvent.setDates(updatedEventData.start, updatedEventData.end, {
- allDay: updatedEventData.allDay
- });
-
- // --- Set event's extendedProps ----- //
- // ? Docs: https://fullcalendar.io/docs/Event-setExtendedProp
- // eslint-disable-next-line no-plusplus
- for (var index = 0; index < extendedPropsToUpdate.length; index++) {
- var propName = extendedPropsToUpdate[index];
- existingEvent.setExtendedProp(propName, updatedEventData.extendedProps[propName]);
- }
- };
-
- // Remove Event In Calendar (UI Only)
- // ------------------------------------------------
- function removeEventInCalendar(eventId) {
- calendar.getEventById(eventId).remove();
- }
-
- // Add new event
- // ------------------------------------------------
- btnSubmit.addEventListener('click', e => {
- if (btnSubmit.classList.contains('btn-add-event')) {
- if (isFormValid) {
- let newEvent = {
- id: calendar.getEvents().length + 1,
- title: eventTitle.value,
- start: eventStartDate.value,
- end: eventEndDate.value,
- startStr: eventStartDate.value,
- endStr: eventEndDate.value,
- display: 'block',
- extendedProps: {
- location: eventLocation.value,
- guests: eventGuests.val(),
- calendar: eventLabel.val(),
- description: eventDescription.value
- }
- };
- if (eventUrl.value) {
- newEvent.url = eventUrl.value;
- }
- if (allDaySwitch.checked) {
- newEvent.allDay = true;
- }
- addEvent(newEvent);
- bsAddEventSidebar.hide();
- }
- } else {
- // Update event
- // ------------------------------------------------
- if (isFormValid) {
- let eventData = {
- id: eventToUpdate.id,
- title: eventTitle.value,
- start: eventStartDate.value,
- end: eventEndDate.value,
- url: eventUrl.value,
- extendedProps: {
- location: eventLocation.value,
- guests: eventGuests.val(),
- calendar: eventLabel.val(),
- description: eventDescription.value
- },
- display: 'block',
- allDay: allDaySwitch.checked ? true : false
- };
-
- updateEvent(eventData);
- bsAddEventSidebar.hide();
- }
- }
- });
-
- // Call removeEvent function
- btnDeleteEvent.addEventListener('click', e => {
- removeEvent(parseInt(eventToUpdate.id));
- // eventToUpdate.remove();
- bsAddEventSidebar.hide();
- });
-
- // Reset event form inputs values
- // ------------------------------------------------
- function resetValues() {
- eventEndDate.value = '';
- eventUrl.value = '';
- eventStartDate.value = '';
- eventTitle.value = '';
- eventLocation.value = '';
- allDaySwitch.checked = false;
- eventGuests.val('').trigger('change');
- eventDescription.value = '';
- }
-
- // When modal hides reset input values
- addEventSidebar.addEventListener('hidden.bs.offcanvas', function () {
- resetValues();
- });
-
- // Hide left sidebar if the right sidebar is open
- btnToggleSidebar.addEventListener('click', e => {
- if (offcanvasTitle) {
- offcanvasTitle.innerHTML = 'Add Event';
- }
- btnSubmit.innerHTML = 'Add';
- btnSubmit.classList.remove('btn-update-event');
- btnSubmit.classList.add('btn-add-event');
- btnDeleteEvent.classList.add('d-none');
- appCalendarSidebar.classList.remove('show');
- appOverlay.classList.remove('show');
- });
-
- // Calender filter functionality
- // ------------------------------------------------
- if (selectAll) {
- selectAll.addEventListener('click', e => {
- if (e.currentTarget.checked) {
- document.querySelectorAll('.input-filter').forEach(c => (c.checked = 1));
- } else {
- document.querySelectorAll('.input-filter').forEach(c => (c.checked = 0));
- }
- calendar.refetchEvents();
- });
- }
-
- if (filterInput) {
- filterInput.forEach(item => {
- item.addEventListener('click', () => {
- document.querySelectorAll('.input-filter:checked').length < document.querySelectorAll('.input-filter').length
- ? (selectAll.checked = false)
- : (selectAll.checked = true);
- calendar.refetchEvents();
- });
- });
- }
-
- // Jump to date on sidebar(inline) calendar change
- inlineCalInstance.config.onChange.push(function (date) {
- calendar.changeView(calendar.view.type, moment(date[0]).format('YYYY-MM-DD'));
- modifyToggler();
- appCalendarSidebar.classList.remove('show');
- appOverlay.classList.remove('show');
- });
- })();
-});
diff --git a/httpdocs/themes/vuexy/js/app-chat.js b/httpdocs/themes/vuexy/js/app-chat.js
deleted file mode 100755
index 2249cbc6..00000000
--- a/httpdocs/themes/vuexy/js/app-chat.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/**
- * App Chat
- */
-
-'use strict';
-
-document.addEventListener('DOMContentLoaded', function () {
- (function () {
- const chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body'),
- chatContactListItems = [].slice.call(
- document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
- ),
- chatHistoryBody = document.querySelector('.chat-history-body'),
- chatSidebarLeftBody = document.querySelector('.app-chat-sidebar-left .sidebar-body'),
- chatSidebarRightBody = document.querySelector('.app-chat-sidebar-right .sidebar-body'),
- chatUserStatus = [].slice.call(document.querySelectorAll(".form-check-input[name='chat-user-status']")),
- chatSidebarLeftUserAbout = $('.chat-sidebar-left-user-about'),
- formSendMessage = document.querySelector('.form-send-message'),
- messageInput = document.querySelector('.message-input'),
- searchInput = document.querySelector('.chat-search-input'),
- speechToText = $('.speech-to-text'), // ! jQuery dependency for speech to text
- userStatusObj = {
- active: 'avatar-online',
- offline: 'avatar-offline',
- away: 'avatar-away',
- busy: 'avatar-busy'
- };
-
- // Initialize PerfectScrollbar
- // ------------------------------
-
- // Chat contacts scrollbar
- if (chatContactsBody) {
- new PerfectScrollbar(chatContactsBody, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Chat history scrollbar
- if (chatHistoryBody) {
- new PerfectScrollbar(chatHistoryBody, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Sidebar left scrollbar
- if (chatSidebarLeftBody) {
- new PerfectScrollbar(chatSidebarLeftBody, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Sidebar right scrollbar
- if (chatSidebarRightBody) {
- new PerfectScrollbar(chatSidebarRightBody, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Scroll to bottom function
- function scrollToBottom() {
- chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
- }
- scrollToBottom();
-
- // User About Maxlength Init
- if (chatSidebarLeftUserAbout.length) {
- chatSidebarLeftUserAbout.maxlength({
- alwaysShow: true,
- warningClass: 'label label-success bg-success text-white',
- limitReachedClass: 'label label-danger',
- separator: '/',
- validate: true,
- threshold: 120
- });
- }
-
- // Update user status
- chatUserStatus.forEach(el => {
- el.addEventListener('click', e => {
- let chatLeftSidebarUserAvatar = document.querySelector('.chat-sidebar-left-user .avatar'),
- value = e.currentTarget.value;
- //Update status in left sidebar user avatar
- chatLeftSidebarUserAvatar.removeAttribute('class');
- Helpers._addClass('avatar avatar-xl ' + userStatusObj[value] + '', chatLeftSidebarUserAvatar);
- //Update status in contacts sidebar user avatar
- let chatContactsUserAvatar = document.querySelector('.app-chat-contacts .avatar');
- chatContactsUserAvatar.removeAttribute('class');
- Helpers._addClass('flex-shrink-0 avatar ' + userStatusObj[value] + ' me-3', chatContactsUserAvatar);
- });
- });
-
- // Select chat or contact
- chatContactListItems.forEach(chatContactListItem => {
- // Bind click event to each chat contact list item
- chatContactListItem.addEventListener('click', e => {
- // Remove active class from chat contact list item
- chatContactListItems.forEach(chatContactListItem => {
- chatContactListItem.classList.remove('active');
- });
- // Add active class to current chat contact list item
- e.currentTarget.classList.add('active');
- });
- });
-
- // Filter Chats
- if (searchInput) {
- searchInput.addEventListener('keyup', e => {
- let searchValue = e.currentTarget.value.toLowerCase(),
- searchChatListItemsCount = 0,
- searchContactListItemsCount = 0,
- chatListItem0 = document.querySelector('.chat-list-item-0'),
- contactListItem0 = document.querySelector('.contact-list-item-0'),
- searchChatListItems = [].slice.call(
- document.querySelectorAll('#chat-list li:not(.chat-contact-list-item-title)')
- ),
- searchContactListItems = [].slice.call(
- document.querySelectorAll('#contact-list li:not(.chat-contact-list-item-title)')
- );
-
- // Search in chats
- searchChatContacts(searchChatListItems, searchChatListItemsCount, searchValue, chatListItem0);
- // Search in contacts
- searchChatContacts(searchContactListItems, searchContactListItemsCount, searchValue, contactListItem0);
- });
- }
-
- // Search chat and contacts function
- function searchChatContacts(searchListItems, searchListItemsCount, searchValue, listItem0) {
- searchListItems.forEach(searchListItem => {
- let searchListItemText = searchListItem.textContent.toLowerCase();
- if (searchValue) {
- if (-1 < searchListItemText.indexOf(searchValue)) {
- searchListItem.classList.add('d-flex');
- searchListItem.classList.remove('d-none');
- searchListItemsCount++;
- } else {
- searchListItem.classList.add('d-none');
- }
- } else {
- searchListItem.classList.add('d-flex');
- searchListItem.classList.remove('d-none');
- searchListItemsCount++;
- }
- });
- // Display no search fount if searchListItemsCount == 0
- if (searchListItemsCount == 0) {
- listItem0.classList.remove('d-none');
- } else {
- listItem0.classList.add('d-none');
- }
- }
-
- // Send Message
- formSendMessage.addEventListener('submit', e => {
- e.preventDefault();
- if (messageInput.value) {
- // Create a div and add a class
- let renderMsg = document.createElement('div');
- renderMsg.className = 'chat-message-text mt-2';
- renderMsg.innerHTML = '
';
- document.querySelector('li:last-child .chat-message-wrapper').appendChild(renderMsg);
- messageInput.value = '';
- scrollToBottom();
- }
- });
-
- // on click of chatHistoryHeaderMenu, Remove data-overlay attribute from chatSidebarLeftClose to resolve overlay overlapping issue for two sidebar
- let chatHistoryHeaderMenu = document.querySelector(".chat-history-header [data-target='#app-chat-contacts']"),
- chatSidebarLeftClose = document.querySelector('.app-chat-sidebar-left .close-sidebar');
- chatHistoryHeaderMenu.addEventListener('click', e => {
- chatSidebarLeftClose.removeAttribute('data-overlay');
- });
- // }
-
- // Speech To Text
- if (speechToText.length) {
- var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
- if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
- var recognition = new SpeechRecognition(),
- listening = false;
- speechToText.on('click', function () {
- const $this = $(this);
- recognition.onspeechstart = function () {
- listening = true;
- };
- if (listening === false) {
- recognition.start();
- }
- recognition.onerror = function (event) {
- listening = false;
- };
- recognition.onresult = function (event) {
- $this.closest('.form-send-message').find('.message-input').val(event.results[0][0].transcript);
- };
- recognition.onspeechend = function (event) {
- listening = false;
- recognition.stop();
- };
- });
- }
- }
- })();
-});
diff --git a/httpdocs/themes/vuexy/js/app-email.js b/httpdocs/themes/vuexy/js/app-email.js
deleted file mode 100755
index e040439e..00000000
--- a/httpdocs/themes/vuexy/js/app-email.js
+++ /dev/null
@@ -1,380 +0,0 @@
-/**
- * App Email
- */
-
-'use strict';
-
-document.addEventListener('DOMContentLoaded', function () {
- (function () {
- const emailList = document.querySelector('.email-list'),
- emailListItems = [].slice.call(document.querySelectorAll('.email-list-item')),
- emailListItemInputs = [].slice.call(document.querySelectorAll('.email-list-item-input')),
- emailView = document.querySelector('.app-email-view-content'),
- emailFilters = document.querySelector('.email-filters'),
- emailFilterByFolders = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
- emailEditor = document.querySelector('.email-editor'),
- appEmailSidebar = document.querySelector('.app-email-sidebar'),
- appOverlay = document.querySelector('.app-overlay'),
- emailReplyEditor = document.querySelector('.email-reply-editor'),
- bookmarkEmail = [].slice.call(document.querySelectorAll('.email-list-item-bookmark')),
- selectAllEmails = document.getElementById('email-select-all'),
- emailSearch = document.querySelector('.email-search-input'),
- toggleCC = document.querySelector('.email-compose-toggle-cc'),
- toggleBCC = document.querySelector('.email-compose-toggle-bcc'),
- emailCompose = document.querySelector('.app-email-compose'),
- emailListDelete = document.querySelector('.email-list-delete'),
- emailListRead = document.querySelector('.email-list-read'),
- refreshEmails = document.querySelector('.email-refresh'),
- emailViewContainer = document.getElementById('app-email-view'),
- emailFilterFolderLists = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
- emailListItemActions = [].slice.call(document.querySelectorAll('.email-list-item-actions li'));
-
- // Initialize PerfectScrollbar
- // ------------------------------
- // Email list scrollbar
- if (emailList) {
- let emailListInstance = new PerfectScrollbar(emailList, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Sidebar tags scrollbar
- if (emailFilters) {
- new PerfectScrollbar(emailFilters, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Email view scrollbar
- if (emailView) {
- new PerfectScrollbar(emailView, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- }
-
- // Initialize Quill Editor
- // ------------------------------
- if (emailEditor) {
- new Quill('.email-editor', {
- modules: {
- toolbar: '.email-editor-toolbar'
- },
- placeholder: 'Write your message... ',
- theme: 'snow'
- });
- }
-
- if (emailReplyEditor) {
- new Quill('.email-reply-editor', {
- modules: {
- toolbar: '.email-reply-toolbar'
- },
- placeholder: 'Write your message... ',
- theme: 'snow'
- });
- }
-
- // Bookmark email
- if (bookmarkEmail) {
- bookmarkEmail.forEach(emailItem => {
- emailItem.addEventListener('click', e => {
- let emailItem = e.currentTarget.parentNode.parentNode;
- let starredAttr = emailItem.getAttribute('data-starred');
- e.stopPropagation();
- if (!starredAttr) {
- emailItem.setAttribute('data-starred', 'true');
- } else {
- emailItem.removeAttribute('data-starred');
- }
- });
- });
- }
-
- // Select all
- if (selectAllEmails) {
- selectAllEmails.addEventListener('click', e => {
- if (e.currentTarget.checked) {
- emailListItemInputs.forEach(c => (c.checked = 1));
- } else {
- emailListItemInputs.forEach(c => (c.checked = 0));
- }
- });
- }
-
- // Select single email
- if (emailListItemInputs) {
- emailListItemInputs.forEach(emailListItemInput => {
- emailListItemInput.addEventListener('click', e => {
- e.stopPropagation();
- // Check input count to reset the indeterminate state
- let emailListItemInputCount = 0;
- emailListItemInputs.forEach(emailListItemInput => {
- if (emailListItemInput.checked) {
- emailListItemInputCount++;
- }
- });
-
- if (emailListItemInputCount < emailListItemInputs.length) {
- if (emailListItemInputCount == 0) {
- selectAllEmails.indeterminate = false;
- } else {
- selectAllEmails.indeterminate = true;
- }
- } else {
- if (emailListItemInputCount == emailListItemInputs.length) {
- selectAllEmails.indeterminate = false;
- selectAllEmails.checked = true;
- } else {
- selectAllEmails.indeterminate = false;
- }
- }
- });
- });
- }
-
- // Search email based on searched text
- if (emailSearch) {
- emailSearch.addEventListener('keyup', e => {
- let searchValue = e.currentTarget.value.toLowerCase(),
- searchEmailListItems = {},
- selectedFolderFilter = document.querySelector('.email-filter-folders .active').getAttribute('data-target');
-
- // Filter emails based on selected folders
- if (selectedFolderFilter != 'inbox') {
- searchEmailListItems = [].slice.call(
- document.querySelectorAll('.email-list-item[data-' + selectedFolderFilter + '="true"]')
- );
- } else {
- searchEmailListItems = [].slice.call(document.querySelectorAll('.email-list-item'));
- }
-
- // console.log(searchValue);
- searchEmailListItems.forEach(searchEmailListItem => {
- let searchEmailListItemText = searchEmailListItem.textContent.toLowerCase();
- if (searchValue) {
- if (-1 < searchEmailListItemText.indexOf(searchValue)) {
- searchEmailListItem.classList.add('d-block');
- } else {
- searchEmailListItem.classList.add('d-none');
- }
- } else {
- searchEmailListItem.classList.remove('d-none');
- }
- });
- });
- }
-
- // Filter based on folder type (Inbox, Sent, Draft etc...)
- emailFilterByFolders.forEach(emailFilterByFolder => {
- emailFilterByFolder.addEventListener('click', e => {
- let currentTarget = e.currentTarget,
- currentTargetData = currentTarget.getAttribute('data-target');
-
- appEmailSidebar.classList.remove('show');
- appOverlay.classList.remove('show');
-
- // Remove active class from each folder filters
- Helpers._removeClass('active', emailFilterByFolders);
- // Add active class to selected folder filters
- currentTarget.classList.add('active');
- emailListItems.forEach(emailListItem => {
- // If folder filter is Inbox
- if (currentTargetData == 'inbox') {
- emailListItem.classList.add('d-block');
- emailListItem.classList.remove('d-none');
- } else if (emailListItem.hasAttribute('data-' + currentTargetData)) {
- emailListItem.classList.add('d-block');
- emailListItem.classList.remove('d-none');
- } else {
- emailListItem.classList.add('d-none');
- emailListItem.classList.remove('d-block');
- }
- });
- });
- });
-
- // Toggle CC/BCC input
- if (toggleBCC) {
- toggleBCC.addEventListener('click', e => {
- Helpers._toggleClass(document.querySelector('.email-compose-bcc'), 'd-block', 'd-none');
- });
- }
-
- if (toggleCC) {
- toggleCC.addEventListener('click', e => {
- Helpers._toggleClass(document.querySelector('.email-compose-cc'), 'd-block', 'd-none');
- });
- }
-
- // Empty compose email message inputs when modal is hidden
- emailCompose.addEventListener('hidden.bs.modal', event => {
- document.querySelector('.email-editor .ql-editor').innerHTML = '';
- $('#emailContacts').val('');
- initSelect2();
- });
-
- // Delete multiple email
- if (emailListDelete) {
- emailListDelete.addEventListener('click', e => {
- emailListItemInputs.forEach(emailListItemInput => {
- if (emailListItemInput.checked) {
- emailListItemInput.parentNode.closest('li.email-list-item').remove();
- }
- });
- selectAllEmails.indeterminate = false;
- selectAllEmails.checked = false;
- });
- }
-
- // Mark as read
- if (emailListRead) {
- emailListRead.addEventListener('click', e => {
- emailListItemInputs.forEach(emailListItemInput => {
- if (emailListItemInput.checked) {
- emailListItemInput.checked = false;
- emailListItemInput.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
- let emailItemEnvelop = emailListItemInput.parentNode
- .closest('li.email-list-item')
- .querySelector('.email-list-item-actions li');
-
- if (Helpers._hasClass('email-read', emailItemEnvelop)) {
- emailItemEnvelop.classList.remove('email-read');
- emailItemEnvelop.classList.add('email-unread');
- emailItemEnvelop.querySelector('i').classList.remove('ti-mail-opened');
- emailItemEnvelop.querySelector('i').classList.add('ti-mail');
- }
- }
- });
- selectAllEmails.indeterminate = false;
- selectAllEmails.checked = false;
- });
- }
-
- // Refresh Mails
-
- if (refreshEmails && emailList) {
- let emailListJq = $('.email-list'),
- emailListInstance = new PerfectScrollbar(emailList, {
- wheelPropagation: false,
- suppressScrollX: true
- });
- // ? Using jquery vars due to BlockUI jQuery dependency
- refreshEmails.addEventListener('click', e => {
- emailListJq.block({
- message: '
',
- timeout: 1000,
- css: {
- backgroundColor: 'transparent',
- border: '0'
- },
- overlayCSS: {
- backgroundColor: '#000',
- opacity: 0.1
- },
- onBlock: function () {
- emailListInstance.settings.suppressScrollY = true;
- },
- onUnblock: function () {
- emailListInstance.settings.suppressScrollY = false;
- }
- });
- });
- }
-
- // Earlier msgs
- // ? Using jquery vars due to jQuery animation (slideToggle) dependency
- let earlierMsg = $('.email-earlier-msgs');
- if (earlierMsg.length) {
- earlierMsg.on('click', function () {
- let $this = $(this);
- $this.parents().find('.email-card-last').addClass('hide-pseudo');
- $this.next('.email-card-prev').slideToggle();
- $this.remove();
- });
- }
-
- // Email contacts (select2)
- // ? Using jquery vars due to select2 jQuery dependency
- let emailContacts = $('#emailContacts');
- function initSelect2() {
- if (emailContacts.length) {
- function renderContactsAvatar(option) {
- if (!option.id) {
- return option.text;
- }
- let $avatar =
- "
').select2({
- placeholder: 'Select value',
- dropdownParent: emailContacts.parent(),
- closeOnSelect: false,
- templateResult: renderContactsAvatar,
- templateSelection: renderContactsAvatar,
- escapeMarkup: function (es) {
- return es;
- }
- });
- }
- }
- initSelect2();
-
- // Scroll to bottom on reply click
- // ? Using jquery vars due to jQuery animation dependency
- let emailViewContent = $('.app-email-view-content');
- emailViewContent.find('.scroll-to-reply').on('click', function () {
- if (emailViewContent[0].scrollTop === 0) {
- emailViewContent.animate(
- {
- scrollTop: emailViewContent[0].scrollHeight
- },
- 1500
- );
- }
- });
-
- // Close view on email filter folder list click
- if (emailFilterFolderLists) {
- emailFilterFolderLists.forEach(emailFilterFolderList => {
- emailFilterFolderList.addEventListener('click', e => {
- emailViewContainer.classList.remove('show');
- });
- });
- }
-
- // Email List Items Actions
- if (emailListItemActions) {
- emailListItemActions.forEach(emailListItemAction => {
- emailListItemAction.addEventListener('click', e => {
- e.stopPropagation();
- let currentTarget = e.currentTarget;
- if (Helpers._hasClass('email-delete', currentTarget)) {
- currentTarget.parentNode.closest('li.email-list-item').remove();
- } else if (Helpers._hasClass('email-read', currentTarget)) {
- currentTarget.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
- Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
- Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
- } else if (Helpers._hasClass('email-unread', currentTarget)) {
- currentTarget.parentNode.closest('li.email-list-item').classList.remove('email-marked-read');
- Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
- Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
- }
- });
- });
- }
- })();
-});
diff --git a/httpdocs/themes/vuexy/js/app-invoice-add.js b/httpdocs/themes/vuexy/js/app-invoice-add.js
deleted file mode 100755
index bd6af0aa..00000000
--- a/httpdocs/themes/vuexy/js/app-invoice-add.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * App Invoice - Add
- */
-
-'use strict';
-
-(function () {
- const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
- invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
- invoiceDateList = document.querySelectorAll('.date-picker');
-
- // Price
- if (invoiceItemPriceList) {
- invoiceItemPriceList.forEach(function (invoiceItemPrice) {
- new Cleave(invoiceItemPrice, {
- delimiter: '',
- numeral: true
- });
- });
- }
-
- // Qty
- if (invoiceItemQtyList) {
- invoiceItemQtyList.forEach(function (invoiceItemQty) {
- new Cleave(invoiceItemQty, {
- delimiter: '',
- numeral: true
- });
- });
- }
-
- // Datepicker
- if (invoiceDateList) {
- invoiceDateList.forEach(function (invoiceDateEl) {
- invoiceDateEl.flatpickr({
- monthSelectorType: 'static'
- });
- });
- }
-})();
-
-// repeater (jquery)
-$(function () {
- var applyChangesBtn = $('.btn-apply-changes'),
- discount,
- tax1,
- tax2,
- discountInput,
- tax1Input,
- tax2Input,
- sourceItem = $('.source-item'),
- adminDetails = {
- 'App Design': 'Designed UI kit & app pages.',
- 'App Customization': 'Customization & Bug Fixes.',
- 'ABC Template': 'Bootstrap 4 admin template.',
- 'App Development': 'Native App Development.'
- };
-
- // Prevent dropdown from closing on tax change
- $(document).on('click', '.tax-select', function (e) {
- e.stopPropagation();
- });
-
- // On tax change update it's value value
- function updateValue(listener, el) {
- listener.closest('.repeater-wrapper').find(el).text(listener.val());
- }
-
- // Apply item changes btn
- if (applyChangesBtn.length) {
- $(document).on('click', '.btn-apply-changes', function (e) {
- var $this = $(this);
- tax1Input = $this.closest('.dropdown-menu').find('#taxInput1');
- tax2Input = $this.closest('.dropdown-menu').find('#taxInput2');
- discountInput = $this.closest('.dropdown-menu').find('#discountInput');
- tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
- tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
- discount = $('.discount');
-
- if (tax1Input.val() !== null) {
- updateValue(tax1Input, tax1);
- }
-
- if (tax2Input.val() !== null) {
- updateValue(tax2Input, tax2);
- }
-
- if (discountInput.val().length) {
- $this
- .closest('.repeater-wrapper')
- .find(discount)
- .text(discountInput.val() + '%');
- }
- });
- }
-
- // Repeater init
- if (sourceItem.length) {
- sourceItem.on('submit', function (e) {
- e.preventDefault();
- });
- sourceItem.repeater({
- show: function () {
- $(this).slideDown();
- // Initialize tooltip on load of each item
- const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl);
- });
- },
- hide: function (e) {
- $(this).slideUp();
- }
- });
- }
-
- // Item details select onchange
- $(document).on('change', '.item-details', function () {
- var $this = $(this),
- value = adminDetails[$this.val()];
- if ($this.next('textarea').length) {
- $this.next('textarea').val(value);
- } else {
- $this.after('
');
- }
- });
-});
diff --git a/httpdocs/themes/vuexy/js/app-invoice-edit.js b/httpdocs/themes/vuexy/js/app-invoice-edit.js
deleted file mode 100755
index 32bfdff0..00000000
--- a/httpdocs/themes/vuexy/js/app-invoice-edit.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * App Invoice - Edit
- */
-
-'use strict';
-
-(function () {
- const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
- invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
- date = new Date(),
- invoiceDate = document.querySelector('.invoice-date'),
- dueDate = document.querySelector('.due-date');
-
- // Price
- if (invoiceItemPriceList) {
- invoiceItemPriceList.forEach(function (invoiceItemPrice) {
- new Cleave(invoiceItemPrice, {
- delimiter: '',
- numeral: true
- });
- });
- }
-
- // Qty
- if (invoiceItemQtyList) {
- invoiceItemQtyList.forEach(function (invoiceItemQty) {
- new Cleave(invoiceItemQty, {
- delimiter: '',
- numeral: true
- });
- });
- }
-
- // Datepicker
- if (invoiceDate) {
- invoiceDate.flatpickr({
- monthSelectorType: 'static',
- defaultDate: date
- });
- }
- if (dueDate) {
- dueDate.flatpickr({
- monthSelectorType: 'static',
- defaultDate: new Date(date.getFullYear(), date.getMonth(), date.getDate() + 5)
- });
- }
-})();
-
-// repeater (jquery)
-$(function () {
- var applyChangesBtn = $('.btn-apply-changes'),
- discount,
- tax1,
- tax2,
- discountInput,
- taxInput1,
- taxInput2,
- sourceItem = $('.source-item'),
- adminDetails = {
- 'App Design': 'Designed UI kit & app pages.',
- 'App Customization': 'Customization & Bug Fixes.',
- 'ABC Template': 'Bootstrap 4 admin template.',
- 'App Development': 'Native App Development.'
- };
-
- // Prevent dropdown from closing on tax change
- $(document).on('click', '.tax-select', function (e) {
- e.stopPropagation();
- });
-
- // On tax change update it's value value
- function updateValue(listener, el) {
- listener.closest('.repeater-wrapper').find(el).text(listener.val());
- }
-
- // Apply item changes btn
- if (applyChangesBtn.length) {
- $(document).on('click', '.btn-apply-changes', function (e) {
- var $this = $(this);
- taxInput1 = $this.closest('.dropdown-menu').find('#taxInput1');
- taxInput2 = $this.closest('.dropdown-menu').find('#taxInput2');
- discountInput = $this.closest('.dropdown-menu').find('#discountInput');
- tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
- tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
- discount = $('.discount');
-
- if (taxInput1.val() !== null) {
- updateValue(taxInput1, tax1);
- }
-
- if (taxInput2.val() !== null) {
- updateValue(taxInput2, tax2);
- }
-
- if (discountInput.val().length) {
- $this
- .closest('.repeater-wrapper')
- .find(discount)
- .text(discountInput.val() + '%');
- }
- });
- }
-
- // Repeater init
- if (sourceItem.length) {
- sourceItem.on('submit', function (e) {
- e.preventDefault();
- });
- sourceItem.repeater({
- show: function () {
- $(this).slideDown();
- // Initialize tooltip on load of each item
- const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl);
- });
- },
- hide: function (e) {
- $(this).slideUp();
- }
- });
- }
-
- // Item details select onchange
- $(document).on('change', '.item-details', function () {
- var $this = $(this),
- value = adminDetails[$this.val()];
- if ($this.next('textarea').length) {
- $this.next('textarea').val(value);
- } else {
- $this.after('
');
- }
- });
-});
diff --git a/httpdocs/themes/vuexy/js/app-invoice-list.js b/httpdocs/themes/vuexy/js/app-invoice-list.js
deleted file mode 100755
index 7473b6cc..00000000
--- a/httpdocs/themes/vuexy/js/app-invoice-list.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * App Invoice List (jquery)
- */
-
-'use strict';
-
-$(function () {
- // Variable declaration for table
- var dt_invoice_table = $('.invoice-list-table');
-
- // Invoice datatable
- if (dt_invoice_table.length) {
- var dt_invoice = dt_invoice_table.DataTable({
- ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'invoice_id' },
- { data: 'invoice_status' },
- { data: 'issued_date' },
- { data: 'client_name' },
- { data: 'total' },
- { data: 'balance' },
- { data: 'invoice_status' },
- { data: 'action' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- responsivePriority: 2,
- searchable: false,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // Invoice ID
- targets: 1,
- render: function (data, type, full, meta) {
- var $invoice_id = full['invoice_id'];
- // Creates full output for row
- var $row_output = '
';
- return $row_output;
- }
- },
- {
- // Invoice status
- targets: 2,
- render: function (data, type, full, meta) {
- var $invoice_status = full['invoice_status'],
- $due_date = full['due_date'],
- $balance = full['balance'];
- var roleBadgeObj = {
- Sent: '
'>" +
- roleBadgeObj[$invoice_status] +
- ''
- );
- }
- },
- {
- // Client name and Service
- targets: 3,
- responsivePriority: 4,
- render: function (data, type, full, meta) {
- var $name = full['client_name'],
- $service = full['service'],
- $image = full['avatar_image'],
- $rand_num = Math.floor(Math.random() * 11) + 1,
- $user_img = $rand_num + '.png';
- if ($image === true) {
- // For Avatar image
- var $output =
- '
';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6),
- states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'],
- $state = states[stateNum],
- $name = full['client_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '
';
- }
- // Creates full output for row
- var $row_output =
- '
';
- return $row_output;
- }
- },
- {
- // Total Invoice Amount
- targets: 4,
- render: function (data, type, full, meta) {
- var $total = full['total'];
- return '
$' + $total;
- }
- },
- {
- // Due Date
- targets: 5,
- render: function (data, type, full, meta) {
- var $due_date = new Date(full['due_date']);
- // Creates full output for row
- var $row_output =
- '
' +
- moment($due_date).format('DD MMM YYYY');
- $due_date;
- return $row_output;
- }
- },
- {
- // Client Balance/Status
- targets: 6,
- orderable: false,
- render: function (data, type, full, meta) {
- var $balance = full['balance'];
- if ($balance === 0) {
- var $badge_class = 'bg-label-success';
- return '
' + $balance;
- }
- }
- },
- {
- targets: 7,
- visible: false
- },
- {
- // Actions
- targets: -1,
- title: 'Actions',
- searchable: false,
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"row ms-2 me-3"' +
- '<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
- '<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
- '>t' +
- '<"row mx-2"' +
- '<"col-sm-12 col-md-6"i>' +
- '<"col-sm-12 col-md-6"p>' +
- '>',
- language: {
- sLengthMenu: 'Show _MENU_',
- search: '',
- searchPlaceholder: 'Search Invoice'
- },
- // Buttons with Dropdown
- buttons: [
- {
- text: '
',
- className: 'btn btn-primary',
- action: function (e, dt, button, config) {
- window.location = 'app-invoice-add.html';
- }
- }
- ],
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- },
- initComplete: function () {
- // Adding role filter once table initialized
- this.api()
- .columns(7)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.invoice_status')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- }
- });
- }
-
- // On each datatable draw, initialize tooltip
- dt_invoice_table.on('draw.dt', function () {
- var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl, {
- boundary: document.body
- });
- });
- });
-
- // Delete Record
- $('.invoice-list-table tbody').on('click', '.delete-record', function () {
- dt_invoice.row($(this).parents('tr')).remove().draw();
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-});
diff --git a/httpdocs/themes/vuexy/js/app-invoice-print.js b/httpdocs/themes/vuexy/js/app-invoice-print.js
deleted file mode 100755
index f93f5760..00000000
--- a/httpdocs/themes/vuexy/js/app-invoice-print.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Invoice Print
- */
-
-'use strict';
-
-(function () {
- window.print();
-})();
diff --git a/httpdocs/themes/vuexy/js/app-kanban.js b/httpdocs/themes/vuexy/js/app-kanban.js
deleted file mode 100755
index bd1fca08..00000000
--- a/httpdocs/themes/vuexy/js/app-kanban.js
+++ /dev/null
@@ -1,471 +0,0 @@
-/**
- * App Kanban
- */
-
-'use strict';
-
-(async function () {
- let boards;
- const kanbanSidebar = document.querySelector('.kanban-update-item-sidebar'),
- kanbanWrapper = document.querySelector('.kanban-wrapper'),
- commentEditor = document.querySelector('.comment-editor'),
- kanbanAddNewBoard = document.querySelector('.kanban-add-new-board'),
- kanbanAddNewInput = [].slice.call(document.querySelectorAll('.kanban-add-board-input')),
- kanbanAddBoardBtn = document.querySelector('.kanban-add-board-btn'),
- datePicker = document.querySelector('#due-date'),
- select2 = $('.select2'), // ! Using jquery vars due to select2 jQuery dependency
- assetsPath = document.querySelector('html').getAttribute('data-assets-path');
-
- // Init kanban Offcanvas
- const kanbanOffcanvas = new bootstrap.Offcanvas(kanbanSidebar);
-
- // Get kanban data
- const kanbanResponse = await fetch(assetsPath + 'json/kanban.json');
- if (!kanbanResponse.ok) {
- console.error('error', kanbanResponse);
- }
- boards = await kanbanResponse.json();
-
- // datepicker init
- if (datePicker) {
- datePicker.flatpickr({
- monthSelectorType: 'static',
- altInput: true,
- altFormat: 'j F, Y',
- dateFormat: 'Y-m-d'
- });
- }
-
- //! TODO: Update Event label and guest code to JS once select removes jQuery dependency
- // select2
- if (select2.length) {
- function renderLabels(option) {
- if (!option.id) {
- return option.text;
- }
- var $badge = "
';
- return $badge;
- }
-
- select2.each(function () {
- var $this = $(this);
- $this.wrap("
").select2({
- placeholder: 'Select Label',
- dropdownParent: $this.parent(),
- templateResult: renderLabels,
- templateSelection: renderLabels,
- escapeMarkup: function (es) {
- return es;
- }
- });
- });
- }
-
- // Comment editor
- if (commentEditor) {
- new Quill(commentEditor, {
- modules: {
- toolbar: '.comment-toolbar'
- },
- placeholder: 'Write a Comment... ',
- theme: 'snow'
- });
- }
-
- // Render board dropdown
- function renderBoardDropdown() {
- return (
- "
'
- );
- }
- // Render item dropdown
- function renderDropdown() {
- return (
- "
'
- );
- }
- // Render header
- function renderHeader(color, text) {
- return (
- "
'
- );
- }
-
- // Render avatar
- function renderAvatar(images, pullUp, size, margin, members) {
- var $transition = pullUp ? ' pull-up' : '',
- $size = size ? 'avatar-' + size + '' : '',
- member = members == undefined ? ' ' : members.split(',');
-
- return images == undefined
- ? ' '
- : images
- .split(',')
- .map(function (img, index, arr) {
- var $margin = margin && index !== arr.length - 1 ? ' me-' + margin + '' : '';
-
- return (
- "
'
- );
- })
- .join(' ');
- }
-
- // Render footer
- function renderFooter(attachments, comments, assigned, members) {
- return (
- "
'
- );
- }
- // Init kanban
- const kanban = new jKanban({
- element: '.kanban-wrapper',
- gutter: '15px',
- widthBoard: '250px',
- dragItems: true,
- boards: boards,
- dragBoards: true,
- addItemButton: true,
- buttonContent: '+ Add Item',
- itemAddOptions: {
- enabled: true, // add a button to board for easy item creation
- content: '+ Add New Item', // text or html content of the board button
- class: 'kanban-title-button btn', // default class of the button
- footer: false // position the button on footer
- },
- click: function (el) {
- let element = el;
- let title = element.getAttribute('data-eid')
- ? element.querySelector('.kanban-text').textContent
- : element.textContent,
- date = element.getAttribute('data-due-date'),
- dateObj = new Date(),
- year = dateObj.getFullYear(),
- dateToUse = date
- ? date + ', ' + year
- : dateObj.getDate() + ' ' + dateObj.toLocaleString('en', { month: 'long' }) + ', ' + year,
- label = element.getAttribute('data-badge-text'),
- avatars = element.getAttribute('data-assigned');
-
- // Show kanban offcanvas
- kanbanOffcanvas.show();
-
- // To get data on sidebar
- kanbanSidebar.querySelector('#title').value = title;
- kanbanSidebar.querySelector('#due-date').nextSibling.value = dateToUse;
-
- // ! Using jQuery method to get sidebar due to select2 dependency
- $('.kanban-update-item-sidebar').find(select2).val(label).trigger('change');
-
- // Remove & Update assigned
- kanbanSidebar.querySelector('.assigned').innerHTML = '';
- kanbanSidebar
- .querySelector('.assigned')
- .insertAdjacentHTML(
- 'afterbegin',
- renderAvatar(avatars, false, 'xs', '1', el.getAttribute('data-members')) +
- "
'
- );
- },
-
- buttonClick: function (el, boardId) {
- const addNew = document.createElement('form');
- addNew.setAttribute('class', 'new-item-form');
- addNew.innerHTML =
- '
';
- kanban.addForm(boardId, addNew);
-
- addNew.addEventListener('submit', function (e) {
- e.preventDefault();
- const currentBoard = [].slice.call(
- document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-item')
- );
- kanban.addElement(boardId, {
- title: "
',
- id: boardId + '-' + currentBoard.length + 1
- });
-
- // add dropdown in new boards
- const kanbanText = [].slice.call(
- document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-text')
- );
- kanbanText.forEach(function (e) {
- e.insertAdjacentHTML('beforebegin', renderDropdown());
- });
-
- // prevent sidebar to open onclick dropdown buttons of new tasks
- const newTaskDropdown = [].slice.call(document.querySelectorAll('.kanban-item .kanban-tasks-item-dropdown'));
- if (newTaskDropdown) {
- newTaskDropdown.forEach(function (e) {
- e.addEventListener('click', function (el) {
- el.stopPropagation();
- });
- });
- }
-
- // delete tasks for new boards
- const deleteTask = [].slice.call(
- document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .delete-task')
- );
- deleteTask.forEach(function (e) {
- e.addEventListener('click', function () {
- const id = this.closest('.kanban-item').getAttribute('data-eid');
- kanban.removeElement(id);
- });
- });
- addNew.remove();
- });
-
- // Remove form on clicking cancel button
- addNew.querySelector('.cancel-add-item').addEventListener('click', function (e) {
- addNew.remove();
- });
- }
- });
-
- // Kanban Wrapper scrollbar
- if (kanbanWrapper) {
- new PerfectScrollbar(kanbanWrapper);
- }
-
- const kanbanContainer = document.querySelector('.kanban-container'),
- kanbanTitleBoard = [].slice.call(document.querySelectorAll('.kanban-title-board')),
- kanbanItem = [].slice.call(document.querySelectorAll('.kanban-item'));
-
- // Render custom items
- if (kanbanItem) {
- kanbanItem.forEach(function (el) {
- const element = "
';
- let img = '';
- if (el.getAttribute('data-image') !== null) {
- img =
- "
";
- }
- el.textContent = '';
- if (el.getAttribute('data-badge') !== undefined && el.getAttribute('data-badge-text') !== undefined) {
- el.insertAdjacentHTML(
- 'afterbegin',
- renderHeader(el.getAttribute('data-badge'), el.getAttribute('data-badge-text')) + img + element
- );
- }
- if (
- el.getAttribute('data-comments') !== undefined ||
- el.getAttribute('data-due-date') !== undefined ||
- el.getAttribute('data-assigned') !== undefined
- ) {
- el.insertAdjacentHTML(
- 'beforeend',
- renderFooter(
- el.getAttribute('data-attachments'),
- el.getAttribute('data-comments'),
- el.getAttribute('data-assigned'),
- el.getAttribute('data-members')
- )
- );
- }
- });
- }
-
- // To initialize tooltips for rendered items
- const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl);
- });
-
- // prevent sidebar to open onclick dropdown buttons of tasks
- const tasksItemDropdown = [].slice.call(document.querySelectorAll('.kanban-tasks-item-dropdown'));
- if (tasksItemDropdown) {
- tasksItemDropdown.forEach(function (e) {
- e.addEventListener('click', function (el) {
- el.stopPropagation();
- });
- });
- }
-
- // Toggle add new input and actions add-new-btn
- if (kanbanAddBoardBtn) {
- kanbanAddBoardBtn.addEventListener('click', () => {
- kanbanAddNewInput.forEach(el => {
- el.value = '';
- el.classList.toggle('d-none');
- });
- });
- }
-
- // Render add new inline with boards
- if (kanbanContainer) {
- kanbanContainer.appendChild(kanbanAddNewBoard);
- }
-
- // Makes kanban title editable for rendered boards
- if (kanbanTitleBoard) {
- kanbanTitleBoard.forEach(function (elem) {
- elem.addEventListener('mouseenter', function () {
- this.contentEditable = 'true';
- });
-
- // Appends delete icon with title
- elem.insertAdjacentHTML('afterend', renderBoardDropdown());
- });
- }
-
- // To delete Board for rendered boards
- const deleteBoards = [].slice.call(document.querySelectorAll('.delete-board'));
- if (deleteBoards) {
- deleteBoards.forEach(function (elem) {
- elem.addEventListener('click', function () {
- const id = this.closest('.kanban-board').getAttribute('data-id');
- kanban.removeBoard(id);
- });
- });
- }
-
- // Delete task for rendered boards
- const deleteTask = [].slice.call(document.querySelectorAll('.delete-task'));
- if (deleteTask) {
- deleteTask.forEach(function (e) {
- e.addEventListener('click', function () {
- const id = this.closest('.kanban-item').getAttribute('data-eid');
- kanban.removeElement(id);
- });
- });
- }
-
- // Cancel btn add new input
- const cancelAddNew = document.querySelector('.kanban-add-board-cancel-btn');
- if (cancelAddNew) {
- cancelAddNew.addEventListener('click', function () {
- kanbanAddNewInput.forEach(el => {
- el.classList.toggle('d-none');
- });
- });
- }
-
- // Add new board
- if (kanbanAddNewBoard) {
- kanbanAddNewBoard.addEventListener('submit', function (e) {
- e.preventDefault();
- const thisEle = this,
- value = thisEle.querySelector('.form-control').value,
- id = value.replace(/\s+/g, '-').toLowerCase();
- kanban.addBoards([
- {
- id: id,
- title: value
- }
- ]);
-
- // Adds delete board option to new board, delete new boards & updates data-order
- const kanbanBoardLastChild = document.querySelectorAll('.kanban-board:last-child')[0];
- if (kanbanBoardLastChild) {
- const header = kanbanBoardLastChild.querySelector('.kanban-title-board');
- header.insertAdjacentHTML('afterend', renderBoardDropdown());
-
- // To make newly added boards title editable
- kanbanBoardLastChild.querySelector('.kanban-title-board').addEventListener('mouseenter', function () {
- this.contentEditable = 'true';
- });
- }
-
- // Add delete event to delete newly added boards
- const deleteNewBoards = kanbanBoardLastChild.querySelector('.delete-board');
- if (deleteNewBoards) {
- deleteNewBoards.addEventListener('click', function () {
- const id = this.closest('.kanban-board').getAttribute('data-id');
- kanban.removeBoard(id);
- });
- }
-
- // Remove current append new add new form
- if (kanbanAddNewInput) {
- kanbanAddNewInput.forEach(el => {
- el.classList.add('d-none');
- });
- }
-
- // To place inline add new btn after clicking add btn
- if (kanbanContainer) {
- kanbanContainer.appendChild(kanbanAddNewBoard);
- }
- });
- }
-
- // Clear comment editor on close
- kanbanSidebar.addEventListener('hidden.bs.offcanvas', function () {
- kanbanSidebar.querySelector('.ql-editor').firstElementChild.innerHTML = '';
- });
-
- // Re-init tooltip when offcanvas opens(Bootstrap bug)
- if (kanbanSidebar) {
- kanbanSidebar.addEventListener('shown.bs.offcanvas', function () {
- const tooltipTriggerList = [].slice.call(kanbanSidebar.querySelectorAll('[data-bs-toggle="tooltip"]'));
- tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl);
- });
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/app-user-list.js b/httpdocs/themes/vuexy/js/app-user-list.js
deleted file mode 100755
index 738073fc..00000000
--- a/httpdocs/themes/vuexy/js/app-user-list.js
+++ /dev/null
@@ -1,516 +0,0 @@
-/**
- * Page User List
- */
-
-'use strict';
-
-// Datatable (jquery)
-$(function () {
- let borderColor, bodyBg, headingColor;
-
- if (isDarkStyle) {
- borderColor = config.colors_dark.borderColor;
- bodyBg = config.colors_dark.bodyBg;
- headingColor = config.colors_dark.headingColor;
- } else {
- borderColor = config.colors.borderColor;
- bodyBg = config.colors.bodyBg;
- headingColor = config.colors.headingColor;
- }
-
- // Variable declaration for table
- var dt_user_table = $('.datatables-users'),
- select2 = $('.select2'),
- userView = 'app-user-view-account.html',
- statusObj = {
- 1: { title: 'Pending', class: 'bg-label-warning' },
- 2: { title: 'Active', class: 'bg-label-success' },
- 3: { title: 'Inactive', class: 'bg-label-secondary' }
- };
-
- if (select2.length) {
- var $this = select2;
- $this.wrap('
').select2({
- placeholder: 'Select Country',
- dropdownParent: $this.parent()
- });
- }
-
- // Users datatable
- if (dt_user_table.length) {
- var dt_user = dt_user_table.DataTable({
- ajax: assetsPath + 'json/user-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'full_name' },
- { data: 'role' },
- { data: 'current_plan' },
- { data: 'billing' },
- { data: 'status' },
- { data: 'action' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- searchable: false,
- orderable: false,
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // User full name and email
- targets: 1,
- responsivePriority: 4,
- render: function (data, type, full, meta) {
- var $name = full['full_name'],
- $email = full['email'],
- $image = full['avatar'];
- if ($image) {
- // For Avatar image
- var $output =
- '
';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6);
- var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
- var $state = states[stateNum],
- $name = full['full_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '
';
- }
- // Creates full output for row
- var $row_output =
- '
';
- return $row_output;
- }
- },
- {
- // User Role
- targets: 2,
- render: function (data, type, full, meta) {
- var $role = full['role'];
- var roleBadgeObj = {
- Subscriber:
- '
';
- }
- },
- {
- // Plans
- targets: 3,
- render: function (data, type, full, meta) {
- var $plan = full['current_plan'];
-
- return '
';
- }
- },
- {
- // User Status
- targets: 5,
- render: function (data, type, full, meta) {
- var $status = full['status'];
-
- return (
- '
'
- );
- }
- },
- {
- // Actions
- targets: -1,
- title: 'Actions',
- searchable: false,
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"row me-2"' +
- '<"col-md-2"<"me-3"l>>' +
- '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
- '>t' +
- '<"row mx-2"' +
- '<"col-sm-12 col-md-6"i>' +
- '<"col-sm-12 col-md-6"p>' +
- '>',
- language: {
- sLengthMenu: '_MENU_',
- search: '',
- searchPlaceholder: 'Search..'
- },
- // Buttons with Dropdown
- buttons: [
- {
- extend: 'collection',
- className: 'btn btn-label-secondary dropdown-toggle mx-3',
- text: '
Export',
- buttons: [
- {
- extend: 'print',
- text: '
Print',
- className: 'dropdown-item',
- exportOptions: {
- columns: [1, 2, 3, 4, 5],
- // prevent avatar to be print
- format: {
- body: function (inner, coldex, rowdex) {
- if (inner.length <= 0) return inner;
- var el = $.parseHTML(inner);
- var result = '';
- $.each(el, function (index, item) {
- if (item.classList !== undefined && item.classList.contains('user-name')) {
- result = result + item.lastChild.firstChild.textContent;
- } else if (item.innerText === undefined) {
- result = result + item.textContent;
- } else result = result + item.innerText;
- });
- return result;
- }
- }
- },
- customize: function (win) {
- //customize print view for dark
- $(win.document.body)
- .css('color', headingColor)
- .css('border-color', borderColor)
- .css('background-color', bodyBg);
- $(win.document.body)
- .find('table')
- .addClass('compact')
- .css('color', 'inherit')
- .css('border-color', 'inherit')
- .css('background-color', 'inherit');
- }
- },
- {
- extend: 'csv',
- text: '
Csv',
- className: 'dropdown-item',
- exportOptions: {
- columns: [1, 2, 3, 4, 5],
- // prevent avatar to be display
- format: {
- body: function (inner, coldex, rowdex) {
- if (inner.length <= 0) return inner;
- var el = $.parseHTML(inner);
- var result = '';
- $.each(el, function (index, item) {
- if (item.classList !== undefined && item.classList.contains('user-name')) {
- result = result + item.lastChild.firstChild.textContent;
- } else if (item.innerText === undefined) {
- result = result + item.textContent;
- } else result = result + item.innerText;
- });
- return result;
- }
- }
- }
- },
- {
- extend: 'excel',
- text: '
Excel',
- className: 'dropdown-item',
- exportOptions: {
- columns: [1, 2, 3, 4, 5],
- // prevent avatar to be display
- format: {
- body: function (inner, coldex, rowdex) {
- if (inner.length <= 0) return inner;
- var el = $.parseHTML(inner);
- var result = '';
- $.each(el, function (index, item) {
- if (item.classList !== undefined && item.classList.contains('user-name')) {
- result = result + item.lastChild.firstChild.textContent;
- } else if (item.innerText === undefined) {
- result = result + item.textContent;
- } else result = result + item.innerText;
- });
- return result;
- }
- }
- }
- },
- {
- extend: 'pdf',
- text: '
Pdf',
- className: 'dropdown-item',
- exportOptions: {
- columns: [1, 2, 3, 4, 5],
- // prevent avatar to be display
- format: {
- body: function (inner, coldex, rowdex) {
- if (inner.length <= 0) return inner;
- var el = $.parseHTML(inner);
- var result = '';
- $.each(el, function (index, item) {
- if (item.classList !== undefined && item.classList.contains('user-name')) {
- result = result + item.lastChild.firstChild.textContent;
- } else if (item.innerText === undefined) {
- result = result + item.textContent;
- } else result = result + item.innerText;
- });
- return result;
- }
- }
- }
- },
- {
- extend: 'copy',
- text: '
Copy',
- className: 'dropdown-item',
- exportOptions: {
- columns: [1, 2, 3, 4, 5],
- // prevent avatar to be display
- format: {
- body: function (inner, coldex, rowdex) {
- if (inner.length <= 0) return inner;
- var el = $.parseHTML(inner);
- var result = '';
- $.each(el, function (index, item) {
- if (item.classList !== undefined && item.classList.contains('user-name')) {
- result = result + item.lastChild.firstChild.textContent;
- } else if (item.innerText === undefined) {
- result = result + item.textContent;
- } else result = result + item.innerText;
- });
- return result;
- }
- }
- }
- }
- ]
- },
- {
- text: '
',
- className: 'add-new btn btn-primary',
- attr: {
- 'data-bs-toggle': 'offcanvas',
- 'data-bs-target': '#offcanvasAddUser'
- }
- }
- ],
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- },
- initComplete: function () {
- // Adding role filter once table initialized
- this.api()
- .columns(2)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.user_role')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- // Adding plan filter once table initialized
- this.api()
- .columns(3)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.user_plan')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- // Adding status filter once table initialized
- this.api()
- .columns(5)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.user_status')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append(
- '
'
- );
- });
- });
- }
- });
- }
-
- // Delete Record
- $('.datatables-users tbody').on('click', '.delete-record', function () {
- dt_user.row($(this).parents('tr')).remove().draw();
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-});
-
-// Validation & Phone mask
-(function () {
- const phoneMaskList = document.querySelectorAll('.phone-mask'),
- addNewUserForm = document.getElementById('addNewUserForm');
-
- // Phone Number
- if (phoneMaskList) {
- phoneMaskList.forEach(function (phoneMask) {
- new Cleave(phoneMask, {
- phone: true,
- phoneRegionCode: 'US'
- });
- });
- }
- // Add New User Form Validation
- const fv = FormValidation.formValidation(addNewUserForm, {
- fields: {
- userFullname: {
- validators: {
- notEmpty: {
- message: 'Please enter fullname '
- }
- }
- },
- userEmail: {
- validators: {
- notEmpty: {
- message: 'Please enter your email'
- },
- emailAddress: {
- message: 'The value is not a valid email address'
- }
- }
- }
- },
- plugins: {
- trigger: new FormValidation.plugins.Trigger(),
- bootstrap5: new FormValidation.plugins.Bootstrap5({
- // Use this for enabling/changing valid/invalid class
- eleValidClass: '',
- rowSelector: function (field, ele) {
- // field is the field name & ele is the field element
- return '.mb-3';
- }
- }),
- submitButton: new FormValidation.plugins.SubmitButton(),
- // Submit the form when all fields are valid
- // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
- autoFocus: new FormValidation.plugins.AutoFocus()
- }
- });
-})();
diff --git a/httpdocs/themes/vuexy/js/app-user-view-account.js b/httpdocs/themes/vuexy/js/app-user-view-account.js
deleted file mode 100755
index 012982c1..00000000
--- a/httpdocs/themes/vuexy/js/app-user-view-account.js
+++ /dev/null
@@ -1,378 +0,0 @@
-/**
- * App User View - Account (jquery)
- */
-
-$(function () {
- 'use strict';
-
- // Variable declaration for table
- var dt_project_table = $('.datatable-project'),
- dt_invoice_table = $('.datatable-invoice');
-
- // Project datatable
- // --------------------------------------------------------------------
- if (dt_project_table.length) {
- var dt_project = dt_project_table.DataTable({
- ajax: assetsPath + 'json/projects-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'project_name' },
- { data: 'total_task' },
- { data: 'progress' },
- { data: 'hours' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- searchable: false,
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // User full name and email
- targets: 1,
- responsivePriority: 1,
- render: function (data, type, full, meta) {
- var $name = full['project_name'],
- $framework = full['framework'],
- $image = full['project_image'];
- if ($image) {
- // For Avatar image
- var $output =
- '
';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6) + 1;
- var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
- var $state = states[stateNum],
- $name = full['full_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '
';
- }
- // Creates full output for row
- var $row_output =
- '
';
- return $row_output;
- }
- },
- {
- targets: 2,
- orderable: false
- },
- {
- // Label
- targets: -2,
- responsivePriority: 3,
- render: function (data, type, full, meta) {
- var $progress = full['progress'] + '%',
- $color;
- switch (true) {
- case full['progress'] < 25:
- $color = 'bg-danger';
- break;
- case full['progress'] < 50:
- $color = 'bg-warning';
- break;
- case full['progress'] < 75:
- $color = 'bg-info';
- break;
- case full['progress'] <= 100:
- $color = 'bg-success';
- break;
- }
- return (
- '
'
- );
- }
- },
- {
- targets: -1,
- orderable: false
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"d-flex justify-content-between align-items-center flex-column flex-sm-row mx-4 row"' +
- '<"col-sm-4 col-12 d-flex align-items-center justify-content-sm-start justify-content-center"l>' +
- '<"col-sm-8 col-12 d-flex align-items-center justify-content-sm-end justify-content-center"f>' +
- '>t' +
- '<"d-flex justify-content-between mx-4 row"' +
- '<"col-sm-12 col-md-6"i>' +
- '<"col-sm-12 col-md-6"p>' +
- '>',
- displayLength: 7,
- lengthMenu: [7, 10, 25, 50, 75, 100],
- language: {
- sLengthMenu: 'Show _MENU_',
- // search: '',
- searchPlaceholder: 'Search Project'
- },
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- }
- });
- }
-
- // Invoice datatable
- // --------------------------------------------------------------------
- if (dt_invoice_table.length) {
- var dt_invoice = dt_invoice_table.DataTable({
- ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'invoice_id' },
- { data: 'invoice_status' },
- { data: 'total' },
- { data: 'issued_date' },
- { data: 'action' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // Invoice ID
- targets: 1,
- render: function (data, type, full, meta) {
- var $invoice_id = full['invoice_id'];
- // Creates full output for row
- var $row_output = '
';
- return $row_output;
- }
- },
- {
- // Invoice status
- targets: 2,
- render: function (data, type, full, meta) {
- var $invoice_status = full['invoice_status'],
- $due_date = full['due_date'],
- $balance = full['balance'];
- var roleBadgeObj = {
- Sent: '
'>" +
- roleBadgeObj[$invoice_status] +
- ''
- );
- }
- },
- {
- // Total Invoice Amount
- targets: 3,
- render: function (data, type, full, meta) {
- var $total = full['total'];
- return '$' + $total;
- }
- },
- {
- // Actions
- targets: -1,
- title: 'Actions',
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"row mx-4"' +
- '<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-start mb-3 mb-md-0"l>' +
- '<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-end"B>' +
- '>t' +
- '<"row mx-4"' +
- '<"col-md-12 col-lg-6 text-center text-lg-start pb-md-2 pb-lg-0"i>' +
- '<"col-md-12 col-lg-6 d-flex justify-content-center justify-content-lg-end"p>' +
- '>',
- language: {
- sLengthMenu: 'Show _MENU_',
- search: '',
- searchPlaceholder: 'Search Invoice'
- },
- // Buttons with Dropdown
- buttons: [
- {
- extend: 'collection',
- className: 'btn btn-label-secondary dropdown-toggle float-sm-end mb-3 mb-sm-0',
- text: '
Export',
- buttons: [
- {
- extend: 'print',
- text: '
Print',
- className: 'dropdown-item',
- exportOptions: { columns: [1, 2, 3, 4] }
- },
- {
- extend: 'csv',
- text: '
Csv',
- className: 'dropdown-item',
- exportOptions: { columns: [1, 2, 3, 4] }
- },
- {
- extend: 'excel',
- text: '
Excel',
- className: 'dropdown-item',
- exportOptions: { columns: [1, 2, 3, 4] }
- },
- {
- extend: 'pdf',
- text: '
Pdf',
- className: 'dropdown-item',
- exportOptions: { columns: [1, 2, 3, 4] }
- },
- {
- extend: 'copy',
- text: '
Copy',
- className: 'dropdown-item',
- exportOptions: { columns: [1, 2, 3, 4] }
- }
- ]
- }
- ],
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- }
- });
- }
- // On each datatable draw, initialize tooltip
- dt_invoice_table.on('draw.dt', function () {
- var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl, {
- boundary: document.body
- });
- });
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-});
diff --git a/httpdocs/themes/vuexy/js/app-user-view-billing.js b/httpdocs/themes/vuexy/js/app-user-view-billing.js
deleted file mode 100755
index 51e8a0c2..00000000
--- a/httpdocs/themes/vuexy/js/app-user-view-billing.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * App User View - Billing
- */
-
-'use strict';
-
-(function () {
- // Cancel Subscription alert
- const cancelSubscription = document.querySelector('.cancel-subscription');
-
- // Alert With Functional Confirm Button
- if (cancelSubscription) {
- cancelSubscription.onclick = function () {
- Swal.fire({
- text: 'Are you sure you would like to cancel your subscription?',
- icon: 'warning',
- showCancelButton: true,
- confirmButtonText: 'Yes',
- customClass: {
- confirmButton: 'btn btn-primary me-2',
- cancelButton: 'btn btn-label-secondary'
- },
- buttonsStyling: false
- }).then(function (result) {
- if (result.value) {
- Swal.fire({
- icon: 'success',
- title: 'Unsubscribed!',
- text: 'Your subscription cancelled successfully.',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- } else if (result.dismiss === Swal.DismissReason.cancel) {
- Swal.fire({
- title: 'Cancelled',
- text: 'Unsubscription Cancelled!!',
- icon: 'error',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- }
- });
- };
- }
-
- // On edit address click, update text of add address modal
- const addressEdit = document.querySelector('.edit-address'),
- addressTitle = document.querySelector('.address-title'),
- addressSubTitle = document.querySelector('.address-subtitle');
-
- addressEdit.onclick = function () {
- addressTitle.innerHTML = 'Edit Address'; // reset text
- addressSubTitle.innerHTML = 'Edit your current address';
- };
-})();
diff --git a/httpdocs/themes/vuexy/js/app-user-view-security.js b/httpdocs/themes/vuexy/js/app-user-view-security.js
deleted file mode 100755
index fa0e1ed5..00000000
--- a/httpdocs/themes/vuexy/js/app-user-view-security.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * App User View - Security
- */
-
-'use strict';
-
-(function () {
- const formChangePass = document.querySelector('#formChangePassword');
-
- // Form validation for Change password
- if (formChangePass) {
- const fv = FormValidation.formValidation(formChangePass, {
- fields: {
- newPassword: {
- validators: {
- notEmpty: {
- message: 'Please enter new password'
- },
- stringLength: {
- min: 8,
- message: 'Password must be more than 8 characters'
- }
- }
- },
- confirmPassword: {
- validators: {
- notEmpty: {
- message: 'Please confirm new password'
- },
- identical: {
- compare: function () {
- return formChangePass.querySelector('[name="newPassword"]').value;
- },
- message: 'The password and its confirm are not the same'
- },
- stringLength: {
- min: 8,
- message: 'Password must be more than 8 characters'
- }
- }
- }
- },
- plugins: {
- trigger: new FormValidation.plugins.Trigger(),
- bootstrap5: new FormValidation.plugins.Bootstrap5({
- eleValidClass: '',
- rowSelector: '.form-password-toggle'
- }),
- submitButton: new FormValidation.plugins.SubmitButton(),
- // Submit the form when all fields are valid
- // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
- autoFocus: new FormValidation.plugins.AutoFocus()
- },
- init: instance => {
- instance.on('plugins.message.placed', function (e) {
- if (e.element.parentElement.classList.contains('input-group')) {
- e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
- }
- });
- }
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/app-user-view.js b/httpdocs/themes/vuexy/js/app-user-view.js
deleted file mode 100755
index da79eb29..00000000
--- a/httpdocs/themes/vuexy/js/app-user-view.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * App User View - Suspend User Script
- */
-'use strict';
-
-(function () {
- const suspendUser = document.querySelector('.suspend-user');
-
- // Suspend User javascript
- if (suspendUser) {
- suspendUser.onclick = function () {
- Swal.fire({
- title: 'Are you sure?',
- text: "You won't be able to revert user!",
- icon: 'warning',
- showCancelButton: true,
- confirmButtonText: 'Yes, Suspend user!',
- customClass: {
- confirmButton: 'btn btn-primary me-2',
- cancelButton: 'btn btn-label-secondary'
- },
- buttonsStyling: false
- }).then(function (result) {
- if (result.value) {
- Swal.fire({
- icon: 'success',
- title: 'Suspended!',
- text: 'User has been suspended.',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- } else if (result.dismiss === Swal.DismissReason.cancel) {
- Swal.fire({
- title: 'Cancelled',
- text: 'Cancelled Suspension :)',
- icon: 'error',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- }
- });
- };
- }
-
- //? Billing page have multiple buttons
- // Cancel Subscription alert
- const cancelSubscription = document.querySelectorAll('.cancel-subscription');
-
- // Alert With Functional Confirm Button
- if (cancelSubscription) {
- cancelSubscription.forEach(btnCancle => {
- btnCancle.onclick = function () {
- Swal.fire({
- text: 'Are you sure you would like to cancel your subscription?',
- icon: 'warning',
- showCancelButton: true,
- confirmButtonText: 'Yes',
- customClass: {
- confirmButton: 'btn btn-primary me-2',
- cancelButton: 'btn btn-label-secondary'
- },
- buttonsStyling: false
- }).then(function (result) {
- if (result.value) {
- Swal.fire({
- icon: 'success',
- title: 'Unsubscribed!',
- text: 'Your subscription cancelled successfully.',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- } else if (result.dismiss === Swal.DismissReason.cancel) {
- Swal.fire({
- title: 'Cancelled',
- text: 'Unsubscription Cancelled!!',
- icon: 'error',
- customClass: {
- confirmButton: 'btn btn-success'
- }
- });
- }
- });
- };
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/cards-actions.js b/httpdocs/themes/vuexy/js/cards-actions.js
deleted file mode 100755
index 4983f888..00000000
--- a/httpdocs/themes/vuexy/js/cards-actions.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Cards Actions
- */
-
-'use strict';
-
-(function () {
- const collapseElementList = [].slice.call(document.querySelectorAll('.card-collapsible'));
- const expandElementList = [].slice.call(document.querySelectorAll('.card-expand'));
- const closeElementList = [].slice.call(document.querySelectorAll('.card-close'));
-
- let cardDnD = document.getElementById('sortable-4');
-
- // Collapsible card
- // --------------------------------------------------------------------
- if (collapseElementList) {
- collapseElementList.map(function (collapseElement) {
- collapseElement.addEventListener('click', event => {
- event.preventDefault();
- // Collapse the element
- new bootstrap.Collapse(collapseElement.closest('.card').querySelector('.collapse'));
- // Toggle collapsed class in `.card-header` element
- collapseElement.closest('.card-header').classList.toggle('collapsed');
- // Toggle class ti-chevron-down & ti-chevron-right
- Helpers._toggleClass(collapseElement.firstElementChild, 'ti-chevron-down', 'ti-chevron-right');
- });
- });
- }
-
- // Card Toggle fullscreen
- // --------------------------------------------------------------------
- if (expandElementList) {
- expandElementList.map(function (expandElement) {
- expandElement.addEventListener('click', event => {
- event.preventDefault();
- // Toggle class ti-arrows-maximize & ti-arrows-minimize
- Helpers._toggleClass(expandElement.firstElementChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
-
- expandElement.closest('.card').classList.toggle('card-fullscreen');
- });
- });
- }
-
- // Toggle fullscreen on esc key
- document.addEventListener('keyup', event => {
- event.preventDefault();
- //Esc button
- if (event.key === 'Escape') {
- const cardFullscreen = document.querySelector('.card-fullscreen');
- // Toggle class ti-arrows-maximize & ti-arrows-minimize
-
- if (cardFullscreen) {
- Helpers._toggleClass(cardFullscreen.querySelector('.card-expand').firstChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
- cardFullscreen.classList.toggle('card-fullscreen');
- }
- }
- });
-
- // Card close
- // --------------------------------------------------------------------
- if (closeElementList) {
- closeElementList.map(function (closeElement) {
- closeElement.addEventListener('click', event => {
- event.preventDefault();
- closeElement.closest('.card').classList.add('d-none');
- });
- });
- }
-
- // Sortable.js (Drag & Drop cards)
- // --------------------------------------------------------------------
- if (typeof cardDnD !== undefined && cardDnD !== null) {
- Sortable.create(cardDnD, {
- animation: 500,
- handle: '.card'
- });
- }
-})();
-
-// Card reload (jquery)
-// --------------------------------------------------------------------
-$(function () {
- const cardReload = $('.card-reload');
- if (cardReload.length) {
- cardReload.on('click', function (e) {
- e.preventDefault();
- var $this = $(this);
- $this.closest('.card').block({
- message:
- '
',
-
- css: {
- backgroundColor: 'transparent',
- border: '0'
- },
- overlayCSS: {
- backgroundColor: $('html').hasClass('dark-style') ? '#000' : '#fff',
- opacity: 0.55
- }
- });
- setTimeout(function () {
- $this.closest('.card').unblock();
- if ($this.closest('.card').find('.card-alert').length) {
- $this
- .closest('.card')
- .find('.card-alert')
- .html(
- '
'
- );
- }
- }, 2500);
- });
- }
-});
diff --git a/httpdocs/themes/vuexy/js/cards-advance.js b/httpdocs/themes/vuexy/js/cards-advance.js
deleted file mode 100755
index 89c72b83..00000000
--- a/httpdocs/themes/vuexy/js/cards-advance.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * Advanced Cards
- */
-
-'use strict';
-
-(function () {
- let cardColor, headingColor, legendColor, labelColor;
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- headingColor = config.colors_dark.headingColor;
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- headingColor = config.colors.headingColor;
- }
-
- // Radial bar chart functions
- function radialBarChart(color, value) {
- const radialBarChartOpt = {
- chart: {
- height: 53,
- width: 43,
- type: 'radialBar'
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '33%'
- },
- dataLabels: {
- show: false
- },
- track: {
- background: config.colors_label.secondary
- }
- }
- },
- stroke: {
- lineCap: 'round'
- },
- colors: [color],
- grid: {
- padding: {
- top: -15,
- bottom: -15,
- left: -5,
- right: -15
- }
- },
- series: [value],
- labels: ['Progress']
- };
- return radialBarChartOpt;
- }
-
- // Progress Chart
- // --------------------------------------------------------------------
- // All progress chart
- const chartProgressList = document.querySelectorAll('.chart-progress');
- if (chartProgressList) {
- chartProgressList.forEach(function (chartProgressEl) {
- const color = config.colors[chartProgressEl.dataset.color],
- series = chartProgressEl.dataset.series;
- const optionsBundle = radialBarChart(color, series);
- const chart = new ApexCharts(chartProgressEl, optionsBundle);
- chart.render();
- });
- }
-
- // Earning Reports Bar Chart
- // --------------------------------------------------------------------
- const reportBarChartEl = document.querySelector('#reportBarChart'),
- reportBarChartConfig = {
- chart: {
- height: 200,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '60%',
- columnWidth: '60%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- distributed: true
- }
- },
- grid: {
- show: false,
- padding: {
- top: -20,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: [
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors.primary,
- config.colors_label.primary,
- config.colors_label.primary
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [40, 95, 60, 45, 90, 50, 75]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- }
- };
- if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
- const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
- barChart.render();
- }
-
- // swiper loop and autoplay
- // --------------------------------------------------------------------
- const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
- if (swiperWithPagination) {
- new Swiper(swiperWithPagination, {
- loop: true,
- autoplay: {
- delay: 2500,
- disableOnInteraction: false
- },
- pagination: {
- clickable: true,
- el: '.swiper-pagination'
- }
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/cards-analytics.js b/httpdocs/themes/vuexy/js/cards-analytics.js
deleted file mode 100755
index 7ced3dd9..00000000
--- a/httpdocs/themes/vuexy/js/cards-analytics.js
+++ /dev/null
@@ -1,1000 +0,0 @@
-/**
- * Analytics Cards
- */
-
-'use strict';
-
-(function () {
- let cardColor, headingColor, legendColor, labelColor, borderColor;
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- headingColor = config.colors_dark.headingColor;
- borderColor = config.colors_dark.borderColor;
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- headingColor = config.colors.headingColor;
- borderColor = config.colors.borderColor;
- }
-
- // Earning Reports Bar Chart
- // --------------------------------------------------------------------
- const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
- weeklyEarningReportsConfig = {
- chart: {
- height: 202,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '60%',
- columnWidth: '38%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- distributed: true
- }
- },
- grid: {
- show: false,
- padding: {
- top: -30,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: [
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors.primary,
- config.colors_label.primary,
- config.colors_label.primary
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [40, 65, 50, 45, 90, 55, 70]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 199
- }
- }
- }
- ]
- };
- if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
- const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
- weeklyEarningReports.render();
- }
-
- // Support Tracker - Radial Bar Chart
- // --------------------------------------------------------------------
- const supportTrackerEl = document.querySelector('#supportTracker'),
- supportTrackerOptions = {
- series: [85],
- labels: ['Completed Task'],
- chart: {
- height: 360,
- type: 'radialBar'
- },
- plotOptions: {
- radialBar: {
- offsetY: 10,
- startAngle: -140,
- endAngle: 130,
- hollow: {
- size: '65%'
- },
- track: {
- background: cardColor,
- strokeWidth: '100%'
- },
- dataLabels: {
- name: {
- offsetY: -20,
- color: labelColor,
- fontSize: '13px',
- fontWeight: '400',
- fontFamily: 'Public Sans'
- },
- value: {
- offsetY: 10,
- color: headingColor,
- fontSize: '38px',
- fontWeight: '600',
- fontFamily: 'Public Sans'
- }
- }
- }
- },
- colors: [config.colors.primary],
- fill: {
- type: 'gradient',
- gradient: {
- shade: 'dark',
- shadeIntensity: 0.5,
- gradientToColors: [config.colors.primary],
- inverseColors: true,
- opacityFrom: 1,
- opacityTo: 0.6,
- stops: [30, 70, 100]
- }
- },
- stroke: {
- dashArray: 10
- },
- grid: {
- padding: {
- top: -20,
- bottom: 5
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 330
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 280
- }
- }
- }
- ]
- };
- if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
- const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
- supportTracker.render();
- }
-
- // Sales Last 6 Months - Radar Chart
- // --------------------------------------------------------------------
- const salesLastMonthEl = document.querySelector('#salesLastMonth'),
- salesLastMonthConfig = {
- series: [
- {
- name: 'Sales',
- data: [32, 27, 27, 30, 25, 25]
- },
- {
- name: 'Visits',
- data: [25, 35, 20, 20, 20, 20]
- }
- ],
- chart: {
- height: 306,
- type: 'radar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- radar: {
- polygons: {
- strokeColors: borderColor,
- connectorColors: borderColor
- }
- }
- },
- stroke: {
- show: false,
- width: 0
- },
- legend: {
- show: true,
- fontSize: '13px',
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- },
- markers: {
- height: 10,
- width: 10,
- offsetX: -3
- },
- itemMargin: {
- horizontal: 10
- },
- onItemHover: {
- highlightDataSeries: false
- }
- },
- colors: [config.colors.primary, config.colors.info],
- fill: {
- opacity: [1, 0.85]
- },
- markers: {
- size: 0
- },
- grid: {
- show: false,
- padding: {
- top: 0,
- bottom: -5
- }
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
- labels: {
- show: true,
- style: {
- colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- show: false,
- min: 0,
- max: 40,
- tickAmount: 4
- },
- responsive: [
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 400
- }
- }
- }
- ]
- };
- if (typeof salesLastMonthEl !== undefined && salesLastMonthEl !== null) {
- const salesLastMonth = new ApexCharts(salesLastMonthEl, salesLastMonthConfig);
- salesLastMonth.render();
- }
-
- // Total Revenue Report Chart - Bar Chart
- // --------------------------------------------------------------------
- const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
- totalRevenueChartOptions = {
- series: [
- {
- name: 'Earning',
- data: [270, 210, 180, 200, 250, 280, 250, 270, 150]
- },
- {
- name: 'Expense',
- data: [-140, -160, -180, -150, -100, -60, -80, -100, -180]
- }
- ],
- chart: {
- height: 350,
- parentHeightOffset: 0,
- stacked: true,
- type: 'bar',
- toolbar: { show: false }
- },
- tooltip: {
- enabled: false
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '40%',
- borderRadius: 9,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- colors: [config.colors.primary, config.colors.warning],
- dataLabels: {
- enabled: false
- },
- stroke: {
- curve: 'smooth',
- width: 6,
- lineCap: 'round',
- colors: [cardColor]
- },
- legend: {
- show: true,
- horizontalAlign: 'left',
- position: 'top',
- fontFamily: 'Public Sans',
- markers: {
- height: 12,
- width: 12,
- radius: 12,
- offsetX: -3,
- offsetY: 2
- },
- labels: {
- colors: legendColor
- },
- itemMargin: {
- horizontal: 5
- }
- },
- grid: {
- show: false,
- padding: {
- bottom: -8,
- top: 20
- }
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
- labels: {
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- }
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- offsetX: -16,
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- }
- },
- min: -200,
- max: 300,
- tickAmount: 5
- },
- responsive: [
- {
- breakpoint: 1700,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '43%'
- }
- }
- }
- },
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%'
- }
- }
- }
- },
- {
- breakpoint: 1300,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '62%'
- }
- }
- }
- },
- {
- breakpoint: 991,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '38%'
- }
- }
- }
- },
- {
- breakpoint: 850,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%'
- }
- }
- }
- },
- {
- breakpoint: 449,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '73%'
- }
- },
- xaxis: {
- labels: {
- offsetY: -5
- }
- }
- }
- },
- {
- breakpoint: 394,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '88%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
- const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
- totalRevenueChart.render();
- }
-
- // Total Revenue Report Budget Line Chart
- const budgetChartEl = document.querySelector('#budgetChart'),
- budgetChartOptions = {
- chart: {
- height: 100,
- toolbar: { show: false },
- zoom: { enabled: false },
- type: 'line'
- },
- series: [
- {
- name: 'Last Month',
- data: [20, 10, 30, 16, 24, 5, 40, 23, 28, 5, 30]
- },
- {
- name: 'This Month',
- data: [50, 40, 60, 46, 54, 35, 70, 53, 58, 35, 60]
- }
- ],
- stroke: {
- curve: 'smooth',
- dashArray: [5, 0],
- width: [1, 2]
- },
- legend: {
- show: false
- },
- colors: [borderColor, config.colors.primary],
- grid: {
- show: false,
- borderColor: borderColor,
- padding: {
- top: -30,
- bottom: -15,
- left: 25
- }
- },
- markers: {
- size: 0
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof budgetChartEl !== undefined && budgetChartEl !== null) {
- const budgetChart = new ApexCharts(budgetChartEl, budgetChartOptions);
- budgetChart.render();
- }
-
- // Project Status - Line Chart
- // --------------------------------------------------------------------
- const projectStatusEl = document.querySelector('#projectStatusChart'),
- projectStatusConfig = {
- chart: {
- height: 252,
- type: 'area',
- toolbar: false
- },
- markers: {
- strokeColor: 'transparent'
- },
- series: [
- {
- data: [2000, 2000, 4000, 4000, 3050, 3050, 2000, 2000, 3050, 3050, 4700, 4700, 2750, 2750, 5700, 5700]
- }
- ],
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- left: -10,
- right: -5
- }
- },
- stroke: {
- width: 3,
- curve: 'straight'
- },
- colors: [config.colors.primary],
- fill: {
- type: 'gradient',
- gradient: {
- opacityFrom: 0.6,
- opacityTo: 0.15,
- stops: [0, 95, 100]
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- lines: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- },
- min: 1000,
- max: 6000,
- tickAmount: 5
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof projectStatusEl !== undefined && projectStatusEl !== null) {
- const projectStatus = new ApexCharts(projectStatusEl, projectStatusConfig);
- projectStatus.render();
- }
-
- // Earning Reports Tabs Function
- function EarningReportsBarChart(arrayData, highlightData) {
- const basicColor = config.colors_label.primary,
- highlightColor = config.colors.primary;
- var colorArr = [];
-
- for (let i = 0; i < arrayData.length; i++) {
- if (i === highlightData) {
- colorArr.push(highlightColor);
- } else {
- colorArr.push(basicColor);
- }
- }
-
- const earningReportBarChartOpt = {
- chart: {
- height: 258,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- columnWidth: '32%',
- startingShape: 'rounded',
- borderRadius: 7,
- distributed: true,
- dataLabels: {
- position: 'top'
- }
- }
- },
- grid: {
- show: false,
- padding: {
- top: 0,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: colorArr,
- dataLabels: {
- enabled: true,
- formatter: function (val) {
- return val + 'k';
- },
- offsetY: -25,
- style: {
- fontSize: '15px',
- colors: [legendColor],
- fontWeight: '600',
- fontFamily: 'Public Sans'
- }
- },
- series: [
- {
- data: arrayData
- }
- ],
- legend: {
- show: false
- },
- tooltip: {
- enabled: false
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
- axisBorder: {
- show: true,
- color: borderColor
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- offsetX: -15,
- formatter: function (val) {
- return '$' + parseInt(val / 1) + 'k';
- },
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- },
- min: 0,
- max: 60000,
- tickAmount: 6
- }
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '41%'
- }
- }
- }
- },
- {
- breakpoint: 590,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '61%',
- borderRadius: 5
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- grid: {
- padding: {
- right: 0,
- left: -20
- }
- },
- dataLabels: {
- style: {
- fontSize: '12px',
- fontWeight: '400'
- }
- }
- }
- }
- ]
- };
- return earningReportBarChartOpt;
- }
- var chartJson = 'earning-reports-charts.json';
- // Earning Chart JSON data
- var earningReportsChart = $.ajax({
- url: assetsPath + 'json/' + chartJson, //? Use your own search api instead
- dataType: 'json',
- async: false
- }).responseJSON;
-
- // Earning Reports Tabs Orders
- // --------------------------------------------------------------------
- const earningReportsTabsOrdersEl = document.querySelector('#earningReportsTabsOrders'),
- earningReportsTabsOrdersConfig = EarningReportsBarChart(
- earningReportsChart['data'][0]['chart_data'],
- earningReportsChart['data'][0]['active_option']
- );
- if (typeof earningReportsTabsOrdersEl !== undefined && earningReportsTabsOrdersEl !== null) {
- const earningReportsTabsOrders = new ApexCharts(earningReportsTabsOrdersEl, earningReportsTabsOrdersConfig);
- earningReportsTabsOrders.render();
- }
- // Earning Reports Tabs Sales
- // --------------------------------------------------------------------
- const earningReportsTabsSalesEl = document.querySelector('#earningReportsTabsSales'),
- earningReportsTabsSalesConfig = EarningReportsBarChart(
- earningReportsChart['data'][1]['chart_data'],
- earningReportsChart['data'][1]['active_option']
- );
- if (typeof earningReportsTabsSalesEl !== undefined && earningReportsTabsSalesEl !== null) {
- const earningReportsTabsSales = new ApexCharts(earningReportsTabsSalesEl, earningReportsTabsSalesConfig);
- earningReportsTabsSales.render();
- }
- // Earning Reports Tabs Profit
- // --------------------------------------------------------------------
- const earningReportsTabsProfitEl = document.querySelector('#earningReportsTabsProfit'),
- earningReportsTabsProfitConfig = EarningReportsBarChart(
- earningReportsChart['data'][2]['chart_data'],
- earningReportsChart['data'][2]['active_option']
- );
- if (typeof earningReportsTabsProfitEl !== undefined && earningReportsTabsProfitEl !== null) {
- const earningReportsTabsProfit = new ApexCharts(earningReportsTabsProfitEl, earningReportsTabsProfitConfig);
- earningReportsTabsProfit.render();
- }
- // Earning Reports Tabs Income
- // --------------------------------------------------------------------
- const earningReportsTabsIncomeEl = document.querySelector('#earningReportsTabsIncome'),
- earningReportsTabsIncomeConfig = EarningReportsBarChart(
- earningReportsChart['data'][3]['chart_data'],
- earningReportsChart['data'][3]['active_option']
- );
- if (typeof earningReportsTabsIncomeEl !== undefined && earningReportsTabsIncomeEl !== null) {
- const earningReportsTabsIncome = new ApexCharts(earningReportsTabsIncomeEl, earningReportsTabsIncomeConfig);
- earningReportsTabsIncome.render();
- }
-
- // Total Earning Chart - Bar Chart
- // --------------------------------------------------------------------
- const totalEarningChartEl = document.querySelector('#totalEarningChart'),
- totalEarningChartOptions = {
- series: [
- {
- name: 'Earning',
- data: [15, 10, 20, 8, 12, 18, 12, 5]
- },
- {
- name: 'Expense',
- data: [-7, -10, -7, -12, -6, -9, -5, -8]
- }
- ],
- chart: {
- height: 225,
- parentHeightOffset: 0,
- stacked: true,
- type: 'bar',
- toolbar: { show: false }
- },
- tooltip: {
- enabled: false
- },
- legend: {
- show: false
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '18%',
- borderRadius: 5,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- colors: [config.colors.danger, config.colors.primary],
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- top: -40,
- bottom: -20,
- left: -10,
- right: -2
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1468,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '22%'
- }
- }
- }
- },
- {
- breakpoint: 1197,
- options: {
- chart: {
- height: 228
- },
- plotOptions: {
- bar: {
- borderRadius: 8,
- columnWidth: '26%'
- }
- }
- }
- },
- {
- breakpoint: 783,
- options: {
- chart: {
- height: 232
- },
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '28%'
- }
- }
- }
- },
- {
- breakpoint: 589,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '16%'
- }
- }
- }
- },
- {
- breakpoint: 520,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '18%'
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5,
- columnWidth: '20%'
- }
- }
- }
- },
- {
- breakpoint: 381,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '24%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
- const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
- totalEarningChart.render();
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/cards-statistics.js b/httpdocs/themes/vuexy/js/cards-statistics.js
deleted file mode 100755
index 86d78125..00000000
--- a/httpdocs/themes/vuexy/js/cards-statistics.js
+++ /dev/null
@@ -1,1585 +0,0 @@
-/**
- * Statistics Cards
- */
-
-'use strict';
-
-(function () {
- let cardColor, shadeColor, labelColor, headingColor, barBgColor, borderColor;
-
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- headingColor = config.colors_dark.headingColor;
- shadeColor = 'dark';
- barBgColor = '#8692d014';
- borderColor = config.colors_dark.borderColor;
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- headingColor = config.colors.headingColor;
- shadeColor = '';
- barBgColor = '#4b465c14';
- borderColor = config.colors.borderColor;
- }
-
- // Donut Chart Colors
- const chartColors = {
- donut: {
- series1: config.colors.success,
- series2: '#28c76fb3',
- series3: '#28c76f80',
- series4: config.colors_label.success
- }
- };
-
- // Orders last week Bar Chart
- // --------------------------------------------------------------------
- const ordersLastWeekEl = document.querySelector('#ordersLastWeek'),
- ordersLastWeekConfig = {
- chart: {
- height: 90,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- plotOptions: {
- bar: {
- barHeight: '100%',
- columnWidth: '30px',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- colors: {
- backgroundBarColors: [barBgColor, barBgColor, barBgColor, barBgColor, barBgColor, barBgColor, barBgColor],
- backgroundBarRadius: 4
- }
- }
- },
- colors: [config.colors.primary],
- grid: {
- show: false,
- padding: {
- top: -30,
- left: -16,
- bottom: 0,
- right: -6
- }
- },
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [60, 50, 20, 45, 50, 30, 70]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%',
- borderRadius: 4
- }
- }
- }
- },
- {
- breakpoint: 1368,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '48%'
- }
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '30%',
- colors: {
- backgroundBarRadius: 6
- }
- }
- }
- }
- },
- {
- breakpoint: 991,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '35%',
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 883,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%'
- }
- }
- }
- },
- {
- breakpoint: 768,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '25%'
- }
- }
- }
- },
- {
- breakpoint: 576,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 9
- },
- colors: {
- backgroundBarRadius: 9
- }
- }
- }
- },
- {
- breakpoint: 479,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 4,
- columnWidth: '35%'
- },
- colors: {
- backgroundBarRadius: 4
- }
- },
- grid: {
- padding: {
- right: -15,
- left: -15
- }
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 3
- }
- }
- }
- }
- ]
- };
- if (typeof ordersLastWeekEl !== undefined && ordersLastWeekEl !== null) {
- const ordersLastWeek = new ApexCharts(ordersLastWeekEl, ordersLastWeekConfig);
- ordersLastWeek.render();
- }
-
- // Sales last year Area Chart
- // --------------------------------------------------------------------
- const salesLastYearEl = document.querySelector('#salesLastYear'),
- salesLastYearConfig = {
- chart: {
- height: 90,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.25
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [200, 55, 400, 250]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof salesLastYearEl !== undefined && salesLastYearEl !== null) {
- const salesLastYear = new ApexCharts(salesLastYearEl, salesLastYearConfig);
- salesLastYear.render();
- }
-
- // Profit last month Line Chart
- // --------------------------------------------------------------------
- const profitLastMonthEl = document.querySelector('#profitLastMonth'),
- profitLastMonthConfig = {
- chart: {
- height: 90,
- type: 'line',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- grid: {
- borderColor: borderColor,
- strokeDashArray: 6,
- xaxis: {
- lines: {
- show: true,
- colors: '#000'
- }
- },
- yaxis: {
- lines: {
- show: false
- }
- },
- padding: {
- top: -18,
- left: -4,
- right: 7,
- bottom: -10
- }
- },
- colors: [config.colors.info],
- stroke: {
- width: 2
- },
- series: [
- {
- data: [0, 25, 10, 40, 25, 55]
- }
- ],
- tooltip: {
- shared: false,
- intersect: true,
- x: {
- show: false
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- markers: {
- size: 3.5,
- fillColor: config.colors.info,
- strokeColors: 'transparent',
- strokeWidth: 3.2,
- discrete: [
- {
- seriesIndex: 0,
- dataPointIndex: 5,
- fillColor: cardColor,
- strokeColor: config.colors.info,
- size: 5,
- shape: 'circle'
- }
- ],
- hover: {
- size: 5.5
- }
- },
- responsive: [
- {
- breakpoint: 768,
- options: {
- chart: {
- height: 110
- }
- }
- }
- ]
- };
- if (typeof profitLastMonthEl !== undefined && profitLastMonthEl !== null) {
- const profitLastMonth = new ApexCharts(profitLastMonthEl, profitLastMonthConfig);
- profitLastMonth.render();
- }
-
- // Sessions Last Month - Staked Bar Chart
- // --------------------------------------------------------------------
- const sessionsLastMonthEl = document.querySelector('#sessionsLastMonth'),
- sessionsLastMonthConfig = {
- chart: {
- type: 'bar',
- height: 90,
- parentHeightOffset: 0,
- stacked: true,
- toolbar: {
- show: false
- }
- },
- series: [
- {
- name: 'PRODUCT A',
- data: [4, 3, 6, 4, 3]
- },
- {
- name: 'PRODUCT B',
- data: [-3, -4, -3, -2, -3]
- }
- ],
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '30%',
- barHeight: '100%',
- borderRadius: 5,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- dataLabels: {
- enabled: false
- },
- tooltip: {
- enabled: false
- },
- stroke: {
- curve: 'smooth',
- width: 1,
- lineCap: 'round',
- colors: [cardColor]
- },
- legend: {
- show: false
- },
- colors: [config.colors.primary, config.colors.success],
- grid: {
- show: false,
- padding: {
- top: -41,
- right: -10,
- left: -8,
- bottom: -26
- }
- },
- xaxis: {
- categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- labels: {
- show: false
- },
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- }
- },
- yaxis: {
- show: false
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%'
- }
- }
- }
- },
- {
- breakpoint: 1300,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%'
- }
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '20%'
- }
- }
- }
- },
- {
- breakpoint: 1025,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 7,
- columnWidth: '25%'
- }
- },
- chart: {
- height: 110
- }
- }
- },
- {
- breakpoint: 900,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 782,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '30%'
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5
- }
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '35%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof sessionsLastMonthEl !== undefined && sessionsLastMonthEl !== null) {
- const sessionsLastMonth = new ApexCharts(sessionsLastMonthEl, sessionsLastMonthConfig);
- sessionsLastMonth.render();
- }
-
- // Expenses Radial Bar Chart
- // --------------------------------------------------------------------
- const expensesRadialChartEl = document.querySelector('#expensesChart'),
- expensesRadialChartConfig = {
- chart: {
- height: 145,
- sparkline: {
- enabled: true
- },
- parentHeightOffset: 0,
- type: 'radialBar'
- },
- colors: [config.colors.warning],
- series: [78],
- plotOptions: {
- radialBar: {
- offsetY: 0,
- startAngle: -90,
- endAngle: 90,
- hollow: {
- size: '65%'
- },
- track: {
- strokeWidth: '45%',
- background: borderColor
- },
- dataLabels: {
- name: {
- show: false
- },
- value: {
- fontSize: '22px',
- color: headingColor,
- fontWeight: 600,
- offsetY: -5
- }
- }
- }
- },
- grid: {
- show: false,
- padding: {
- bottom: 5
- }
- },
- stroke: {
- lineCap: 'round'
- },
- labels: ['Progress'],
- responsive: [
- {
- breakpoint: 1442,
- options: {
- chart: {
- height: 100
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '55%'
- },
- dataLabels: {
- value: {
- fontSize: '16px',
- offsetY: -1
- }
- }
- }
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- chart: {
- height: 228
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '75%'
- },
- track: {
- strokeWidth: '50%'
- },
- dataLabels: {
- value: {
- fontSize: '26px'
- }
- }
- }
- }
- }
- },
- {
- breakpoint: 890,
- options: {
- chart: {
- height: 180
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '70%'
- }
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- chart: {
- height: 142
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '70%'
- },
- dataLabels: {
- value: {
- fontSize: '22px'
- }
- }
- }
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- chart: {
- height: 105
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '60%'
- },
- dataLabels: {
- value: {
- fontSize: '18px'
- }
- }
- }
- }
- }
- }
- ]
- };
- if (typeof expensesRadialChartEl !== undefined && expensesRadialChartEl !== null) {
- const expensesRadialChart = new ApexCharts(expensesRadialChartEl, expensesRadialChartConfig);
- expensesRadialChart.render();
- }
-
- // Impression This Week
- // --------------------------------------------------------------------
- const impressionThisWeekEl = document.querySelector('#impressionThisWeek'),
- impressionThisWeekConfig = {
- chart: {
- height: 90,
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- colors: [config.colors.danger],
- stroke: {
- width: 3
- },
- grid: {
- padding: {
- bottom: -10
- }
- },
- tooltip: {
- enabled: false
- },
- series: [
- {
- data: [200, 200, 500, 500, 300, 300, 100, 100, 450, 450, 650, 650]
- }
- ],
- responsive: [
- {
- breakpoint: 1200,
- options: {
- chart: {
- height: 110
- }
- }
- },
- {
- breakpoint: 768,
- options: {
- chart: {
- height: 90
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- chart: {
- height: 93
- }
- }
- }
- ]
- };
- if (typeof impressionThisWeekEl !== undefined && impressionThisWeekEl !== null) {
- const impressionThisWeek = new ApexCharts(impressionThisWeekEl, impressionThisWeekConfig);
- impressionThisWeek.render();
- }
-
- // Subscriber Gained Area Chart
- // --------------------------------------------------------------------
- const subscriberGainedEl = document.querySelector('#subscriberGained'),
- subscriberGainedConfig = {
- chart: {
- height: 90,
- type: 'area',
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.primary],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [200, 60, 300, 140, 230, 120, 400]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof subscriberGainedEl !== undefined && subscriberGainedEl !== null) {
- const subscriberGained = new ApexCharts(subscriberGainedEl, subscriberGainedConfig);
- subscriberGained.render();
- }
-
- // Quarterly Sales Area Chart
- // --------------------------------------------------------------------
- const quarterlySalesEl = document.querySelector('#quarterlySales'),
- quarterlySalesConfig = {
- chart: {
- height: 90,
- type: 'area',
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.danger],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [200, 300, 160, 250, 130, 400]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof quarterlySalesEl !== undefined && quarterlySalesEl !== null) {
- const quarterlySales = new ApexCharts(quarterlySalesEl, quarterlySalesConfig);
- quarterlySales.render();
- }
- // Order Received Area Chart
- // --------------------------------------------------------------------
- const orderReceivedEl = document.querySelector('#orderReceived'),
- orderReceivedConfig = {
- chart: {
- height: 90,
- type: 'area',
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.warning],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [350, 500, 310, 460, 280, 400, 300]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof orderReceivedEl !== undefined && orderReceivedEl !== null) {
- const orderReceived = new ApexCharts(orderReceivedEl, orderReceivedConfig);
- orderReceived.render();
- }
-
- // Revenue Generated Area Chart
- // --------------------------------------------------------------------
- const revenueGeneratedEl = document.querySelector('#revenueGenerated'),
- revenueGeneratedConfig = {
- chart: {
- height: 90,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [300, 350, 330, 380, 340, 400, 380]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof revenueGeneratedEl !== undefined && revenueGeneratedEl !== null) {
- const revenueGenerated = new ApexCharts(revenueGeneratedEl, revenueGeneratedConfig);
- revenueGenerated.render();
- }
-
- // Average Daily Sales
- // --------------------------------------------------------------------
- const averageDailySalesEl = document.querySelector('#averageDailySales'),
- averageDailySalesConfig = {
- chart: {
- height: 123,
- type: 'area',
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [400, 200, 650, 500]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- },
- responsive: [
- {
- breakpoint: 1387,
- options: {
- chart: {
- height: 80
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- chart: {
- height: 123
- }
- }
- }
- ]
- };
- if (typeof averageDailySalesEl !== undefined && averageDailySalesEl !== null) {
- const averageDailySales = new ApexCharts(averageDailySalesEl, averageDailySalesConfig);
- averageDailySales.render();
- }
-
- // Average Daily Traffic Bar Chart
- // --------------------------------------------------------------------
- const averageDailyTrafficEl = document.querySelector('#averageDailyTraffic'),
- averageDailyTrafficConfig = {
- chart: {
- height: 145,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '100%',
- columnWidth: '25px',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 6
- }
- },
- colors: [config.colors.warning],
- grid: {
- show: false,
- padding: {
- top: -30,
- left: -18,
- bottom: -13,
- right: -10
- }
- },
- dataLabels: {
- enabled: false
- },
- tooltip: {
- enabled: false
- },
- series: [
- {
- data: [30, 40, 50, 60, 70, 80, 90]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['01', '02', '03', '04', '05', '06', '07'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- },
- show: true
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5
- }
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '25%',
- borderRadius: 9
- }
- }
- }
- },
- {
- breakpoint: 992,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 8,
- columnWidth: '25%'
- }
- }
- }
- },
- {
- breakpoint: 836,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '30%'
- }
- }
- }
- },
- {
- breakpoint: 738,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '35%',
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 576,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '25%',
- borderRadius: 10
- }
- }
- }
- },
- {
- breakpoint: 500,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '24%',
- borderRadius: 8
- }
- }
- }
- },
- {
- breakpoint: 450,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6
- }
- }
- }
- }
- ]
- };
- if (typeof averageDailyTrafficEl !== undefined && averageDailyTrafficEl !== null) {
- const averageDailyTraffic = new ApexCharts(averageDailyTrafficEl, averageDailyTrafficConfig);
- averageDailyTraffic.render();
- }
-
- // Revenue Growth Chart
- // --------------------------------------------------------------------
- const revenueGrowthEl = document.querySelector('#revenueGrowth'),
- revenueGrowthConfig = {
- chart: {
- height: 162,
- type: 'bar',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '80%',
- columnWidth: '30%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 7,
- distributed: true
- }
- },
- tooltip: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- top: -20,
- bottom: -12,
- left: -10,
- right: 0
- }
- },
- colors: [
- config.colors_label.success,
- config.colors_label.success,
- config.colors_label.success,
- config.colors_label.success,
- config.colors.success,
- config.colors_label.success,
- config.colors_label.success
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [25, 40, 55, 70, 85, 70, 55]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- }
- },
- responsive: [
- {
- breakpoint: 1471,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '45%'
- }
- }
- }
- },
- {
- breakpoint: 1350,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '57%'
- }
- }
- }
- },
- {
- breakpoint: 1032,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '60%'
- }
- }
- }
- },
- {
- breakpoint: 992,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%',
- borderRadius: 8
- }
- }
- }
- },
- {
- breakpoint: 855,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%',
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 440,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%'
- }
- }
- }
- },
- {
- breakpoint: 381,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '45%'
- }
- }
- }
- }
- ]
- };
- if (typeof revenueGrowthEl !== undefined && revenueGrowthEl !== null) {
- const revenueGrowth = new ApexCharts(revenueGrowthEl, revenueGrowthConfig);
- revenueGrowth.render();
- }
-
- // Generated Leads Chart
- // --------------------------------------------------------------------
- const generatedLeadsChartEl = document.querySelector('#generatedLeadsChart'),
- generatedLeadsChartConfig = {
- chart: {
- height: 147,
- width: 130,
- parentHeightOffset: 0,
- type: 'donut'
- },
- labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
- series: [45, 58, 30, 50],
- colors: [
- chartColors.donut.series1,
- chartColors.donut.series2,
- chartColors.donut.series3,
- chartColors.donut.series4
- ],
- stroke: {
- width: 0
- },
- dataLabels: {
- enabled: false,
- formatter: function (val, opt) {
- return parseInt(val) + '%';
- }
- },
- legend: {
- show: false
- },
- tooltip: {
- theme: false
- },
- grid: {
- padding: {
- top: 15,
- right: -20,
- left: -20
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- }
- },
- plotOptions: {
- pie: {
- donut: {
- size: '70%',
- labels: {
- show: true,
- value: {
- fontSize: '1.375rem',
- fontFamily: 'Public Sans',
- color: headingColor,
- fontWeight: 600,
- offsetY: -15,
- formatter: function (val) {
- return parseInt(val) + '%';
- }
- },
- name: {
- offsetY: 20,
- fontFamily: 'Public Sans'
- },
- total: {
- show: true,
- showAlways: true,
- color: config.colors.success,
- fontSize: '.8125rem',
- label: 'Total',
- fontFamily: 'Public Sans',
- formatter: function (w) {
- return '184';
- }
- }
- }
- }
- }
- }
- };
- if (typeof generatedLeadsChartEl !== undefined && generatedLeadsChartEl !== null) {
- const generatedLeadsChart = new ApexCharts(generatedLeadsChartEl, generatedLeadsChartConfig);
- generatedLeadsChart.render();
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/charts-apex.js b/httpdocs/themes/vuexy/js/charts-apex.js
deleted file mode 100755
index 37829a5e..00000000
--- a/httpdocs/themes/vuexy/js/charts-apex.js
+++ /dev/null
@@ -1,1134 +0,0 @@
-/**
- * Charts Apex
- */
-
-'use strict';
-
-(function () {
- let cardColor, headingColor, labelColor, borderColor, legendColor;
-
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- headingColor = config.colors_dark.headingColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- borderColor = config.colors_dark.borderColor;
- } else {
- cardColor = config.colors.cardColor;
- headingColor = config.colors.headingColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- borderColor = config.colors.borderColor;
- }
-
- // Color constant
- const chartColors = {
- column: {
- series1: '#826af9',
- series2: '#d2b0ff',
- bg: '#f8d3ff'
- },
- donut: {
- series1: '#fee802',
- series2: '#3fd0bd',
- series3: '#826bf8',
- series4: '#2b9bf4'
- },
- area: {
- series1: '#29dac7',
- series2: '#60f2ca',
- series3: '#a5f8cd'
- }
- };
-
- // Heat chart data generator
- function generateDataHeat(count, yrange) {
- let i = 0;
- let series = [];
- while (i < count) {
- let x = 'w' + (i + 1).toString();
- let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
- series.push({
- x: x,
- y: y
- });
- i++;
- }
- return series;
- }
-
- // Line Area Chart
- // --------------------------------------------------------------------
- const areaChartEl = document.querySelector('#lineAreaChart'),
- areaChartConfig = {
- chart: {
- height: 400,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- show: false,
- curve: 'straight'
- },
- legend: {
- show: true,
- position: 'top',
- horizontalAlign: 'start',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: true
- }
- }
- },
- colors: [chartColors.area.series3, chartColors.area.series2, chartColors.area.series1],
- series: [
- {
- name: 'Visits',
- data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180, 270, 280, 375]
- },
- {
- name: 'Clicks',
- data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275]
- },
- {
- name: 'Sales',
- data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220]
- }
- ],
- xaxis: {
- categories: [
- '7/12',
- '8/12',
- '9/12',
- '10/12',
- '11/12',
- '12/12',
- '13/12',
- '14/12',
- '15/12',
- '16/12',
- '17/12',
- '18/12',
- '19/12',
- '20/12'
- ],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- fill: {
- opacity: 1,
- type: 'solid'
- },
- tooltip: {
- shared: false
- }
- };
- if (typeof areaChartEl !== undefined && areaChartEl !== null) {
- const areaChart = new ApexCharts(areaChartEl, areaChartConfig);
- areaChart.render();
- }
-
- // Bar Chart
- // --------------------------------------------------------------------
- const barChartEl = document.querySelector('#barChart'),
- barChartConfig = {
- chart: {
- height: 400,
- type: 'bar',
- stacked: true,
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- columnWidth: '15%',
- colors: {
- backgroundBarColors: [
- chartColors.column.bg,
- chartColors.column.bg,
- chartColors.column.bg,
- chartColors.column.bg,
- chartColors.column.bg
- ],
- backgroundBarRadius: 10
- }
- }
- },
- dataLabels: {
- enabled: false
- },
- legend: {
- show: true,
- position: 'top',
- horizontalAlign: 'start',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- colors: [chartColors.column.series1, chartColors.column.series2],
- stroke: {
- show: true,
- colors: ['transparent']
- },
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: true
- }
- }
- },
- series: [
- {
- name: 'Apple',
- data: [90, 120, 55, 100, 80, 125, 175, 70, 88, 180]
- },
- {
- name: 'Samsung',
- data: [85, 100, 30, 40, 95, 90, 30, 110, 62, 20]
- }
- ],
- xaxis: {
- categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- fill: {
- opacity: 1
- }
- };
- if (typeof barChartEl !== undefined && barChartEl !== null) {
- const barChart = new ApexCharts(barChartEl, barChartConfig);
- barChart.render();
- }
-
- // Scatter Chart
- // --------------------------------------------------------------------
- const scatterChartEl = document.querySelector('#scatterChart'),
- scatterChartConfig = {
- chart: {
- height: 400,
- type: 'scatter',
- zoom: {
- enabled: true,
- type: 'xy'
- },
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: true
- }
- }
- },
- legend: {
- show: true,
- position: 'top',
- horizontalAlign: 'start',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- colors: [config.colors.warning, config.colors.primary, config.colors.success],
- series: [
- {
- name: 'Angular',
- data: [
- [5.4, 170],
- [5.4, 100],
- [5.7, 110],
- [5.9, 150],
- [6.0, 200],
- [6.3, 170],
- [5.7, 140],
- [5.9, 130],
- [7.0, 150],
- [8.0, 120],
- [9.0, 170],
- [10.0, 190],
- [11.0, 220],
- [12.0, 170],
- [13.0, 230]
- ]
- },
- {
- name: 'Vue',
- data: [
- [14.0, 220],
- [15.0, 280],
- [16.0, 230],
- [18.0, 320],
- [17.5, 280],
- [19.0, 250],
- [20.0, 350],
- [20.5, 320],
- [20.0, 320],
- [19.0, 280],
- [17.0, 280],
- [22.0, 300],
- [18.0, 120]
- ]
- },
- {
- name: 'React',
- data: [
- [14.0, 290],
- [13.0, 190],
- [20.0, 220],
- [21.0, 350],
- [21.5, 290],
- [22.0, 220],
- [23.0, 140],
- [19.0, 400],
- [20.0, 200],
- [22.0, 90],
- [20.0, 120]
- ]
- }
- ],
- xaxis: {
- tickAmount: 10,
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- formatter: function (val) {
- return parseFloat(val).toFixed(1);
- },
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- }
- };
- if (typeof scatterChartEl !== undefined && scatterChartEl !== null) {
- const scatterChart = new ApexCharts(scatterChartEl, scatterChartConfig);
- scatterChart.render();
- }
-
- // Line Chart
- // --------------------------------------------------------------------
- const lineChartEl = document.querySelector('#lineChart'),
- lineChartConfig = {
- chart: {
- height: 400,
- type: 'line',
- parentHeightOffset: 0,
- zoom: {
- enabled: false
- },
- toolbar: {
- show: false
- }
- },
- series: [
- {
- data: [280, 200, 220, 180, 270, 250, 70, 90, 200, 150, 160, 100, 150, 100, 50]
- }
- ],
- markers: {
- strokeWidth: 7,
- strokeOpacity: 1,
- strokeColors: [cardColor],
- colors: [config.colors.warning]
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- curve: 'straight'
- },
- colors: [config.colors.warning],
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: true
- }
- },
- padding: {
- top: -20
- }
- },
- tooltip: {
- custom: function ({ series, seriesIndex, dataPointIndex, w }) {
- return '
';
- }
- },
- xaxis: {
- categories: [
- '7/12',
- '8/12',
- '9/12',
- '10/12',
- '11/12',
- '12/12',
- '13/12',
- '14/12',
- '15/12',
- '16/12',
- '17/12',
- '18/12',
- '19/12',
- '20/12',
- '21/12'
- ],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- }
- };
- if (typeof lineChartEl !== undefined && lineChartEl !== null) {
- const lineChart = new ApexCharts(lineChartEl, lineChartConfig);
- lineChart.render();
- }
-
- // Horizontal Bar Chart
- // --------------------------------------------------------------------
- const horizontalBarChartEl = document.querySelector('#horizontalBarChart'),
- horizontalBarChartConfig = {
- chart: {
- height: 400,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- horizontal: true,
- barHeight: '30%',
- startingShape: 'rounded',
- borderRadius: 8
- }
- },
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: false
- }
- },
- padding: {
- top: -20,
- bottom: -12
- }
- },
- colors: config.colors.info,
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [700, 350, 480, 600, 210, 550, 150]
- }
- ],
- xaxis: {
- categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- }
- };
- if (typeof horizontalBarChartEl !== undefined && horizontalBarChartEl !== null) {
- const horizontalBarChart = new ApexCharts(horizontalBarChartEl, horizontalBarChartConfig);
- horizontalBarChart.render();
- }
-
- // Candlestick Chart
- // --------------------------------------------------------------------
- const candlestickEl = document.querySelector('#candleStickChart'),
- candlestickChartConfig = {
- chart: {
- height: 410,
- type: 'candlestick',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- series: [
- {
- data: [
- {
- x: new Date(1538778600000),
- y: [150, 170, 50, 100]
- },
- {
- x: new Date(1538780400000),
- y: [200, 400, 170, 330]
- },
- {
- x: new Date(1538782200000),
- y: [330, 340, 250, 280]
- },
- {
- x: new Date(1538784000000),
- y: [300, 330, 200, 320]
- },
- {
- x: new Date(1538785800000),
- y: [320, 450, 280, 350]
- },
- {
- x: new Date(1538787600000),
- y: [300, 350, 80, 250]
- },
- {
- x: new Date(1538789400000),
- y: [200, 330, 170, 300]
- },
- {
- x: new Date(1538791200000),
- y: [200, 220, 70, 130]
- },
- {
- x: new Date(1538793000000),
- y: [220, 270, 180, 250]
- },
- {
- x: new Date(1538794800000),
- y: [200, 250, 80, 100]
- },
- {
- x: new Date(1538796600000),
- y: [150, 170, 50, 120]
- },
- {
- x: new Date(1538798400000),
- y: [110, 450, 10, 420]
- },
- {
- x: new Date(1538800200000),
- y: [400, 480, 300, 320]
- },
- {
- x: new Date(1538802000000),
- y: [380, 480, 350, 450]
- }
- ]
- }
- ],
- xaxis: {
- type: 'datetime',
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- tooltip: {
- enabled: true
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- grid: {
- borderColor: borderColor,
- xaxis: {
- lines: {
- show: true
- }
- },
- padding: {
- top: -20
- }
- },
- plotOptions: {
- candlestick: {
- colors: {
- upward: config.colors.success,
- downward: config.colors.danger
- }
- },
- bar: {
- columnWidth: '40%'
- }
- }
- };
- if (typeof candlestickEl !== undefined && candlestickEl !== null) {
- const candlestickChart = new ApexCharts(candlestickEl, candlestickChartConfig);
- candlestickChart.render();
- }
-
- // Heat map chart
- // --------------------------------------------------------------------
- const heatMapEl = document.querySelector('#heatMapChart'),
- heatMapChartConfig = {
- chart: {
- height: 350,
- type: 'heatmap',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- heatmap: {
- enableShades: false,
-
- colorScale: {
- ranges: [
- {
- from: 0,
- to: 10,
- name: '0-10',
- color: '#90B3F3'
- },
- {
- from: 11,
- to: 20,
- name: '10-20',
- color: '#7EA6F1'
- },
- {
- from: 21,
- to: 30,
- name: '20-30',
- color: '#6B9AEF'
- },
- {
- from: 31,
- to: 40,
- name: '30-40',
- color: '#598DEE'
- },
- {
- from: 41,
- to: 50,
- name: '40-50',
- color: '#4680EC'
- },
- {
- from: 51,
- to: 60,
- name: '50-60',
- color: '#3474EA'
- }
- ]
- }
- }
- },
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false
- },
- legend: {
- show: true,
- position: 'top',
- horizontalAlign: 'start',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- },
- markers: {
- offsetY: 0,
- offsetX: -3
- },
- itemMargin: {
- vertical: 3,
- horizontal: 10
- }
- },
- stroke: {
- curve: 'smooth',
- width: 4,
- lineCap: 'round',
- colors: [cardColor]
- },
- series: [
- {
- name: 'SUN',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'MON',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'TUE',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'WED',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'THU',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'FRI',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- },
- {
- name: 'SAT',
- data: generateDataHeat(24, {
- min: 0,
- max: 60
- })
- }
- ],
- xaxis: {
- labels: {
- show: false,
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- },
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- }
- },
- yaxis: {
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- }
- };
- if (typeof heatMapEl !== undefined && heatMapEl !== null) {
- const heatMapChart = new ApexCharts(heatMapEl, heatMapChartConfig);
- heatMapChart.render();
- }
-
- // Radial Bar Chart
- // --------------------------------------------------------------------
- const radialBarChartEl = document.querySelector('#radialBarChart'),
- radialBarChartConfig = {
- chart: {
- height: 380,
- type: 'radialBar'
- },
- colors: [chartColors.donut.series1, chartColors.donut.series2, chartColors.donut.series4],
- plotOptions: {
- radialBar: {
- size: 185,
- hollow: {
- size: '40%'
- },
- track: {
- margin: 10,
- background: config.colors_label.secondary
- },
- dataLabels: {
- name: {
- fontSize: '2rem',
- fontFamily: 'Open Sans'
- },
- value: {
- fontSize: '1.2rem',
- color: legendColor,
- fontFamily: 'Open Sans'
- },
- total: {
- show: true,
- fontWeight: 400,
- fontSize: '1.3rem',
- color: headingColor,
- label: 'Comments',
- formatter: function (w) {
- return '80%';
- }
- }
- }
- }
- },
- grid: {
- borderColor: borderColor,
- padding: {
- top: -25,
- bottom: -20
- }
- },
- legend: {
- show: true,
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- stroke: {
- lineCap: 'round'
- },
- series: [80, 50, 35],
- labels: ['Comments', 'Replies', 'Shares']
- };
- if (typeof radialBarChartEl !== undefined && radialBarChartEl !== null) {
- const radialChart = new ApexCharts(radialBarChartEl, radialBarChartConfig);
- radialChart.render();
- }
-
- // Radar Chart
- // --------------------------------------------------------------------
- const radarChartEl = document.querySelector('#radarChart'),
- radarChartConfig = {
- chart: {
- height: 350,
- type: 'radar',
- toolbar: {
- show: false
- },
- dropShadow: {
- enabled: false,
- blur: 8,
- left: 1,
- top: 1,
- opacity: 0.2
- }
- },
- legend: {
- show: true,
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- plotOptions: {
- radar: {
- polygons: {
- strokeColors: borderColor,
- connectorColors: borderColor
- }
- }
- },
- yaxis: {
- show: false
- },
- series: [
- {
- name: 'iPhone 12',
- data: [41, 64, 81, 60, 42, 42, 33, 23]
- },
- {
- name: 'Samsung s20',
- data: [65, 46, 42, 25, 58, 63, 76, 43]
- }
- ],
- colors: [chartColors.donut.series1, chartColors.donut.series3],
- xaxis: {
- categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
- labels: {
- show: true,
- style: {
- colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
- fontSize: '13px',
- fontFamily: 'Open Sans'
- }
- }
- },
- fill: {
- opacity: [1, 0.8]
- },
- stroke: {
- show: false,
- width: 0
- },
- markers: {
- size: 0
- },
- grid: {
- show: false,
- padding: {
- top: -20,
- bottom: -20
- }
- }
- };
- if (typeof radarChartEl !== undefined && radarChartEl !== null) {
- const radarChart = new ApexCharts(radarChartEl, radarChartConfig);
- radarChart.render();
- }
-
- // Donut Chart
- // --------------------------------------------------------------------
- const donutChartEl = document.querySelector('#donutChart'),
- donutChartConfig = {
- chart: {
- height: 390,
- type: 'donut'
- },
- labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
- series: [42, 7, 25, 25],
- colors: [
- chartColors.donut.series1,
- chartColors.donut.series4,
- chartColors.donut.series3,
- chartColors.donut.series2
- ],
- stroke: {
- show: false,
- curve: 'straight'
- },
- dataLabels: {
- enabled: true,
- formatter: function (val, opt) {
- return parseInt(val, 10) + '%';
- }
- },
- legend: {
- show: true,
- position: 'bottom',
- markers: { offsetX: -3 },
- itemMargin: {
- vertical: 3,
- horizontal: 10
- },
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- },
- plotOptions: {
- pie: {
- donut: {
- labels: {
- show: true,
- name: {
- fontSize: '2rem',
- fontFamily: 'Open Sans'
- },
- value: {
- fontSize: '1.2rem',
- color: legendColor,
- fontFamily: 'Open Sans',
- formatter: function (val) {
- return parseInt(val, 10) + '%';
- }
- },
- total: {
- show: true,
- fontSize: '1.5rem',
- color: headingColor,
- label: 'Operational',
- formatter: function (w) {
- return '42%';
- }
- }
- }
- }
- }
- },
- responsive: [
- {
- breakpoint: 992,
- options: {
- chart: {
- height: 380
- },
- legend: {
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- }
- }
- },
- {
- breakpoint: 576,
- options: {
- chart: {
- height: 320
- },
- plotOptions: {
- pie: {
- donut: {
- labels: {
- show: true,
- name: {
- fontSize: '1.5rem'
- },
- value: {
- fontSize: '1rem'
- },
- total: {
- fontSize: '1.5rem'
- }
- }
- }
- }
- },
- legend: {
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- }
- }
- }
- },
- {
- breakpoint: 420,
- options: {
- chart: {
- height: 280
- },
- legend: {
- show: false
- }
- }
- },
- {
- breakpoint: 360,
- options: {
- chart: {
- height: 250
- },
- legend: {
- show: false
- }
- }
- }
- ]
- };
- if (typeof donutChartEl !== undefined && donutChartEl !== null) {
- const donutChart = new ApexCharts(donutChartEl, donutChartConfig);
- donutChart.render();
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/charts-chartjs.js b/httpdocs/themes/vuexy/js/charts-chartjs.js
deleted file mode 100755
index 0bbcd601..00000000
--- a/httpdocs/themes/vuexy/js/charts-chartjs.js
+++ /dev/null
@@ -1,1122 +0,0 @@
-/**
- * Charts ChartsJS
- */
-'use strict';
-
-(function () {
- // Color Variables
- const purpleColor = '#836AF9',
- yellowColor = '#ffe800',
- cyanColor = '#28dac6',
- orangeColor = '#FF8132',
- orangeLightColor = '#FDAC34',
- oceanBlueColor = '#299AFF',
- greyColor = '#4F5D70',
- greyLightColor = '#EDF1F4',
- blueColor = '#2B9AFF',
- blueLightColor = '#84D0FF';
-
- let cardColor, headingColor, labelColor, borderColor, legendColor;
-
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- headingColor = config.colors_dark.headingColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- borderColor = config.colors_dark.borderColor;
- } else {
- cardColor = config.colors.cardColor;
- headingColor = config.colors.headingColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- borderColor = config.colors.borderColor;
- }
-
- // Set height according to their data-height
- // --------------------------------------------------------------------
- const chartList = document.querySelectorAll('.chartjs');
- chartList.forEach(function (chartListItem) {
- chartListItem.height = chartListItem.dataset.height;
- });
-
- // Bar Chart
- // --------------------------------------------------------------------
- const barChart = document.getElementById('barChart');
- if (barChart) {
- const barChartVar = new Chart(barChart, {
- type: 'bar',
- data: {
- labels: [
- '7/12',
- '8/12',
- '9/12',
- '10/12',
- '11/12',
- '12/12',
- '13/12',
- '14/12',
- '15/12',
- '16/12',
- '17/12',
- '18/12',
- '19/12'
- ],
- datasets: [
- {
- data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
- backgroundColor: cyanColor,
- borderColor: 'transparent',
- maxBarThickness: 15,
- borderRadius: {
- topRight: 15,
- topLeft: 15
- }
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 500
- },
- plugins: {
- tooltip: {
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- },
- legend: {
- display: false
- }
- },
- scales: {
- x: {
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- color: labelColor
- }
- },
- y: {
- min: 0,
- max: 400,
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- stepSize: 100,
- color: labelColor
- }
- }
- }
- }
- });
- }
-
- // Horizontal Bar Chart
- // --------------------------------------------------------------------
-
- const horizontalBarChart = document.getElementById('horizontalBarChart');
- if (horizontalBarChart) {
- const horizontalBarChartVar = new Chart(horizontalBarChart, {
- type: 'bar',
- data: {
- labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
- datasets: [
- {
- data: [710, 350, 470, 580, 230, 460, 120],
- backgroundColor: config.colors.info,
- borderColor: 'transparent',
- maxBarThickness: 15
- }
- ]
- },
- options: {
- indexAxis: 'y',
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 500
- },
- elements: {
- bar: {
- borderRadius: {
- topRight: 15,
- bottomRight: 15
- }
- }
- },
- plugins: {
- tooltip: {
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- },
- legend: {
- display: false
- }
- },
- scales: {
- x: {
- min: 0,
- grid: {
- color: borderColor,
- borderColor: borderColor
- },
- ticks: {
- color: labelColor
- }
- },
- y: {
- grid: {
- borderColor: borderColor,
- display: false,
- drawBorder: false
- },
- ticks: {
- color: labelColor
- }
- }
- }
- }
- });
- }
-
- // Line Chart
- // --------------------------------------------------------------------
-
- const lineChart = document.getElementById('lineChart');
- if (lineChart) {
- const lineChartVar = new Chart(lineChart, {
- type: 'line',
- data: {
- labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
- datasets: [
- {
- data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
- label: 'Europe',
- borderColor: config.colors.danger,
- tension: 0.5,
- pointStyle: 'circle',
- backgroundColor: config.colors.danger,
- fill: false,
- pointRadius: 1,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBorderColor: cardColor,
- pointHoverBackgroundColor: config.colors.danger
- },
- {
- data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
- label: 'Asia',
- borderColor: config.colors.primary,
- tension: 0.5,
- pointStyle: 'circle',
- backgroundColor: config.colors.primary,
- fill: false,
- pointRadius: 1,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBorderColor: cardColor,
- pointHoverBackgroundColor: config.colors.primary
- },
- {
- data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
- label: 'Africa',
- borderColor: yellowColor,
- tension: 0.5,
- pointStyle: 'circle',
- backgroundColor: yellowColor,
- fill: false,
- pointRadius: 1,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBorderColor: cardColor,
- pointHoverBackgroundColor: yellowColor
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- x: {
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- color: labelColor
- }
- },
- y: {
- scaleLabel: {
- display: true
- },
- min: 0,
- max: 400,
- ticks: {
- color: labelColor,
- stepSize: 100
- },
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- }
- }
- },
- plugins: {
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- },
- legend: {
- position: 'top',
- align: 'start',
- rtl: isRtl,
- labels: {
- usePointStyle: true,
- padding: 35,
- boxWidth: 6,
- boxHeight: 6,
- color: legendColor
- }
- }
- }
- }
- });
- }
-
- // Radar Chart
- // --------------------------------------------------------------------
-
- const radarChart = document.getElementById('radarChart');
- if (radarChart) {
- // For radar gradient color
- const gradientBlue = radarChart.getContext('2d').createLinearGradient(0, 0, 0, 150);
- gradientBlue.addColorStop(0, 'rgba(85, 85, 255, 0.9)');
- gradientBlue.addColorStop(1, 'rgba(151, 135, 255, 0.8)');
-
- const gradientRed = radarChart.getContext('2d').createLinearGradient(0, 0, 0, 150);
- gradientRed.addColorStop(0, 'rgba(255, 85, 184, 0.9)');
- gradientRed.addColorStop(1, 'rgba(255, 135, 135, 0.8)');
-
- const radarChartVar = new Chart(radarChart, {
- type: 'radar',
- data: {
- labels: ['STA', 'STR', 'AGI', 'VIT', 'CHA', 'INT'],
- datasets: [
- {
- label: 'Donté Panlin',
- data: [25, 59, 90, 81, 60, 82],
- fill: true,
- pointStyle: 'dash',
- backgroundColor: gradientRed,
- borderColor: 'transparent',
- pointBorderColor: 'transparent'
- },
- {
- label: 'Mireska Sunbreeze',
- data: [40, 100, 40, 90, 40, 90],
- fill: true,
- pointStyle: 'dash',
- backgroundColor: gradientBlue,
- borderColor: 'transparent',
- pointBorderColor: 'transparent'
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 500
- },
- scales: {
- r: {
- ticks: {
- maxTicksLimit: 1,
- display: false,
- color: labelColor
- },
- grid: {
- color: borderColor
- },
- angleLines: { color: borderColor },
- pointLabels: {
- color: labelColor
- }
- }
- },
- plugins: {
- legend: {
- rtl: isRtl,
- position: 'top',
- labels: {
- padding: 25,
- color: legendColor
- }
- },
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- }
- }
- }
- });
- }
-
- // Polar Chart
- // --------------------------------------------------------------------
-
- const polarChart = document.getElementById('polarChart');
- if (polarChart) {
- const polarChartVar = new Chart(polarChart, {
- type: 'polarArea',
- data: {
- labels: ['Africa', 'Asia', 'Europe', 'America', 'Antarctica', 'Australia'],
- datasets: [
- {
- label: 'Population (millions)',
- backgroundColor: [purpleColor, yellowColor, orangeColor, oceanBlueColor, greyColor, cyanColor],
- data: [19, 17.5, 15, 13.5, 11, 9],
- borderWidth: 0
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 500
- },
- scales: {
- r: {
- ticks: {
- display: false,
- color: labelColor
- },
- grid: {
- display: false
- }
- }
- },
- plugins: {
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- },
- legend: {
- rtl: isRtl,
- position: 'right',
- labels: {
- usePointStyle: true,
- padding: 25,
- boxWidth: 8,
- boxHeight: 8,
- color: legendColor
- }
- }
- }
- }
- });
- }
-
- // Bubble Chart
- // --------------------------------------------------------------------
-
- const bubbleChart = document.getElementById('bubbleChart');
- if (bubbleChart) {
- const bubbleChartVar = new Chart(bubbleChart, {
- type: 'bubble',
- data: {
- animation: {
- duration: 10000
- },
- datasets: [
- {
- label: 'Dataset 1',
- backgroundColor: purpleColor,
- borderColor: purpleColor,
- data: [
- {
- x: 20,
- y: 74,
- r: 10
- },
- {
- x: 10,
- y: 110,
- r: 5
- },
- {
- x: 30,
- y: 165,
- r: 7
- },
- {
- x: 40,
- y: 200,
- r: 20
- },
- {
- x: 90,
- y: 185,
- r: 7
- },
- {
- x: 50,
- y: 240,
- r: 7
- },
- {
- x: 60,
- y: 275,
- r: 10
- },
- {
- x: 70,
- y: 305,
- r: 5
- },
- {
- x: 80,
- y: 325,
- r: 4
- },
- {
- x: 100,
- y: 310,
- r: 5
- },
- {
- x: 110,
- y: 240,
- r: 5
- },
- {
- x: 120,
- y: 270,
- r: 7
- },
- {
- x: 130,
- y: 300,
- r: 6
- }
- ]
- },
- {
- label: 'Dataset 2',
- backgroundColor: yellowColor,
- borderColor: yellowColor,
- data: [
- {
- x: 30,
- y: 72,
- r: 5
- },
- {
- x: 40,
- y: 110,
- r: 7
- },
- {
- x: 20,
- y: 135,
- r: 6
- },
- {
- x: 10,
- y: 160,
- r: 12
- },
- {
- x: 50,
- y: 285,
- r: 5
- },
- {
- x: 60,
- y: 235,
- r: 5
- },
- {
- x: 70,
- y: 275,
- r: 7
- },
- {
- x: 80,
- y: 290,
- r: 4
- },
- {
- x: 90,
- y: 250,
- r: 10
- },
- {
- x: 100,
- y: 220,
- r: 7
- },
- {
- x: 120,
- y: 230,
- r: 4
- },
- {
- x: 110,
- y: 320,
- r: 15
- },
- {
- x: 130,
- y: 330,
- r: 7
- }
- ]
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
-
- scales: {
- x: {
- min: 0,
- max: 140,
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- stepSize: 10,
- color: labelColor
- }
- },
- y: {
- min: 0,
- max: 400,
- grid: {
- color: borderColor,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- stepSize: 100,
- color: labelColor
- }
- }
- },
- plugins: {
- legend: {
- display: false
- },
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- }
- }
- }
- });
- }
-
- // LineArea Chart
- // --------------------------------------------------------------------
-
- const lineAreaChart = document.getElementById('lineAreaChart');
- if (lineAreaChart) {
- const lineAreaChartVar = new Chart(lineAreaChart, {
- type: 'line',
- data: {
- labels: [
- '7/12',
- '8/12',
- '9/12',
- '10/12',
- '11/12',
- '12/12',
- '13/12',
- '14/12',
- '15/12',
- '16/12',
- '17/12',
- '18/12',
- '19/12',
- '20/12',
- ''
- ],
- datasets: [
- {
- label: 'Africa',
- data: [40, 55, 45, 75, 65, 55, 70, 60, 100, 98, 90, 120, 125, 140, 155],
- tension: 0,
- fill: true,
- backgroundColor: blueColor,
- pointStyle: 'circle',
- borderColor: 'transparent',
- pointRadius: 0.5,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBackgroundColor: blueColor,
- pointHoverBorderColor: cardColor
- },
- {
- label: 'Asia',
- data: [70, 85, 75, 150, 100, 140, 110, 105, 160, 150, 125, 190, 200, 240, 275],
- tension: 0,
- fill: true,
- backgroundColor: blueLightColor,
- pointStyle: 'circle',
- borderColor: 'transparent',
- pointRadius: 0.5,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBackgroundColor: blueLightColor,
- pointHoverBorderColor: cardColor
- },
- {
- label: 'Europe',
- data: [240, 195, 160, 215, 185, 215, 185, 200, 250, 210, 195, 250, 235, 300, 315],
- tension: 0,
- fill: true,
- backgroundColor: greyLightColor,
- pointStyle: 'circle',
- borderColor: 'transparent',
- pointRadius: 0.5,
- pointHoverRadius: 5,
- pointHoverBorderWidth: 5,
- pointBorderColor: 'transparent',
- pointHoverBackgroundColor: greyLightColor,
- pointHoverBorderColor: cardColor
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- plugins: {
- legend: {
- position: 'top',
- rtl: isRtl,
- align: 'start',
- labels: {
- usePointStyle: true,
- padding: 35,
- boxWidth: 6,
- boxHeight: 6,
- color: legendColor
- }
- },
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- }
- },
- scales: {
- x: {
- grid: {
- color: 'transparent',
- borderColor: borderColor
- },
- ticks: {
- color: labelColor
- }
- },
- y: {
- min: 0,
- max: 400,
- grid: {
- color: 'transparent',
- borderColor: borderColor
- },
- ticks: {
- stepSize: 100,
- color: labelColor
- }
- }
- }
- }
- });
- }
-
- // Doughnut Chart
- // --------------------------------------------------------------------
-
- const doughnutChart = document.getElementById('doughnutChart');
- if (doughnutChart) {
- const doughnutChartVar = new Chart(doughnutChart, {
- type: 'doughnut',
- data: {
- labels: ['Tablet', 'Mobile', 'Desktop'],
- datasets: [
- {
- data: [10, 10, 80],
- backgroundColor: [cyanColor, orangeLightColor, config.colors.primary],
- borderWidth: 0,
- pointStyle: 'rectRounded'
- }
- ]
- },
- options: {
- responsive: true,
- animation: {
- duration: 500
- },
- cutout: '68%',
- plugins: {
- legend: {
- display: false
- },
- tooltip: {
- callbacks: {
- label: function (context) {
- const label = context.labels || '',
- value = context.parsed;
- const output = ' ' + label + ' : ' + value + ' %';
- return output;
- }
- },
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- }
- }
- }
- });
- }
-
- // Scatter Chart
- // --------------------------------------------------------------------
-
- const scatterChart = document.getElementById('scatterChart');
- if (scatterChart) {
- const scatterChartVar = new Chart(scatterChart, {
- type: 'scatter',
- data: {
- datasets: [
- {
- label: 'iPhone',
- data: [
- {
- x: 72,
- y: 225
- },
- {
- x: 81,
- y: 270
- },
- {
- x: 90,
- y: 230
- },
- {
- x: 103,
- y: 305
- },
- {
- x: 103,
- y: 245
- },
- {
- x: 108,
- y: 275
- },
- {
- x: 110,
- y: 290
- },
- {
- x: 111,
- y: 315
- },
- {
- x: 109,
- y: 350
- },
- {
- x: 116,
- y: 340
- },
- {
- x: 113,
- y: 260
- },
- {
- x: 117,
- y: 275
- },
- {
- x: 117,
- y: 295
- },
- {
- x: 126,
- y: 280
- },
- {
- x: 127,
- y: 340
- },
- {
- x: 133,
- y: 330
- }
- ],
- backgroundColor: config.colors.primary,
- borderColor: 'transparent',
- pointBorderWidth: 2,
- pointHoverBorderWidth: 2,
- pointRadius: 5
- },
- {
- label: 'Samsung Note',
- data: [
- {
- x: 13,
- y: 95
- },
- {
- x: 22,
- y: 105
- },
- {
- x: 17,
- y: 115
- },
- {
- x: 19,
- y: 130
- },
- {
- x: 21,
- y: 125
- },
- {
- x: 35,
- y: 125
- },
- {
- x: 13,
- y: 155
- },
- {
- x: 21,
- y: 165
- },
- {
- x: 25,
- y: 155
- },
- {
- x: 18,
- y: 190
- },
- {
- x: 26,
- y: 180
- },
- {
- x: 43,
- y: 180
- },
- {
- x: 53,
- y: 202
- },
- {
- x: 61,
- y: 165
- },
- {
- x: 67,
- y: 225
- }
- ],
- backgroundColor: yellowColor,
- borderColor: 'transparent',
- pointRadius: 5
- },
- {
- label: 'OnePlus',
- data: [
- {
- x: 70,
- y: 195
- },
- {
- x: 72,
- y: 270
- },
- {
- x: 98,
- y: 255
- },
- {
- x: 100,
- y: 215
- },
- {
- x: 87,
- y: 240
- },
- {
- x: 94,
- y: 280
- },
- {
- x: 99,
- y: 300
- },
- {
- x: 102,
- y: 290
- },
- {
- x: 110,
- y: 275
- },
- {
- x: 111,
- y: 250
- },
- {
- x: 94,
- y: 280
- },
- {
- x: 92,
- y: 340
- },
- {
- x: 100,
- y: 335
- },
- {
- x: 108,
- y: 330
- }
- ],
- backgroundColor: cyanColor,
- borderColor: 'transparent',
- pointBorderWidth: 2,
- pointHoverBorderWidth: 2,
- pointRadius: 5
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 800
- },
- plugins: {
- legend: {
- position: 'top',
- rtl: isRtl,
- align: 'start',
- labels: {
- usePointStyle: true,
- padding: 25,
- boxWidth: 6,
- boxHeight: 6,
- color: legendColor
- }
- },
- tooltip: {
- // Updated default tooltip UI
- rtl: isRtl,
- backgroundColor: cardColor,
- titleColor: headingColor,
- bodyColor: legendColor,
- borderWidth: 1,
- borderColor: borderColor
- }
- },
- scales: {
- x: {
- min: 0,
- max: 140,
- grid: {
- color: borderColor,
- drawTicks: false,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- stepSize: 10,
- color: labelColor
- }
- },
- y: {
- min: 0,
- max: 400,
- grid: {
- color: borderColor,
- drawTicks: false,
- drawBorder: false,
- borderColor: borderColor
- },
- ticks: {
- stepSize: 100,
- color: labelColor
- }
- }
- }
- }
- });
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/config.js b/httpdocs/themes/vuexy/js/config.js
deleted file mode 100755
index a859075a..00000000
--- a/httpdocs/themes/vuexy/js/config.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Config
- * -------------------------------------------------------------------------------------
- * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
- * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
- */
-
-'use strict';
-
-// JS global variables
-let config = {
- colors: {
- primary: '#7367f0',
- secondary: '#a8aaae',
- success: '#28c76f',
- info: '#00cfe8',
- warning: '#ff9f43',
- danger: '#ea5455',
- dark: '#4b4b4b',
- black: '#000',
- white: '#fff',
- cardColor: '#fff',
- bodyBg: '#f8f7fa',
- bodyColor: '#6f6b7d',
- headingColor: '#5d596c',
- textMuted: '#a5a3ae',
- borderColor: '#dbdade'
- },
- colors_label: {
- primary: '#7367f029',
- secondary: '#a8aaae29',
- success: '#28c76f29',
- info: '#00cfe829',
- warning: '#ff9f4329',
- danger: '#ea545529',
- dark: '#4b4b4b29'
- },
- colors_dark: {
- cardColor: '#2f3349',
- bodyBg: '#25293c',
- bodyColor: '#b6bee3',
- headingColor: '#cfd3ec',
- textMuted: '#7983bb',
- borderColor: '#434968'
- },
- enableMenuLocalStorage: true // Enable menu state with local storage support
-};
-
-let assetsPath = document.documentElement.getAttribute('data-assets-path'),
- templateName = document.documentElement.getAttribute('data-template'),
- rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
-
-/**
- * TemplateCustomizer
- * ! You must use(include) template-customizer.js to use TemplateCustomizer settings
- * -----------------------------------------------------------------------------------------------
- */
-
-// To use more themes, just push it to THEMES object.
-
-/* TemplateCustomizer.THEMES.push({
- name: 'theme-raspberry',
- title: 'Raspberry'
-}); */
-
-// To add more languages, just push it to LANGUAGES object.
-/*
-TemplateCustomizer.LANGUAGES.fr = { ... };
-*/
-
-/**
- * TemplateCustomizer settings
- * -------------------------------------------------------------------------------------
- * cssPath: Core CSS file path
- * themesPath: Theme CSS file path
- * displayCustomizer: true(Show customizer), false(Hide customizer)
- * lang: To set default language, Add more langues and set default. Fallback language is 'en'
- * controls: [ 'rtl','style','layoutType','showDropdownOnHover','layoutNavbarFixed','layoutFooterFixed','themes'] | Show/Hide customizer controls
- * defaultTheme: 0(Default), 1(Semi Dark), 2(Bordered)
- * defaultStyle: 'light', 'dark' (Mode)
- * defaultTextDir: 'ltr', 'rtl' (rtlSupport must be true for rtl mode)
- * defaultLayoutType: 'static', 'fixed'
- * defaultMenuCollapsed: true, false
- * defaultNavbarFixed: true, false
- * defaultFooterFixed: true, false
- * defaultShowDropdownOnHover : true, false (for horizontal layout only)
- */
-
-if (typeof TemplateCustomizer !== 'undefined') {
- window.templateCustomizer = new TemplateCustomizer({
- cssPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
- themesPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
- displayCustomizer: true,
- // lang: 'fr',
- // defaultTheme: 2,
- // defaultStyle: 'light',
- // defaultTextDir: 'ltr',
- // defaultLayoutType: 'fixed',
- // defaultMenuCollapsed: true,
- // defaultNavbarFixed: true,
- // defaultFooterFixed: false
- defaultShowDropdownOnHover: true
- // controls: [
- // 'rtl',
- // 'style',
- // 'layoutType',
- // 'showDropdownOnHover',
- // 'layoutNavbarFixed',
- // 'layoutFooterFixed',
- // 'themes'
- // ],
- });
-}
diff --git a/httpdocs/themes/vuexy/js/dashboards-analytics.js b/httpdocs/themes/vuexy/js/dashboards-analytics.js
deleted file mode 100755
index 13de3e4c..00000000
--- a/httpdocs/themes/vuexy/js/dashboards-analytics.js
+++ /dev/null
@@ -1,662 +0,0 @@
-/**
- * Dashboard Analytics
- */
-
-'use strict';
-
-(function () {
- let cardColor, headingColor, labelColor, shadeColor, grayColor;
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- headingColor = config.colors_dark.headingColor;
- shadeColor = 'dark';
- grayColor = '#5E6692'; // gray color is for stacked bar chart
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- headingColor = config.colors.headingColor;
- shadeColor = '';
- grayColor = '#817D8D';
- }
-
- // swiper loop and autoplay
- // --------------------------------------------------------------------
- const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
- if (swiperWithPagination) {
- new Swiper(swiperWithPagination, {
- loop: true,
- autoplay: {
- delay: 2500,
- disableOnInteraction: false
- },
- pagination: {
- clickable: true,
- el: '.swiper-pagination'
- }
- });
- }
-
- // Revenue Generated Area Chart
- // --------------------------------------------------------------------
- const revenueGeneratedEl = document.querySelector('#revenueGenerated'),
- revenueGeneratedConfig = {
- chart: {
- height: 130,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [300, 350, 330, 380, 340, 400, 380]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof revenueGeneratedEl !== undefined && revenueGeneratedEl !== null) {
- const revenueGenerated = new ApexCharts(revenueGeneratedEl, revenueGeneratedConfig);
- revenueGenerated.render();
- }
-
- // Earning Reports Bar Chart
- // --------------------------------------------------------------------
- const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
- weeklyEarningReportsConfig = {
- chart: {
- height: 202,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '60%',
- columnWidth: '38%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- distributed: true
- }
- },
- grid: {
- show: false,
- padding: {
- top: -30,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: [
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors.primary,
- config.colors_label.primary,
- config.colors_label.primary
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [40, 65, 50, 45, 90, 55, 70]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 199
- }
- }
- }
- ]
- };
- if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
- const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
- weeklyEarningReports.render();
- }
-
- // Support Tracker - Radial Bar Chart
- // --------------------------------------------------------------------
- const supportTrackerEl = document.querySelector('#supportTracker'),
- supportTrackerOptions = {
- series: [85],
- labels: ['Completed Task'],
- chart: {
- height: 360,
- type: 'radialBar'
- },
- plotOptions: {
- radialBar: {
- offsetY: 10,
- startAngle: -140,
- endAngle: 130,
- hollow: {
- size: '65%'
- },
- track: {
- background: cardColor,
- strokeWidth: '100%'
- },
- dataLabels: {
- name: {
- offsetY: -20,
- color: labelColor,
- fontSize: '13px',
- fontWeight: '400',
- fontFamily: 'Public Sans'
- },
- value: {
- offsetY: 10,
- color: headingColor,
- fontSize: '38px',
- fontWeight: '600',
- fontFamily: 'Public Sans'
- }
- }
- }
- },
- colors: [config.colors.primary],
- fill: {
- type: 'gradient',
- gradient: {
- shade: 'dark',
- shadeIntensity: 0.5,
- gradientToColors: [config.colors.primary],
- inverseColors: true,
- opacityFrom: 1,
- opacityTo: 0.6,
- stops: [30, 70, 100]
- }
- },
- stroke: {
- dashArray: 10
- },
- grid: {
- padding: {
- top: -20,
- bottom: 5
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 330
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 280
- }
- }
- }
- ]
- };
- if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
- const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
- supportTracker.render();
- }
-
- // Total Earning Chart - Bar Chart
- // --------------------------------------------------------------------
- const totalEarningChartEl = document.querySelector('#totalEarningChart'),
- totalEarningChartOptions = {
- series: [
- {
- name: 'Earning',
- data: [15, 10, 20, 8, 12, 18, 12, 5]
- },
- {
- name: 'Expense',
- data: [-7, -10, -7, -12, -6, -9, -5, -8]
- }
- ],
- chart: {
- height: 230,
- parentHeightOffset: 0,
- stacked: true,
- type: 'bar',
- toolbar: { show: false }
- },
- tooltip: {
- enabled: false
- },
- legend: {
- show: false
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '18%',
- borderRadius: 5,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- colors: [config.colors.primary, grayColor],
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- top: -40,
- bottom: -20,
- left: -10,
- right: -2
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1468,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '22%'
- }
- }
- }
- },
- {
- breakpoint: 1197,
- options: {
- chart: {
- height: 228
- },
- plotOptions: {
- bar: {
- borderRadius: 8,
- columnWidth: '26%'
- }
- }
- }
- },
- {
- breakpoint: 783,
- options: {
- chart: {
- height: 232
- },
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '28%'
- }
- }
- }
- },
- {
- breakpoint: 589,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '16%'
- }
- }
- }
- },
- {
- breakpoint: 520,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '18%'
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5,
- columnWidth: '20%'
- }
- }
- }
- },
- {
- breakpoint: 381,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '24%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
- const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
- totalEarningChart.render();
- }
-
- // For Datatable
- // --------------------------------------------------------------------
- var dt_projects_table = $('.datatables-projects');
-
- if (dt_projects_table.length) {
- var dt_project = dt_projects_table.DataTable({
- ajax: assetsPath + 'json/user-profile.json',
- columns: [
- { data: '' },
- { data: 'id' },
- { data: 'project_name' },
- { data: 'project_leader' },
- { data: '' },
- { data: 'status' },
- { data: '' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- searchable: false,
- orderable: false,
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // For Checkboxes
- targets: 1,
- orderable: false,
- searchable: false,
- responsivePriority: 3,
- checkboxes: true,
- render: function () {
- return '
'
- }
- },
- {
- // Avatar image/badge, Name and post
- targets: 2,
- responsivePriority: 4,
- render: function (data, type, full, meta) {
- var $user_img = full['project_img'],
- $name = full['project_name'],
- $date = full['date'];
- if ($user_img) {
- // For Avatar image
- var $output =
- '
';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6);
- var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
- var $state = states[stateNum],
- $name = full['project_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '
';
- }
- // Creates full output for row
- var $row_output =
- '
';
- return $row_output;
- }
- },
- {
- // Teams
- targets: 4,
- orderable: false,
- searchable: false,
- render: function (data, type, full, meta) {
- var $team = full['team'],
- $output;
- $output = '
';
- return $output;
- }
- },
- {
- // Label
- targets: -2,
- render: function (data, type, full, meta) {
- var $status_number = full['status'];
- return (
- '
'
- );
- }
- },
- {
- // Actions
- targets: -1,
- searchable: false,
- title: 'Actions',
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- }
- ],
- order: [[2, 'desc']],
- dom: '<"card-header pb-0 pt-sm-0"<"head-label text-center"><"d-flex justify-content-center justify-content-md-end"f>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
- displayLength: 5,
- lengthMenu: [5, 10, 25, 50, 75, 100],
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of "' + data['project_name'] + '" Project';
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- }
- });
- $('div.head-label').html('
');
- }
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-})();
diff --git a/httpdocs/themes/vuexy/js/dashboards-crm.js b/httpdocs/themes/vuexy/js/dashboards-crm.js
deleted file mode 100755
index 590b631a..00000000
--- a/httpdocs/themes/vuexy/js/dashboards-crm.js
+++ /dev/null
@@ -1,859 +0,0 @@
-/**
- * Dashboard CRM
- */
-
-'use strict';
-(function () {
- let cardColor, labelColor, shadeColor, legendColor, borderColor;
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- borderColor = config.colors_dark.borderColor;
- shadeColor = 'dark';
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- borderColor = config.colors.borderColor;
- shadeColor = '';
- }
-
- // Sales last year Area Chart
- // --------------------------------------------------------------------
- const salesLastYearEl = document.querySelector('#salesLastYear'),
- salesLastYearConfig = {
- chart: {
- height: 78,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.25
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [200, 55, 400, 250]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof salesLastYearEl !== undefined && salesLastYearEl !== null) {
- const salesLastYear = new ApexCharts(salesLastYearEl, salesLastYearConfig);
- salesLastYear.render();
- }
-
- // Sessions Last Month - Staked Bar Chart
- // --------------------------------------------------------------------
- const sessionsLastMonthEl = document.querySelector('#sessionsLastMonth'),
- sessionsLastMonthConfig = {
- chart: {
- type: 'bar',
- height: 78,
- parentHeightOffset: 0,
- stacked: true,
- toolbar: {
- show: false
- }
- },
- series: [
- {
- name: 'PRODUCT A',
- data: [4, 3, 6, 4, 3]
- },
- {
- name: 'PRODUCT B',
- data: [-3, -4, -3, -2, -3]
- }
- ],
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '30%',
- barHeight: '100%',
- borderRadius: 5,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- dataLabels: {
- enabled: false
- },
- tooltip: {
- enabled: false
- },
- stroke: {
- curve: 'smooth',
- width: 1,
- lineCap: 'round',
- colors: [cardColor]
- },
- legend: {
- show: false
- },
- colors: [config.colors.primary, config.colors.success],
- grid: {
- show: false,
- padding: {
- top: -41,
- right: -10,
- left: -8,
- bottom: -22
- }
- },
- xaxis: {
- categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- labels: {
- show: false
- },
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- }
- },
- yaxis: {
- show: false
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%'
- }
- }
- }
- },
- {
- breakpoint: 1300,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%'
- }
- }
- }
- },
- {
- breakpoint: 1200,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '20%'
- }
- }
- }
- },
- {
- breakpoint: 1025,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '20%'
- }
- },
- chart: {
- height: 80
- }
- }
- },
- {
- breakpoint: 900,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 782,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '30%'
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5,
- columnWidth: '35%'
- }
- },
- chart: {
- height: 78
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof sessionsLastMonthEl !== undefined && sessionsLastMonthEl !== null) {
- const sessionsLastMonth = new ApexCharts(sessionsLastMonthEl, sessionsLastMonthConfig);
- sessionsLastMonth.render();
- }
-
- // Revenue Growth Chart
- // --------------------------------------------------------------------
- const revenueGrowthEl = document.querySelector('#revenueGrowth'),
- revenueGrowthConfig = {
- chart: {
- height: 170,
- type: 'bar',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '80%',
- columnWidth: '30%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 6,
- distributed: true
- }
- },
- tooltip: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- top: -20,
- bottom: -12,
- left: -10,
- right: 0
- }
- },
- colors: [
- config.colors_label.success,
- config.colors_label.success,
- config.colors_label.success,
- config.colors_label.success,
- config.colors.success,
- config.colors_label.success,
- config.colors_label.success
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [25, 40, 55, 70, 85, 70, 55]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- }
- },
- responsive: [
- {
- breakpoint: 1471,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%'
- }
- }
- }
- },
- {
- breakpoint: 1350,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '57%'
- }
- }
- }
- },
- {
- breakpoint: 1032,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '60%'
- }
- }
- }
- },
- {
- breakpoint: 992,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%',
- borderRadius: 8
- }
- }
- }
- },
- {
- breakpoint: 855,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '50%',
- borderRadius: 6
- }
- }
- }
- },
- {
- breakpoint: 440,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '40%'
- }
- }
- }
- },
- {
- breakpoint: 381,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '45%'
- }
- }
- }
- }
- ]
- };
- if (typeof revenueGrowthEl !== undefined && revenueGrowthEl !== null) {
- const revenueGrowth = new ApexCharts(revenueGrowthEl, revenueGrowthConfig);
- revenueGrowth.render();
- }
-
- // Earning Reports Tabs Function
- function EarningReportsBarChart(arrayData, highlightData) {
- const basicColor = config.colors_label.primary,
- highlightColor = config.colors.primary;
- var colorArr = [];
-
- for (let i = 0; i < arrayData.length; i++) {
- if (i === highlightData) {
- colorArr.push(highlightColor);
- } else {
- colorArr.push(basicColor);
- }
- }
-
- const earningReportBarChartOpt = {
- chart: {
- height: 258,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- columnWidth: '32%',
- startingShape: 'rounded',
- borderRadius: 7,
- distributed: true,
- dataLabels: {
- position: 'top'
- }
- }
- },
- grid: {
- show: false,
- padding: {
- top: 0,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: colorArr,
- dataLabels: {
- enabled: true,
- formatter: function (val) {
- return val + 'k';
- },
- offsetY: -25,
- style: {
- fontSize: '15px',
- colors: [legendColor],
- fontWeight: '600',
- fontFamily: 'Public Sans'
- }
- },
- series: [
- {
- data: arrayData
- }
- ],
- legend: {
- show: false
- },
- tooltip: {
- enabled: false
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
- axisBorder: {
- show: true,
- color: borderColor
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- offsetX: -15,
- formatter: function (val) {
- return '$' + parseInt(val / 1) + 'k';
- },
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- },
- min: 0,
- max: 60000,
- tickAmount: 6
- }
- },
- responsive: [
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '41%'
- }
- }
- }
- },
- {
- breakpoint: 590,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '61%',
- borderRadius: 5
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- grid: {
- padding: {
- right: 0,
- left: -20
- }
- },
- dataLabels: {
- style: {
- fontSize: '12px',
- fontWeight: '400'
- }
- }
- }
- }
- ]
- };
- return earningReportBarChartOpt;
- }
- var chartJson = 'earning-reports-charts.json';
- // Earning Chart JSON data
- var earningReportsChart = $.ajax({
- url: assetsPath + 'json/' + chartJson, //? Use your own search api instead
- dataType: 'json',
- async: false
- }).responseJSON;
-
- // Earning Reports Tabs Orders
- // --------------------------------------------------------------------
- const earningReportsTabsOrdersEl = document.querySelector('#earningReportsTabsOrders'),
- earningReportsTabsOrdersConfig = EarningReportsBarChart(
- earningReportsChart['data'][0]['chart_data'],
- earningReportsChart['data'][0]['active_option']
- );
- if (typeof earningReportsTabsOrdersEl !== undefined && earningReportsTabsOrdersEl !== null) {
- const earningReportsTabsOrders = new ApexCharts(earningReportsTabsOrdersEl, earningReportsTabsOrdersConfig);
- earningReportsTabsOrders.render();
- }
- // Earning Reports Tabs Sales
- // --------------------------------------------------------------------
- const earningReportsTabsSalesEl = document.querySelector('#earningReportsTabsSales'),
- earningReportsTabsSalesConfig = EarningReportsBarChart(
- earningReportsChart['data'][1]['chart_data'],
- earningReportsChart['data'][1]['active_option']
- );
- if (typeof earningReportsTabsSalesEl !== undefined && earningReportsTabsSalesEl !== null) {
- const earningReportsTabsSales = new ApexCharts(earningReportsTabsSalesEl, earningReportsTabsSalesConfig);
- earningReportsTabsSales.render();
- }
- // Earning Reports Tabs Profit
- // --------------------------------------------------------------------
- const earningReportsTabsProfitEl = document.querySelector('#earningReportsTabsProfit'),
- earningReportsTabsProfitConfig = EarningReportsBarChart(
- earningReportsChart['data'][2]['chart_data'],
- earningReportsChart['data'][2]['active_option']
- );
- if (typeof earningReportsTabsProfitEl !== undefined && earningReportsTabsProfitEl !== null) {
- const earningReportsTabsProfit = new ApexCharts(earningReportsTabsProfitEl, earningReportsTabsProfitConfig);
- earningReportsTabsProfit.render();
- }
- // Earning Reports Tabs Income
- // --------------------------------------------------------------------
- const earningReportsTabsIncomeEl = document.querySelector('#earningReportsTabsIncome'),
- earningReportsTabsIncomeConfig = EarningReportsBarChart(
- earningReportsChart['data'][3]['chart_data'],
- earningReportsChart['data'][3]['active_option']
- );
- if (typeof earningReportsTabsIncomeEl !== undefined && earningReportsTabsIncomeEl !== null) {
- const earningReportsTabsIncome = new ApexCharts(earningReportsTabsIncomeEl, earningReportsTabsIncomeConfig);
- earningReportsTabsIncome.render();
- }
-
- // Sales Last 6 Months - Radar Chart
- // --------------------------------------------------------------------
- const salesLastMonthEl = document.querySelector('#salesLastMonth'),
- salesLastMonthConfig = {
- series: [
- {
- name: 'Sales',
- data: [32, 27, 27, 30, 25, 25]
- },
- {
- name: 'Visits',
- data: [25, 35, 20, 20, 20, 20]
- }
- ],
- chart: {
- height: 340,
- type: 'radar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- radar: {
- polygons: {
- strokeColors: borderColor,
- connectorColors: borderColor
- }
- }
- },
- stroke: {
- show: false,
- width: 0
- },
- legend: {
- show: true,
- fontSize: '13px',
- position: 'bottom',
- labels: {
- colors: legendColor,
- useSeriesColors: false
- },
- markers: {
- height: 10,
- width: 10,
- offsetX: -3
- },
- itemMargin: {
- horizontal: 10
- },
- onItemHover: {
- highlightDataSeries: false
- }
- },
- colors: [config.colors.primary, config.colors.info],
- fill: {
- opacity: [1, 0.85]
- },
- markers: {
- size: 0
- },
- grid: {
- show: false,
- padding: {
- top: 0,
- bottom: -5
- }
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
- labels: {
- show: true,
- style: {
- colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- show: false,
- min: 0,
- max: 40,
- tickAmount: 4
- },
- responsive: [
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 400
- }
- }
- }
- ]
- };
- if (typeof salesLastMonthEl !== undefined && salesLastMonthEl !== null) {
- const salesLastMonth = new ApexCharts(salesLastMonthEl, salesLastMonthConfig);
- salesLastMonth.render();
- }
-
- // Progress Chart
- // --------------------------------------------------------------------
- // Radial bar chart functions
- function radialBarChart(color, value) {
- const radialBarChartOpt = {
- chart: {
- height: 53,
- width: 43,
- type: 'radialBar'
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '33%'
- },
- dataLabels: {
- show: false
- },
- track: {
- background: config.colors_label.secondary
- }
- }
- },
- stroke: {
- lineCap: 'round'
- },
- colors: [color],
- grid: {
- padding: {
- top: -15,
- bottom: -15,
- left: -5,
- right: -15
- }
- },
- series: [value],
- labels: ['Progress']
- };
- return radialBarChartOpt;
- }
- // All progress chart
- const chartProgressList = document.querySelectorAll('.chart-progress');
- if (chartProgressList) {
- chartProgressList.forEach(function (chartProgressEl) {
- const color = config.colors[chartProgressEl.dataset.color],
- series = chartProgressEl.dataset.series;
- const optionsBundle = radialBarChart(color, series);
- const chart = new ApexCharts(chartProgressEl, optionsBundle);
- chart.render();
- });
- }
-
- // Project Status - Line Chart
- // --------------------------------------------------------------------
- const projectStatusEl = document.querySelector('#projectStatusChart'),
- projectStatusConfig = {
- chart: {
- height: 240,
- type: 'area',
- toolbar: false
- },
- markers: {
- strokeColor: 'transparent'
- },
- series: [
- {
- data: [2000, 2000, 4000, 4000, 3050, 3050, 2000, 2000, 3050, 3050, 4700, 4700, 2750, 2750, 5700, 5700]
- }
- ],
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- left: -10,
- right: -5
- }
- },
- stroke: {
- width: 3,
- curve: 'straight'
- },
- colors: [config.colors.warning],
- fill: {
- type: 'gradient',
- gradient: {
- opacityFrom: 0.6,
- opacityTo: 0.15,
- stops: [0, 95, 100]
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- lines: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- },
- min: 1000,
- max: 6000,
- tickAmount: 5
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof projectStatusEl !== undefined && projectStatusEl !== null) {
- const projectStatus = new ApexCharts(projectStatusEl, projectStatusConfig);
- projectStatus.render();
- }
-})();
diff --git a/httpdocs/themes/vuexy/js/dashboards-ecommerce.js b/httpdocs/themes/vuexy/js/dashboards-ecommerce.js
deleted file mode 100755
index 4119479e..00000000
--- a/httpdocs/themes/vuexy/js/dashboards-ecommerce.js
+++ /dev/null
@@ -1,984 +0,0 @@
-/**
- * Dashboard eCommerce
- */
-
-'use strict';
-
-(function () {
- let cardColor, labelColor, headingColor, borderColor, legendColor;
-
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- legendColor = config.colors_dark.bodyColor;
- headingColor = config.colors_dark.headingColor;
- borderColor = config.colors_dark.borderColor;
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- legendColor = config.colors.bodyColor;
- headingColor = config.colors.headingColor;
- borderColor = config.colors.borderColor;
- }
-
- // Donut Chart Colors
- const chartColors = {
- donut: {
- series1: config.colors.success,
- series2: '#28c76fb3',
- series3: '#28c76f80',
- series4: config.colors_label.success
- }
- };
-
- // Expenses Radial Bar Chart
- // --------------------------------------------------------------------
- const expensesRadialChartEl = document.querySelector('#expensesChart'),
- expensesRadialChartConfig = {
- chart: {
- height: 145,
- sparkline: {
- enabled: true
- },
- parentHeightOffset: 0,
- type: 'radialBar'
- },
- colors: [config.colors.warning],
- series: [78],
- plotOptions: {
- radialBar: {
- offsetY: 0,
- startAngle: -90,
- endAngle: 90,
- hollow: {
- size: '65%'
- },
- track: {
- strokeWidth: '45%',
- background: borderColor
- },
- dataLabels: {
- name: {
- show: false
- },
- value: {
- fontSize: '22px',
- color: headingColor,
- fontWeight: 600,
- offsetY: -5
- }
- }
- }
- },
- grid: {
- show: false,
- padding: {
- bottom: 5
- }
- },
- stroke: {
- lineCap: 'round'
- },
- labels: ['Progress'],
- responsive: [
- {
- breakpoint: 1442,
- options: {
- chart: {
- height: 120
- },
- plotOptions: {
- radialBar: {
- dataLabels: {
- value: {
- fontSize: '18px'
- }
- },
- hollow: {
- size: '60%'
- }
- }
- }
- }
- },
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 136
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '65%'
- },
- dataLabels: {
- value: {
- fontSize: '18px'
- }
- }
- }
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 120
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '55%'
- }
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- chart: {
- height: 145
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '65%'
- }
- }
- },
- dataLabels: {
- value: {
- offsetY: 0
- }
- }
- }
- },
- {
- breakpoint: 376,
- options: {
- chart: {
- height: 105
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: '60%'
- }
- }
- }
- }
- }
- ]
- };
- if (typeof expensesRadialChartEl !== undefined && expensesRadialChartEl !== null) {
- const expensesRadialChart = new ApexCharts(expensesRadialChartEl, expensesRadialChartConfig);
- expensesRadialChart.render();
- }
-
- // Profit last month Line Chart
- // --------------------------------------------------------------------
- const profitLastMonthEl = document.querySelector('#profitLastMonth'),
- profitLastMonthConfig = {
- chart: {
- height: 90,
- type: 'line',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- }
- },
- grid: {
- borderColor: borderColor,
- strokeDashArray: 6,
- xaxis: {
- lines: {
- show: true,
- colors: '#000'
- }
- },
- yaxis: {
- lines: {
- show: false
- }
- },
- padding: {
- top: -18,
- left: -4,
- right: 7,
- bottom: -10
- }
- },
- colors: [config.colors.info],
- stroke: {
- width: 2
- },
- series: [
- {
- data: [0, 25, 10, 40, 25, 55]
- }
- ],
- tooltip: {
- shared: false,
- intersect: true,
- x: {
- show: false
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- markers: {
- size: 3.5,
- fillColor: config.colors.info,
- strokeColors: 'transparent',
- strokeWidth: 3.2,
- discrete: [
- {
- seriesIndex: 0,
- dataPointIndex: 5,
- fillColor: cardColor,
- strokeColor: config.colors.info,
- size: 5,
- shape: 'circle'
- }
- ],
- hover: {
- size: 5.5
- }
- },
- responsive: [
- {
- breakpoint: 1442,
- options: {
- chart: {
- height: 100
- }
- }
- },
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 86
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 93
- }
- }
- }
- ]
- };
- if (typeof profitLastMonthEl !== undefined && profitLastMonthEl !== null) {
- const profitLastMonth = new ApexCharts(profitLastMonthEl, profitLastMonthConfig);
- profitLastMonth.render();
- }
-
- // Generated Leads Chart
- // --------------------------------------------------------------------
- const generatedLeadsChartEl = document.querySelector('#generatedLeadsChart'),
- generatedLeadsChartConfig = {
- chart: {
- height: 147,
- width: 130,
- parentHeightOffset: 0,
- type: 'donut'
- },
- labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
- series: [45, 58, 30, 50],
- colors: [
- chartColors.donut.series1,
- chartColors.donut.series2,
- chartColors.donut.series3,
- chartColors.donut.series4
- ],
- stroke: {
- width: 0
- },
- dataLabels: {
- enabled: false,
- formatter: function (val, opt) {
- return parseInt(val) + '%';
- }
- },
- legend: {
- show: false
- },
- tooltip: {
- theme: false
- },
- grid: {
- padding: {
- top: 15,
- right: -20,
- left: -20
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- }
- },
- plotOptions: {
- pie: {
- donut: {
- size: '70%',
- labels: {
- show: true,
- value: {
- fontSize: '1.375rem',
- fontFamily: 'Public Sans',
- color: headingColor,
- fontWeight: 600,
- offsetY: -15,
- formatter: function (val) {
- return parseInt(val) + '%';
- }
- },
- name: {
- offsetY: 20,
- fontFamily: 'Public Sans'
- },
- total: {
- show: true,
- showAlways: true,
- color: config.colors.success,
- fontSize: '.8125rem',
- label: 'Total',
- fontFamily: 'Public Sans',
- formatter: function (w) {
- return '184';
- }
- }
- }
- }
- }
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 172,
- width: 160
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 178
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- chart: {
- height: 147
- }
- }
- }
- ]
- };
- if (typeof generatedLeadsChartEl !== undefined && generatedLeadsChartEl !== null) {
- const generatedLeadsChart = new ApexCharts(generatedLeadsChartEl, generatedLeadsChartConfig);
- generatedLeadsChart.render();
- }
-
- // Total Revenue Report Chart - Bar Chart
- // --------------------------------------------------------------------
- const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
- totalRevenueChartOptions = {
- series: [
- {
- name: 'Earning',
- data: [270, 210, 180, 200, 250, 280, 250, 270, 150]
- },
- {
- name: 'Expense',
- data: [-140, -160, -180, -150, -100, -60, -80, -100, -180]
- }
- ],
- chart: {
- height: 365,
- parentHeightOffset: 0,
- stacked: true,
- type: 'bar',
- toolbar: { show: false }
- },
- tooltip: {
- enabled: false
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '40%',
- borderRadius: 10,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- colors: [config.colors.primary, config.colors.warning],
- dataLabels: {
- enabled: false
- },
- stroke: {
- curve: 'smooth',
- width: 6,
- lineCap: 'round',
- colors: [cardColor]
- },
- legend: {
- show: true,
- horizontalAlign: 'left',
- position: 'top',
- fontFamily: 'Public Sans',
- markers: {
- height: 12,
- width: 12,
- radius: 12,
- offsetX: -3,
- offsetY: 2
- },
- labels: {
- colors: legendColor
- },
- itemMargin: {
- horizontal: 5
- }
- },
- grid: {
- show: false,
- padding: {
- bottom: -8,
- top: 20
- }
- },
- xaxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
- labels: {
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- }
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- offsetX: -16,
- style: {
- fontSize: '13px',
- colors: labelColor,
- fontFamily: 'Public Sans'
- }
- },
- min: -200,
- max: 300,
- tickAmount: 5
- },
- responsive: [
- {
- breakpoint: 1700,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '43%'
- }
- }
- }
- },
- {
- breakpoint: 1441,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '52%'
- }
- },
- chart: {
- height: 375
- }
- }
- },
- {
- breakpoint: 1300,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '62%'
- }
- }
- }
- },
- {
- breakpoint: 1025,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '70%'
- }
- },
- chart: {
- height: 390
- }
- }
- },
- {
- breakpoint: 991,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '38%'
- }
- }
- }
- },
- {
- breakpoint: 850,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '48%'
- }
- }
- }
- },
- {
- breakpoint: 449,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '70%'
- }
- },
- chart: {
- height: 360
- },
- xaxis: {
- labels: {
- offsetY: -5
- }
- }
- }
- },
- {
- breakpoint: 394,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '88%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
- const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
- totalRevenueChart.render();
- }
-
- // Total Revenue Report Budget Line Chart
- const budgetChartEl = document.querySelector('#budgetChart'),
- budgetChartOptions = {
- chart: {
- height: 100,
- toolbar: { show: false },
- zoom: { enabled: false },
- type: 'line'
- },
- series: [
- {
- name: 'Last Month',
- data: [20, 10, 30, 16, 24, 5, 40, 23, 28, 5, 30]
- },
- {
- name: 'This Month',
- data: [50, 40, 60, 46, 54, 35, 70, 53, 58, 35, 60]
- }
- ],
- stroke: {
- curve: 'smooth',
- dashArray: [5, 0],
- width: [1, 2]
- },
- legend: {
- show: false
- },
- colors: [borderColor, config.colors.primary],
- grid: {
- show: false,
- borderColor: borderColor,
- padding: {
- top: -30,
- bottom: -15,
- left: 25
- }
- },
- markers: {
- size: 0
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof budgetChartEl !== undefined && budgetChartEl !== null) {
- const budgetChart = new ApexCharts(budgetChartEl, budgetChartOptions);
- budgetChart.render();
- }
-
- // Earning Reports Bar Chart
- // --------------------------------------------------------------------
- const reportBarChartEl = document.querySelector('#reportBarChart'),
- reportBarChartConfig = {
- chart: {
- height: 230,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '60%',
- columnWidth: '60%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- distributed: true
- }
- },
- grid: {
- show: false,
- padding: {
- top: -20,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: [
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors.primary,
- config.colors_label.primary,
- config.colors_label.primary
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [40, 95, 60, 45, 90, 50, 75]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 190
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 250
- }
- }
- }
- ]
- };
- if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
- const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
- barChart.render();
- }
-
- // Variable declaration for table
- var dt_invoice_table = $('.datatable-invoice');
- // Invoice datatable
- // --------------------------------------------------------------------
- if (dt_invoice_table.length) {
- var dt_invoice = dt_invoice_table.DataTable({
- ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
- columns: [
- // columns according to JSON
- { data: '' },
- { data: 'invoice_id' },
- { data: 'invoice_status' },
- { data: 'total' },
- { data: 'issued_date' },
- { data: 'invoice_status' },
- { data: 'action' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // Invoice ID
- targets: 1,
- render: function (data, type, full, meta) {
- var $invoice_id = full['invoice_id'];
- // Creates full output for row
- var $row_output = '
';
- return $row_output;
- }
- },
- {
- // Invoice status
- targets: 2,
- render: function (data, type, full, meta) {
- var $invoice_status = full['invoice_status'],
- $due_date = full['due_date'],
- $balance = full['balance'];
- var roleBadgeObj = {
- Sent: '
'>" +
- roleBadgeObj[$invoice_status] +
- ''
- );
- }
- },
- {
- // Total Invoice Amount
- targets: 3,
- render: function (data, type, full, meta) {
- var $total = full['total'];
- return '$' + $total;
- }
- },
- {
- // Actions
- targets: -1,
- title: 'Actions',
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '
'
- );
- }
- },
- {
- // Invoice Status
- targets: -2,
- visible: false
- }
- ],
- order: [[1, 'desc']],
- dom:
- '<"row ms-2 me-3"' +
- '<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
- '<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
- '>t' +
- '<"row mx-2"' +
- '<"col-sm-12 col-md-6"i>' +
- '<"col-sm-12 col-md-6"p>' +
- '>',
- displayLength: 7,
- lengthMenu: [7, 10, 25, 50, 75, 100],
- language: {
- sLengthMenu: '_MENU_',
- search: '',
- searchPlaceholder: 'Search Invoice'
- },
- // Buttons
- buttons: [
- {
- text: '
',
- className: 'btn btn-primary',
- action: function (e, dt, button, config) {
- window.location = 'app-invoice-add.html';
- }
- }
- ],
- // For responsive popup
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of ' + data['full_name'];
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '
'
- : '';
- }).join('');
-
- return data ? $('
').append(data) : false;
- }
- }
- },
- initComplete: function () {
- // Adding role filter once table initialized
- this.api()
- .columns(5)
- .every(function () {
- var column = this;
- var select = $(
- '
'
- )
- .appendTo('.invoice_status')
- .on('change', function () {
- var val = $.fn.dataTable.util.escapeRegex($(this).val());
- column.search(val ? '^' + val + '$' : '', true, false).draw();
- });
-
- column
- .data()
- .unique()
- .sort()
- .each(function (d, j) {
- select.append('
');
- });
- });
- }
- });
- }
- // On each datatable draw, initialize tooltip
- dt_invoice_table.on('draw.dt', function () {
- var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl, {
- boundary: document.body
- });
- });
- });
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
-})();
diff --git a/httpdocs/themes/vuexy/js/datatables-editor/dataTables.editor.js b/httpdocs/themes/vuexy/js/datatables-editor/dataTables.editor.js
deleted file mode 100755
index 8c4343a8..00000000
--- a/httpdocs/themes/vuexy/js/datatables-editor/dataTables.editor.js
+++ /dev/null
@@ -1,6830 +0,0 @@
-/*! DataTables Editor v2.1.3
- *
- * ©2012-2023 SpryMedia Ltd, all rights reserved.
- * License: editor.datatables.net/license
- */
-
-(function( factory ){
- if ( typeof define === 'function' && define.amd ) {
- // AMD
- define( ['jquery', 'datatables.net'], function ( $ ) {
- return factory( $, window, document );
- } );
- }
- else if ( typeof exports === 'object' ) {
- // CommonJS
- var jq = require('jquery');
- var cjsRequires = function (root, $) {
- if ( ! $.fn.dataTable ) {
- require('datatables.net')(root, $);
- }
- };
-
- if (typeof window === 'undefined') {
- module.exports = function (root, $) {
- if ( ! root ) {
- // CommonJS environments without a window global must pass a
- // root. This will give an error otherwise
- root = window;
- }
-
- if ( ! $ ) {
- $ = jq( root );
- }
-
- cjsRequires( root, $ );
- return factory( $, root, root.document );
- };
- }
- else {
- cjsRequires( window, jq );
- module.exports = factory( jq, window, window.document );
- }
- }
- else {
- // Browser
- factory( jQuery, window, document );
- }
-}(function( $, window, document, undefined ) {
-'use strict';
-var DataTable = $.fn.dataTable;
-
-var formOptions = {
- buttons: true,
- drawType: false,
- focus: 0,
- message: true,
- nest: false,
- onBackground: 'blur',
- onBlur: 'close',
- onComplete: 'close',
- onEsc: 'close',
- onFieldError: 'focus',
- onReturn: 'submit',
- scope: 'row',
- submit: 'all',
- submitHtml: '▶',
- submitTrigger: null,
- title: true
-};
-
-var defaults$1 = {
- /**
- * Parameter name to use to submit data to the server.
- *
- * @type string
- */
- actionName: 'action',
- /**
- * Control how the Ajax call to update data on the server.
- *
- * This option matches the `dt-init ajax` option in that is can be provided
- * in one of three different ways:
- *
- * * string - As a string, the value given is used as the url to target
- * the Ajax request to, using the default Editor Ajax options. Note that
- * for backwards compatibility you can use the form "METHOD URL" - for
- * example: `"PUT api/users"`, although it is recommended you use the
- * object form described below.
- * * object - As an object, the `ajax` property has two forms:
- * * Used to extend and override the default Ajax options that Editor
- * uses. This can be very useful for adding extra data for example, or
- * changing the HTTP request type.
- * * With `create`, `edit` and `remove` properties, Editor will use the
- * option for the action that it is taking, which can be useful for
- * REST style interfaces. The value of each property can be a string,
- * object or function, using exactly the same options as the main `ajax`
- * option. All three options must be defined if this form is to be used.
- * * function - As a function this gives complete control over the method
- * used to update the server (if indeed a server is being used!). For
- * example, you could use a different data store such as localStorage,
- * Firebase or route the data through a web-socket.
- *
- * @example
- * // As a string - all actions are submitted to this URI as POST requests
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": 'php/index.php',
- * "table": "#example"
- * } );
- * } );
- *
- * @example
- * // As an object - using GET rather than POST
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": {
- * "type": 'GET',
- * "url": 'php/index.php
- * },
- * "table": "#example"
- * } );
- * } );
- *
- * @example
- * // As an object - each action is submitted to a different URI as POST requests
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": {
- * "create": "/rest/user/create",
- * "edit": "/rest/user/_id_/edit",
- * "remove": "/rest/user/_id_/delete"
- * },
- * "table": "#example"
- * } );
- * } );
- *
- * @example
- * // As an object - with different HTTP methods for each action
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": {
- * "create": {
- * type: 'POST',
- * url: '/rest/user/create'
- * },
- * "edit": {
- * type: 'PUT',
- * url: '/rest/user/edit/_id_'
- * },
- * "remove": {
- * type: 'DELETE',
- * url: '/rest/user/delete'
- * }
- * },
- * "table": "#example"
- * } );
- * } );
- *
- * // As a function - Making a custom `$.ajax` call
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "table": "#example",
- * "ajax": function ( method, url, data, successCallback, errorCallback ) {
- * $.ajax( {
- * "type": method,
- * "url": url,
- * "data": data,
- * "dataType": "json",
- * "success": function (json) {
- * successCallback( json );
- * },
- * "error": function (xhr, error, thrown) {
- * errorCallback( xhr, error, thrown );
- * }
- * } );
- * }
- * } );
- * } );
- */
- ajax: null,
- /**
- * The display controller for the form. The form itself is just a collection of
- * DOM elements which require a display container. This display controller allows
- * the visual appearance of the form to be significantly altered without major
- * alterations to the Editor code. There are two display controllers built into
- * Editor *lightbox* and *envelope*. The value of this property will
- * be used to access the display controller defined in {@link Editor.display}
- * for the given name. Additional display controllers can be added by adding objects
- * to that object, through extending the displayController model:
- * {@link Editor.models.displayController}.
- *
- * @type string
- * @default lightbox
- *
- * @example
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": "php/index.php",
- * "table": "#example",
- * "display": 'envelope'
- * } );
- * } );
- */
- display: 'lightbox',
- /**
- * Events / callbacks - event handlers can be assigned as an individual function
- * during initialisation using the parameters in this name space. The names, and
- * the parameters passed to each callback match their event equivalent in the
- * {@link Editor} object.
- *
- * @namespace
- * @deprecated Since 1.3. Use the `on()` API method instead. Note that events
- * passed in do still operate as they did in 1.2- but are no longer
- * individually documented.
- */
- events: {},
- /**
- * Fields to initialise the form with - see {@link Editor.models.field} for
- * a full list of the options available to each field. Note that if fields are not
- * added to the form at initialisation time using this option, they can be added using
- * the {@link Editor#add} API method.
- *
- * @type array
- * @default []
- *
- * @example
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": "php/index.php",
- * "table": "#example",
- * "fields": [ {
- * "label": "User name:",
- * "name": "username"
- * }
- * // More fields would typically be added here!
- * } ]
- * } );
- * } );
- */
- fields: [],
- formOptions: {
- bubble: $.extend({}, formOptions, {
- buttons: '_basic',
- message: false,
- submit: 'changed',
- title: false
- }),
- inline: $.extend({}, formOptions, {
- buttons: false,
- submit: 'changed'
- }),
- main: $.extend({}, formOptions)
- },
- /**
- * Internationalisation options for Editor. All client-side strings that the
- * end user can see in the interface presented by Editor can be modified here.
- *
- * You may also wish to refer to the
to provide a fully language
- * customised table interface.
- *
- * @namespace
- *
- * @example
- * // Set the 'create' button text. All other strings used are the
- * // default values.
- * var editor = new $.fn.Editor( {
- * "ajax": "data/source",
- * "table": "#example",
- * "i18n": {
- * "create": {
- * "button": "New user"
- * }
- * }
- * } );
- *
- * @example
- * // Set the submit text for all three actions
- * var editor = new $.fn.Editor( {
- * "ajax": "data/source",
- * "table": "#example",
- * "i18n": {
- * "create": {
- * "submit": "Create new user"
- * },
- * "edit": {
- * "submit": "Update user"
- * },
- * "remove": {
- * "submit": "Remove user"
- * }
- * }
- * } );
- */
- i18n: {
- /**
- * Close button title text
- *
- * @type string
- * @default Close
- */
- close: 'Close',
- /**
- * Strings used when working with the Editor 'create' action (creating new
- * records).
- *
- * @namespace
- */
- create: {
- /**
- * Buttons button text
- *
- * @type string
- * @default New
- */
- button: 'New',
- /**
- * Submit button text
- *
- * @type string
- * @default Create
- */
- submit: 'Create',
- /**
- * Display container title (when showing the editor display)
- *
- * @type string
- * @default Create new entry
- */
- title: 'Create new entry'
- },
- datetime: {
- amPm: ['am', 'pm'],
- hours: 'Hour',
- minutes: 'Minute',
- months: [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December'
- ],
- next: 'Next',
- previous: 'Previous',
- seconds: 'Second',
- unknown: '-',
- weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
- },
- /**
- * Strings used when working with the Editor 'edit' action (editing existing
- * records).
- *
- * @namespace
- */
- edit: {
- /**
- * Buttons button text
- *
- * @type string
- * @default Edit
- */
- button: 'Edit',
- /**
- * Submit button text
- *
- * @type string
- * @default Update
- */
- submit: 'Update',
- /**
- * Display container title (when showing the editor display)
- *
- * @type string
- * @default Edit entry
- */
- title: 'Edit entry'
- },
- /**
- * Strings used for error conditions.
- *
- * @namespace
- */
- error: {
- /**
- * Generic server error message
- *
- * @type string
- * @default
- * A system error has occurred (
).'
- },
- /**
- * Strings used for multi-value editing
- *
- * @namespace
- */
- multi: {
- /**
- * Shown below the multi title text, although only the first
- * instance of this text is shown in the form to reduce redundancy
- */
- info: 'The selected items contain different values for this input. To edit and set all items for this input to the same value, click or tap here, otherwise they will retain their individual values.',
- /**
- * Disabled for multi-row editing
- */
- noMulti: 'This input can be edited individually, but not part of a group.',
- /**
- * Shown below the field input when group editing a value to allow
- * the user to return to the original multiple values
- */
- restore: 'Undo changes',
- /**
- * Shown in place of the field value when a field has multiple values
- */
- title: 'Multiple values'
- },
- /**
- * Strings used when working with the Editor 'delete' action (deleting
- * existing records).
- *
- * @namespace
- */
- remove: {
- /**
- * Buttons button text
- *
- * @type string
- * @default Delete
- */
- button: 'Delete',
- /**
- * Deletion confirmation message.
- *
- * As Editor has the ability to delete either a single or multiple rows
- * at a time, this option can be given as either a string (which will be
- * used regardless of how many records are selected) or as an object
- * where the property "_" will be used (with %d substituted for the number
- * of records to be deleted) as the delete message, unless there is a
- * key with the number of records to be deleted. This allows Editor
- * to consider the different pluralisation characteristics of different
- * languages.
- *
- * @type object|string
- * @default Are you sure you wish to delete %d rows?
- *
- * @example
- * // String - no plural consideration
- * var editor = new $.fn.Editor( {
- * "ajax": "data/source",
- * "table": "#example",
- * "i18n": {
- * "remove": {
- * "confirm": "Are you sure you wish to delete %d record(s)?"
- * }
- * }
- * } );
- *
- * @example
- * // Basic 1 (singular) or _ (plural)
- * var editor = new $.fn.Editor( {
- * "ajax": "data/source",
- * "table": "#example",
- * "i18n": {
- * "remove": {
- * "confirm": {
- * "_": "Confirm deletion of %d records.",
- * "1": "Confirm deletion of record."
- * }
- * }
- * } );
- *
- * @example
- * // Singular, dual and plural
- * var editor = new $.fn.Editor( {
- * "ajax": "data/source",
- * "table": "#example",
- * "i18n": {
- * "remove": {
- * "confirm": {
- * "_": "Confirm deletion of %d records.",
- * "1": "Confirm deletion of record.",
- * "2": "Confirm deletion of both record."
- * }
- * }
- * } );
- *
- */
- confirm: {
- 1: 'Are you sure you wish to delete 1 row?',
- _: 'Are you sure you wish to delete %d rows?'
- },
- /**
- * Submit button text
- *
- * @type string
- * @default Delete
- */
- submit: 'Delete',
- /**
- * Display container title (when showing the editor display)
- *
- * @type string
- * @default Delete
- */
- title: 'Delete',
- }
- },
- /**
- * JSON property from which to read / write the row's ID property (i.e. its
- * unique column index that identifies the row to the database). By default
- * Editor will use the `DT_RowId` property from the data source object
- * (DataTable's magic property to set the DOM id for the row).
- *
- * If you want to read a parameter from the data source object instead of
- * using `DT_RowId`, set this option to the property name to use.
- *
- * Like other data source options the `srcId` option can be given in dotted
- * object notation to read nested objects.
- *
- * @type null|string
- * @default DT_RowId
- *
- * @example
- * // Using a data source such as:
- * // { "id":12, "browser":"Chrome", ... }
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": "php/index.php",
- * "table": "#example",
- * "idSrc": "id"
- * } );
- * } );
- */
- idSrc: 'DT_RowId',
- /**
- * jQuery selector that can be used to identify the table you wish to apply
- * this editor instance to.
- *
- * In previous versions of Editor (1.2 and earlier), this parameter was
- * called `table`. The name has been altered in 1.3+ to simplify the
- * initialisation. This is a backwards compatible change - if you pass in
- * a `table` option it will be used.
- *
- * @type string
- * @default
- *
- * @example
- * $(document).ready(function() {
- * var editor = new $.fn.Editor( {
- * "ajax": "php/index.php",
- * "table": "#example"
- * } );
- * } );
- */
- table: null,
-};
-
-var settings = {
- action: null,
- actionName: 'action',
- ajax: null,
- bubbleNodes: [],
- bubbleBottom: false,
- closeCb: null,
- closeIcb: null,
- dataSource: null,
- displayController: null,
- displayed: false,
- editCount: 0,
- editData: {},
- editFields: {},
- editOpts: {},
- fields: {},
- formOptions: {
- bubble: $.extend({}, formOptions),
- inline: $.extend({}, formOptions),
- main: $.extend({}, formOptions),
- },
- globalError: '',
- id: -1,
- idSrc: null,
- includeFields: [],
- mode: null,
- modifier: null,
- opts: null,
- order: [],
- processing: false,
- setFocus: null,
- table: null,
- template: null,
- unique: 0
-};
-
-var DataTable$6 = $.fn.dataTable;
-var DtInternalApi = DataTable$6.ext.oApi;
-function objectKeys(o) {
- var out = [];
- for (var key in o) {
- if (o.hasOwnProperty(key)) {
- out.push(key);
- }
- }
- return out;
-}
-function el(tag, ctx) {
- if (ctx === undefined) {
- ctx = document;
- }
- return $('*[data-dte-e="' + tag + '"]', ctx);
-}
-function safeDomId(id, prefix) {
- if (prefix === void 0) { prefix = '#'; }
- return typeof id === 'string' ?
- prefix + id.replace(/\./g, '-') :
- prefix + id;
-}
-function safeQueryId(id, prefix) {
- if (prefix === void 0) { prefix = '#'; }
- return typeof id === 'string' ?
- prefix + id.replace(/(:|\.|\[|\]|,)/g, '\\$1') :
- prefix + id;
-}
-function dataGet(src) {
- return DtInternalApi._fnGetObjectDataFn(src);
-}
-function dataSet(src) {
- return DtInternalApi._fnSetObjectDataFn(src);
-}
-var extend = DtInternalApi._fnExtend;
-function pluck(a, prop) {
- var out = [];
- $.each(a, function (idx, elIn) {
- out.push(elIn[prop]);
- });
- return out;
-}
-/**
- * Compare parameters for difference - diving into arrays and objects if
- * needed, allowing the object reference to be different, but the contents to
- * match.
- *
- * Please note that LOOSE type checking is used
- */
-function deepCompare(o1, o2) {
- if (typeof o1 !== 'object' || typeof o2 !== 'object') {
- return o1 == o2;
- }
- var o1Props = objectKeys(o1);
- var o2Props = objectKeys(o2);
- if (o1Props.length !== o2Props.length) {
- return false;
- }
- for (var i = 0, ien = o1Props.length; i < ien; i++) {
- var propName = o1Props[i];
- if (typeof o1[propName] === 'object') {
- if (!deepCompare(o1[propName], o2[propName])) {
- return false;
- }
- }
- else if (o1[propName] != o2[propName]) {
- return false;
- }
- }
- return true;
-}
-
-/* - - - - - - - - - -
- * DataTables editor interface
- */
-var _dtIsSsp = function (dt, editor) {
- // If the draw type is `none`, then we still need to use the DT API to
- // update the display with the new data
- return dt.settings()[0].oFeatures.bServerSide &&
- editor.s.editOpts.drawType !== 'none';
-};
-var _dtApi = function (table) {
- return table instanceof $.fn.dataTable.Api
- ? table
- : $(table).DataTable();
-};
-var _dtHighlight = function (node) {
- // Highlight a row using CSS transitions. The timeouts need to match the
- // transition duration from the CSS
- node = $(node);
- setTimeout(function () {
- node.addClass('highlight');
- setTimeout(function () {
- node
- .addClass('noHighlight')
- .removeClass('highlight');
- setTimeout(function () {
- node.removeClass('noHighlight');
- }, 550);
- }, 500);
- }, 20);
-};
-var _dtRowSelector = function (out, dt, identifier, fields, idFn) {
- dt.rows(identifier).indexes().each(function (idx) {
- var row = dt.row(idx);
- var data = row.data();
- var idSrc = idFn(data);
- if (idSrc === undefined) {
- Editor.error('Unable to find row identifier', 14);
- }
- out[idSrc] = {
- data: data,
- fields: fields,
- idSrc: idSrc,
- node: row.node(),
- type: 'row'
- };
- });
-};
-var _dtFieldsFromIdx = function (dt, fields, idx, ignoreUnknown) {
- var col = dt.settings()[0].aoColumns[idx];
- var dataSrc = col.editField !== undefined ?
- col.editField :
- col.mData;
- var resolvedFields = {};
- var run = function (field, dataSrcIn) {
- if (field.name() === dataSrcIn) {
- resolvedFields[field.name()] = field;
- }
- };
- $.each(fields, function (name, fieldInst) {
- if (Array.isArray(dataSrc)) {
- for (var _i = 0, dataSrc_1 = dataSrc; _i < dataSrc_1.length; _i++) {
- var data = dataSrc_1[_i];
- run(fieldInst, data);
- }
- }
- else {
- run(fieldInst, dataSrc);
- }
- });
- if ($.isEmptyObject(resolvedFields) && !ignoreUnknown) {
- Editor.error('Unable to automatically determine field from source. Please specify the field name.', 11);
- }
- return resolvedFields;
-};
-var _dtCellSelector = function (out, dt, identifier, allFields, idFn, forceFields) {
- if (forceFields === void 0) { forceFields = null; }
- var cells = dt.cells(identifier);
- cells.indexes().each(function (idx) {
- var cell = dt.cell(idx);
- var row = dt.row(idx.row);
- var data = row.data();
- var idSrc = idFn(data);
- var fields = forceFields || _dtFieldsFromIdx(dt, allFields, idx.column, cells.count() > 1);
- var isNode = (typeof identifier === 'object' && identifier.nodeName) || identifier instanceof $;
- var prevDisplayFields;
- var prevAttach;
- var prevAttachFields;
- // Only add if a field was found to edit
- if (Object.keys(fields).length) {
- // The row selector will create a new `out` object for the identifier, and the
- // cell selector might be called multiple times for a row, so we need to save
- // our specific items
- if (out[idSrc]) {
- prevAttach = out[idSrc].attach;
- prevAttachFields = out[idSrc].attachFields;
- prevDisplayFields = out[idSrc].displayFields;
- }
- // Use the row selector to get the row information
- _dtRowSelector(out, dt, idx.row, allFields, idFn);
- out[idSrc].attachFields = prevAttachFields || [];
- out[idSrc].attachFields.push(Object.keys(fields));
- out[idSrc].attach = prevAttach || [];
- out[idSrc].attach.push(isNode ?
- $(identifier).get(0) :
- cell.fixedNode ? // If its under a fixed column, get the floating node
- cell.fixedNode() :
- cell.node());
- out[idSrc].displayFields = prevDisplayFields || {};
- $.extend(out[idSrc].displayFields, fields);
- }
- });
-};
-var _dtColumnSelector = function (out, dt, identifier, fields, idFn) {
- dt.cells(null, identifier).indexes().each(function (idx) {
- _dtCellSelector(out, dt, idx, fields, idFn);
- });
-};
-var dataSource$1 = {
- commit: function (action, identifier, data, store) {
- // Updates complete - redraw
- var that = this;
- var dt = _dtApi(this.s.table);
- var ssp = dt.settings()[0].oFeatures.bServerSide;
- var ids = store.rowIds;
- // On edit, if there are any rows left in the `store.rowIds`, then they
- // were not returned by the server and should be removed (they might not
- // meet filtering requirements any more for example)
- if (!_dtIsSsp(dt, this) && action === 'edit' && store.rowIds.length) {
- var row = void 0;
- var compare = function (id) {
- return function (rowIdx, rowData, rowNode) {
- return id == dataSource$1.id.call(that, rowData);
- };
- };
- for (var i = 0, ien = ids.length; i < ien; i++) {
- // Find the row to edit - attempt to do an id look up first for speed
- try {
- row = dt.row(safeQueryId(ids[i]));
- }
- catch (e) {
- row = dt;
- }
- // If not found, then we need to do it the slow way
- if (!row.any()) {
- row = dt.row(compare(ids[i]));
- }
- if (row.any() && !ssp) {
- row.remove();
- }
- }
- }
- var drawType = this.s.editOpts.drawType;
- if (drawType !== 'none') {
- var dtAny = dt;
- // SSP highlighting has to go after the draw, but this can't be
- // merged with client-side processing highlight as we want that
- // to work even when there isn't a draw happening.
- if (ssp && ids && ids.length) {
- dt.one('draw', function () {
- for (var i = 0, ien = ids.length; i < ien; i++) {
- var row = dt.row(safeQueryId(ids[i]));
- if (row.any()) {
- _dtHighlight(row.node());
- }
- }
- });
- }
- dt.draw(drawType);
- // Responsive needs to take account of new data column widths
- if (dtAny.responsive) {
- dtAny.responsive.recalc();
- }
- // Rebuild searchpanes
- if (typeof dtAny.searchPanes === 'function' && !ssp) {
- dtAny.searchPanes.rebuildPane(undefined, true);
- }
- // Rebuild searchbuilder
- if (dtAny.searchBuilder !== undefined && typeof dtAny.searchBuilder.rebuild === 'function' && !ssp) {
- dtAny.searchBuilder.rebuild(dtAny.searchBuilder.getDetails());
- }
- }
- },
- create: function (fields, data) {
- var dt = _dtApi(this.s.table);
- if (!_dtIsSsp(dt, this)) {
- var row = dt.row.add(data);
- _dtHighlight(row.node());
- }
- },
- edit: function (identifier, fields, data, store) {
- var that = this;
- var dt = _dtApi(this.s.table);
- // No point in doing anything when server-side processing - the commit
- // will redraw the table
- if (!_dtIsSsp(dt, this) || this.s.editOpts.drawType === 'none') {
- // The identifier can select one or more rows, but the data will
- // refer to just a single row. We need to determine which row from
- // the set is the one to operator on.
- var rowId_1 = dataSource$1.id.call(this, data);
- var row = void 0;
- // Find the row to edit - attempt to do an id look up first for speed
- try {
- row = dt.row(safeQueryId(rowId_1));
- }
- catch (e) {
- row = dt;
- }
- // If not found, then we need to do it the slow way
- if (!row.any()) {
- row = dt.row(function (rowIdx, rowData, rowNode) {
- return rowId_1 == dataSource$1.id.call(that, rowData);
- });
- }
- if (row.any()) {
- // Merge data to allow for a sub-set to be returned
- var toSave = extend({}, row.data(), true);
- toSave = extend(toSave, data, true);
- row.data(toSave);
- // Remove the item from the list of indexes now that is has been
- // updated
- var idx = $.inArray(rowId_1, store.rowIds);
- store.rowIds.splice(idx, 1);
- }
- else {
- // If not found, then its a new row (change in pkey possibly)
- row = dt.row.add(data);
- }
- _dtHighlight(row.node());
- }
- },
- fakeRow: function (insertPoint) {
- var dt = _dtApi(this.s.table);
- var tr = $('
');
- var attachFields = [];
- var attach = [];
- var displayFields = {};
- var tbody = dt.table(undefined).body();
- for (var i = 0, ien = dt.columns(':visible').count(); i < ien; i++) {
- var visIdx = dt.column(i + ':visible').index();
- var td = $('| ').appendTo(tr);
- var fields = _dtFieldsFromIdx(dt, this.s.fields, visIdx, true);
- var settings = dt.settings()[0];
- var className = settings.aoColumns[visIdx].sClass;
- if (className) {
- td.addClass(className);
- }
- if (Object.keys(fields).length) {
- attachFields.push(Object.keys(fields));
- attach.push(td[0]);
- $.extend(displayFields, fields);
- }
- }
- var append = function () {
- // Remove the data empty message
- if (dt.page.info().recordsDisplay === 0) {
- $(tbody).empty();
- }
- var action = insertPoint === 'end'
- ? 'appendTo'
- : 'prependTo';
- tr[action](tbody);
- };
- this.__dtFakeRow = tr;
- // Insert into the table
- append();
- dt.on('draw.dte-createInline', function () {
- append();
- });
- return {
- 0: {
- attach: attach,
- attachFields: attachFields,
- displayFields: displayFields,
- fields: this.s.fields,
- type: 'row'
- }
- };
- },
- fakeRowEnd: function () {
- var dt = _dtApi(this.s.table);
- dt.off('draw.dte-createInline');
- this.__dtFakeRow.remove();
- this.__dtFakeRow = null;
- // Restore data empty row
- if (dt.page.info().recordsDisplay === 0) {
- dt.draw(false);
- }
- },
- // get idSrc, fields to edit, data and node for each item
- fields: function (identifier) {
- var idFn = dataGet(this.s.idSrc);
- var dt = _dtApi(this.s.table);
- var fields = this.s.fields;
- var out = {};
- if ($.isPlainObject(identifier) &&
- (identifier.rows !== undefined || identifier.columns !== undefined || identifier.cells !== undefined)) {
- // Multi-item type selector
- if (identifier.rows !== undefined) {
- _dtRowSelector(out, dt, identifier.rows, fields, idFn);
- }
- if (identifier.columns !== undefined) {
- _dtColumnSelector(out, dt, identifier.columns, fields, idFn);
- }
- if (identifier.cells !== undefined) {
- _dtCellSelector(out, dt, identifier.cells, fields, idFn);
- }
- }
- else {
- // Just a rows selector
- _dtRowSelector(out, dt, identifier, fields, idFn);
- }
- return out;
- },
- id: function (data) {
- var idFn = dataGet(this.s.idSrc);
- return idFn(data);
- },
- individual: function (identifier, fieldNames) {
- var idFn = dataGet(this.s.idSrc);
- var dt = _dtApi(this.s.table);
- var fields = this.s.fields;
- var out = {};
- var forceFields;
- if (fieldNames) {
- if (!Array.isArray(fieldNames)) {
- fieldNames = [fieldNames];
- }
- forceFields = {};
- $.each(fieldNames, function (i, name) {
- forceFields[name] = fields[name];
- });
- }
- _dtCellSelector(out, dt, identifier, fields, idFn, forceFields);
- return out;
- },
- prep: function (action, identifier, submit, json, store) {
- var _this = this;
- // Get the id of the rows created / edited
- if (action === 'create') {
- store.rowIds = $.map(json.data, function (row) { return dataSource$1.id.call(_this, row); });
- }
- if (action === 'edit') {
- var cancelled_1 = json.cancelled || [];
- store.rowIds = $.map(submit.data, function (val, key) {
- return !$.isEmptyObject(submit.data[key]) && // was submitted
- $.inArray(key, cancelled_1) === -1 ? // was not cancelled on the server-side
- key :
- undefined;
- });
- }
- else if (action === 'remove') {
- store.cancelled = json.cancelled || [];
- }
- },
- refresh: function () {
- // Reload a table's data - used when nested data is changed
- var dt = _dtApi(this.s.table);
- dt.ajax.reload(null, false);
- },
- remove: function (identifier, fields, store) {
- // No confirmation from the server
- var that = this;
- var dt = _dtApi(this.s.table);
- var cancelled = store.cancelled;
- if (cancelled.length === 0) {
- // No rows were cancelled on the server-side, remove them all
- dt.rows(identifier).remove();
- }
- else {
- // One or more rows were cancelled, so we need to identify them
- // and not remove those rows
- var indexes_1 = [];
- dt.rows(identifier).every(function () {
- var id = dataSource$1.id.call(that, this.data());
- if ($.inArray(id, cancelled) === -1) {
- // Don't use `remove` here - it messes up the indexes
- indexes_1.push(this.index());
- }
- });
- dt.rows(indexes_1).remove();
- }
- }
-};
-
-/* - - - - - - - -
- * HTML editor interface
- */
-function _htmlId(identifier) {
- if (identifier === 'keyless') {
- return $(document);
- }
- var specific = $('[data-editor-id="' + identifier + '"]');
- if (specific.length === 0) {
- specific = typeof identifier === 'string' ?
- $(safeQueryId(identifier)) :
- $(identifier);
- }
- if (specific.length === 0) {
- throw new Error('Could not find an element with `data-editor-id` or `id` of: ' + identifier);
- }
- return specific;
-}
-function _htmlEl(identifier, name) {
- var context = _htmlId(identifier);
- return $('[data-editor-field="' + name + '"]', context);
-}
-function _htmlEls(identifier, names) {
- var out = $();
- for (var i = 0, ien = names.length; i < ien; i++) {
- out = out.add(_htmlEl(identifier, names[i]));
- }
- return out;
-}
-function _htmlGet(identifier, dataSrc) {
- var el = _htmlEl(identifier, dataSrc);
- return el.filter('[data-editor-value]').length ?
- el.attr('data-editor-value') :
- el.html();
-}
-function _htmlSet(identifier, fields, data) {
- $.each(fields, function (name, field) {
- var val = field.valFromData(data);
- if (val !== undefined) {
- var el = _htmlEl(identifier, field.dataSrc());
- if (el.filter('[data-editor-value]').length) {
- el.attr('data-editor-value', val);
- }
- else {
- el.each(function () {
- // This is very frustrating, but in IE if you just write directly
- // to innerHTML, and elements that are overwritten are GC'ed,
- // even if there is a reference to them elsewhere
- while (this.childNodes.length) {
- this.removeChild(this.firstChild);
- }
- })
- .html(val);
- }
- }
- });
-}
-var dataSource = {
- create: function (fields, data) {
- // If there is an element with the id that has been created, then use it
- // to assign the values
- if (data) {
- var id = dataSource.id.call(this, data);
- try {
- if (_htmlId(id).length) {
- _htmlSet(id, fields, data);
- }
- }
- catch (e) {
- // noop - use `postCreate` to add items to the DOM
- }
- }
- },
- edit: function (identifier, fields, data) {
- // Get the ids from the returned data or `keyless` if not found
- var id = dataSource.id.call(this, data) || 'keyless';
- _htmlSet(id, fields, data);
- },
- // get idSrc, fields to edit, data and node for each item
- fields: function (identifier) {
- var out = {};
- // Allow multi-point editing
- if (Array.isArray(identifier)) {
- for (var i = 0, ien = identifier.length; i < ien; i++) {
- var res = dataSource.fields.call(this, identifier[i]);
- out[identifier[i]] = res[identifier[i]];
- }
- return out;
- }
- // else
- var data = {};
- var fields = this.s.fields;
- if (!identifier) {
- identifier = 'keyless';
- }
- $.each(fields, function (name, field) {
- var val = _htmlGet(identifier, field.dataSrc());
- // If no HTML element is present, jQuery returns null. We want undefined
- field.valToData(data, val === null ? undefined : val);
- });
- out[identifier] = {
- data: data,
- fields: fields,
- idSrc: identifier,
- node: document,
- type: 'row'
- };
- return out;
- },
- id: function (data) {
- var idFn = dataGet(this.s.idSrc);
- return idFn(data);
- },
- individual: function (identifier, fieldNames) {
- var attachEl;
- // Auto detection of the field name and id
- if (identifier instanceof $ || identifier.nodeName) {
- attachEl = identifier;
- if (!fieldNames) {
- fieldNames = [$(identifier).attr('data-editor-field')];
- }
- var back = $.fn.addBack ? 'addBack' : 'andSelf';
- identifier = $(identifier).parents('[data-editor-id]')[back]().data('editor-id');
- }
- // no id given and none found
- if (!identifier) {
- identifier = 'keyless';
- }
- // no field name - cannot continue
- if (fieldNames && !Array.isArray(fieldNames)) {
- fieldNames = [fieldNames];
- }
- if (!fieldNames || fieldNames.length === 0) {
- throw new Error('Cannot automatically determine field name from data source');
- }
- var out = dataSource.fields.call(this, identifier);
- var fields = this.s.fields;
- var forceFields = {};
- $.each(fieldNames, function (i, name) {
- forceFields[name] = fields[name];
- });
- $.each(out, function (id, set) {
- set.type = 'cell';
- set.attachFields = [fieldNames];
- set.attach = attachEl ?
- $(attachEl) :
- _htmlEls(identifier, fieldNames).toArray();
- set.fields = fields;
- set.displayFields = forceFields;
- });
- return out;
- },
- initField: function (cfg) {
- // This is before the field has been initialised so can't use it API
- var label = $('[data-editor-label="' + (cfg.data || cfg.name) + '"]');
- if (!cfg.label && label.length) {
- cfg.label = label.html();
- }
- },
- remove: function (identifier, fields) {
- // If there is an element with an ID property matching the identifier,
- // remove it
- if (identifier !== 'keyless') {
- _htmlId(identifier).remove();
- }
- }
-};
-
-/**
- * Class names that are used by Editor for its various display components.
- * A copy of this object is taken when an Editor instance is initialised, thus
- * allowing different classes to be used in different instances if required.
- * Class name changes can be useful for easy integration with CSS frameworks,
- * for example Twitter Bootstrap.
- *
- * @namespace
- */
-var classNames = {
- /**
- * Action classes - these are added to the Editor base element ("wrapper")
- * and allows styling based on the type of form view that is being employed.
- *
- * @namespace
- */
- actions: {
- /**
- * Editor is in 'create' state
- */
- create: 'DTE_Action_Create',
- /**
- * Editor is in 'edit' state
- */
- edit: 'DTE_Action_Edit',
- /**
- * Editor is in 'remove' state
- */
- remove: 'DTE_Action_Remove'
- },
- /**
- * Display body classes
- *
- * @namespace
- */
- body: {
- /**
- * Liner for the body content
- */
- content: 'DTE_Body_Content',
- /**
- * Container for the body elements
- */
- wrapper: 'DTE_Body'
- },
- /**
- * Bubble editing classes - these are used to display the bubble editor
- *
- * @namespace
- */
- bubble: {
- /**
- * Fixed background
- */
- bg: 'DTE_Bubble_Background',
- /**
- * Close button
- */
- close: 'icon close',
- /**
- * Bubble content liner
- */
- liner: 'DTE_Bubble_Liner',
- /**
- * Pointer shown which node is being edited
- */
- pointer: 'DTE_Bubble_Triangle',
- /**
- * Bubble table display wrapper, so the buttons and form can be shown
- * as table cells (via css)
- */
- table: 'DTE_Bubble_Table',
- /**
- * Bubble container element
- */
- wrapper: 'DTE DTE_Bubble'
- },
- /**
- * Field classes
- *
- * @namespace
- */
- field: {
- /**
- * Field is disabled
- */
- 'disabled': 'disabled',
- /**
- * Field error state (added to the field.wrapper element when in error state
- */
- 'error': 'DTE_Field_StateError',
- /**
- * Field input container
- */
- 'input': 'DTE_Field_Input',
- /**
- * Input elements wrapper
- */
- 'inputControl': 'DTE_Field_InputControl',
- /**
- * Field label
- */
- 'label': 'DTE_Label',
- /**
- * Error information text
- */
- 'msg-error': 'DTE_Field_Error',
- /**
- * General information text
- */
- 'msg-info': 'DTE_Field_Info',
- /**
- * Label information text
- */
- 'msg-label': 'DTE_Label_Info',
- /**
- * Live messaging (API) information text
- */
- 'msg-message': 'DTE_Field_Message',
- /**
- * Multi-value information descriptive text
- */
- 'multiInfo': 'multi-info',
- /**
- * Multi-value not editable (field.multiEditable)
- */
- 'multiNoEdit': 'multi-noEdit',
- /**
- * Multi-value information display
- */
- 'multiRestore': 'multi-restore',
- /**
- * Multi-value information display wrapper
- */
- 'multiValue': 'multi-value',
- /**
- * Class prefix for the field name - field name is added to the end allowing
- * styling based on field name.
- */
- 'namePrefix': 'DTE_Field_Name_',
- /**
- * Field's processing element
- */
- 'processing': 'DTE_Processing_Indicator',
- /**
- * Class prefix for the field type - field type is added to the end allowing
- * styling based on field type.
- */
- 'typePrefix': 'DTE_Field_Type_',
- /**
- * Container for each field
- */
- 'wrapper': 'DTE_Field'
- },
- /**
- * Display footer classes
- *
- * @namespace
- */
- footer: {
- /**
- * Liner for the footer content
- */
- content: 'DTE_Footer_Content',
- /**
- * Container for the footer elements
- */
- wrapper: 'DTE_Footer'
- },
- /**
- * Form classes
- *
- * @namespace
- */
- form: {
- /**
- * Button
- */
- button: 'btn',
- /**
- * Button inside the form
- */
- buttonInternal: 'btn',
- /**
- * Buttons container
- */
- buttons: 'DTE_Form_Buttons',
- /**
- * Liner for the form content
- */
- content: 'DTE_Form_Content',
- /**
- * Global error imformation
- */
- error: 'DTE_Form_Error',
- /**
- * Global form information
- */
- info: 'DTE_Form_Info',
- /**
- * Applied to the |