564 lines
18 KiB
JavaScript
564 lines
18 KiB
JavaScript
|
let navBar = new Vue({
|
||
|
|
el: '#navBar',
|
||
|
|
data: {
|
||
|
|
visible: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const carritoUsuario = [];
|
||
|
|
|
||
|
|
window.addEventListener("hashchange", () => {
|
||
|
|
render(decodeURI(window.location.hash));
|
||
|
|
});
|
||
|
|
|
||
|
|
const render = url => {
|
||
|
|
switch (url) {
|
||
|
|
case "#registro":
|
||
|
|
abrirRegistro();
|
||
|
|
break;
|
||
|
|
case "#iniciar-sesion":
|
||
|
|
abrirInicioSesion();
|
||
|
|
break;
|
||
|
|
case "#usuarios/":
|
||
|
|
abrirUsuarios();
|
||
|
|
break;
|
||
|
|
case "#usuarios/mi-cuenta":
|
||
|
|
abrirMiCuenta();
|
||
|
|
break;
|
||
|
|
case "#usuarios/pagos":
|
||
|
|
abrirCarrito();
|
||
|
|
break;
|
||
|
|
case "#staff/":
|
||
|
|
abrirStaff();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
abrirPagPrin();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const sectionP = document.getElementById("sectionP");
|
||
|
|
const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
|
||
|
|
const formInicioRegistro = document.getElementById("inicio_registro");
|
||
|
|
const sectionS = document.getElementById("sectionS");
|
||
|
|
const sectionCarrito = document.getElementById("sectionCarrito");
|
||
|
|
|
||
|
|
const manipularTopBar = status => {
|
||
|
|
switch (status) {
|
||
|
|
case 1:
|
||
|
|
cambiarProgreso(25);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
cancelarTransicion();
|
||
|
|
cambiarProgreso(50);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
cancelarTransicion();
|
||
|
|
cambiarProgreso(75);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
cancelarTransicion();
|
||
|
|
reiniciarTopBar();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirUsuarios = () => {
|
||
|
|
|
||
|
|
const crearPlatos = () => {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
const data = JSON.parse(ajax.responseText);
|
||
|
|
const divR = document.getElementById("productos");
|
||
|
|
|
||
|
|
let contenedor = document.createElement("div");
|
||
|
|
contenedor.className = "row";
|
||
|
|
let contador = 0;
|
||
|
|
for (const itemI in data) {
|
||
|
|
if (data.hasOwnProperty(itemI)) {
|
||
|
|
const item = data[itemI];
|
||
|
|
contador++;
|
||
|
|
if (contador >= 4) {
|
||
|
|
divR.appendChild(contenedor);
|
||
|
|
divR.appendChild(document.createElement("br"));
|
||
|
|
contenedor = document.createElement("div");
|
||
|
|
contenedor.className = "row";
|
||
|
|
contador = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
const itemDiv = document.createElement("div");
|
||
|
|
itemDiv.className = "col-4 caja plato";
|
||
|
|
|
||
|
|
const img = document.createElement("img");
|
||
|
|
img.className = "image";
|
||
|
|
img.src = item["imgUrl"];
|
||
|
|
itemDiv.appendChild(img);
|
||
|
|
|
||
|
|
const nombre = document.createElement("div");
|
||
|
|
nombre.className = "plato--Titulo";
|
||
|
|
nombre.innerText = item["nombre"];
|
||
|
|
itemDiv.appendChild(nombre);
|
||
|
|
|
||
|
|
itemDiv.appendChild(document.createElement("br"));
|
||
|
|
|
||
|
|
const descripcion = document.createElement("div");
|
||
|
|
descripcion.className = "plato--Descripcion";
|
||
|
|
descripcion.innerText = item["descripcion"];
|
||
|
|
itemDiv.appendChild(descripcion);
|
||
|
|
itemDiv.appendChild(document.createElement("br"));
|
||
|
|
|
||
|
|
const precioUnitario = document.createElement("div");
|
||
|
|
precioUnitario.className = "plato--Precio";
|
||
|
|
precioUnitario.innerText = `${item["precio"]}`;
|
||
|
|
itemDiv.appendChild(precioUnitario);
|
||
|
|
|
||
|
|
const cantidad = document.createElement("div");
|
||
|
|
cantidad.className = "plato--Cantidad";
|
||
|
|
cantidad.appendChild(document.createTextNode("Cantidad: "));
|
||
|
|
const unidades = document.createElement("span");
|
||
|
|
const botonMenos = document.createElement("i");
|
||
|
|
botonMenos.className = "material-icons plato--Cantidad--Icon";
|
||
|
|
botonMenos.innerText = "remove";
|
||
|
|
botonMenos.addEventListener("click",() => {
|
||
|
|
const valorActual = parseInt(unidades.innerText);
|
||
|
|
if (valorActual > 1) {
|
||
|
|
unidades.innerText = valorActual-1;
|
||
|
|
} else {
|
||
|
|
unidades.innerText = "1";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
cantidad.appendChild(botonMenos);
|
||
|
|
unidades.innerText = "1";
|
||
|
|
cantidad.appendChild(unidades);
|
||
|
|
const botonMas = document.createElement("i");
|
||
|
|
botonMas.className = "material-icons plato--Cantidad--Icon";
|
||
|
|
botonMas.innerText = "add";
|
||
|
|
botonMas.addEventListener("click",() => {
|
||
|
|
const valorActual = parseInt(unidades.innerText);
|
||
|
|
if (valorActual > 0) {
|
||
|
|
unidades.innerText = valorActual+1;
|
||
|
|
} else {
|
||
|
|
unidades.innerText = "1";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
cantidad.appendChild(botonMas);
|
||
|
|
|
||
|
|
itemDiv.appendChild(cantidad);
|
||
|
|
itemDiv.appendChild(document.createElement("br"));
|
||
|
|
|
||
|
|
const botonAddCart = document.createElement("button");
|
||
|
|
botonAddCart.className = "botonAddCart";
|
||
|
|
botonAddCart.addEventListener("click",() => {
|
||
|
|
const cantidad = parseInt(unidades.innerText);
|
||
|
|
if (cantidad > 0) {
|
||
|
|
const item = data[itemI];
|
||
|
|
item["cantidad"] = cantidad;
|
||
|
|
|
||
|
|
// carritoUsuario[itemI] = item;
|
||
|
|
|
||
|
|
carritoUsuario.push(item);
|
||
|
|
console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
|
||
|
|
window.location.replace("./#usuarios/pagos");
|
||
|
|
} else {
|
||
|
|
alert("");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
|
||
|
|
itemDiv.appendChild(botonAddCart);
|
||
|
|
|
||
|
|
contenedor.appendChild(itemDiv);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
divR.appendChild(contenedor);
|
||
|
|
|
||
|
|
resolve();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./usuarios/platos.json", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(formInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
abrirElemF(sectionS, () => {
|
||
|
|
sectionS.innerHTML = ajax.responseText;
|
||
|
|
crearPlatos();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./usuarios/index.php", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirMiCuenta = () => {
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(formInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
abrirElemF(sectionS, () => {
|
||
|
|
sectionS.innerHTML = ajax.responseText;
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./usuarios/mi-cuenta.php", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirCarrito = () => {
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(formInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionS);
|
||
|
|
|
||
|
|
/* Metodo antiguo
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
abrirElemF(sectionCarrito, () => {
|
||
|
|
sectionCarrito.innerHTML = ajax.responseText;
|
||
|
|
crearCarrito();
|
||
|
|
});
|
||
|
|
|
||
|
|
sectionCarrito.setAttribute("vacio","false");
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./usuarios/pagos.php", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Metodo con Vue */
|
||
|
|
abrirElemF(sectionCarrito);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirStaff = () => {
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(formInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
abrirElemF(sectionS, () => {
|
||
|
|
sectionS.innerHTML = ajax.responseText;
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./staff/", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirInicioSesion = () => {
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
const elem = document.getElementById("inicio_registro");
|
||
|
|
abrirElemF(elem, () => {
|
||
|
|
elem.innerHTML = ajax.responseText
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./iniciar-sesion.php", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirRegistro = () => {
|
||
|
|
const ajax = new XMLHttpRequest();
|
||
|
|
|
||
|
|
reiniciarTopBar();
|
||
|
|
|
||
|
|
cerrarElemF(contenedorInicioRegistro);
|
||
|
|
cerrarElemF(sectionP);
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
|
||
|
|
ajax.onreadystatechange = () => {
|
||
|
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||
|
|
|
||
|
|
cambiarProgreso(100).then(ocultarTopBar);
|
||
|
|
|
||
|
|
const elem = document.getElementById("inicio_registro");
|
||
|
|
abrirElemF(elem, () => {
|
||
|
|
elem.innerHTML = ajax.responseText
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
manipularTopBar(ajax.readyState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ajax.open("POST", "./registro.php", true);
|
||
|
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
|
|
ajax.send();
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirPagPrin = () => {
|
||
|
|
const inicio_registro = document.getElementById("inicio_registro");
|
||
|
|
cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
|
||
|
|
cerrarElemF(sectionS, () => sectionS.innerHTML = "");
|
||
|
|
cerrarElemF(sectionCarrito);
|
||
|
|
abrirElemF(contenedorInicioRegistro);
|
||
|
|
abrirElemF(sectionP);
|
||
|
|
};
|
||
|
|
|
||
|
|
/* Height Transition by CSS Tricks. Returns a Promise */
|
||
|
|
const collapseSection = element => {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
|
||
|
|
// get the height of the element's inner content, regardless of its actual size
|
||
|
|
let sectionHeight = element.scrollHeight;
|
||
|
|
|
||
|
|
// temporarily disable all css transitions
|
||
|
|
let elementTransition = element.style.transition;
|
||
|
|
element.style.transition = '';
|
||
|
|
|
||
|
|
// on the next frame (as soon as the previous style change has taken effect),
|
||
|
|
// explicitly set the element's height to its current pixel height, so we
|
||
|
|
// aren't transitioning out of 'auto'
|
||
|
|
|
||
|
|
|
||
|
|
requestAnimationFrame(function () {
|
||
|
|
element.style.height = sectionHeight + 'px';
|
||
|
|
element.style.transition = elementTransition;
|
||
|
|
|
||
|
|
// on the next frame (as soon as the previous style change has taken effect),
|
||
|
|
// have the element transition to height: 0
|
||
|
|
requestAnimationFrame(function () {
|
||
|
|
element.style.height = 0 + 'px';
|
||
|
|
setTimeout(() => {
|
||
|
|
resolve("Termine de ocultar we v':");
|
||
|
|
}, 160);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// mark the section as "currently collapsed"
|
||
|
|
element.setAttribute('data-collapsed', 'true');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const expandSection = element => {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
// get the height of the element's inner content, regardless of its actual size
|
||
|
|
let sectionHeight = element.scrollHeight;
|
||
|
|
|
||
|
|
// have the element transition to the height of its inner content
|
||
|
|
element.style.height = sectionHeight + 'px';
|
||
|
|
|
||
|
|
// when the next css transition finishes (which should be the one we just triggered)
|
||
|
|
element.addEventListener('transitionend', function (e) {
|
||
|
|
// remove this event listener so it only gets triggered once
|
||
|
|
element.removeEventListener('transitionend', arguments.callee);
|
||
|
|
|
||
|
|
// remove "height" from the element's inline styles, so it can return to its initial value
|
||
|
|
element.style.height = null;
|
||
|
|
setTimeout(() => {
|
||
|
|
resolve("Termine de ampliar we v':");
|
||
|
|
}, 0);
|
||
|
|
});
|
||
|
|
|
||
|
|
// mark the section as "currently not collapsed"
|
||
|
|
element.setAttribute('data-collapsed', 'false');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const abrirElemF = (element, midF, postF) => {
|
||
|
|
if (element.getAttribute("data-collapsed") === "true") {
|
||
|
|
if (midF !== undefined)
|
||
|
|
midF();
|
||
|
|
expandSection(element).then(() => {
|
||
|
|
if (postF !== undefined)
|
||
|
|
postF();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
collapseSection(element).then(() => {
|
||
|
|
if (midF !== undefined)
|
||
|
|
midF();
|
||
|
|
expandSection(element).then(() => {
|
||
|
|
if (postF !== undefined)
|
||
|
|
postF();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const cerrarElemF = (element, postF) => {
|
||
|
|
if (element.getAttribute("data-collapsed") === "false") {
|
||
|
|
collapseSection(element).then(() => {
|
||
|
|
if (postF !== undefined)
|
||
|
|
postF();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
render(decodeURI(window.location.hash));
|
||
|
|
|
||
|
|
|
||
|
|
const carrito = new Vue({
|
||
|
|
el: "#carrito",
|
||
|
|
data: {
|
||
|
|
item: carritoUsuario,
|
||
|
|
descuento: 0
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
cantidadItems: function () {
|
||
|
|
let items = 0;
|
||
|
|
for (const i in this.item)
|
||
|
|
items++;
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
subTotal: function () {
|
||
|
|
let subT = 0;
|
||
|
|
for (const itemI in this.item ) {
|
||
|
|
if (this.item.hasOwnProperty(itemI)){
|
||
|
|
const item = this.item[itemI];
|
||
|
|
subT += (item["precio"] * item["cantidad"]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return subT;
|
||
|
|
},
|
||
|
|
total: function () {
|
||
|
|
return this.subTotal - this.descuento;
|
||
|
|
},
|
||
|
|
noEstaVacio: function () {
|
||
|
|
for (const i in this.item) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
restarCantidad: function (elem) {
|
||
|
|
const cantidad = parseInt(elem.cantidad);
|
||
|
|
if (cantidad > 0)
|
||
|
|
elem.cantidad = cantidad -1;
|
||
|
|
},
|
||
|
|
aumentarCantidad: function (elem) {
|
||
|
|
const cantidad = parseInt(elem.cantidad);
|
||
|
|
if (cantidad >= 0)
|
||
|
|
elem.cantidad = cantidad+1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* Metodo con Antiguo
|
||
|
|
const crearCarrito = () => {
|
||
|
|
carrito = new Vue({
|
||
|
|
el: "#carrito",
|
||
|
|
data: {
|
||
|
|
item: carritoUsuario,
|
||
|
|
descuento: 0
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
cantidadItems: function () {
|
||
|
|
let items = 0;
|
||
|
|
for (const i in this.item)
|
||
|
|
items++;
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
subTotal: function () {
|
||
|
|
let subT = 0;
|
||
|
|
for (const itemI in this.item ) {
|
||
|
|
if (this.item.hasOwnProperty(itemI)){
|
||
|
|
const item = this.item[itemI];
|
||
|
|
subT += (item["precio"] * item["cantidad"]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return subT;
|
||
|
|
},
|
||
|
|
total: function () {
|
||
|
|
return this.subTotal - this.descuento;
|
||
|
|
},
|
||
|
|
noEstaVacio: function () {
|
||
|
|
for (const i in this.item) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
restarCantidad: function (elem) {
|
||
|
|
const cantidad = parseInt(elem.cantidad);
|
||
|
|
if (cantidad > 0)
|
||
|
|
elem.cantidad = cantidad -1;
|
||
|
|
},
|
||
|
|
aumentarCantidad: function (elem) {
|
||
|
|
const cantidad = parseInt(elem.cantidad);
|
||
|
|
if (cantidad >= 0)
|
||
|
|
elem.cantidad = cantidad+1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
*/
|
||
|
|
|
||
|
|
|