$(function () {
"use strict";
var $modal = $('.respondent-modal');
var $content = $modal.find('.modal-content');
var $form = $('#respondentForm');
var $inputs = $form.find('.input-target');
const openModal = gsap.timeline({paused: true});
// datastore contains the active data array for use by functions in this context
var datastore;
openModal.to($modal, {
duration: .6,
ease: Power4.easeOut,
autoAlpha: 1,
onStart: function () {
$('html').addClass('no-scroll');
},
});
openModal.from($content, {
delay: -.3,
duration: .6,
ease: Power4.easeOut,
autoAlpha: 0,
y: '0px',
});
const confTL = gsap.timeline({paused: true});
confTL.to($('#confirmation-modal'), {
duration: .6,
ease: Power4.easeOut,
autoAlpha: 1,
onStart: function () {
$('html').addClass('no-scroll');
},
});
confTL.from($('#confirmation-modal .modal-content'), {
delay: -.3,
duration: .6,
ease: Power4.easeOut,
autoAlpha: 0,
y: '0px',
});
window.respondents = {min: 5, max: 99};
var testdata = [
{"firstname": "Willem", "lastname": "van Buuren", "email": "wim@nl.nl"},
{"firstname": "Hans", "lastname": "Kazan", "email": "hannie@abacadabra.nl"}
];
function editRespondent(id) {
console.log('edit respondent ' + id, datastore[id]);
//modal open and set data to fields :)
modalOpen(id);
}
// fetch values from input fields
// update current record
// save datastore
function updateRecord()
{
var currentrecordid=$('#recordid').val();
$inputs.each(function (index) {
let attid = $(this).data('attr-id');
switch (attid)
{
case 'id': break;
default: console.log('attribute '+attid);
if (datastore[currentrecordid]) {
datastore[currentrecordid][attid]=$(this).val();
}
}
});
buildFromData(datastore);
$('#respondent-selection').trigger('change');
console.log('updated record ' + currentrecordid, datastore[currentrecordid], datastore);
}
var $dataholder = $('#respondent-selection');
var $target = $('#build-target');
$target.on('click','.addrow',function(){
if(!$target.hasClass('respondents-submitted')){
datastore = $dataholder.data('json');
let id = $(this).data('id');
if (datastore.length < window.respondents.max) {
datastore.push({firstname: '', lastname: '', email: ''});
editRespondent(datastore.length - 1, datastore);
}
}
});
$('#build-target').on('click', '.respondent img', function () {
if(!$target.hasClass('respondents-submitted')){
datastore = $dataholder.data('json');
let id = $(this).data('id');
let i = $(this).parent().data('id');
if(id === 'EDIT') {
console.log("IIDD", i, datastore[i]);
editRespondent(i, datastore);
}
else {
handleDelete(i,datastore);
}
}
});
function handleDelete(i,datastore){
openConfModal();
$('#confirm-delete-user').text(datastore[i].firstname+' '+datastore[i].lastname);
var $confirm = $('#confirmation-modal #confirm-yes');
var $decline = $('#confirmation-modal #confirm-no');
$confirm.off('click');
$confirm.on('click',function () {
datastore.splice(i, 1);
buildFromData(datastore);
$('#respondent-selection').trigger('change');
closeConfModal();
});
$decline.on('click' ,function () {
closeConfModal();
});
}
// update table to reflect datastore
function buildFromData(data) {
$target.empty();
$.each(data, function (i, obj) {
$target.append('
' + obj.firstname + ' ' + obj.lastname + ' ' + obj.email + ' '+$('#respondent-selection').attr('label-add')||'add'+'
');
}
writeToHolder(data);
}
// write json object to data attribute
function writeToHolder(data) {
console.log('writing data to holder', data);
$dataholder.data('json', data);
}
// callback for datastore load from server
window.setRespondentSet = function (dataset) {
if ($.isArray(dataset.value || [])) {
console.log('respondent set triggered', dataset.value || []);
buildFromData(dataset.value || []);
} else {
buildFromData(testdata);
}
};
/*button on click get input fields, build new data
*hidden field data - id
* add edit and delete and add icons
* make these clickable instead of row
*/
// open modal
// uses global datastore for information
function modalOpen(id) {
openModal.play().timeScale(1);
$inputs.each(function (index) {
let attid = $(this).data('attr-id');
switch (attid)
{
case 'id': $(this).val(id); break; // set hidden field to current record id
default: console.log('attribute '+attid);
if (datastore[id]) {
$(this).val(datastore[id][attid]||'');
}
else
$(this).val('');
}
});
}
// close modal
function modalClose() {
openModal.reverse().timeScale(-2)
$('html').removeClass('no-scroll');
$('.required').parent().removeClass('invalid invalid-email');
$('.emailcheck').parent().removeClass('invalid invalid-email');
}
// close modal
$('.modal-close').on('click', function () {
modalClose();
});
function openConfModal() {
confTL.play().timeScale(1);
}
function closeConfModal() {
confTL.reverse().timeScale(-2)
$('html').removeClass('no-scroll');
}
/*
$('.modal').click(function (event) {
if (!$(event.target).closest('.modal-content').length && !$(event.target).is('.modal-content')) {
modalClose();
}
});
*/
$('#submit-button').click(function (event) {
checkValidity();
});
function checkValidity()
{
var ok = true;
$inputs.each(function (index) {
let attid = $(this).data('attr-id');
switch (attid)
{
case 'id': break;
case 'language':
if ($(this).hasClass('required') && $(this).val()==null) {
ok = false;
$(this).parent().addClass('invalid');
}
break;
default: console.log('attribute '+attid);
if ($(this).hasClass('required') && $(this).val()=='') {
ok = false;
$(this).parent().addClass('invalid');
}
else if($(this).hasClass('emailcheck') && !emailValid($(this).val())) {
ok = false;
$(this).parent().addClass('invalid-email');
}
}
});
if (ok == true) {
updateRecord();
modalClose();
}
}
$(document).on('focus','.invalid',function () {
$(this).removeClass('invalid');
});
$(document).on('focus','.invalid-email',function () {
$(this).removeClass('invalid-email');
});
function emailValid(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
buildFromData([]);
});
/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:main-i-table] [159.3915] DESIGN*/
/*******************************************************************/
/* 0.3 D>D */
/* db 168 */