267 lines
9.3 KiB
JavaScript
267 lines
9.3 KiB
JavaScript
var pagination_current = 1;
|
|
var pagination_end = 3;
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
let lists = await getShoppingLists()
|
|
await replenishShoppingListCards(lists)
|
|
await updatePaginationElement()
|
|
});
|
|
|
|
|
|
async function replenishShoppingListCards(lists) {
|
|
let shopping_list_lists = document.getElementById('shopping_list_lists')
|
|
shopping_list_lists.innerHTML = ""
|
|
console.log(lists)
|
|
for(let i=0; i < lists.length; i++){
|
|
console.log(lists[i])
|
|
let main_div = document.createElement('div')
|
|
main_div.setAttribute('class', 'uk-card uk-card-default uk-card-small uk-margin')
|
|
|
|
let badge_div = document.createElement('div')
|
|
badge_div.setAttribute('class', 'uk-card-badge uk-label')
|
|
badge_div.innerHTML = `${lists[i].sl_items.length} Lines`
|
|
|
|
let badge_div_dos = document.createElement('div')
|
|
badge_div_dos.setAttribute('class', 'uk-card-badge uk-label')
|
|
badge_div_dos.innerHTML = lists[i].sub_type
|
|
badge_div_dos.style = "margin-top: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:150px; text-align: right;"
|
|
|
|
let card_header_div = document.createElement('div')
|
|
card_header_div.setAttribute('class', 'uk-card-header')
|
|
card_header_div.style = "border: none;"
|
|
|
|
let header_grid_div = document.createElement('div')
|
|
header_grid_div.setAttribute('class', 'uk-flex-middle uk-grid uk-grid-small')
|
|
|
|
let title_div = document.createElement('div')
|
|
title_div.setAttribute('class', '')
|
|
title_div.innerHTML = `
|
|
<h3 class="my-card uk-card-title uk-margin-remove-bottom">${lists[i].name}</h3>
|
|
<p class="uk-text-meta uk-margin-remove-top"><time datetime="${lists[i].creation_date}">${lists[i].creation_date}</time></p>
|
|
`
|
|
|
|
header_grid_div.append(title_div)
|
|
card_header_div.append(badge_div, badge_div_dos, header_grid_div)
|
|
|
|
let body_div = document.createElement('div')
|
|
body_div.setAttribute('class', 'uk-card-body')
|
|
body_div.innerHTML = `<p>${lists[i].description}</p>`
|
|
body_div.style = 'border: none;'
|
|
|
|
let footer_div = document.createElement('div')
|
|
footer_div.setAttribute('class', 'uk-card-footer')
|
|
footer_div.style = 'height: 40px; border: none;'
|
|
|
|
//let editOp = document.createElement('a')
|
|
//editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
|
|
//editOp.innerHTML = '<span uk-icon="icon: pencil"></span> Edit'
|
|
//editOp.style = "margin-right: 10px;"
|
|
//editOp.href = `/shopping-lists/edit/${lists[i].list_uuid}`
|
|
|
|
let viewOp = document.createElement('a')
|
|
viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
|
|
viewOp.innerHTML = '<span uk-icon="icon: eye"></span> View'
|
|
viewOp.href = `/shopping-lists/view/${lists[i].list_uuid}`
|
|
//viewOp.style = "margin-right: 20px;"
|
|
|
|
let deleteOp = document.createElement('a')
|
|
deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
|
|
deleteOp.innerHTML = '<span uk-icon="icon: eye"></span> Delete'
|
|
deleteOp.onclick = async function(params) { await deleteList(lists[i].list_uuid)}
|
|
//viewOp.style = "margin-right: 20px;"
|
|
|
|
|
|
footer_div.append(viewOp, deleteOp)
|
|
|
|
main_div.append(card_header_div, body_div, footer_div)
|
|
|
|
shopping_list_lists.append(main_div)
|
|
|
|
}
|
|
}
|
|
|
|
async function openAddListModal() {
|
|
UIkit.modal(document.getElementById('addListModal')).show();
|
|
}
|
|
|
|
var listLimit = 5;
|
|
async function getShoppingLists(){
|
|
console.log(pagination_current)
|
|
const url = new URL('/shopping-lists/api/getLists', window.location.origin);
|
|
url.searchParams.append('page', pagination_current);
|
|
url.searchParams.append('limit', listLimit);
|
|
response = await fetch(url)
|
|
data = await response.json()
|
|
pagination_end = data.end
|
|
console.log(pagination_end)
|
|
return data.shopping_lists
|
|
};
|
|
|
|
async function addList() {
|
|
let list_name = document.getElementById('addListName').value
|
|
let list_description = document.getElementById('addListDescription').value
|
|
let list_type = document.getElementById('list_type').value
|
|
|
|
const response = await fetch(`/shopping-lists/api/addList`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
list_name: list_name,
|
|
list_description: list_description,
|
|
list_type: list_type
|
|
}),
|
|
});
|
|
data = await response.json();
|
|
transaction_status = "success"
|
|
if (data.error){
|
|
transaction_status = "danger"
|
|
}
|
|
|
|
UIkit.notification({
|
|
message: data.message,
|
|
status: transaction_status,
|
|
pos: 'top-right',
|
|
timeout: 5000
|
|
});
|
|
}
|
|
|
|
async function deleteList(shopping_list_uuid) {
|
|
const response = await fetch(`/shopping-lists/api/deleteList`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
shopping_list_uuid: shopping_list_uuid
|
|
}),
|
|
});
|
|
data = await response.json();
|
|
transaction_status = "success"
|
|
if (data.error){
|
|
transaction_status = "danger"
|
|
}
|
|
|
|
UIkit.notification({
|
|
message: data.message,
|
|
status: transaction_status,
|
|
pos: 'top-right',
|
|
timeout: 5000
|
|
});
|
|
|
|
let lists = await getShoppingLists()
|
|
await replenishShoppingListCards(lists)
|
|
await updatePaginationElement()
|
|
|
|
}
|
|
|
|
async function changeSite(site){
|
|
const response = await fetch(`/changeSite`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
site: site,
|
|
}),
|
|
});
|
|
data = await response.json();
|
|
transaction_status = "success"
|
|
if (data.error){
|
|
transaction_status = "danger"
|
|
}
|
|
|
|
UIkit.notification({
|
|
message: data.message,
|
|
status: transaction_status,
|
|
pos: 'top-right',
|
|
timeout: 5000
|
|
});
|
|
location.reload(true)
|
|
}
|
|
|
|
async function updatePaginationElement() {
|
|
let paginationElement = document.getElementById("paginationElement");
|
|
paginationElement.innerHTML = "";
|
|
// previous
|
|
let previousElement = document.createElement('li')
|
|
if(pagination_current<=1){
|
|
previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
|
|
previousElement.classList.add('uk-disabled');
|
|
}else {
|
|
previousElement.innerHTML = `<a onclick="setPage(${pagination_current-1})"><span uk-pagination-previous></span></a>`;
|
|
}
|
|
paginationElement.append(previousElement)
|
|
|
|
//first
|
|
let firstElement = document.createElement('li')
|
|
if(pagination_current<=1){
|
|
firstElement.innerHTML = `<a>1</a>`;
|
|
firstElement.classList.add('uk-disabled');
|
|
}else {
|
|
firstElement.innerHTML = `<a onclick="setPage(1)">1</a>`;
|
|
}
|
|
paginationElement.append(firstElement)
|
|
|
|
// ...
|
|
if(pagination_current-2>1){
|
|
let firstDotElement = document.createElement('li')
|
|
firstDotElement.classList.add('uk-disabled')
|
|
firstDotElement.innerHTML = `<span>…</span>`;
|
|
paginationElement.append(firstDotElement)
|
|
}
|
|
// last
|
|
if(pagination_current-2>0){
|
|
let lastElement = document.createElement('li')
|
|
lastElement.innerHTML = `<a onclick=setPage(${pagination_current-1})>${pagination_current-1}</a>`
|
|
paginationElement.append(lastElement)
|
|
}
|
|
// current
|
|
if(pagination_current!=1 && pagination_current != pagination_end){
|
|
let currentElement = document.createElement('li')
|
|
currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${pagination_current}</strong></span></li>`
|
|
paginationElement.append(currentElement)
|
|
}
|
|
// next
|
|
if(pagination_current+2<pagination_end+1){
|
|
let nextElement = document.createElement('li')
|
|
nextElement.innerHTML = `<a onclick=setPage(${pagination_current+1})>${pagination_current+1}</a>`
|
|
paginationElement.append(nextElement)
|
|
}
|
|
// ...
|
|
if(pagination_current+2<=pagination_end){
|
|
let secondDotElement = document.createElement('li')
|
|
secondDotElement.classList.add('uk-disabled')
|
|
secondDotElement.innerHTML = `<span>…</span>`;
|
|
paginationElement.append(secondDotElement)
|
|
}
|
|
//end
|
|
let endElement = document.createElement('li')
|
|
if(pagination_current>=pagination_end){
|
|
endElement.innerHTML = `<a>${pagination_end}</a>`;
|
|
endElement.classList.add('uk-disabled');
|
|
}else {
|
|
endElement.innerHTML = `<a onclick="setPage(${pagination_end})">${pagination_end}</a>`;
|
|
}
|
|
paginationElement.append(endElement)
|
|
//next button
|
|
let nextElement = document.createElement('li')
|
|
if(pagination_current>=pagination_end){
|
|
nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
|
|
nextElement.classList.add('uk-disabled');
|
|
}else {
|
|
nextElement.innerHTML = `<a onclick="setPage(${pagination_current+1})"><span uk-pagination-next></span></a>`;
|
|
}
|
|
paginationElement.append(nextElement)
|
|
}
|
|
|
|
async function setPage(pageNumber){
|
|
pagination_current = pageNumber;
|
|
let lists = await getShoppingLists()
|
|
await replenishShoppingListCards(lists)
|
|
await updatePaginationElement()
|
|
}
|