File: /home/barbeatleanalyti/public_html/beatleanalytics.com/assets/assets/js/apps/contact.js
$(document).ready(function() {
checkall('contact-check-all', 'contact-chkbox');
$('#input-search').on('keyup', function() {
var rex = new RegExp($(this).val(), 'i');
$('.searchable-items .items:not(.items-header-section)').hide();
$('.searchable-items .items:not(.items-header-section)').filter(function() {
return rex.test($(this).text());
}).show();
});
$('.view-grid').on('click', function(event) {
event.preventDefault();
/* Act on the event */
$(this).parents('.switch').find('.view-list').removeClass('active-view');
$(this).addClass('active-view');
$(this).parents('.searchable-container').removeClass('list');
$(this).parents('.searchable-container').addClass('grid');
$(this).parents('.searchable-container').find('.searchable-items').removeClass('list');
$(this).parents('.searchable-container').find('.searchable-items').addClass('grid');
});
$('.view-list').on('click', function(event) {
event.preventDefault();
/* Act on the event */
$(this).parents('.switch').find('.view-grid').removeClass('active-view');
$(this).addClass('active-view');
$(this).parents('.searchable-container').removeClass('grid');
$(this).parents('.searchable-container').addClass('list');
$(this).parents('.searchable-container').find('.searchable-items').removeClass('grid');
$(this).parents('.searchable-container').find('.searchable-items').addClass('list');
});
$('#btn-add-contact').on('click', function(event) {
$('#addContactModal #btn-add').show();
$('#addContactModal #btn-edit').hide();
$('#addContactModal').modal('show');
})
function deleteContact() {
$(".delete").on('click', function(event) {
event.preventDefault();
/* Act on the event */
$(this).parents('.items').remove();
});
}
function addContact() {
$("#btn-add").click(function() {
var getParent = $(this).parents('.modal-content');
var $_name = getParent.find('#c-name');
var $_email = getParent.find('#c-email');
var $_occupation = getParent.find('#c-occupation');
var $_phone = getParent.find('#c-phone');
var $_location = getParent.find('#c-location');
var $_getValidationField = document.getElementsByClassName('validation-text');
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
var phoneReg = /^\d*\.?\d*$/;
var $_nameValue = $_name.val();
var $_emailValue = $_email.val();
var $_occupationValue = $_occupation.val();
var $_phoneValue = $_phone.val();
var $_locationValue = $_location.val();
if ($_nameValue == "") {
$_getValidationField[0].innerHTML = 'Name must be filled out';
$_getValidationField[0].style.display = 'block';
} else {
$_getValidationField[0].style.display = 'none';
}
if ($_emailValue == "") {
$_getValidationField[1].innerHTML = 'Email Id must be filled out';
$_getValidationField[1].style.display = 'block';
} else if((reg.test($_emailValue) == false)) {
$_getValidationField[1].innerHTML = 'Invalid Email';
$_getValidationField[1].style.display = 'block';
} else {
$_getValidationField[1].style.display = 'none';
}
if ($_phoneValue == "") {
$_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
$_getValidationField[2].style.display = 'block';
} else if((phoneReg.test($_phoneValue) == false)) {
$_getValidationField[2].innerHTML = 'Please Enter A numeric value';
$_getValidationField[2].style.display = 'block';
} else {
$_getValidationField[2].style.display = 'none';
}
if ($_nameValue == "" || $_emailValue == "" || (reg.test($_emailValue) == false) || $_phoneValue == "" || (phoneReg.test($_phoneValue) == false)) {
return false;
}
$html = '<div class="items">' +
'<div class="item-content">' +
'<div class="user-profile">' +
'<div class="n-chk align-self-center text-center">' +
'<label class="new-control new-checkbox checkbox-primary">' +
'<input type="checkbox" class="new-control-input contact-chkbox">' +
'<span class="new-control-indicator"></span>' +
'</label>' +
'</div>' +
'<img src="assets/img/90x90.jpg">' +
'<div class="user-meta-info">' +
'<p class="user-name" data-name='+ $_nameValue +'>'+ $_nameValue +'</p>' +
'<p class="user-work" data-occupation='+ $_occupationValue +'>'+ $_occupationValue +'</p>' +
'</div>' +
'</div>' +
'<div class="user-email">' +
'<p class="info-title">Email: </p>' +
'<p class="usr-email-addr" data-email='+ $_emailValue +'>'+ $_emailValue +'</p>' +
'</div>' +
'<div class="user-location">' +
'<p class="info-title">Location: </p>' +
'<p class="usr-location" data-location='+ $_locationValue +'>'+ $_locationValue +'</p>' +
'</div>' +
'<div class="user-phone">' +
'<p class="info-title">Phone: </p>' +
'<p class="usr-ph-no" data-phone='+ $_phoneValue +'>'+ $_phoneValue +'</p>' +
'</div>' +
'<div class="action-btn">' +
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>'+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus delete"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>'
'</div>' +
'</div>' +
'</div>';
$(".searchable-items > .items-header-section").after($html);
$('#addContactModal').modal('hide');
var $_setNameValueEmpty = $_name.val('');
var $_setEmailValueEmpty = $_email.val('');
var $_setOccupationValueEmpty = $_occupation.val('');
var $_setPhoneValueEmpty = $_phone.val('');
var $_setLocationValueEmpty = $_location.val('');
deleteContact();
editContact();
checkall('contact-check-all', 'contact-chkbox');
});
}
$('#addContactModal').on('hidden.bs.modal', function (e) {
var $_name = document.getElementById('c-name');
var $_email = document.getElementById('c-email');
var $_occupation = document.getElementById('c-occupation');
var $_phone = document.getElementById('c-phone');
var $_location = document.getElementById('c-location');
var $_getValidationField = document.getElementsByClassName('validation-text');
var $_setNameValueEmpty = $_name.value = '';
var $_setEmailValueEmpty = $_email.value = '';
var $_setOccupationValueEmpty = $_occupation.value = '';
var $_setPhoneValueEmpty = $_phone.value = '';
var $_setLocationValueEmpty = $_location.value = '';
for (var i = 0; i < $_getValidationField.length; i++) {
e.preventDefault();
$_getValidationField[i].style.display = 'none';
}
})
function editContact() {
$('.edit').on('click', function(event) {
$('#addContactModal #btn-add').hide();
$('#addContactModal #btn-edit').show();
// Get Parents
var getParentItem = $(this).parents('.items');
var getModal = $('#addContactModal');
// Get List Item Fields
var $_name = getParentItem.find('.user-name');
var $_email = getParentItem.find('.usr-email-addr');
var $_occupation = getParentItem.find('.user-work');
var $_phone = getParentItem.find('.usr-ph-no');
var $_location = getParentItem.find('.usr-location');
// Get Attributes
var $_nameAttrValue = $_name.attr('data-name');
var $_emailAttrValue = $_email.attr('data-email');
var $_occupationAttrValue = $_occupation.attr('data-occupation');
var $_phoneAttrValue = $_phone.attr('data-phone');
var $_locationAttrValue = $_location.attr('data-location');
// Get Modal Attributes
var $_getModalNameInput = getModal.find('#c-name');
var $_getModalEmailInput = getModal.find('#c-email');
var $_getModalOccupationInput = getModal.find('#c-occupation');
var $_getModalPhoneInput = getModal.find('#c-phone');
var $_getModalLocationInput = getModal.find('#c-location');
// Set Modal Field's Value
var $_setModalNameValue = $_getModalNameInput.val($_nameAttrValue);
var $_setModalEmailValue = $_getModalEmailInput.val($_emailAttrValue);
var $_setModalOccupationValue = $_getModalOccupationInput.val($_occupationAttrValue);
var $_setModalPhoneValue = $_getModalPhoneInput.val($_phoneAttrValue);
var $_setModalLocationValue = $_getModalLocationInput.val($_locationAttrValue);
$('#addContactModal').modal('show');
$("#btn-edit").off('click').click(function(){
var getParent = $(this).parents('.modal-content');
var $_getInputName = getParent.find('#c-name');
var $_getInputNmail = getParent.find('#c-email');
var $_getInputNccupation = getParent.find('#c-occupation');
var $_getInputNhone = getParent.find('#c-phone');
var $_getInputNocation = getParent.find('#c-location');
var $_nameValue = $_getInputName.val();
var $_emailValue = $_getInputNmail.val();
var $_occupationValue = $_getInputNccupation.val();
var $_phoneValue = $_getInputNhone.val();
var $_locationValue = $_getInputNocation.val();
var setUpdatedNameValue = $_name.text($_nameValue);
var setUpdatedEmailValue = $_email.text($_emailValue);
var setUpdatedOccupationValue = $_occupation.text($_occupationValue);
var setUpdatedPhoneValue = $_phone.text($_phoneValue);
var setUpdatedLocationValue = $_location.text($_locationValue);
var setUpdatedAttrNameValue = $_name.attr('data-name', $_nameValue);
var setUpdatedAttrEmailValue = $_email.attr('data-email', $_emailValue);
var setUpdatedAttrOccupationValue = $_occupation.attr('data-occupation', $_occupationValue);
var setUpdatedAttrPhoneValue = $_phone.attr('data-phone', $_phoneValue);
var setUpdatedAttrLocationValue = $_location.attr('data-location', $_locationValue);
$('#addContactModal').modal('hide');
});
})
}
$(".delete-multiple").on("click", function() {
var inboxCheckboxParents = $(".contact-chkbox:checked").parents('.items');
inboxCheckboxParents.remove();
});
deleteContact();
addContact();
editContact();
})
// Validation Process
var $_getValidationField = document.getElementsByClassName('validation-text');
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
var phoneReg = /^\d{10}$/;
getNameInput = document.getElementById('c-name');
getNameInput.addEventListener('input', function() {
getNameInputValue = this.value;
if (getNameInputValue == "") {
$_getValidationField[0].innerHTML = 'Name Required';
$_getValidationField[0].style.display = 'block';
} else {
$_getValidationField[0].style.display = 'none';
}
})
getEmailInput = document.getElementById('c-email');
getEmailInput.addEventListener('input', function() {
getEmailInputValue = this.value;
if (getEmailInputValue == "") {
$_getValidationField[1].innerHTML = 'Email Required';
$_getValidationField[1].style.display = 'block';
} else if((reg.test(getEmailInputValue) == false)) {
$_getValidationField[1].innerHTML = 'Invalid Email';
$_getValidationField[1].style.display = 'block';
} else {
$_getValidationField[1].style.display = 'none';
}
})
getPhoneInput = document.getElementById('c-phone');
getPhoneInput.addEventListener('input', function() {
getPhoneInputValue = this.value;
if (getPhoneInputValue == "") {
$_getValidationField[2].innerHTML = 'Phone Number Required';
$_getValidationField[2].style.display = 'block';
} else if((phoneReg.test(getPhoneInputValue) == false)) {
$_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
$_getValidationField[2].style.display = 'block';
} else {
$_getValidationField[2].style.display = 'none';
}
})