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: "Name" + }); + + var tableBody = createElem2({ + appendTo: moviesTable, + type: "tbody", + }); + + + //Process the list of movies + var i; + for(i in list){ + + //Create a line + var line = createElem2({ + appendTo: tableBody, + type: "tr", + }); + + //Video cell + var videoCell = createElem2({ + appendTo: line, + type: "td" + }); + + var videoElem = createElem2({ + appendTo: videoCell, + type: "video", + }); + videoElem.setAttribute("controls", ""); + + var videoSrc = createElem2({ + appendTo: videoElem, + type: "source", + src: list[i].url + }); + videoSrc.setAttribute("type", list[i].file_type); + + //Name cell + var nameCell = createElem2({ + appendTo: line, + type: "td", + innerHTML: list[i].name + }); + + //Actions cell + var actionCell = createElem2({ + appendTo: line, + type: "td", + }); + + var chooseButton = createElem2({ + appendTo: actionCell, + type: "button", + class: "btn btn-primary", + innerHTML: "Choose" + }); + chooseButton.setAttribute("data-movie-num", i); + + chooseButton.onclick = function(){ + + //Hide the modal + $(modalRoot).modal('hide'); + + //Call callback + callback(list[this.getAttribute("data-movie-num")]); + } + } + }, +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 96637a92..3fb1b3b9 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -132,6 +132,9 @@ class Dev { "css/components/posts/ui.css", "css/components/posts/form.css", + //Movies picker + "css/components/movies/picker.css", + //Pages stylesheets //User Page "css/pages/userPage/main.css", @@ -220,6 +223,10 @@ class Dev { //Countdown timer "js/components/countdown.js", + //Movies + "js/components/movies/interface.js", + "js/components/movies/picker.js", + //User scripts "js/user/loginTokens.js", "js/user/userLogin.js",