Jun 29, 2021
0
Level 4
Retrieve database data with hover() and show with filter
wanted to do two thing when i hover on one div
- fetch data from backend
- filter data and then show to user
i am using nuxt i get success with this two operation but when i hover particular div anther hover open automatically
Can any one please tell me what to do to avoid this type of hover issue
code
// ------------------------------------------
// - on hover display relations in circle
// ------------------------------------------
//Wife,husband,
let relations = ['wife', 'husband', 'son', 'daughter' , 'sister', 'brother', 'father', 'mother' ];
let schemaWrapper = `<div class='wrapper-relation-circle'></div>`;
let schemaRelation = `<a class='relation-circle' href="javascript:;"></a>`;
let prevStackIndex, higherStackIndex = 110;
//document.getElementsByClassName('.descendant, .ancestor')
$( '.descendant, .ancestor' ).not('.blank').not(getTreeId === "undefined").hover (
async () => {
a.find( "div.wrapper-relation-circle" ).remove();
window.hoverId = event.currentTarget.getAttribute('data-id');
//console.log('hover',window.hoverId);
let filteredList, isMale, isFemale,isFather,isMother;
// relations = relations.filter(item => item.length > 6)
// console.log(relations)
await self.$axios.$get( `${process.env.BASE_URL}/userRelationValidator/${window.hoverId}/${this.treeId}`, {timeout: 120000 })
.then(resp => {
//let c = [];
this.relations = resp
//console.log(this.relations)
//console.log(hasMother)
/*
brother: 1
daughter: 0
father: 1
gender: "male"
husband: 0
mother: 1
sister: 0
son: 0
treeId: "609e122f00c656001adbc48b"
userId: "609e11ef00c656001adbc48a"
wife: 0
*/
// relations = relations.filter(item =>{
// if (item === 'husband'){
// return isFemale
// }
// if (item === 'wife'){
// return isMale
// }
// if (item === 'father'){
// return hasFather
// }
// if (item === 'mother'){
// return hasMother
// }
// return true
// })
// console.log(relations)
// return relations
})
prevStackIndex = a.css( 'z-index' );
// update stack / zindex
// add wrapper
let relationWrapper = $( schemaWrapper );
a.append( relationWrapper );
// get the dimesions of wrapper
let relationWrapperDimesions = {};
relationWrapperDimesions.width = relationWrapper.width();
relationWrapperDimesions.height = relationWrapper.height();
// circular position calculator
let radius = relationWrapperDimesions.width / 2.5;
let cenX = ( relationWrapperDimesions.width / 2.5 ) - 15;
let cenY = ( relationWrapperDimesions.height / 2 ) - 43;
let angle = 0;
let steps = Math.PI * 2 / relations.length;
let left, top;
let filterList,isMal, isFemal, hasFathe, hasMothe, hasParent, hasHusband, hasWife
isMal = this.relations.gender === "male" ? true : false;
//console.log(isMal)
isFemal = this.relations.gender === "female" ? true : false;
//console.log(isFemal)
hasFathe = this.relations.father > 0 ? true : false;
//console.log(hasFathe)
hasMothe = this.relations.mother > 0 ? true : false;
//console.log(hasMothe)
hasParent = this.relations.father > 0 || this.relations.mother > 0 ? true : false;
hasHusband = this.relations.husband > 0 ? true : false;
hasWife = this.relations.wife > 0 ? true: false;
// Remove active node
//a.find( "div.wrapper-relation-circle" ).remove();
// add relations
_.forEach( relations, ( relation, relationIndex ) => {
//console.log('relationIndex',relationIndex)
//console.log('hover',self);
angle = relationIndex * steps;
left = cenX + Math.cos(angle) * radius;
top = cenY + Math.sin(angle) * radius;
let relationCurrent = $( schemaRelation );
//console.log('relation === \'husband\' && isMale',relation === 'husband' || isMal)
/* Adding class after checking
condition's for particular relation
To disable class this is first state */
if(relation === 'husband' && isMal){
relationCurrent.addClass('te', true)
}
if(relation === 'wife' && isFemal){
relationCurrent.addClass('te', true)
}
if(relation === 'father' && hasFathe){
relationCurrent.addClass('te', true)
}
if(relation === 'mother' && hasMothe){
relationCurrent.addClass('te', true)
}
if(relation === 'brother' && !hasParent){
relationCurrent.addClass('te', true)
}
if(relation === 'sister' && !hasParent){
relationCurrent.addClass('te', true)
}
if (relation === 'husband' && hasHusband){
relationCurrent.addClass('te', true)
}
if (relation === 'wife' && hasWife){
relationCurrent.addClass('te', true)
}
let htmlImg = `<img src="/relations/${relation}-icon.png">`;
relationCurrent.html( htmlImg );
/* To prevent user to click to add
relation who's added class of te */
// on click event
relationCurrent.on( 'click', event => {
if(relation === 'husband' && isMal){
return false
}
if(relation === 'wife' && isFemal){
return false
}
if(relation === 'father' && hasFathe){
return false
}
if(relation === 'mother' && hasMothe){
return false
}
if(relation === 'brother' && !hasParent){
return false
}
if(relation === 'sister' && !hasParent){
return false
}
if (relation === 'husband' && hasHusband){
return false
}
if (relation === 'wife' && hasWife){
return false
}
let emitPromise = new Promise( (resolve, reject) => {
//console.log(this)
const relationData = {
id: window.hoverId,
relation: `${relation}`
};
//console.log(relationData)
self.sendData(relationData);
setTimeout(() => resolve("done!"), 0);
})
emitPromise.then( result => {
window.relation = `${relation}`
console.log('`${relation}`',`${relation}`)
// remove
a.find( "div.wrapper-relation-circle" ).remove();
//$nuxt.$emit('createData', `${relation}`)
//self.$emit("openDialogForm",`${relation}`)
$nuxt.$emit('open-dialog-form')
//alert( `Adding ${relation} for user id : ${descId}` );
})
});
relationWrapper.append( relationCurrent );
relationCurrent.animate({
top: top,
left:left,
opacity: 1,
}, (75 * relationIndex) );
});
},
function() {
$( this ).find( "div.wrapper-relation-circle" ).remove();
relations = [ 'wife', 'husband', 'son', 'daughter' , 'sister', 'brother', 'father', 'mother' ];
// update stack / zindex
$( this ).css( 'z-index', prevStackIndex );
// remove
//$( this ).find( "div.wrapper-relation-circle" ).remove();
}
);
Please or to participate in this conversation.