FullCalendar scripts

This commit is contained in:
Markines16 2021-06-06 13:52:36 +02:00 committed by GitHub
parent a57751e699
commit c6d7a98a85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 351 additions and 0 deletions

View File

@ -0,0 +1,139 @@
$(document).ready(function(){
//Get the data that is going to be used as a filter for events
var selectedFeed = $('#hall_selector').find(':selected').data('feed');
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
firstDay: 1,
fixedWeekCount: false,
eventSources: [ selectedFeed ],
selectable:true,
selectHelper:true,
timeFormat: 'H:mm',
eventOverlap: function(stillEvent, movingEvent) {
return (stillEvent.start_time > stillEvent.end && stillEvent.end < movingEvent.start_time)
},
//Add event/session function when u click in any non-event date. Prepares the form to be seen as such
select: function(start, end, allDay)
{
$(modal).fadeIn();
var x = document.getElementById("film_group");
x.style.display = "none";
x = document.getElementById("film_list");
x.style.display = "block";
document.getElementById("hall").value = document.getElementById("hall_selector").value;
document.getElementById("startDate").value = $.fullCalendar.formatDate( start, "Y-MM-DD" );
document.getElementById("endDate").value = $.fullCalendar.formatDate( end, "Y-MM-DD" );
document.getElementById("sumbit_new").style.display = "block";
document.getElementById("edit_inputs").style.display = "none";
},
editable:true,
//Edit only the date/hour start of an event/session when u click,drag and drop an event.
eventDrop:function(event)
{
var e = {
"newDate" : $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss"),
"idhall": document.getElementById("hall").value,
"startHour":event.start_time,
"startDate":event.date,
"price": event.seat_price,
"idfilm": event.film.idfilm,
"format": event.format,
};
console.log(e);
console.log(event);
$.ajax({
url:"eventsProcess.php?drop=true",
contentType: 'application/json; charset=utf-8',
dataType: "json",
type:"PUT",
data:JSON.stringify(e),
success: function(data) {
alert("El evento se ha desplazado correctamente");
calendar.fullCalendar('refetchEvents');
},
error: function(data) {
alert("Ha habido un error al desplazar el evento");
},
});
},
//Edit event/session function when u click an event. Prepares the form to be seen as such
eventClick:function(event)
{
$(modal).fadeIn();
var x = document.getElementById("film_group");
x.style.display = "block";
x = document.getElementById("film_list");
x.style.display = "none";
document.getElementById("hall").value = document.getElementById("hall_selector").value;
document.getElementById("startDate").value = $.fullCalendar.formatDate( event.start, "Y-MM-DD" );
document.getElementById("endDate").value = $.fullCalendar.formatDate( event.end, "Y-MM-DD" );
document.getElementById("price").value = event.seat_price;
document.getElementById("format").value = event.format;
document.getElementById("startHour").value = event.start_time;
document.getElementById("original_hall").value = document.getElementById("hall_selector").value;
document.getElementById("original_start_time").value = event.start_time;
document.getElementById("original_date").value = $.fullCalendar.formatDate( event.start, "Y-MM-DD" );
document.getElementById("film_title").innerHTML = event.film.tittle;
document.getElementById("film_lan").innerHTML = event.film.language;
document.getElementById("film_dur").innerHTML = event.film.duration+" min";
document.getElementById("film_img").src = "../img/films/"+event.film.img;
document.getElementById("film_desc").innerHTML = event.film.description;
document.getElementById("film_id").value = event.film.idfilm;
document.getElementById("sumbit_new").style.display = "none";
document.getElementById("edit_inputs").style.display = "grid";
},
});
//Once the filter changes, do the changes needed so full calendar research the events with the new hall
$('#hall_selector').change(onSelectChangeFeed);
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEventSource', selectedFeed);
$('#calendar').fullCalendar('addEventSource', feed);
selectedFeed = feed;
};
//When u click on the X the form closes. If the user close it because the operation has been complete. Restart the form correctly
span.onclick = function() {
formout();
}
function formout(){
$(modal).fadeOut(100,function(){
var success = document.getElementById("success");
if(success){
calendar.fullCalendar('refetchEvents');
$(".alert").remove();
document.getElementById("session_form").style.display = "block";
document.getElementById("price").value = "";
document.getElementById("format").value = "";
document.getElementById("film_id").value = "";
document.getElementById("startHour").value ="";
}
$(".form_group").removeClass("has_error");
$(".help_block").remove();
});
}
});

View File

@ -0,0 +1,212 @@
$(document).ready(function () {
//New session
$('#sumbit_new').click( function(e) {
$(".form_group").removeClass("has_error");
$(".help_block").remove();
var formData = {
price: $("#price").val(),
format: $("#format").val(),
hall: $("#hall").val(),
startDate: $("#startDate").val(),
endDate: $("#endDate").val(),
startHour: $("#startHour").val(),
idFilm: $("#film_id").val(),
};
$.ajax({
type: "POST",
url:"eventsProcess.php",
contentType: 'application/json; charset=utf-8',
dataType: "json",
data:JSON.stringify(formData),
encode: true,
}).done(function (data) {
console.log(data);
checkErrors(data,"session_form");
})
.fail(function (jqXHR, textStatus) {
$("form#session_form").html(
'<div class="alert alert_danger">Could not reach server, please try again later. '+textStatus+'</div>'
);
});
e.preventDefault();
});
//Edit session
$('#sumbit_edit').click( function(e) {
$(".form_group").removeClass("has_error");
$(".help_block").remove();
var formData = {
price: $("#price").val(),
format: $("#format").val(),
hall: $("#hall").val(),
startDate: $("#startDate").val(),
endDate: $("#endDate").val(),
startHour: $("#startHour").val(),
idFilm: $("#film_id").val(),
og_hall: $("#original_hall").val(),
og_date: $("#original_date").val(),
og_start: $("#original_start_time").val(),
};
console.log(formData);
$.ajax({
type: "PUT",
url:"eventsProcess.php",
contentType: 'application/json; charset=utf-8',
dataType: "json",
data:JSON.stringify(formData),
encode: true,
}).done(function (data) {
console.log(data);
checkErrors(data,"session_form");
})
.fail(function (jqXHR, textStatus) {
$("form#session_form").html(
'<div class="alert alert_danger">Could not reach server, please try again later. '+textStatus+'</div>'
);
});
e.preventDefault();
});
//Delete Session
$('#submit_del').click( function(e) {
$(".form_group").removeClass("has_error");
$(".help_block").remove();
var formData = {
og_hall: $("#original_hall").val(),
og_date: $("#original_date").val(),
og_start: $("#original_start_time").val(),
};
console.log(formData);
$.ajax({
type: "DELETE",
url:"eventsProcess.php",
contentType: 'application/json; charset=utf-8',
dataType: "json",
data:JSON.stringify(formData),
encode: true,
}).done(function (data) {
console.log(data);
checkErrors(data,"session_form")
})
.fail(function (jqXHR, textStatus) {
$("form#session_form").html(
'<div class="alert alert_danger">Could not reach server, please try again later. '+textStatus+'</div>'
);
});
e.preventDefault();
});
function checkErrors(data,formname) {
if (!data.success) {
if (data.errors.price) {
$("#price_group").addClass("has_error");
$("#price_group").append(
'<div class="help_block">' + data.errors.price + "</div>"
);
}
if (data.errors.format) {
$("#format_group").addClass("has_error");
$("#format_group").append(
'<div class="help_block">' + data.errors.format + "</div>"
);
}
if (data.errors.hall) {
$("#hall_group").addClass("has_error");
$("#hall_group").append(
'<div class="help_block">' + data.errors.hall + "</div>"
);
}
if (data.errors.startDate) {
$("#date_group").addClass("has_error");
$("#date_group").append(
'<div class="help_block">' + data.errors.startDate + "</div>"
);
}
if (data.errors.startDate) {
$("#date_group").addClass("has_error");
$("#date_group").append(
'<div class="help_block">' + data.errors.endDate + "</div>"
);
}
if (data.errors.date) {
$("#date_group").addClass("has_error");
$("#date_group").append(
'<div class="help_block">' + data.errors.date + "</div>"
);
}
if (data.errors.startHour) {
$("#hour_group").addClass("has_error");
$("#hour_group").append(
'<div class="help_block">' + data.errors.startHour + "</div>"
);
}
if (data.errors.idfilm) {
$("#film_msg_group").addClass("has_error");
$("#film_msg_group").append(
'<div class="help_block">' + data.errors.idfilm + "</div>"
);
}
if (data.errors.global) {
$("#global_group").addClass("has_error");
$("#global_group").append(
'<div class="help_block">' + data.errors.global + "</div>"
);
}
} else {
$("#operation_msg").addClass("has_no_error");
$("#operation_msg").append(
'<div class="alert alert_success" id="success">' + data.message + "</div>"
);
document.getElementById("session_form").style.display = "none";
}
}
//Change the view from the film list to a concrete film with some data about it
$('.film_button').bind('click', function(e) {
var id = $(this).attr('id');
var x = document.getElementById("film_group");
x.style.display = "block";
var tittle = document.getElementById("title"+id);
document.getElementById("film_title").innerHTML = tittle.innerHTML;
var lan = document.getElementById("lan"+id);
document.getElementById("film_lan").innerHTML = lan.value;
var dur = document.getElementById("dur"+id);
document.getElementById("film_dur").innerHTML = dur.innerHTML;
var img = document.getElementById("img"+id);
document.getElementById("film_img").src = "../img/films/"+img.value;
var desc = document.getElementById("desc"+id);
document.getElementById("film_desc").innerHTML = desc.value;
var idf = document.getElementById("id"+id);
document.getElementById("film_id").value = idf.value;
x = document.getElementById("film_list")
x.style.display = "none";
});
//Change the view from the concrete film data to a film list with all available films
$('#return').click( function() {
var x = document.getElementById("film_group");
x.style.display = "none";
x = document.getElementById("film_list");
x.style.display = "block";
});
});