Send a new group logo to the server.

assets/css/pages/groups/pages/settings.css

@@ -18,3 +18,14 @@
 .group-settings-container .submit-button-container {
     text-align: center;
 }
+
+.group-settings-container .groupLogoSettingsContainer {
+    margin-top: 100px;
+    text-align: center;
+}
+
+.group-settings-container .group-logo-settings-img {
+    width: 150px;
+    margin: auto;
+    display: block;
+}

assets/js/components/groups/interface.js

@@ -82,4 +82,19 @@ ComunicWeb.components.groups.interface = {
         ComunicWeb.common.api.makeAPIrequest(apiURI, settings, true, callback);
     },
 
+    /**
+     * Upload a new group logo
+     * 
+     * @param {Number} id The ID of the target group
+     * @param {FormData} data The form data that contains the
+     * new logo (parameter name : logo)
+     * @param {Function} callback
+     */
+    uploadLogo: function(id, data, callback){
+        //Perform the request over the API
+        var apiURI = "groups/upload_logo";
+        data.append("id", id);
+        ComunicWeb.common.api.makeFormDatarequest(apiURI, data, true, callback);
+    }
+
 };

assets/js/pages/groups/pages/settings.js

@@ -166,5 +166,75 @@ ComunicWeb.pages.groups.pages.settings = {
 
 			});
 		});
+
+
+		/**
+		 * Group account image
+		 */
+		var groupLogoSettingsContainer = createElem2({
+			appendTo: formContainer,
+			type: "div",
+			class: "groupLogoSettingsContainer"
+		});
+
+		createElem2({
+			appendTo: groupLogoSettingsContainer,
+			type: "h3",
+			class: "title",
+			innerHTML: "Group logo"
+		});
+
+		//Display group logo (img)
+		var groupLogo = createElem2({
+			appendTo: groupLogoSettingsContainer,
+			type: "img",
+			class: "group-logo-settings-img",
+			src: settings.icon_url
+		});
+
+		//Add a button to update the group logo
+		var updateGroupLogoLabel = createElem2({
+			appendTo: groupLogoSettingsContainer,
+			type: "label",
+		});
+
+		var updateLogoInput = createElem2({
+			appendTo: updateGroupLogoLabel,
+			type: "input",
+			elemType: "file",
+		});
+		updateLogoInput.style.display = "none";
+
+		var updateLogoBtn = createElem2({
+			appendTo: updateGroupLogoLabel,
+			type: "div",
+			class: "btn btn-sm btn-primary",
+			innerHTML: "Upload a new logo"
+		});
+
+		updateLogoInput.addEventListener("change", function(e){
+			
+			//Check if a file has been selected
+			if(updateLogoInput.files.length == 0)
+				return;
+
+			//Upload the new group logo
+			var fd = new FormData();
+			fd.append("logo", updateLogoInput.files[0], updateLogoInput.files[0].name);
+			ComunicWeb.components.groups.interface.uploadLogo(id, fd, function(result){
+
+				//Check for errors
+				if(result.error)
+					return notify("An error occurred while trying to upload new group logo!", "danger");
+				
+				//Success
+				notify("The new group logo has been successfully saved!", "success");
+
+				//Change logo image
+				groupLogo.src = result.url;
+
+			});
+
+		});
 	},
 }