Send a request to the server to create the group

assets/css/pages/groups/pages/create.css

@@ -0,0 +1,25 @@
+/**
+ * Create groups page main stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.create-group-page {
+	max-width: 450px;
+	margin: auto;
+	padding-top: 60px;
+}
+
+.create-group-page form {
+	border: 1px #162935 solid;
+	padding: 15px;
+}
+
+.create-group-page form h3 {
+	text-align: center;
+	margin-top: 0px;
+}
+
+.create-group-page .submit-button-container {
+	text-align: center;
+}

assets/js/common/functionsSchema.js

@@ -993,7 +993,21 @@ var ComunicWeb = {
 				//TODO : implement
 			}
 
-		}
+		},
+
+		/**
+		 * Groups component
+		 */
+		groups: {
+
+			/**
+			 * API interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
 
 	},
 
@@ -1189,7 +1203,14 @@ var ComunicWeb = {
 				 */
 				main: {
 					//TODO : implement
-				}
+				},
+
+				/**
+				 * Create a group page
+				 */
+				create: {
+					//TODO : implement
+				},
 
 			}
 		},

assets/js/components/groups/interface.js

@@ -0,0 +1,25 @@
+/**
+ * Groups API interface
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.groups.interface = {
+
+    /**
+     * Create a group
+     * 
+     * @param {String} name The name of the group to create
+     * @param {Function} callback
+     */
+    create: function(name, callback){
+
+        //Perform a request over the API
+        var apiURI = "groups/create";
+        var params = {
+            name: name
+        };
+        ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+    }
+
+};

assets/js/pages/groups/main.js

@@ -6,7 +6,7 @@
 
 ComunicWeb.pages.groups.main = {
 
-    /**
+	/**
 	 * Open settings page
 	 * 
 	 * @param {object} args Optionnal arguments
@@ -14,29 +14,34 @@ ComunicWeb.pages.groups.main = {
 	 */
 	open: function(args, target){
 
-        //Determine which page / group should be opened
+		//Determine which page / group should be opened
-        if(!args.subfolder)
+		if(!args.subfolder)
-            var page = "main";
+			var page = "main";
-        
+		
-        else {
+		else {
 
-            //Extract the name of the page from the URL
+			//Extract the name of the page from the URL
-            if(!args.subfolder.includes("/"))
+			if(!args.subfolder.includes("/"))
-                var page = args.subfolder;
+				var page = args.subfolder;
-            else {
+			else {
-                var page = args.subfolder.split("/")[0];
+				var page = args.subfolder.split("/")[0];
-            }
+			}
 
-        }
+		}
 
-        //Check if the main page has to be opened
+		//Check if the main page has to be opened
-        if(page == "main"){
+		if(page == "main" && signed_in()){
-            ComunicWeb.pages.groups.pages.main.open(target);
+			ComunicWeb.pages.groups.pages.main.open(target);
-        }
+		}
 
-        //Else the page was not found
+		//Check if the page to create a group has to be opened
-        else
+		else if (page == "create" && signed_in()){
-            ComunicWeb.common.error.pageNotFound(args, target);
+			ComunicWeb.pages.groups.pages.create.open(target);
-    }
+		}
-    
+
+		//Else the page was not found
+		else
+			ComunicWeb.common.error.pageNotFound(args, target);
+	}
+	
 };

assets/js/pages/groups/pages/create.js

@@ -0,0 +1,89 @@
+/**
+ * Create a group page
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.groups.pages.create = {
+
+	/**
+	 * Open the page
+	 * 
+	 * @param {HTMLElement} target The target of the page
+	 */
+	open: function(target){
+		
+		//Update page title
+		document.title = "Create a group";
+
+		//Create page container
+		var pageContainer = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "create-group-page"
+		});
+
+		//Form container
+		var formContainer = createElem2({
+			appendTo: pageContainer,
+			type: "form",
+		});
+
+		//Form title
+		createElem2({
+			appendTo: formContainer,
+			type: "h3",
+			innerHTML: "Create a group"
+		})
+
+		//Group name input
+		var nameInput = createFormGroup({
+			target: formContainer,
+			label: "Group name",
+			placeholder: "The name of the group",
+			type: "text"
+		});
+
+		//Add submit button
+		var submitContainer = createElem2({
+			appendTo: formContainer,
+			type: "div",
+			class: "submit-button-container"
+		});
+		createElem2({
+			appendTo: submitContainer,
+			type: "input",
+			elemType: "submit",
+			class: "btn btn-primary",
+			value: "Create"
+		});
+
+		//Handle form submit
+		formContainer.onsubmit = function(){
+
+			//Check user inputs
+			if(!ComunicWeb.common.formChecker.checkInput(nameInput, true)){
+				notify("Please specify the name of the group!", "danger");
+				return false;	
+			}
+
+			//Perform a request on the server to create the group
+			ComunicWeb.components.groups.interface.create(nameInput.value, function(res){
+
+				//Check for errors
+				if(res.error){
+					return notify("An error occured while trying to create the group!", "danger");
+				}
+
+				//Redirect to the group page
+				openPage("groups/" + res.id);
+
+			});
+
+			//Prevent default behavior
+			return false;
+		}
+
+	}
+
+};

system/config/dev.config.php

@@ -219,6 +219,7 @@ class Dev {
 			//Groups page
 				//Groups pages
 				"css/pages/groups/pages/main.css",
+				"css/pages/groups/pages/create.css",
 
 			//Settings page
 				//Sections sections
@@ -378,6 +379,9 @@ class Dev {
 			"js/components/notifications/ui.js",
 			"js/components/notifications/utils.js",
 
+			//Groups component
+			"js/components/groups/interface.js",
+
 		//User scripts
 		"js/user/loginTokens.js",
 		"js/user/userLogin.js",
@@ -411,7 +415,10 @@ class Dev {
 
 			//Groups page
 			"js/pages/groups/main.js",
-			"js/pages/groups/pages/main.js",
+
+				//Groups sub pages
+				"js/pages/groups/pages/main.js",
+				"js/pages/groups/pages/create.js",
 
 			//User settings page
 			"js/pages/settings/main.js",