466 lines
12 KiB
TypeScript
Executable File
466 lines
12 KiB
TypeScript
Executable File
import { defineComponent, ref, toRef, computed, PropType, watch, onMounted, reactive, onBeforeUnmount } from 'vue'
|
|
import { useI18n } from '@src/boot/i18n'
|
|
import { useUserStore } from '@store/UserStore'
|
|
import { useGlobalStore } from '@store/globalStore'
|
|
import { useQuasar } from 'quasar'
|
|
|
|
import { CTitleBanner } from '../CTitleBanner'
|
|
import { CCardState } from '../CCardState'
|
|
import { CCopyBtn } from '../CCopyBtn'
|
|
|
|
import { func_tools, toolsext } from '@store/Modules/toolsext'
|
|
|
|
import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct } from '@src/model'
|
|
import { tools } from '@store/Modules/tools'
|
|
import { useProducts } from '@store/Products'
|
|
|
|
import { shared_consts } from '@src/common/shared_vuejs'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
export default defineComponent({
|
|
name: 'CProductCard',
|
|
props: {
|
|
product: {
|
|
type: Object as PropType<IProduct | null>,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
cosa: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0,
|
|
},
|
|
complete: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
components: { CTitleBanner, CCardState, CCopyBtn },
|
|
setup(props, { emit }) {
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
const userStore = useUserStore()
|
|
const globalStore = useGlobalStore()
|
|
const products = useProducts()
|
|
|
|
const listord = ref(<IOrderCart[]>[])
|
|
const sumval = ref(0)
|
|
|
|
const site = ref(globalStore.site)
|
|
|
|
const $router = useRouter()
|
|
|
|
const fullscreenImage = ref(<any>null)
|
|
|
|
let myorder = reactive(<IOrder>{
|
|
idapp: process.env.APP_ID,
|
|
quantity: 0,
|
|
quantitypreordered: 0,
|
|
idStorehouse: '',
|
|
idGasordine: '',
|
|
storehouse: {},
|
|
gasordine: { active: false },
|
|
})
|
|
|
|
const storeSelected = ref('')
|
|
const gasordineSelected = ref('')
|
|
const recgasordineSelected = ref(<any>null)
|
|
const arrordersCart = ref(<IOrderCart[]>[])
|
|
|
|
const timerInterval = ref(<any>null)
|
|
const timerLabelScadenza = ref('')
|
|
const labelDataRitiro = ref('')
|
|
const labelDataArrivoMerce = ref('')
|
|
|
|
const openlistorders = ref(false)
|
|
const endload = ref(false)
|
|
const myproduct = ref(<IProduct>{})
|
|
|
|
const isFullScreen = ref(false)
|
|
const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE')
|
|
const startX = ref(0)
|
|
const startY = ref(0)
|
|
const scale = ref(1)
|
|
|
|
const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
|
|
// console.log('valoriopt', item.table)
|
|
return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
|
|
})
|
|
|
|
/*const myproduct = computed((): IProduct => {
|
|
console.log('getproduct computed')
|
|
const ris = products.getProduct(props.code)
|
|
console.log(' received', ris)
|
|
return ris
|
|
})*/
|
|
|
|
|
|
function iconWhishlist(order: IProduct) {
|
|
if (true) {
|
|
return 'far fa-heart'
|
|
} else {
|
|
return 'fas fa-heart'
|
|
}
|
|
}
|
|
async function addtoCart(add: boolean) {
|
|
|
|
if (!userStore.isLogged) {
|
|
tools.showNeutralNotif($q, t('ecomm.area_personale'))
|
|
globalStore.rightDrawerOpen = true
|
|
return false
|
|
}
|
|
|
|
const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
|
|
updateproduct()
|
|
if (ris && ris.myord) {
|
|
|
|
}
|
|
}
|
|
|
|
function getnumstore() {
|
|
if (myproduct.value) {
|
|
if (myproduct.value.storehouses)
|
|
return myproduct.value.storehouses.length
|
|
else
|
|
return 0
|
|
}
|
|
return 0
|
|
}
|
|
|
|
function getSingleStorehouse() {
|
|
try {
|
|
const mystore = myproduct.value.storehouses[0]
|
|
if (mystore)
|
|
return mystore.name + ' (' + mystore.city + ')'
|
|
else
|
|
return ''
|
|
} catch (e) {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function getSingleGasordine(gasordine: IGasordine) {
|
|
try {
|
|
const mygas = gasordine
|
|
if (mygas)
|
|
/*return mygas.name + ' (' + mygas.city + ') ' + t('gas.dataora_chiusura_ordini') + ': ' + tools.getstrDateShort(mygas.dataora_chiusura_ordini)
|
|
+ ' ' + t('gas.data_arrivo_merce') + ': ' + tools.getstrDateShort(mygas.data_arrivo_merce)
|
|
+ ' ' + t('gas.dataora_ritiro') + ': ' + tools.getstrDateShort(mygas.dataora_ritiro)*/
|
|
|
|
return mygas.name
|
|
else
|
|
return ''
|
|
} catch (e) {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function initproduct() {
|
|
|
|
myorder.quantity = 0
|
|
myorder.quantitypreordered = 0
|
|
myorder.idStorehouse = ''
|
|
myorder.idGasordine = ''
|
|
|
|
gasordineSelected.value = ''
|
|
recgasordineSelected.value = null
|
|
|
|
}
|
|
|
|
function updateproduct() {
|
|
|
|
myproduct.value = products.getProductById(props.id)
|
|
|
|
// products.updateQuantityAvailable(myproduct.value._id)
|
|
}
|
|
|
|
function getStorehouses() {
|
|
if (!myproduct.value)
|
|
return []
|
|
|
|
const myarr: any = []
|
|
let ind = 1
|
|
myproduct.value.storehouses.forEach((store) => {
|
|
myarr.push(
|
|
{
|
|
id: ind,
|
|
label: store.name + ' (' + store.city + ')',
|
|
value: store._id
|
|
})
|
|
|
|
ind++
|
|
})
|
|
|
|
// console.log('arraystore', myarr)
|
|
return myarr
|
|
}
|
|
|
|
function getGasordines() {
|
|
if (!myproduct.value)
|
|
return []
|
|
|
|
const myarr: any = []
|
|
let ind = 1
|
|
myproduct.value.gasordines.forEach((gasordine: IGasordine) => {
|
|
myarr.push(
|
|
{
|
|
id: ind,
|
|
label: getSingleGasordine(gasordine),
|
|
value: gasordine._id
|
|
})
|
|
|
|
ind++
|
|
})
|
|
|
|
return myarr
|
|
}
|
|
|
|
function checkifCartDisable() {
|
|
// return !myorder.idStorehouse
|
|
return false
|
|
}
|
|
|
|
function getQtyWarn() {
|
|
if (myorder.quantity > 0) {
|
|
return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantity })
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function getQtyWarnPreOrdered() {
|
|
if (myorder.quantitypreordered > 0) {
|
|
return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantitypreordered })
|
|
}
|
|
return ''
|
|
}
|
|
|
|
watch(() => props.id, (newval, oldval) => {
|
|
// console.log('change code')
|
|
load()
|
|
})
|
|
|
|
watch(() => storeSelected.value, (newval, oldval) => {
|
|
myorder.idStorehouse = newval
|
|
})
|
|
|
|
watch(() => gasordineSelected.value, (newval, oldval) => {
|
|
if (newval) {
|
|
myorder.idGasordine = newval
|
|
recgasordineSelected.value = myproduct.value.gasordines.find((rec: any) => rec._id === gasordineSelected.value)
|
|
updateLabel()
|
|
}
|
|
})
|
|
|
|
function updateLabel() {
|
|
if (recgasordineSelected.value) {
|
|
//labelDataRitiro.value = tools.getstrDateTime(recgasordineSelected.value.dataora_ritiro)
|
|
if (recgasordineSelected.value.data_arrivo_merce)
|
|
labelDataArrivoMerce.value = tools.getstrDateShort(recgasordineSelected.value.data_arrivo_merce)
|
|
if (recgasordineSelected.value.dataora_ritiro)
|
|
labelDataRitiro.value = tools.getstrDateTime(recgasordineSelected.value.dataora_ritiro)
|
|
} else {
|
|
labelDataArrivoMerce.value = ''
|
|
labelDataRitiro.value = ''
|
|
}
|
|
}
|
|
|
|
function mounted() {
|
|
load()
|
|
// Start the timer when the component is mounted
|
|
startTimer();
|
|
}
|
|
|
|
function beforeDestroy() {
|
|
// Clear the interval when the component is destroyed to prevent memory leaks
|
|
clearInterval(timerInterval.value);
|
|
}
|
|
|
|
function updateTimerLabel() {
|
|
if (recgasordineSelected.value)
|
|
timerLabelScadenza.value = tools.getCountDown(recgasordineSelected.value.dataora_chiusura_ordini)
|
|
else
|
|
timerLabelScadenza.value = ''
|
|
}
|
|
|
|
function startTimer() {
|
|
// Update the timer label every second
|
|
timerInterval.value = setInterval(() => updateTimerLabel(), 1000);
|
|
}
|
|
|
|
function load() {
|
|
initproduct()
|
|
updateproduct()
|
|
|
|
// console.log('Load', myproduct.value.name)
|
|
// console.log('created Cproductcard', code)
|
|
|
|
arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
|
|
|
|
if (!!myproduct.value) {
|
|
if (myproduct.value.storehouses && myproduct.value.storehouses.length === 1) {
|
|
// Se solo 1 presente, metto fisso l'unico negozio !
|
|
myorder.idStorehouse = myproduct.value.storehouses[0]._id
|
|
}
|
|
|
|
if (myproduct.value.gasordines && myproduct.value.gasordines.length === 1) {
|
|
myorder.idGasordine = myproduct.value.gasordines[0]._id
|
|
gasordineSelected.value = myorder.idGasordine!
|
|
}
|
|
|
|
const ord = products.getOrderProductInCart(myproduct.value._id)
|
|
if (ord) {
|
|
myorder.quantity = ord.quantity
|
|
myorder.quantitypreordered = ord.quantitypreordered
|
|
|
|
if (ord.idGasordine) {
|
|
gasordineSelected.value = ord.idGasordine!
|
|
recgasordineSelected.value = myproduct.value.gasordines.find((rec: IGasordine) => rec._id === ord.idGasordine!)
|
|
}
|
|
|
|
// Seleziona il Negozio che avevo già scelto nell'ordine !
|
|
if (ord.idStorehouse)
|
|
storeSelected.value = ord.idStorehouse
|
|
|
|
}
|
|
|
|
if (gasordineSelected.value) {
|
|
recgasordineSelected.value = myproduct.value.gasordines.find((rec: IGasordine) => rec._id === gasordineSelected.value)
|
|
}
|
|
|
|
}
|
|
|
|
updateLabel()
|
|
|
|
// console.log('°°° ENDLOAD °°°')
|
|
endload.value = true
|
|
}
|
|
|
|
function getclimgproduct() {
|
|
return 'myimgproduct centermydiv'
|
|
}
|
|
|
|
|
|
function visuListDisponibili() {
|
|
openlistorders.value = true
|
|
sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
|
|
|
|
listord.value = arrordersCart.value.filter((ordercart: IOrderCart) => ordercart.items!.reduce((accumulator, item) => {
|
|
return accumulator + item.order.quantity
|
|
}, 0))
|
|
}
|
|
|
|
function visuListBookable() {
|
|
openlistorders.value = true
|
|
sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
|
|
|
|
listord.value = arrordersCart.value.filter((ordercart: IOrderCart) => ordercart.items!.reduce((accumulator, item) => {
|
|
return accumulator + item.order.quantitypreordered
|
|
}, 0))
|
|
}
|
|
|
|
function isOrdGas(): boolean {
|
|
return myproduct.value && myproduct.value.idGasordines ? myproduct.value.idGasordines.length > 0 : false
|
|
}
|
|
|
|
function getpercqtaraggiunta(): number {
|
|
if (myproduct.value)
|
|
return tools.calcperc(myproduct.value.bookedGASQtyOrdered, myproduct.value.qtyToReachForGas) / 100
|
|
else
|
|
return 0
|
|
}
|
|
|
|
function toggleFullScreen() {
|
|
isFullScreen.value = !isFullScreen.value;
|
|
scale.value = 1;
|
|
}
|
|
|
|
function onTouchStart(e: any) {
|
|
startX.value = e.touches[0].pageX;
|
|
startY.value = e.touches[0].pageY;
|
|
}
|
|
|
|
function onTouchMove(e: any) {
|
|
const deltaX = e.touches[0].pageX - startX.value;
|
|
const deltaY = e.touches[0].pageY - startY.value;
|
|
|
|
// Calcola la distanza percorsa
|
|
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
|
|
|
|
// Imposta il fattore di scala in base alla distanza percorsa
|
|
scale.value = Math.min(Math.max(1, scale.value + distance / 100), 3);
|
|
|
|
// Salva le nuove coordinate di partenza
|
|
startX.value = e.touches[0].pageX;
|
|
startY.value = e.touches[0].pageY;
|
|
|
|
// Applica la trasformazione
|
|
if (fullscreenImage.value)
|
|
fullscreenImage.value.style.transform = `scale(${scale.value})`;
|
|
}
|
|
|
|
function onTouchEnd() {
|
|
// Ripristina la trasformazione quando l'utente solleva il dito
|
|
if (fullscreenImage.value)
|
|
fullscreenImage.value.fullscreenImage.style.transform = 'scale(1)';
|
|
}
|
|
|
|
function naviga(path: string) {
|
|
$router.push(path)
|
|
}
|
|
|
|
onMounted(mounted)
|
|
onBeforeUnmount(beforeDestroy)
|
|
|
|
return {
|
|
visuListDisponibili,
|
|
visuListBookable,
|
|
addtoCart,
|
|
iconWhishlist,
|
|
getclimgproduct,
|
|
getnumstore,
|
|
getSingleStorehouse,
|
|
getSingleGasordine,
|
|
getStorehouses,
|
|
checkifCartDisable,
|
|
myproduct,
|
|
myorder,
|
|
tools,
|
|
t,
|
|
storeSelected,
|
|
gasordineSelected,
|
|
getQtyWarn,
|
|
openlistorders,
|
|
func_tools,
|
|
toolsext,
|
|
products,
|
|
arrordersCart,
|
|
endload,
|
|
shared_consts,
|
|
site,
|
|
getQtyWarnPreOrdered,
|
|
listord,
|
|
sumval,
|
|
getGasordines,
|
|
recgasordineSelected,
|
|
timerLabelScadenza,
|
|
labelDataRitiro,
|
|
labelDataArrivoMerce,
|
|
getpercqtaraggiunta,
|
|
isOrdGas,
|
|
isFullScreen,
|
|
toggleFullScreen,
|
|
onTouchStart,
|
|
onTouchMove,
|
|
onTouchEnd,
|
|
$router,
|
|
naviga,
|
|
}
|
|
}
|
|
})
|