Basic groups header

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