diff --git a/assets/css/components/movies/picker.css b/assets/css/components/movies/picker.css new file mode 100644 index 00000000..78b8586a --- /dev/null +++ b/assets/css/components/movies/picker.css @@ -0,0 +1,13 @@ +/** + * Movies picker + * + * @author Pierre HUBET + */ + +.pick-movie-modal .modal-body { + max-height: 500px; +} + +.pick-movie-modal video { + height: 100px; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index f22030c1..ba454fcc 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -681,6 +681,27 @@ var ComunicWeb = { //TODO : implement }, + /** + * Movies functions + */ + movies: { + + /** + * Movies communication interface + */ + interface: { + //TODO : implement + }, + + /** + * Movies picker + */ + picker:{ + //TODO : implement + }, + + }, + }, /** diff --git a/assets/js/components/movies/interface.js b/assets/js/components/movies/interface.js new file mode 100644 index 00000000..aaf9c134 --- /dev/null +++ b/assets/js/components/movies/interface.js @@ -0,0 +1,23 @@ +/** + * Movies communication interface + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.movies.interface = { + + /** + * Get the list of movies of the user from the server + * + * @param {function} callback What to do once we got a response from the server + */ + getList: function(callback){ + + apiURI = "movies/get_list"; + params = {}; + + ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); + + } + +} \ No newline at end of file diff --git a/assets/js/components/movies/picker.js b/assets/js/components/movies/picker.js new file mode 100644 index 00000000..bbe944a2 --- /dev/null +++ b/assets/js/components/movies/picker.js @@ -0,0 +1,208 @@ +/** + * Movies picker + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.movies.picker = { + + /** + * Display the movie picker + * + * Allows the user to choose a movie from his collection + * + * @param {function} callback What to do once a movie has been selected + */ + pick: function(callback){ + + //Create the modal + var modal = createElem2({ + type: "div", + class: "modal pick-movie-modal", + }); + modal.setAttribute("role", "dialog"); + + + var modalDialog = createElem2({ + appendTo: modal, + type: "div", + class: "modal-dialog" + }); + + var modalContent = createElem2({ + appendTo: modalDialog, + type: "div", + class: "modal-content", + }); + + //Modal header + var modalHeader = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-header" + }); + + var closeModal = createElem2({ + appendTo: modalHeader, + type: "button", + class: "close", + }); + closeModal.onclick = function(){ + $(modal).modal('hide'); + } + + createElem2({ + appendTo: closeModal, + type: "span", + innerHTML: "x" + }); + + var modalTitle = createElem2({ + appendTo: modalHeader, + type: "h4", + class: "modal-title", + innerHTML: "Pick a movie" + }); + + //Modal body + var modalBody = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-body", + innerHTML: "
Loading, please wait...
" + }); + + //Modal footer + var modalFooter = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-footer" + }); + + var closeButton = createElem2({ + appendTo: modalFooter, + type: "button", + class: "btn btn-danger", + innerHTML: "Cancel" + }); + closeButton.onclick = function(){ + $(modal).modal('hide'); + } + + //Show the modal + $(modal).modal('show'); + + //Get the list of movies of the user + ComunicWeb.components.movies.interface.getList(function(result){ + + //In case of error + if(result.error){ + ComunicWeb.common.notificationSystem.showNotification("Couldn't get the list of movies of the user !", "danger"); + return; + } + + //Process the list of movies + ComunicWeb.components.movies.picker._display_list(result, modal, modalBody, callback); + + }); + }, + + /** + * Display the list of movies + * + * @param {object} list The list of movies + * @param {HTMLElement} modalRoot The modal root node + * @param {HTMLElement} modalBody The modal body + * @param {function} callback What to do once a movie has been picked + */ + _display_list: function(list, modalRoot, modalBody, callback){ + + //Empty modal body + emptyElem(modalBody); + + //Create a table to display the list of movies + var moviesTable = createElem2({ + appendTo: modalBody, + type: "table", + class: "table table-hover" + }); + + //Create table header + var tableHead = createElem2({ + appendTo: moviesTable, + type: "thead" + }); + + var tableTR = createElem2({ + appendTo: tableHead, + type: "tr", + innerHTML: "