Basic groups header

assets/css/pages/groups/pages/group.css

@@ -0,0 +1,14 @@
+/**
+ * Group page main stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.group-page {
+    padding-top: 10px;
+}
+
+.group-page .col-md-6 {
+    margin: auto;
+    float: none;
+}

assets/css/pages/groups/sections/header.css

@@ -0,0 +1,17 @@
+/**
+ * Groups header
+ *
+ * @author Pierre HUBERT
+ */
+
+.group-header {
+    
+}
+
+.group-header .group-icon {
+    max-height: 150px;
+}
+
+.group-header .group-name {
+    font-size: 200%;
+}

assets/js/common/functionsSchema.js

@@ -1212,7 +1212,28 @@ var ComunicWeb = {
 					//TODO : implement
 				},
 
-			}
+				/**
+				 * Main group page
+				 */
+				group: {
+					//TODO : implement
+				},
+
+			},
+
+			/**
+			 * Groups sections
+			 */
+			sections: {
+
+				/**
+				 * Header section
+				 */
+				header: {
+					//TODO : implement
+				},
+
+			},
 		},
 
 		/**

assets/js/components/groups/interface.js

@@ -20,6 +20,36 @@ ComunicWeb.components.groups.interface = {
             name: name
         };
         ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+    },
+
+    /**
+     * Get information about a group
+     * 
+     * @param {Number} id The ID of the target group
+     * @param {Function} callback Callback
+     */
+    getInfo: function(id, callback){
+        //Perform the request over the API
+        var apiURI = "groups/get_info";
+        var params = {
+            id: id
+        };
+        ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+    },
+
+    /**
+     * Get advanced information about a group
+     * 
+     * @param {Number} id The ID of the target group
+     * @param {Function} callback Callback
+     */
+    getAdvancedInfo: function(id, callback){
+        //Perform the request over the API
+        var apiURI = "groups/get_advanced_info";
+        var params = {
+            id: id
+        };
+        ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
     }
 
 };

assets/js/pages/groups/main.js

@@ -31,15 +31,34 @@ ComunicWeb.pages.groups.main = {
 
 		//Check if the main page has to be opened
 		if(page == "main" && signed_in()){
-			ComunicWeb.pages.groups.pages.main.open(target);
+			return ComunicWeb.pages.groups.pages.main.open(target);
 		}
 
 		//Check if the page to create a group has to be opened
 		else if (page == "create" && signed_in()){
-			ComunicWeb.pages.groups.pages.create.open(target);
+			return ComunicWeb.pages.groups.pages.create.open(target);
 		}
 
-		//Else the page was not found
+		//Else determine which group page to open (specified after the ID of the group)
+		var groupID = page;
+		if(args.subfolder.split("/").length < 2){
+			page = "group";
+		}
+		else {
+			//Extract the page to open from the URL
+			page = args.subfolder.split("/")[1];
+
+			//Check if there is nothing after "/"
+			if(page.length < 2)
+				page = "group";
+		}
+
+		//Check which page to open
+		if(page == "group"){
+			ComunicWeb.pages.groups.pages.group.open(groupID, target);
+		}
+
+		//Unrecognized page
 		else
 			ComunicWeb.common.error.pageNotFound(args, target);
 	}

assets/js/pages/groups/pages/group.js

@@ -0,0 +1,70 @@
+/**
+ * Group page
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.groups.pages.group = {
+
+    /**
+     * Open (display) a group page
+     * 
+     * @param {Number} id The ID of the group to display
+     * @param {HTMLElement} target The target for the page
+     */
+    open: function(id, target){
+        
+        //Get information about the group
+        ComunicWeb.components.groups.interface.getAdvancedInfo(id, function(result){
+
+            //Check for errors
+            if(result.error){
+
+                //Check the code of the error
+                if(result.error.code == 404){
+                    need_auth;//TODO : implement
+                }
+
+                else 
+                    //The group does not exists
+                    ComunicWeb.common.error.pageNotFound({}, target);
+
+            }
+
+            else
+                //Display group page
+                ComunicWeb.pages.groups.pages.group.display(id, result, target);
+
+        });
+
+    },
+
+    /**
+     * Display information about a group
+     * 
+     * @param {Number} id The ID of the group to display
+     * @param {Object} info Information about the group to display
+     * @param {HTMLElement} target The target for the page
+     */
+    display: function(id, info, target){
+
+        //Create page row
+        var pageRow = createElem2({
+            appendTo: target,
+            type: "div",
+            class: "row group-page"
+        });
+
+        //Create header column
+        var headerColumn = createElem2({
+            appendTo: pageRow,
+            type: "div",
+            class: "col-md-6"
+        });
+
+        //Display the header for the group
+        ComunicWeb.pages.groups.sections.header.display(info, headerColumn);
+
+    }
+
+}

assets/js/pages/groups/sections/header.js

@@ -0,0 +1,55 @@
+/**
+ * Groups header
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.groups.sections.header = {
+
+    /**
+     * Display groups page header
+     * 
+     * @param {Object} info Information about the group to display
+     * @param {HTMLElement} target The target for the header
+     */
+    display: function(info, target){
+        
+        //Create header container
+        var headerContainer = createElem2({
+            appendTo: target,
+            type: "div",
+            class: "group-header"
+        });
+
+        //Create a row
+        var row = createElem2({
+            appendTo: headerContainer,
+            type: "div",
+            class: "row"
+        });
+
+        //First column
+        var firstColumn = createElem2({
+            appendTo: row,
+            type: "div",
+            class: "col-lg-8"
+        });
+
+        //Group icon
+        var groupIcon = createElem2({
+            appendTo: firstColumn,
+            type: "img",
+            src: info.icon_url,
+            class: "group-icon"
+        });
+        
+        //Group name
+        var groupName = createElem2({
+            appendTo: firstColumn,
+            type: "span",
+            class: "group-name",
+            innerHTML: info.name
+        });
+    },
+
+};

system/config/dev.config.php

@@ -220,6 +220,11 @@ class Dev {
 				//Groups pages
 				"css/pages/groups/pages/main.css",
 				"css/pages/groups/pages/create.css",
+				"css/pages/groups/pages/group.css",
+
+				//Groups sections
+				"css/pages/groups/sections/header.css",
+
 
 			//Settings page
 				//Sections sections
@@ -419,6 +424,11 @@ class Dev {
 				//Groups sub pages
 				"js/pages/groups/pages/main.js",
 				"js/pages/groups/pages/create.js",
+				"js/pages/groups/pages/group.js",
+
+				//Groups sections
+				"js/pages/groups/sections/header.js",
+
 
 			//User settings page
 			"js/pages/settings/main.js",