Created movie picker

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;
+}

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
+			},
+
+		},
+
 	},
 
 	/**

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);
+
+	}
+
+}

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: "<p>Loading, please wait...</p>"
+		});
+
+		//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: "<th></th><th>Name</th><th></th>"
+		});
+
+		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")]);
+			}
+		}
+	},
+}

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",