Hello, the problem that occurs in the login.f7 file, the code that is in my on.pageInit is executed by itself, example: when I am in home.f7 I go to the addresses.f7 file and when I return to home. f7, the on.pageInit found in login.f7 is executed. (He left code from the files)
login.f7
<template>
<div class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content">
<div class="login-screen-title">Henet Store - Inicio sesión </div>
<img src="./images/logo_henet.png" alt="Henet Ingenieros" class="center lazy lazy-fade-in demo-lazy"
width="30%" />
<form>
<div class="list">
<ul>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div style="font-size: 12px;" class="item-title item-floating-label">Correo electronico</div>
<div class="item-input-wrap">
<input type="email" id="email" name="e-mail" placeholder="[email protected]" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div style="font-size: 12px;" class="item-title item-floating-label">Contraseña</div>
<div class="item-input-wrap">
<input type="password" name="password" id="pass" placeholder="Tu contraseña" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#" class="list-button button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
@click=${InitSesion} data-div="initSesion">
<span class="preloader"></span>
<span>Iniciar Sesión</span></a>
</li>
</ul>
<div class="block-footer">
<p>¡Tecnología para hacer crecer tu negocio!. <br/>
Sistemas ERP, CRM, Firewall, NAS, seguridad.</p>
<p><a href="/new_user/" class="link back">Registrarse</a></p>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
export default (props, { $update, $, $on, $once, $f7, $onMounted }) => {
let toastadd
let isLoading = false;
let bandera
const showToast = (msj) => {
// Create toast
toastadd = false
if (!toastadd) {
toastadd = $f7.toast.create({
text: msj,
position: 'center',
closeTimeout: 2000,
});
}
// Open it
toastadd.open();
}
$on('pageInit', (e, page) => {
console.log("esto esta en login y sesión activa");
if(localStorage.getItem('user_flag')){
$f7.dialog.preloader("Sesión activa", "multi")
setTimeout(()=>{
$f7.dialog.close()
$f7.views.main.router.navigate('/')
}, 1000)
}
});
return $render;
};
</script>
home.f7
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title sliding">Tienda Henet</div>
<div class="right">
${total_articulos > 0 ? $h`
<a class="link icon-only" href="/carrito/${carrito_parse}">
<i class="icon f7-icons if-not-md">cart
<span class="badge color-red">${total_articulos}</span>
</i>
<i class="icon material-icons md-only">shopping_cart
<span class="badge color-red">${total_articulos}</span>
</i>
</a>
` : $h`
`}
</div>
<div class="title-large">
<div class="title-large-text">Tienda Henet</div>
</div>
</div>
</div>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-cover panel-init">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Configuraciones</div>
</div>
</div>
<div class="page-content">
<div class="list simple-list">
<ul>
<li>
<i class="f7-icons">moon_fill</i>
<label class="toggle">
<input id="tema" @click=${ChangeThema} type="checkbox" />
<span class="toggle-icon"></span>
</label>
<i class="f7-icons">sun_max</i>
</li>
<li><a href="/direcciones/" class="panel-close">Mis direcciones</a></li>
<li>
<a class="link icon-only panel-close" @click=${DeleteSesion}>Cerrar sesión
<i class="icon material-icons">exit_to_app</i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block block-strong">
<p>Muchas cosas tecnológicas aqui.</p>
${articulos.map((a,i) => $h`
<div class="card elevation-6 demo-card-header-pic">
<div class="card-header align-items-flex-end"
style="background-image:url(${a.url_image}); height: 8em; background-repeat: no-repeat;"></div>
<div class="card-content card-content-padding">
<p>${a.nombre}</p>
</div>
<div class="card-footer">
<a href="#" class="link popup-open" href="#" data-popup=".popup-push-${a.id}"><i
class="f7-icons ">info_circle_fill</i></a>
<div class="chip color-blue chip-outline">
<div class="chip-label">Costo: $ ${a.precio}</div>
</div>
<a @click=${addCart} href="#" class="link"><i class="f7-icons"
data-id-product=${a.id}>cart_badge_plus</i></a>
</div>
</div>
`)}
</div>
${articulos.map((a,i) => $h`
<div class="popup popup-push-${a.id}">
<div class="block">
<p class="block-title block-title-medium">${a.nombre}</p>
<div class="block-title block-title-small margin-top">Descripción:</div>
<div class="card-content-padding">
<p>${a.descripcion}.</p>
<p>
<div class="col-50 inset">
<img src="${a.url_image}" alt="${a.nombre}" style="max-width: 100%; height: auto;">
</div>
<a class="button margin-top-half button-fill pb-popup-dark${i} color-orange" href="#">Ver Galeria de
fotos</a>
<div class="inset margin-top">
<div class="row">
<div class="col">
<div class="chip color-blue chip-outline">
<div class="chip-label">Costo: $ ${a.precio}</div>
</div>
</div>
<div class="col">
<div class="col">
<div class="stepper stepper-fill stepper-init color-blue">
<div class="stepper-button-minus" @click=${deleteCart} data-id-product=${a.id}></div>
<div class="stepper-input-wrap">
<input type="text" id="cantidad-${a.id}" value=${a.cantidad} min="0" max="100" step="1"
readonly />
</div>
<div class="stepper-button-plus" @click=${addCart} data-id-product=${a.id}></div>
</div>
</div>
</div>
</div>
</div>
</p>
</div>
<p><a class="link popup-close color-orange" href="#">Regresar</a></p>
</div>
</div>
</div>
`)}
</div>
</div>
</template>
<script>
import { getDevice } from 'framework7';
import { getAuth, signOut } from "firebase/auth";
const device = getDevice();
export default (props, { $update, $, $on, $f7, $onMounted }) => {
let total_articulos = 0;
let toastadd;
let toastdelete;
let articulos = [
{
id: "01",
nombre: "Camaras de seguridad epcom",
url_image: "https://static.vecteezy.com/system/resources/thumbnails/000/374/478/small/dyn6_lede_180801.jpg",
precio: 250.00,
cantidad_existencia: 12,
cantidad: 0,
total_pago: 0,
descripcion: "Vigila tu casa a cualquier hora y lugar con el kit de 4 camaras epcom",
calificacion_star: 3,
comentarios: {
nombre_autor: "Juan de la O",
coment: "Buenas camaras para ver que pasa en mi casa cuando estoy en el trabajo",
star: 3.5,
},
galeria: [
'https://static.vecteezy.com/system/resources/thumbnails/000/374/478/small/dyn6_lede_180801.jpg',
'https://static.vecteezy.com/system/resources/thumbnails/000/374/478/small/dyn6_lede_180801.jpg',
'https://static.vecteezy.com/system/resources/thumbnails/000/374/478/small/dyn6_lede_180801.jpg',
]
},
{
id: "02",
nombre: "Camaras de seguridad cyber power",
url_image: "./assets/imagenes/prueba_350x200.jpg",
precio: 250.00,
cantidad_existencia: 12,
cantidad: 0,
total_pago: 0,
descripcion: "Vigila tu casa a cualquier hora y lugar con el kit de 4 camaras epcom",
calificacion_star: 3,
comentarios: {
nombre_autor: "Juan de la O",
coment: "Buenas camaras para ver que pasa en mi casa cuando estoy en el trabajo",
star: 3.5,
},
galeria: [
'./assets/imagenes/prueba_350x200.jpg',
'./assets/imagenes/prueba_350x200.jpg',
'./assets/imagenes/prueba_350x200.jpg',
]
},
]
let carrito = {}
let carrito_parse;
let cartClon = []
const ChangeThema = () => {
$('html').toggleClass('dark')
}
const DeleteSesion = () => {
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
$f7.dialog.preloader("Nos vemos pronto 👋🏼", "multi")
setTimeout(() => {
localStorage.removeItem('user')
localStorage.removeItem('user_flag')
$f7.dialog.close()
$f7.views.main.router.navigate('/login/')
}, 2000)
}).catch((error) => {
console.log("No se puede salir");
// An error happened.
});
}
$onMounted((e) => {
console.log("Onmounted");
/*=== Popup Dark ===*/
const device = getDevice();
let pixel = device.pixelRatio;
articulos.map((a, i) => {
var myPhotoBrowserPopupDark = $f7.photoBrowser.create({
photos: a.galeria,
theme: 'dark',
type: 'popup'
});
$('.pb-popup-dark' + i).on('click', function (e) {
myPhotoBrowserPopupDark.open();
});
})
})
const addCart = (e) => {
let id_product = e.target.getAttribute('data-id-product')
let producto = articulos.find(item => item.id == id_product)
let id_step = "#cantidad-" + producto.id
producto.cantidad = 1
if (carrito.hasOwnProperty(producto.id)) {
producto.cantidad = carrito[producto.id].cantidad + 1
producto.total_pago = carrito[producto.id].precio * producto.cantidad
}
carrito[producto.id] = { id: producto.id, nombre: producto.nombre, cantidad: producto.cantidad, precio: producto.precio, total_pago: producto.precio * producto.cantidad }
carrito_parse = JSON.stringify(carrito);
//$(id_step).val(producto.cantidad)
showToast("Se ha añadido al carrito")
console.log(carrito_parse);
total_articulos++
$update()
}
const deleteCart = (e) => {
let id_product = e.target.getAttribute('data-id-product')
//let producto = articulos.find(item => item.id == id_product)
const producto = carrito[id_product]
let id_step = "#cantidad-" + producto.id
producto.cantidad--
total_articulos--
if (producto.cantidad === 0) {
console.log("ultimo producto");
producto.cantidad = 0
delete carrito[id_product]
console.log("eliminado", producto.cantidad);
$(id_step).val(producto.cantidad)
showToast("Se ha eliminado del carrito")
$update()
} else {
console.log("eliminado 1", producto.cantidad);
console.log("solo menos 1");
carrito[producto.id] = { id: producto.id, nombre: producto.nombre, cantidad: producto.cantidad, precio: producto.precio, total_pago: (producto.precio * producto.cantidad) }
$(id_step).val(producto.cantidad)
showToast("Se ha eliminado del carrito")
$update()
}
carrito_parse = JSON.stringify(carrito);
//$(id_step).val(producto.cantidad)
console.log("carrito eliminado: ", carrito);
}
const showToast = (msj) => {
// Create toast
toastadd = false
if (!toastadd) {
toastadd = $f7.toast.create({
text: msj,
position: 'center',
closeTimeout: 2000,
});
}
// Open it
toastadd.open();
}
return $render;
}
</script>