1314 lines
62 KiB
JavaScript
1314 lines
62 KiB
JavaScript
'use strict';
|
|
const aside = document.querySelector('aside'), main = document.querySelector('main'), header = document.querySelector('header');
|
|
const asideStyle = window.getComputedStyle(aside);
|
|
if (localStorage.getItem('admin_menu') == 'closed') {
|
|
aside.classList.add('closed', 'responsive-hidden');
|
|
main.classList.add('full');
|
|
header.classList.add('full');
|
|
}
|
|
document.querySelector('.responsive-toggle').onclick = event => {
|
|
event.preventDefault();
|
|
if (asideStyle.display == 'none') {
|
|
aside.classList.remove('closed', 'responsive-hidden');
|
|
main.classList.remove('full');
|
|
header.classList.remove('full');
|
|
localStorage.setItem('admin_menu', '');
|
|
} else {
|
|
aside.classList.add('closed', 'responsive-hidden');
|
|
main.classList.add('full');
|
|
header.classList.add('full');
|
|
localStorage.setItem('admin_menu', 'closed');
|
|
}
|
|
};
|
|
|
|
// Menu header collapse/expand functionality
|
|
document.querySelectorAll('aside .menu-header').forEach(header => {
|
|
header.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
|
|
// Toggle expanded state
|
|
this.classList.toggle('expanded');
|
|
|
|
// Find the next sibling .sub element and toggle display
|
|
const submenu = this.nextElementSibling;
|
|
if (submenu && submenu.classList.contains('sub')) {
|
|
submenu.classList.toggle('expanded');
|
|
// Update inline style for display
|
|
submenu.style.display = submenu.classList.contains('expanded') ? 'flex' : 'none';
|
|
}
|
|
|
|
// Rotate chevron
|
|
const chevron = this.querySelector('.menu-chevron');
|
|
if (chevron) {
|
|
chevron.style.transform = this.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
}
|
|
|
|
// Store expanded state in localStorage for persistence
|
|
const section = this.dataset.section;
|
|
if (section) {
|
|
const expandedSections = JSON.parse(localStorage.getItem('menu_expanded') || '{}');
|
|
expandedSections[section] = this.classList.contains('expanded');
|
|
localStorage.setItem('menu_expanded', JSON.stringify(expandedSections));
|
|
}
|
|
});
|
|
});
|
|
|
|
// Restore menu expanded states from localStorage on page load
|
|
(function restoreMenuState() {
|
|
const expandedSections = JSON.parse(localStorage.getItem('menu_expanded') || '{}');
|
|
|
|
document.querySelectorAll('aside .menu-header').forEach(header => {
|
|
const section = header.dataset.section;
|
|
const submenu = header.nextElementSibling;
|
|
const chevron = header.querySelector('.menu-chevron');
|
|
|
|
// If explicitly saved as expanded, apply it
|
|
if (section && expandedSections[section] === true) {
|
|
header.classList.add('expanded');
|
|
if (submenu && submenu.classList.contains('sub')) {
|
|
submenu.classList.add('expanded');
|
|
submenu.style.display = 'flex';
|
|
}
|
|
if (chevron) chevron.style.transform = 'rotate(180deg)';
|
|
}
|
|
// If has selected child, always expand (override localStorage)
|
|
if (submenu && submenu.querySelector('a.selected')) {
|
|
header.classList.add('expanded');
|
|
submenu.classList.add('expanded');
|
|
submenu.style.display = 'flex';
|
|
if (chevron) chevron.style.transform = 'rotate(180deg)';
|
|
}
|
|
});
|
|
})();
|
|
document.querySelectorAll('.tabs a').forEach((element, index) => {
|
|
element.onclick = event => {
|
|
event.preventDefault();
|
|
|
|
// Toggle the clicked tab
|
|
const isActive = element.classList.contains('active');
|
|
const tabContent = document.querySelectorAll('.tab-content')[index];
|
|
|
|
// Remove active class from all tabs and contents
|
|
document.querySelectorAll('.tabs a').forEach(el => el.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
content.style.display = 'none';
|
|
});
|
|
|
|
// If it wasn't active, make it active (collapsible behavior)
|
|
if (!isActive && tabContent) {
|
|
element.classList.add('active');
|
|
tabContent.classList.add('active');
|
|
tabContent.style.display = 'block';
|
|
}
|
|
};
|
|
});
|
|
|
|
// Initialize first tab as open by default
|
|
if (document.querySelectorAll('.tabs a').length > 0) {
|
|
const firstTab = document.querySelectorAll('.tabs a')[0];
|
|
const firstContent = document.querySelectorAll('.tab-content')[0];
|
|
if (firstTab && firstContent) {
|
|
firstTab.classList.add('active');
|
|
firstContent.classList.add('active');
|
|
firstContent.style.display = 'block';
|
|
}
|
|
}
|
|
if (document.querySelector('.filters a')) {
|
|
let filtersList = document.querySelector('.filters .list');
|
|
let filtersListStyle = window.getComputedStyle(filtersList);
|
|
document.querySelector('.filters a').onclick = event => {
|
|
event.preventDefault();
|
|
if (filtersListStyle.display == 'none') {
|
|
filtersList.style.display = 'flex';
|
|
} else {
|
|
filtersList.style.display = 'none';
|
|
}
|
|
};
|
|
document.onclick = event => {
|
|
if (!event.target.closest('.filters')) {
|
|
filtersList.style.display = 'none';
|
|
}
|
|
};
|
|
}
|
|
|
|
// Filter panel toggle functions
|
|
function toggleFilters() {
|
|
const panel = document.getElementById("filter-panel");
|
|
if (panel.style.display === "none" || panel.style.display === "") {
|
|
panel.style.display = "block";
|
|
} else {
|
|
panel.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Close filter panel when clicking outside
|
|
document.addEventListener("click", function(event) {
|
|
const panel = document.getElementById("filter-panel");
|
|
const toggle = document.getElementById("filter-toggle");
|
|
|
|
if (panel && toggle && !panel.contains(event.target) && !toggle.contains(event.target)) {
|
|
panel.style.display = "none";
|
|
}
|
|
});
|
|
if (document.querySelector('.sort a')) {
|
|
let filtersList = document.querySelector('.sort .list');
|
|
let filtersListStyle = window.getComputedStyle(filtersList);
|
|
document.querySelector('.sort a').onclick = event => {
|
|
event.preventDefault();
|
|
if (filtersListStyle.display == 'none') {
|
|
filtersList.style.display = 'flex';
|
|
} else {
|
|
filtersList.style.display = 'none';
|
|
}
|
|
};
|
|
document.onclick = event => {
|
|
if (!event.target.closest('.sort')) {
|
|
filtersList.style.display = 'none';
|
|
}
|
|
};
|
|
}
|
|
document.querySelectorAll('.msg').forEach(element => {
|
|
element.querySelector('.fa-times').onclick = () => {
|
|
element.remove();
|
|
history.replaceState && history.replaceState(null, '', location.pathname + location.search.replace(/[\?&]success_msg=[^&]+/, '').replace(/^&/, '?') + location.hash);
|
|
history.replaceState && history.replaceState(null, '', location.pathname + location.search.replace(/[\?&]error_msg=[^&]+/, '').replace(/^&/, '?') + location.hash);
|
|
};
|
|
});
|
|
if (location.search.includes('success_msg') || location.search.includes('error_msg')) {
|
|
history.replaceState && history.replaceState(null, '', location.pathname + location.search.replace(/[\?&]success_msg=[^&]+/, '').replace(/^&/, '?') + location.hash);
|
|
history.replaceState && history.replaceState(null, '', location.pathname + location.search.replace(/[\?&]error_msg=[^&]+/, '').replace(/^&/, '?') + location.hash);
|
|
}
|
|
document.body.addEventListener('click', event => {
|
|
if (!event.target.closest('.multiselect')) {
|
|
document.querySelectorAll('.multiselect .list').forEach(element => element.style.display = 'none');
|
|
}
|
|
});
|
|
document.querySelectorAll('.multiselect').forEach(element => {
|
|
let updateList = () => {
|
|
element.querySelectorAll('.item').forEach(item => {
|
|
element.querySelectorAll('.list span').forEach(newItem => {
|
|
if (item.dataset.value == newItem.dataset.value) {
|
|
newItem.style.display = 'none';
|
|
}
|
|
});
|
|
item.querySelector('.remove').onclick = () => {
|
|
element.querySelector('.list span[data-value="' + item.dataset.value + '"]').style.display = 'flex';
|
|
item.querySelector('.remove').parentElement.remove();
|
|
};
|
|
});
|
|
if (element.querySelectorAll('.item').length > 0) {
|
|
element.querySelector('.search').placeholder = '';
|
|
}
|
|
};
|
|
element.onclick = () => element.querySelector('.search').focus();
|
|
element.querySelector('.search').onfocus = () => element.querySelector('.list').style.display = 'flex';
|
|
element.querySelector('.search').onclick = () => element.querySelector('.list').style.display = 'flex';
|
|
element.querySelector('.search').onkeyup = () => {
|
|
element.querySelector('.list').style.display = 'flex';
|
|
element.querySelectorAll('.list span').forEach(item => {
|
|
item.style.display = item.innerText.toLowerCase().includes(element.querySelector('.search').value.toLowerCase()) ? 'flex' : 'none';
|
|
});
|
|
updateList();
|
|
};
|
|
element.querySelectorAll('.list span').forEach(item => item.onclick = () => {
|
|
item.style.display = 'none';
|
|
let html = `
|
|
<span class="item" data-value="${item.dataset.value}">
|
|
<i class="remove">×</i>${item.innerText}
|
|
<input type="hidden" name="${element.dataset.name}" value="${item.dataset.value}">
|
|
</span>
|
|
`;
|
|
if (element.querySelector('.item')) {
|
|
let ele = element.querySelectorAll('.item');
|
|
ele = ele[ele.length-1];
|
|
ele.insertAdjacentHTML('afterend', html);
|
|
} else {
|
|
element.insertAdjacentHTML('afterbegin', html);
|
|
}
|
|
element.querySelector('.search').value = '';
|
|
updateList();
|
|
});
|
|
updateList();
|
|
});
|
|
const modal = options => {
|
|
let element;
|
|
if (document.querySelector(options.element)) {
|
|
element = document.querySelector(options.element);
|
|
} else if (options.modalTemplate) {
|
|
document.body.insertAdjacentHTML('beforeend', options.modalTemplate());
|
|
element = document.body.lastElementChild;
|
|
}
|
|
options.element = element;
|
|
options.open = obj => {
|
|
element.style.display = 'flex';
|
|
element.getBoundingClientRect();
|
|
element.classList.add('open');
|
|
if (options.onOpen) options.onOpen(obj);
|
|
};
|
|
options.close = obj => {
|
|
if (options.onClose) {
|
|
let returnCloseValue = options.onClose(obj);
|
|
if (returnCloseValue !== false) {
|
|
element.style.display = 'none';
|
|
element.classList.remove('open');
|
|
element.remove();
|
|
}
|
|
} else {
|
|
element.style.display = 'none';
|
|
element.classList.remove('open');
|
|
element.remove();
|
|
}
|
|
};
|
|
if (options.state == 'close') {
|
|
options.close({ source: element, button: null });
|
|
} else if (options.state == 'open') {
|
|
options.open({ source: element });
|
|
}
|
|
element.querySelectorAll('.dialog-close').forEach(e => {
|
|
e.onclick = event => {
|
|
event.preventDefault();
|
|
options.close({ source: element, button: e });
|
|
};
|
|
});
|
|
return options;
|
|
};
|
|
const openMediaLibrary = options => modal({
|
|
media: [],
|
|
state: 'open',
|
|
modalTemplate: function() {
|
|
return `
|
|
<div class="dialog large media-library-modal">
|
|
<div class="content">
|
|
<h3 class="heading">Media Library<span class="dialog-close">×</span></h3>
|
|
<div class="media">
|
|
<div class="list">
|
|
<div class="list-header">
|
|
<a href="#" class="btn small green upload-media">Upload</a>
|
|
<input class="search-media" type="text" placeholder="Search...">
|
|
</div>
|
|
<div class="loader"></div>
|
|
</div>
|
|
<div class="details">
|
|
<p>No media selected.</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer pad-5">
|
|
<a href="#" class="btn dialog-close save">${options.buttonText ? options.buttonText : 'Save'}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
detailsTemplate: function(media, img) {
|
|
return `
|
|
<form class="media-details-form" method="post" action="index.php?page=api&action=media&id=${media.id}">
|
|
<h3>Media Details</h3>
|
|
<a href="${img}" target="_blank"><img src="${img}" alt="${media.caption}"></a>
|
|
<label for="title">Title</label>
|
|
<input id="title" type="text" name="title" value="${media.title}">
|
|
<label for="caption">Caption</label>
|
|
<input id="caption" type="text" name="caption" value="${media.caption}">
|
|
<label for="full_path">Full Path</label>
|
|
<input id="full_path" type="text" name="full_path" value="${media.full_path}">
|
|
<label for="date_uploaded">Date Uploaded</label>
|
|
<input id="date_uploaded" type="datetime-local" name="date_uploaded" value="${media.date_uploaded.replace(' ', 'T')}">
|
|
<div class="media-links">
|
|
<a href="#" class="link1 save-media">Save</a> <a href="#" class="link2 delete-media">Delete</a>
|
|
</div>
|
|
</form>
|
|
`;
|
|
},
|
|
selectMedia: function(id) {
|
|
for (let i = 0; i < this.media.length; i++) {
|
|
if (this.media[i].id == id) {
|
|
this.media[i].selected = true;
|
|
this.media[i].element.classList.add('selected');
|
|
}
|
|
}
|
|
},
|
|
unselectMedia: function(id) {
|
|
for (let i = 0; i < this.media.length; i++) {
|
|
if (this.media[i].id == id) {
|
|
this.media[i].selected = false;
|
|
this.media[i].element.classList.remove('selected');
|
|
}
|
|
}
|
|
},
|
|
getAllSelectedMedia: function() {
|
|
return this.media.filter(media => media.selected);
|
|
},
|
|
populateMedia: function(data) {
|
|
data = data ? data : this.media;
|
|
if (this.media.length > 0) {
|
|
document.querySelectorAll('.media-library-modal a.media-image').forEach(element => element.remove());
|
|
}
|
|
for (let i = 0; i < data.length; i++) {
|
|
let img = document.createElement('img');
|
|
img.loading = 'lazy';
|
|
img.src = '../' + data[i].full_path;
|
|
let a = document.createElement('a');
|
|
a.classList.add('media-image');
|
|
a.dataset.index = i;
|
|
a.dataset.id = data[i].id;
|
|
a.append(img);
|
|
a.onclick = event => {
|
|
event.preventDefault();
|
|
a.classList.toggle('selected');
|
|
if (a.classList.contains('selected')) {
|
|
this.selectMedia(data[i].id);
|
|
document.querySelector('.media-library-modal .media .details').innerHTML = this.detailsTemplate(data[i], img.src);
|
|
} else if (document.querySelector('.media-library-modal a.media-image.selected')) {
|
|
this.unselectMedia(data[i].id);
|
|
let selectedMedia = document.querySelector('.media-library-modal a.media-image.selected');
|
|
document.querySelector('.media-library-modal .media .details').innerHTML = this.detailsTemplate(data[selectedMedia.dataset.index], selectedMedia.querySelector('img').src);
|
|
} else {
|
|
this.unselectMedia(data[i].id);
|
|
document.querySelector('.media-library-modal .media .details').innerHTML = `<p>No media selected.</p>`;
|
|
}
|
|
document.querySelectorAll('.media-library-modal .media .details input').forEach(element => element.onkeyup = () => document.querySelector('.media-library-modal .save-media').style.display = 'inline-flex');
|
|
if (document.querySelector('.media-library-modal .save-media')) {
|
|
let mediaDetailsForm = document.querySelector('.media-library-modal .media-details-form');
|
|
document.querySelector('.media-library-modal .save-media').onclick = event => {
|
|
event.preventDefault();
|
|
fetch(mediaDetailsForm.action, {
|
|
method: 'POST',
|
|
body: new FormData(mediaDetailsForm)
|
|
}).then(response => response.json()).then(newData => {
|
|
this.media[i].title = newData[i].title;
|
|
this.media[i].caption = newData[i].caption;
|
|
this.media[i].full_path = newData[i].full_path;
|
|
this.media[i].date_uploaded = newData[i].date_uploaded;
|
|
data[i].title = newData[i].title;
|
|
data[i].caption = newData[i].caption;
|
|
data[i].full_path = newData[i].full_path;
|
|
data[i].date_uploaded = newData[i].date_uploaded;
|
|
document.querySelector('.media-library-modal .save-media').style.display = 'none';
|
|
});
|
|
};
|
|
document.querySelector('.media-library-modal .delete-media').onclick = event => {
|
|
event.preventDefault();
|
|
if (confirm('Are you sure you want to delete this media?')) {
|
|
fetch(mediaDetailsForm.action + '&delete=true').then(response => response.json()).then(newData => {
|
|
for (let j = 0; j < this.media.length; j++) {
|
|
for (let k = 0; k < newData.length; k++) {
|
|
if (this.media[j].id == newData[k].id && this.media[j].selected) {
|
|
newData[k].selected = true;
|
|
}
|
|
}
|
|
}
|
|
this.media = newData;
|
|
document.querySelector('.media-library-modal .media .details').innerHTML = `<p>No media selected.</p>`;
|
|
this.populateMedia();
|
|
});
|
|
}
|
|
};
|
|
}
|
|
};
|
|
data[i].element = a;
|
|
document.querySelector('.media-library-modal .media .list').append(a);
|
|
}
|
|
this.getAllSelectedMedia().forEach(media => {
|
|
if (media.selected) this.selectMedia(media.id);
|
|
});
|
|
if (document.querySelector('.media-library-modal .media .loader')) {
|
|
document.querySelector('.media-library-modal .media .loader').remove();
|
|
}
|
|
},
|
|
onOpen: function() {
|
|
fetch('index.php?page=api&action=media', { cache: 'no-store' }).then(response => response.json()).then(data => {
|
|
this.media = data;
|
|
this.populateMedia();
|
|
if (options.onMediaLoad) options.onMediaLoad();
|
|
});
|
|
document.querySelector('.media-library-modal .upload-media').onclick = event => {
|
|
event.preventDefault();
|
|
let input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.multiple = 'multiple';
|
|
input.accept = 'image/*';
|
|
input.onchange = event => {
|
|
document.querySelector('.media-library-modal .upload-media').innerHTML = '<div class="loader"></div>';
|
|
let form = new FormData();
|
|
for (let i = 0; i < event.target.files.length; i++) {
|
|
form.append('file_' + i, event.target.files[i]);
|
|
}
|
|
form.append('total_files', event.target.files.length);
|
|
fetch('index.php?page=api&action=media', {
|
|
method: 'POST',
|
|
body: form
|
|
}).then(response => response.json()).then(data => {
|
|
for (let j = 0; j < this.media.length; j++) {
|
|
for (let k = 0; k < data.length; k++) {
|
|
if (this.media[j].id == data[k].id && this.media[j].selected) {
|
|
data[k].selected = true;
|
|
}
|
|
}
|
|
}
|
|
this.media = data;
|
|
this.populateMedia();
|
|
document.querySelector('.media-library-modal .upload-media').innerHTML = 'Upload';
|
|
});
|
|
};
|
|
input.click();
|
|
};
|
|
document.querySelector('.media-library-modal .search-media').onchange = () => {
|
|
document.querySelector('.media-library-modal .media .details').innerHTML = `<p>No media selected.</p>`;
|
|
this.populateMedia(this.media.filter(media => {
|
|
return media.title.toLowerCase().includes(document.querySelector('.media-library-modal .search-media').value.toLowerCase())
|
|
|| media.caption.toLowerCase().includes(document.querySelector('.media-library-modal .search-media').value.toLowerCase());
|
|
}));
|
|
this.getAllSelectedMedia().forEach(media => {
|
|
if (media.selected) this.selectMedia(media.id);
|
|
});
|
|
};
|
|
},
|
|
onClose: function(event) {
|
|
if (options.onSave && event && event.button && event.button.classList.contains('save')) options.onSave(this.getAllSelectedMedia());
|
|
if (options.onClose) options.onClose();
|
|
}
|
|
});
|
|
const openOptionsModal = options => modal({
|
|
state: 'open',
|
|
selectedOptionContainer: null,
|
|
selectedOptionType: null,
|
|
modalTemplate: function() {
|
|
return `
|
|
<div class="dialog medium options-modal">
|
|
<div class="content">
|
|
<h3 class="heading">Add Option<span class="dialog-close">×</span></h3>
|
|
<div class="body">
|
|
<div class="option-header">
|
|
<input type="text" class="option-title" placeholder="Title" data-default-title="">
|
|
<select class="option-type">
|
|
<option value="" disabled selected>-- select type --</option>
|
|
<option value="0">Select</option>
|
|
<option value="1">Radio</option>
|
|
<option value="2">Checkbox</option>
|
|
<option value="3">Text</option>
|
|
<option value="4">Date & Time</option>
|
|
</select>
|
|
<label>
|
|
<input type="checkbox" class="option-required">Required
|
|
</label>
|
|
</div>
|
|
${this.optionTemplate('select')}
|
|
${this.optionTemplate('radio')}
|
|
${this.optionTemplate('checkbox')}
|
|
${this.optionTemplate('text')}
|
|
${this.optionTemplate('datetime')}
|
|
</div>
|
|
<div class="footer pad-5">
|
|
<a href="#" class="btn dialog-close save">${options.buttonText ? options.buttonText : 'Save'}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
optionTemplate: function(type) {
|
|
return `
|
|
<div class="option-content" data-type="${type}">
|
|
<div class="table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
${type == 'text' || type == 'datetime' ? '<td>Default Value</td>' : '<td>Name</td>'}
|
|
${type == 'text' || type == 'datetime' ? '' : '<td>Quantity</td>'}
|
|
<td>Price</td>
|
|
<td>Weight</td>
|
|
${type == 'text' || type == 'datetime' ? '' : '<td></td>'}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.optionValueTemplate(type)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
${type == 'text' || type == 'datetime' ? '' : '<a href="#" class="add-option-value-btn"><i class="fa-solid fa-plus"></i>Add Option Value</a>'}
|
|
</div>
|
|
`;
|
|
},
|
|
optionValueTemplate: function(type, option) {
|
|
if (type == 'text' || type == 'datetime') {
|
|
return `
|
|
<tr class="option-value">
|
|
<td>
|
|
${type == 'text' ? '<input type="text" placeholder="Value" class="name" value="' + (option ? option.name : '') + '">' : '<input type="datetime-local" class="name" value="' + (option ? option.name : '') + '">'}
|
|
<input type="hidden" class="quantity" value="-1">
|
|
</td>
|
|
<td>
|
|
<div class="input-group">
|
|
<select class="modifier price-mod">
|
|
<option value="add"${option && option.price_modifier == 'add' ? ' selected' : ''}>+</option>
|
|
<option value="subtract"${option && option.price_modifier == 'subtract' ? ' selected' : ''}>-</option>
|
|
</select>
|
|
<input type="number" class="price" placeholder="Price" min="0" step=".01" value="${option ? option.price : ''}">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="input-group">
|
|
<select class="modifier weight-mod">
|
|
<option value="add"${option && option.weight_modifier == 'add' ? ' selected' : ''}>+</option>
|
|
<option value="subtract"${option && option.weight_modifier == 'subtract' ? ' selected' : ''}>-</option>
|
|
</select>
|
|
<input type="number" class="weight" placeholder="Weight" min="0" value="${option ? option.weight : ''}">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
} else {
|
|
return `
|
|
<tr class="option-value">
|
|
<td><input type="text" placeholder="Name" class="name" value="${option ? option.name : ''}"></td>
|
|
<td><input type="number" placeholder="Quantity" class="quantity" title="-1 = unlimited" value="${option ? option.quantity : ''}"></td>
|
|
<td>
|
|
<div class="input-group">
|
|
<select class="modifier price-mod">
|
|
<option value="add"${option && option.price_modifier == 'add' ? ' selected' : ''}>+</option>
|
|
<option value="subtract"${option && option.price_modifier == 'subtract' ? ' selected' : ''}>-</option>
|
|
</select>
|
|
<input type="number" class="price" placeholder="Price" min="0" step=".01" value="${option ? option.price : ''}">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="input-group">
|
|
<select class="modifier weight-mod">
|
|
<option value="add"${option && option.weight_modifier == 'add' ? ' selected' : ''}>+</option>
|
|
<option value="subtract"${option && option.weight_modifier == 'subtract' ? ' selected' : ''}>-</option>
|
|
</select>
|
|
<input type="number" class="weight" placeholder="Weight" min="0" value="${option ? option.weight : ''}">
|
|
</div>
|
|
</td>
|
|
<td><i class="fa-solid fa-xmark remove-option-value"></i></td>
|
|
</tr>
|
|
`;
|
|
}
|
|
},
|
|
onOpen: function() {
|
|
this.element.querySelector('.option-type').onchange = () => {
|
|
this.element.querySelectorAll('.option-content').forEach(element => element.style.display = 'none');
|
|
this.element.querySelectorAll('.option-content')[this.element.querySelector('.option-type').value].style.display = 'flex';
|
|
this.selectedOptionContainer = this.element.querySelectorAll('.option-content')[this.element.querySelector('.option-type').value];
|
|
this.selectedOptionType = this.selectedOptionContainer.dataset.type;
|
|
if (this.selectedOptionContainer.querySelector('.add-option-value-btn')) {
|
|
this.selectedOptionContainer.querySelector('.add-option-value-btn').onclick = event => {
|
|
event.preventDefault();
|
|
this.selectedOptionContainer.querySelector('tbody').insertAdjacentHTML('beforeend', this.optionValueTemplate());
|
|
this.element.querySelectorAll('.remove-option-value').forEach(element => element.onclick = () => element.closest('.option-value').remove());
|
|
};
|
|
}
|
|
};
|
|
if (options.options && options.options.length > 0) {
|
|
this.element.querySelector('.option-title').value = options.options[0].title;
|
|
this.element.querySelector('.option-title').dataset.defaultTitle = options.options[0].title;
|
|
this.element.querySelector('.option-required').checked = parseInt(options.options[0].required) ? true : false;
|
|
this.element.querySelector('.option-type').value = options.options[0].type.replace('select', '0').replace('radio', '1').replace('checkbox', '2').replace('text', '3').replace('datetime', '4');
|
|
this.element.querySelector('.option-type').onchange();
|
|
this.selectedOptionContainer.querySelector('tbody').innerHTML = '';
|
|
options.options.forEach(option => {
|
|
this.selectedOptionContainer.querySelector('tbody').insertAdjacentHTML('beforeend', this.optionValueTemplate(option.type, option));
|
|
});
|
|
this.element.querySelectorAll('.remove-option-value').forEach(element => element.onclick = () => element.closest('.option-value').remove());
|
|
}
|
|
},
|
|
onClose: function(event) {
|
|
if (options.onSave && event && event.button && event.button.classList.contains('save') && this.selectedOptionType != null) {
|
|
if (!this.element.querySelector('.option-title').value) {
|
|
this.element.querySelector('.option-title').setCustomValidity('Please enter the option title!');
|
|
this.element.querySelector('.option-title').reportValidity();
|
|
return false;
|
|
}
|
|
if (options.reservedTitles.includes(this.element.querySelector('.option-title').value.toLowerCase()) && this.element.querySelector('.option-title').value.toLowerCase() != this.element.querySelector('.option-title').dataset.defaultTitle.toLowerCase()) {
|
|
this.element.querySelector('.option-title').setCustomValidity('Title already exists!');
|
|
this.element.querySelector('.option-title').reportValidity();
|
|
return false;
|
|
}
|
|
let productOptions = [];
|
|
this.selectedOptionContainer.querySelectorAll('.option-value').forEach(optionValue => {
|
|
productOptions.push({
|
|
title: this.element.querySelector('.option-title').value,
|
|
name: optionValue.querySelector('.name').value,
|
|
quantity: optionValue.querySelector('.quantity').value,
|
|
price: optionValue.querySelector('.price').value,
|
|
price_modifier: optionValue.querySelector('.price-mod').value,
|
|
weight: optionValue.querySelector('.weight').value,
|
|
weight_modifier: optionValue.querySelector('.weight-mod').value,
|
|
type: this.selectedOptionType,
|
|
required: this.element.querySelector('.option-required').checked ? 1 : 0
|
|
});
|
|
});
|
|
options.onSave(productOptions);
|
|
}
|
|
}
|
|
});
|
|
const initProduct = () => {
|
|
let productMediaHandler = () => {
|
|
document.querySelectorAll('.media-position i').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
let mediaElement = element.closest('.product-media');
|
|
if (element.classList.contains('move-up') && mediaElement.previousElementSibling) {
|
|
mediaElement.parentNode.insertBefore(mediaElement, mediaElement.previousElementSibling);
|
|
}
|
|
if (element.classList.contains('move-down') && mediaElement.nextElementSibling) {
|
|
mediaElement.parentNode.insertBefore(mediaElement.nextElementSibling, mediaElement);
|
|
}
|
|
if (element.classList.contains('media-delete') && confirm('Are you sure you want to delete this media?')) {
|
|
mediaElement.remove();
|
|
}
|
|
document.querySelectorAll('.product-media').forEach((element, index) => {
|
|
element.querySelector('.media-index').innerHTML = index+1;
|
|
element.querySelector('.input-media-position').value = index+1;
|
|
});
|
|
});
|
|
};
|
|
productMediaHandler();
|
|
document.querySelector('.open-media-library-modal').onclick = event => {
|
|
event.preventDefault();
|
|
openMediaLibrary({
|
|
multiSelect: true,
|
|
buttonText: 'Add',
|
|
onSave: function(media) {
|
|
if (media && document.querySelector('.no-images-msg')) {
|
|
document.querySelector('.no-images-msg').remove();
|
|
}
|
|
media.forEach(m => {
|
|
let index = document.querySelectorAll('.product-media').length;
|
|
document.querySelector('.product-media-container').insertAdjacentHTML('beforeend', `
|
|
<div class="product-media">
|
|
<span class="media-index responsive-hidden">${index+1}</span>
|
|
<a class="media-img" href="../${m.full_path}" target="_blank">
|
|
<img src="../${m.full_path}">
|
|
</a>
|
|
<div class="media-text">
|
|
<h3 class="responsive-hidden">${m.title}</h3>
|
|
<p class="responsive-hidden">${m.caption}</p>
|
|
</div>
|
|
<div class="media-position">
|
|
<i class="fas fa-times media-delete"></i>
|
|
<i class="fas fa-arrow-up move-up"></i>
|
|
<i class="fas fa-arrow-down move-down"></i>
|
|
</div>
|
|
<input type="hidden" class="input-media-id" name="media[]" value="${m.id}">
|
|
<input type="hidden" class="input-media-product-id" name="media_product_id[]" value="0">
|
|
<input type="hidden" class="input-media-position" name="media_position[]" value="${index+1}">
|
|
</div>
|
|
`);
|
|
});
|
|
productMediaHandler();
|
|
}
|
|
});
|
|
};
|
|
let productOptionsHandler = () => {
|
|
document.querySelectorAll('.option-position i').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
let optionElement = element.closest('.product-option');
|
|
if (element.classList.contains('move-up') && optionElement.previousElementSibling) {
|
|
optionElement.parentNode.insertBefore(optionElement, optionElement.previousElementSibling);
|
|
}
|
|
if (element.classList.contains('move-down') && optionElement.nextElementSibling) {
|
|
optionElement.parentNode.insertBefore(optionElement.nextElementSibling, optionElement);
|
|
}
|
|
if (element.classList.contains('option-delete') && confirm('Are you sure you want to delete this option?')) {
|
|
optionElement.remove();
|
|
}
|
|
if (element.classList.contains('option-edit')) {
|
|
let options = [];
|
|
optionElement.querySelectorAll('.input-option-value').forEach(optionValue => {
|
|
options.push({
|
|
title: optionValue.querySelector('.input-option-title').value,
|
|
name: optionValue.querySelector('.input-option-name').value,
|
|
quantity: optionValue.querySelector('.input-option-quantity').value,
|
|
price: optionValue.querySelector('.input-option-price').value,
|
|
price_modifier: optionValue.querySelector('.input-option-price-modifier').value,
|
|
weight: optionValue.querySelector('.input-option-weight').value,
|
|
weight_modifier: optionValue.querySelector('.input-option-weight-modifier').value,
|
|
type: optionValue.querySelector('.input-option-type').value,
|
|
required: optionValue.querySelector('.input-option-required').value
|
|
});
|
|
});
|
|
openOptionsModal({
|
|
buttonText: 'Save',
|
|
reservedTitles: [...document.querySelectorAll('.product-option')].map(option => option.querySelector('.input-option-title').value.toLowerCase()),
|
|
options: options,
|
|
onSave: function(options) {
|
|
if (options.length > 0) {
|
|
let optionsHtml = '';
|
|
let optionsValuesHtml = '';
|
|
options.forEach(option => {
|
|
optionsHtml += `
|
|
<div class="input-option-value">
|
|
<input type="hidden" class="input-option-title" name="option_title[]" value="${option.title}">
|
|
<input type="hidden" class="input-option-name" name="option_name[]" value="${option.name}">
|
|
<input type="hidden" class="input-option-quantity" name="option_quantity[]" value="${option.quantity}">
|
|
<input type="hidden" class="input-option-price" name="option_price[]" value="${option.price}">
|
|
<input type="hidden" class="input-option-price-modifier" name="option_price_modifier[]" value="${option.price_modifier}">
|
|
<input type="hidden" class="input-option-weight" name="option_weight[]" value="${option.weight}">
|
|
<input type="hidden" class="input-option-weight-modifier" name="option_weight_modifier[]" value="${option.weight_modifier}">
|
|
<input type="hidden" class="input-option-type" name="option_type[]" value="${option.type}">
|
|
<input type="hidden" class="input-option-required" name="option_required[]" value="${option.required}">
|
|
<input type="hidden" class="input-option-position" name="option_position[]" value="${optionElement.querySelector('.input-option-position').value}">
|
|
</div>
|
|
`;
|
|
optionsValuesHtml += option.name + ', ';
|
|
})
|
|
optionElement.innerHTML = `
|
|
<span class="option-index responsive-hidden">${optionElement.querySelector('.option-index').innerHTML}</span>
|
|
<div class="option-text">
|
|
<h3>${options[0].title} (${options[0].type})</h3>
|
|
<p>${optionsValuesHtml.replace(/, $/, '')}</p>
|
|
</div>
|
|
<div class="option-position">
|
|
<i class="fas fa-pen option-edit"></i>
|
|
<i class="fas fa-times option-delete"></i>
|
|
<i class="fas fa-arrow-up move-up"></i>
|
|
<i class="fas fa-arrow-down move-down"></i>
|
|
</div>
|
|
${optionsHtml}
|
|
`;
|
|
}
|
|
productOptionsHandler();
|
|
}
|
|
});
|
|
}
|
|
document.querySelectorAll('.product-option').forEach((element, index) => {
|
|
element.querySelector('.option-index').innerHTML = index+1;
|
|
element.querySelectorAll('.input-option-position').forEach(input => input.value = index+1);
|
|
});
|
|
});
|
|
};
|
|
productOptionsHandler();
|
|
document.querySelector('.open-options-modal').onclick = event => {
|
|
event.preventDefault();
|
|
openOptionsModal({
|
|
buttonText: 'Add',
|
|
reservedTitles: [...document.querySelectorAll('.product-option')].map(option => option.querySelector('.input-option-title').value.toLowerCase()),
|
|
onSave: function(options) {
|
|
if (options.length > 0) {
|
|
if (document.querySelector('.no-options-msg')) {
|
|
document.querySelector('.no-options-msg').remove();
|
|
}
|
|
let index = document.querySelectorAll('.product-option').length;
|
|
let optionsHtml = '';
|
|
let optionsValuesHtml = '';
|
|
options.forEach(option => {
|
|
optionsHtml += `
|
|
<div class="input-option-value">
|
|
<input type="hidden" class="input-option-title" name="option_title[]" value="${option.title}">
|
|
<input type="hidden" class="input-option-name" name="option_name[]" value="${option.name}">
|
|
<input type="hidden" class="input-option-quantity" name="option_quantity[]" value="${option.quantity}">
|
|
<input type="hidden" class="input-option-price" name="option_price[]" value="${option.price}">
|
|
<input type="hidden" class="input-option-price-modifier" name="option_price_modifier[]" value="${option.price_modifier}">
|
|
<input type="hidden" class="input-option-weight" name="option_weight[]" value="${option.weight}">
|
|
<input type="hidden" class="input-option-weight-modifier" name="option_weight_modifier[]" value="${option.weight_modifier}">
|
|
<input type="hidden" class="input-option-type" name="option_type[]" value="${option.type}">
|
|
<input type="hidden" class="input-option-required" name="option_required[]" value="${option.required}">
|
|
<input type="hidden" class="input-option-position" name="option_position[]" value="${index+1}">
|
|
</div>
|
|
`;
|
|
optionsValuesHtml += option.name + ', ';
|
|
})
|
|
document.querySelector('.product-options-container').insertAdjacentHTML('beforeend', `
|
|
<div class="product-option">
|
|
<span class="option-index responsive-hidden">${index+1}</span>
|
|
<div class="option-text">
|
|
<h3>${options[0].title} (${options[0].type})</h3>
|
|
<p>${optionsValuesHtml.replace(/, $/, '')}</p>
|
|
</div>
|
|
<div class="option-position">
|
|
<i class="fas fa-pen option-edit"></i>
|
|
<i class="fas fa-times option-delete"></i>
|
|
<i class="fas fa-arrow-up move-up"></i>
|
|
<i class="fas fa-arrow-down move-down"></i>
|
|
</div>
|
|
${optionsHtml}
|
|
</div>
|
|
`);
|
|
}
|
|
productOptionsHandler();
|
|
}
|
|
});
|
|
};
|
|
let productDownloadsHandler = () => {
|
|
document.querySelectorAll('.download-position i').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
let downloadElement = element.closest('.product-download');
|
|
if (element.classList.contains('move-up') && downloadElement.previousElementSibling) {
|
|
downloadElement.parentNode.insertBefore(downloadElement, downloadElement.previousElementSibling);
|
|
}
|
|
if (element.classList.contains('move-down') && downloadElement.nextElementSibling) {
|
|
downloadElement.parentNode.insertBefore(downloadElement.nextElementSibling, downloadElement);
|
|
}
|
|
if (element.classList.contains('download-delete') && confirm('Are you sure you want to delete this digital download?')) {
|
|
downloadElement.remove();
|
|
}
|
|
document.querySelectorAll('.product-download').forEach((element, index) => {
|
|
element.querySelector('.download-index').innerHTML = index+1;
|
|
element.querySelector('.input-download-position').value = index+1;
|
|
});
|
|
});
|
|
};
|
|
productDownloadsHandler();
|
|
document.querySelector('.open-downloads-modal').onclick = event => {
|
|
event.preventDefault();
|
|
modal({
|
|
state: 'open',
|
|
modalTemplate: function() {
|
|
return `
|
|
<div class="dialog downloads-modal">
|
|
<div class="content">
|
|
<h3 class="heading">Add Digital Download<span class="dialog-close">×</span></h3>
|
|
<div class="body">
|
|
<p>The file path must be relative to the shopping cart root directory.</p>
|
|
<label for="download-file-path">File Path</label>
|
|
<input id="download-file-path" type="text" class="download-file-path" placeholder="your_hidden_directory/your_file.zip" data-default-title="">
|
|
<p class="download-result"></p>
|
|
</div>
|
|
<div class="footer pad-5">
|
|
<a href="#" class="btn dialog-close save disabled">Add</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
onOpen: function() {
|
|
this.element.querySelector('.download-file-path').onchange = () => {
|
|
fetch('index.php?page=api&action=fileexists&path=' + this.element.querySelector('.download-file-path').value, { cache: 'no-store' }).then(response => response.json()).then(data => {
|
|
this.element.querySelector('.download-result').innerHTML = data.result;
|
|
if (data.result) {
|
|
this.element.querySelector('.save').classList.add('disabled');
|
|
} else {
|
|
this.element.querySelector('.save').classList.remove('disabled');
|
|
}
|
|
});
|
|
};
|
|
},
|
|
onClose: function(event) {
|
|
if (event && event.button && event.button.classList.contains('save')) {
|
|
if (event.button.classList.contains('disabled')) return false;
|
|
if (document.querySelector('.no-downloads-msg')) {
|
|
document.querySelector('.no-downloads-msg').remove();
|
|
}
|
|
let index = document.querySelectorAll('.product-download').length;
|
|
let file_path = document.querySelector('.download-file-path').value;
|
|
document.querySelector('.product-downloads-container').insertAdjacentHTML('beforeend', `
|
|
<div class="product-download">
|
|
<span class="download-index responsive-hidden">${index+1}</span>
|
|
<div class="download-text">
|
|
<h3 class="responsive-hidden">${file_path}</h3>
|
|
<p class="responsive-hidden"></p>
|
|
</div>
|
|
<div class="download-position">
|
|
<i class="fas fa-times download-delete"></i>
|
|
<i class="fas fa-arrow-up move-up"></i>
|
|
<i class="fas fa-arrow-down move-down"></i>
|
|
</div>
|
|
<input type="hidden" class="input-download-file-path" name="download_file_path[]" value="${file_path}">
|
|
<input type="hidden" class="input-download-position" name="download_position[]" value="${index+1}">
|
|
</div>
|
|
`);
|
|
productDownloadsHandler();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
};
|
|
const initMedia = () => {
|
|
let mediaHandler = () => {
|
|
document.querySelectorAll('.media .image').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
modal({
|
|
state: 'open',
|
|
modalTemplate: function() {
|
|
return `
|
|
<div class="dialog edit-media-modal">
|
|
<div class="content">
|
|
<h3 class="heading">Edit Media<span class="dialog-close">×</span></h3>
|
|
<div class="body">
|
|
<form class="media-details-form" method="post" action="index.php?page=api&action=media&id=${element.dataset.id}">
|
|
<a href="../${element.dataset.fullPath}" target="_blank"><img src="../${element.dataset.fullPath}" alt=""></a>
|
|
<label for="title">Title</label>
|
|
<input id="title" type="text" name="title" value="${element.dataset.title}">
|
|
<label for="caption">Caption</label>
|
|
<input id="caption" type="text" name="caption" value="${element.dataset.caption}">
|
|
<label for="full_path">Full Path</label>
|
|
<input id="full_path" type="text" name="full_path" value="${element.dataset.fullPath}">
|
|
<label for="date_uploaded">Date Uploaded</label>
|
|
<input id="date_uploaded" type="datetime-local" name="date_uploaded" value="${element.dataset.dateUploaded}">
|
|
</form>
|
|
</div>
|
|
<div class="footer pad-5">
|
|
<a href="#" class="btn dialog-close save mar-right-1">Save</a>
|
|
<a href="#" class="btn dialog-close delete red">Delete</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
onClose: function(event) {
|
|
let mediaDetailsForm = this.element.querySelector('.media-details-form');
|
|
if (event && event.button && event.button.classList.contains('save')) {
|
|
fetch(mediaDetailsForm.action, {
|
|
method: 'POST',
|
|
body: new FormData(mediaDetailsForm)
|
|
}).then(response => response.json()).then(data => {
|
|
data.forEach(media => {
|
|
if (media.id == element.dataset.id) {
|
|
element.dataset.title = media.title;
|
|
element.dataset.caption = media.caption;
|
|
element.dataset.fullPath = media.fullPath;
|
|
element.dataset.dateUploaded = media.dateUploaded;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if (event && event.button && event.button.classList.contains('delete')) {
|
|
fetch(mediaDetailsForm.action + '&delete=true').then(response => response.json()).then(() => element.remove());
|
|
}
|
|
}
|
|
});
|
|
});
|
|
};
|
|
mediaHandler();
|
|
document.querySelector('.upload').onclick = event => {
|
|
event.preventDefault();
|
|
let input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.multiple = 'multiple';
|
|
input.accept = 'image/*';
|
|
input.onchange = event => {
|
|
document.querySelector('.upload').innerHTML = '<div class="loader"></div>';
|
|
let total_files = event.target.files.length;
|
|
let form = new FormData();
|
|
for (let i = 0; i < total_files; i++) {
|
|
form.append('file_' + i, event.target.files[i]);
|
|
}
|
|
form.append('total_files', total_files);
|
|
fetch('index.php?page=api&action=media', {
|
|
method: 'POST',
|
|
body: form
|
|
}).then(response => response.json()).then(data => {
|
|
if (data) {
|
|
data.forEach((media, index) => {
|
|
if (index > total_files-1) return;
|
|
document.querySelector('.media').insertAdjacentHTML('afterbegin', `
|
|
<a href="#" class="image" data-id="${media.id}" data-title="${media.title}" data-caption="${media.caption}" data-date-uploaded="${media.date_uploaded.replace(' ', 'T')}" data-full-path="${media.full_path}">
|
|
<img src="../${media.full_path}" alt="${media.caption}" loading="lazy">
|
|
</a>
|
|
`);
|
|
});
|
|
}
|
|
document.querySelector('.upload').innerHTML = 'Upload';
|
|
mediaHandler();
|
|
});
|
|
};
|
|
input.click();
|
|
};
|
|
};
|
|
const initManageOrder = (products) => {
|
|
document.querySelector('.add-item').onclick = event => {
|
|
event.preventDefault();
|
|
document.querySelector('.manage-order-table tbody').insertAdjacentHTML('beforeend', `
|
|
<tr>
|
|
<td>
|
|
<input type="hidden" name="item_id[]" value="0">
|
|
<select name="item_product[]">
|
|
${products.map(product => '<option value="' + product.id + '">' + product.id + ' - ' + product.name + '</option>')}
|
|
</select>
|
|
</td>
|
|
<td><input name="item_price[]" type="number" placeholder="Price" step=".01"></td>
|
|
<td><input name="item_quantity[]" type="number" placeholder="Quantity"></td>
|
|
<td><input name="item_options[]" type="text" placeholder="Options"></td>
|
|
<td><i class="fa-solid fa-xmark delete-item"></i></td>
|
|
</tr>
|
|
`);
|
|
document.querySelectorAll('.delete-item').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
element.closest('tr').remove();
|
|
});
|
|
if (document.querySelector('.no-order-items-msg')) {
|
|
document.querySelector('.no-order-items-msg').remove();
|
|
}
|
|
};
|
|
document.querySelectorAll('.delete-item').forEach(element => element.onclick = event => {
|
|
event.preventDefault();
|
|
element.closest('tr').remove();
|
|
});
|
|
};
|
|
|
|
function generateTable() {
|
|
var data = document.getElementById("excel_data").value;
|
|
var rows = data.split("\n");
|
|
|
|
var group_list;
|
|
group_list = [];
|
|
group_list[0] = "<table>";
|
|
|
|
for(var y in rows) {
|
|
var cells = rows[y].split("\t");
|
|
group_list[0] += "<tr>";
|
|
for(var x in cells) {
|
|
group_list[0] += "<td>"+cells[x]+"</td>";
|
|
}
|
|
group_list[0] += "</tr>";
|
|
}
|
|
group_list[0] += "</table>";
|
|
console.log(group_list)
|
|
group_list.forEach(item => document.getElementById("excel_table").innerHTML += item);
|
|
|
|
}
|
|
|
|
function addField(id, name) {
|
|
var x = document.createElement("INPUT");
|
|
x.setAttribute("type", "text");
|
|
x.setAttribute("name", name);
|
|
x.setAttribute("required", "");
|
|
var td_new = document.getElementById(id);
|
|
td_new.parentNode.insertBefore(x, td_new.nextSibling);
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* Create a function to sort the given table.
|
|
*/
|
|
function sortTableFunction(table) {
|
|
return function(ev) {
|
|
if (ev.target.tagName.toLowerCase() == 'a') {
|
|
sortRows(table, siblingIndex(ev.target.parentNode));
|
|
ev.preventDefault();
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Get the index of a node relative to its siblings — the first (eldest) sibling
|
|
* has index 0, the next index 1, etc.
|
|
*/
|
|
function siblingIndex(node) {
|
|
var count = 0;
|
|
|
|
while (node = node.previousElementSibling) {
|
|
count++;
|
|
}
|
|
|
|
return count;
|
|
}
|
|
/**
|
|
* Inject hyperlinks, into the column headers of sortable tables, which sort
|
|
* the corresponding column when clicked.
|
|
*/
|
|
var tables = document.querySelectorAll("table.sortable"),
|
|
table,
|
|
thead,
|
|
headers,
|
|
i,
|
|
j;
|
|
|
|
for (i = 0; i < tables.length; i++) {
|
|
table = tables[i];
|
|
|
|
if (thead = table.querySelector("thead")) {
|
|
headers = thead.querySelectorAll("th");
|
|
|
|
for (j = 0; j < headers.length; j++) {
|
|
headers[j].innerHTML = "<a href=\'#\'>" + headers[j].innerText + "</a>";
|
|
}
|
|
|
|
thead.addEventListener("click", sortTableFunction(table));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sort the given table by the numbered column (0 is the first column, etc.)
|
|
*/
|
|
function sortRows(table, columnIndex) {
|
|
var rows = table.querySelectorAll("tbody tr"),
|
|
sel = "thead th:nth-child(" + (columnIndex + 1) + ")",
|
|
sel2 = "td:nth-child(" + (columnIndex + 1) + ")",
|
|
classList = table.querySelector(sel).classList,
|
|
values = [],
|
|
cls = "",
|
|
allNum = true,
|
|
val,
|
|
index,
|
|
node;
|
|
|
|
if (classList) {
|
|
if (classList.contains("date")) {
|
|
cls = "date";
|
|
} else if (classList.contains("number")) {
|
|
cls = "number";
|
|
}
|
|
}
|
|
|
|
for (index = 0; index < rows.length; index++) {
|
|
node = rows[index].querySelector(sel2);
|
|
val = node.innerText;
|
|
|
|
if (isNaN(val)) {
|
|
allNum = false;
|
|
} else {
|
|
val = parseFloat(val);
|
|
}
|
|
|
|
values.push({ value: val, row: rows[index] });
|
|
}
|
|
|
|
if (cls == "" && allNum) {
|
|
cls = "number";
|
|
}
|
|
|
|
if (cls == "number") {
|
|
values.sort(sortNumberVal);
|
|
values = values.reverse();
|
|
} else if (cls == "date") {
|
|
values.sort(sortDateVal);
|
|
} else {
|
|
values.sort(sortTextVal);
|
|
}
|
|
|
|
for (var idx = 0; idx < values.length; idx++) {
|
|
table.querySelector("tbody").appendChild(values[idx].row);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Compare two 'value objects' numerically
|
|
*/
|
|
function sortNumberVal(a, b) {
|
|
return sortNumber(a.value, b.value);
|
|
}
|
|
|
|
/**
|
|
* Numeric sort comparison
|
|
*/
|
|
function sortNumber(a, b) {
|
|
return a - b;
|
|
}
|
|
|
|
/**
|
|
* Compare two 'value objects' as dates
|
|
*/
|
|
function sortDateVal(a, b) {
|
|
var dateA = Date.parse(a.value),
|
|
dateB = Date.parse(b.value);
|
|
|
|
return sortNumber(dateA, dateB);
|
|
}
|
|
|
|
/**
|
|
* Compare two 'value objects' as simple text; case-insensitive
|
|
*/
|
|
function sortTextVal(a, b) {
|
|
var textA = (a.value + "").toUpperCase();
|
|
var textB = (b.value + "").toUpperCase();
|
|
|
|
if (textA < textB) {
|
|
return -1;
|
|
}
|
|
|
|
if (textA > textB) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
//------------------------------------------
|
|
// Print DIV
|
|
//------------------------------------------
|
|
function printDiv(div) {
|
|
var divContents = document.getElementById(div).innerHTML;
|
|
var printWindow = window.open('', '', 'height=600,width=800');
|
|
printWindow.document.write('<html><head><title>Print</title>');
|
|
printWindow.document.write('<style>');
|
|
printWindow.document.write('body { font-family: Arial, sans-serif; margin: 20px; }');
|
|
printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
|
|
printWindow.document.write('th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }');
|
|
printWindow.document.write('th { background-color: #f2f2f2; }');
|
|
printWindow.document.write('</style>');
|
|
printWindow.document.write('</head><body>');
|
|
printWindow.document.write(divContents);
|
|
printWindow.document.write('</body></html>');
|
|
printWindow.document.close();
|
|
printWindow.focus();
|
|
printWindow.print();
|
|
printWindow.close();
|
|
}
|
|
|
|
//------------------------------------------
|
|
// decodeVIN api
|
|
//------------------------------------------
|
|
function decodeVIN(){
|
|
|
|
var vin = document.getElementById("VIN").value;
|
|
var token = document.getElementById("token").innerHTML;
|
|
var action = '/v2/vin/'+vin;
|
|
var url = link+action;
|
|
|
|
var bearer = 'Bearer ' + token;
|
|
|
|
fetch(url, {
|
|
method: 'GET',
|
|
withCredentials: true,
|
|
credentials: 'include',
|
|
headers: {
|
|
'Authorization': bearer,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(vin_details=> {
|
|
console.log(vin_details);
|
|
document.getElementById("year").value = vin_details['year'];
|
|
|
|
var carbrands = document.getElementById("carbrands");
|
|
carbrands.options[carbrands.selectedIndex].value = vin_details['Manufacturer'];
|
|
carbrands.options[carbrands.selectedIndex].innerHTML = vin_details['Manufacturer'];
|
|
})
|
|
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
|
|
}
|
|
|
|
function toggleClosed(day, skipToggle = false) {
|
|
const checkbox = document.getElementById(`closed_${day}`);
|
|
const startInput = document.getElementById(`start_${day}`);
|
|
const endInput = document.getElementById(`end_${day}`);
|
|
|
|
if (checkbox.checked) {
|
|
// If closed, disable time inputs and set hidden field for null value
|
|
startInput.disabled = true;
|
|
endInput.disabled = true;
|
|
|
|
// Remove the time inputs from form submission
|
|
startInput.name = "";
|
|
endInput.name = "";
|
|
|
|
// Add a hidden field to explicitly set the day to null
|
|
if (!document.getElementById(`null_${day}`)) {
|
|
const hiddenField = document.createElement('input');
|
|
hiddenField.type = 'hidden';
|
|
hiddenField.id = `null_${day}`;
|
|
hiddenField.name = `opening_hours[${day}]`;
|
|
hiddenField.value = 'null';
|
|
checkbox.parentNode.appendChild(hiddenField);
|
|
}
|
|
} else {
|
|
// If open, enable time inputs
|
|
startInput.disabled = false;
|
|
endInput.disabled = false;
|
|
|
|
// Restore the time input names for form submission
|
|
startInput.name = `opening_hours[${day}][start]`;
|
|
endInput.name = `opening_hours[${day}][end]`;
|
|
|
|
// Remove the hidden null field if it exists
|
|
const hiddenField = document.getElementById(`null_${day}`);
|
|
if (hiddenField) {
|
|
hiddenField.parentNode.removeChild(hiddenField);
|
|
}
|
|
}
|
|
} |