diff --git a/assets/css/pages/groups/pages/settings.css b/assets/css/pages/groups/pages/settings.css
index 30be2810..ffef42c6 100644
--- a/assets/css/pages/groups/pages/settings.css
+++ b/assets/css/pages/groups/pages/settings.css
@@ -17,4 +17,15 @@
.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;
}
\ No newline at end of file
diff --git a/assets/js/components/groups/interface.js b/assets/js/components/groups/interface.js
index 7a452b35..3f3b753c 100644
--- a/assets/js/components/groups/interface.js
+++ b/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);
+ }
+
};
\ No newline at end of file
diff --git a/assets/js/pages/groups/pages/settings.js b/assets/js/pages/groups/pages/settings.js
index fbf61841..787896fa 100644
--- a/assets/js/pages/groups/pages/settings.js
+++ b/assets/js/pages/groups/pages/settings.js
@@ -6,165 +6,235 @@
ComunicWeb.pages.groups.pages.settings = {
- /**
- * Open group settings page
- *
- * @param {Number} id The ID of the settings page
- * @param {HTMLElement} target The target of the page
- */
- open: function(id, target){
-
- //Create settings container
- var settingsContainer = createElem2({
- appendTo: target,
- type: "div",
- class: "group-settings-container col-md-6"
- });
+ /**
+ * Open group settings page
+ *
+ * @param {Number} id The ID of the settings page
+ * @param {HTMLElement} target The target of the page
+ */
+ open: function(id, target){
+
+ //Create settings container
+ var settingsContainer = createElem2({
+ appendTo: target,
+ type: "div",
+ class: "group-settings-container col-md-6"
+ });
- //Add backward link
- var backwardLink = createElem2({
- appendTo: settingsContainer,
- type: "div",
- class: "a",
- innerHTML: " Go back to the group"
- });
- backwardLink.addEventListener("click", function(e){
- openPage("groups/" + id);
- });
+ //Add backward link
+ var backwardLink = createElem2({
+ appendTo: settingsContainer,
+ type: "div",
+ class: "a",
+ innerHTML: " Go back to the group"
+ });
+ backwardLink.addEventListener("click", function(e){
+ openPage("groups/" + id);
+ });
- //Add title
- createElem2({
- appendTo: settingsContainer,
- type: "h2",
- class: "title",
- innerHTML: "Group settings"
- });
+ //Add title
+ createElem2({
+ appendTo: settingsContainer,
+ type: "h2",
+ class: "title",
+ innerHTML: "Group settings"
+ });
- //Display loading message
- var loadingMsg = ComunicWeb.common.messages.createCalloutElem(
- "Loading",
- "Please wait while we retrieve the settings of the page...",
- "info");
- settingsContainer.appendChild(loadingMsg);
-
- //Get the settings of the page
- ComunicWeb.components.groups.interface.getSettings(id, function(result){
+ //Display loading message
+ var loadingMsg = ComunicWeb.common.messages.createCalloutElem(
+ "Loading",
+ "Please wait while we retrieve the settings of the page...",
+ "info");
+ settingsContainer.appendChild(loadingMsg);
+
+ //Get the settings of the page
+ ComunicWeb.components.groups.interface.getSettings(id, function(result){
- //Remove loading message
- loadingMsg.remove();
+ //Remove loading message
+ loadingMsg.remove();
- //Check for error
- if(result.error){
-
- //Check if the user is not authorized to access the page
- if(result.error.code == 401){
- //The user is not authorized to see this page
- settingsContainer.appendChild(ComunicWeb.common.messages.createCalloutElem(
- "Access forbidden",
- "You are not authorized to access these information !",
- "danger"
- ));
- }
+ //Check for error
+ if(result.error){
+
+ //Check if the user is not authorized to access the page
+ if(result.error.code == 401){
+ //The user is not authorized to see this page
+ settingsContainer.appendChild(ComunicWeb.common.messages.createCalloutElem(
+ "Access forbidden",
+ "You are not authorized to access these information !",
+ "danger"
+ ));
+ }
- //Else the page was not found
- else {
- settingsContainer.remove();
- ComunicWeb.common.error.pageNotFound({}, target);
- }
+ //Else the page was not found
+ else {
+ settingsContainer.remove();
+ ComunicWeb.common.error.pageNotFound({}, target);
+ }
- }
+ }
- else {
- //Display settings pages
- ComunicWeb.pages.groups.pages.settings.display(id, result, settingsContainer);
- }
+ else {
+ //Display settings pages
+ ComunicWeb.pages.groups.pages.settings.display(id, result, settingsContainer);
+ }
- });
+ });
- },
+ },
- /**
- * Display page settings
- *
- * @param {Number} id The ID of the target page
- * @param {Object} settings The settings of the page
- * @param {HTMLElement} target The target of the page
- */
- display: function(id, settings, target){
+ /**
+ * Display page settings
+ *
+ * @param {Number} id The ID of the target page
+ * @param {Object} settings The settings of the page
+ * @param {HTMLElement} target The target of the page
+ */
+ display: function(id, settings, target){
- //Create form container
- var formContainer = createElem2({
- appendTo: target,
- type: "div",
- class: "group-settings-form"
- });
+ //Create form container
+ var formContainer = createElem2({
+ appendTo: target,
+ type: "div",
+ class: "group-settings-form"
+ });
- //Group ID (not editable)
- createFormGroup({
- target: formContainer,
- label: "Group ID",
- type: "text",
- value: settings.id,
- disabled: true
- });
+ //Group ID (not editable)
+ createFormGroup({
+ target: formContainer,
+ label: "Group ID",
+ type: "text",
+ value: settings.id,
+ disabled: true
+ });
- //Group name
- var groupName = createFormGroup({
- target: formContainer,
- type: "text",
- label: "Group name",
- placeholder: "The name of the group",
- value: settings.name,
- });
+ //Group name
+ var groupName = createFormGroup({
+ target: formContainer,
+ type: "text",
+ label: "Group name",
+ placeholder: "The name of the group",
+ value: settings.name,
+ });
- //Submit button
- var submitButtonContainer = createElem2({
- appendTo: formContainer,
- type: "div",
- class: "submit-button-container"
- });
- var submitButton = createElem2({
- appendTo: submitButtonContainer,
- type: "div",
- class: "btn btn-primary",
- innerHTML: "Submit"
- });
+ //Submit button
+ var submitButtonContainer = createElem2({
+ appendTo: formContainer,
+ type: "div",
+ class: "submit-button-container"
+ });
+ var submitButton = createElem2({
+ appendTo: submitButtonContainer,
+ type: "div",
+ class: "btn btn-primary",
+ innerHTML: "Submit"
+ });
- submitButton.addEventListener("click", function(e){
+ submitButton.addEventListener("click", function(e){
- //Check if another request is already pending or not
- if(submitButton.disabled)
- return;
+ //Check if another request is already pending or not
+ if(submitButton.disabled)
+ return;
- //Validate the form
- if(!ComunicWeb.common.formChecker.checkInput(groupName, true))
- return;
-
- //Check the length of the name of the group
- if(groupName.value.length < 4)
- return notify("Please check the name of group !", "danger");
+ //Validate the form
+ if(!ComunicWeb.common.formChecker.checkInput(groupName, true))
+ return;
+
+ //Check the length of the name of the group
+ if(groupName.value.length < 4)
+ return notify("Please check the name of group !", "danger");
- //Prepare the update request on the server
- var settings = {
- name: groupName.value
- };
+ //Prepare the update request on the server
+ var settings = {
+ name: groupName.value
+ };
- //Lock the send button
- submitButton.disabled = true;
+ //Lock the send button
+ submitButton.disabled = true;
- //Perform the request on the API
- ComunicWeb.components.groups.interface.setSettings(id, settings, function(result){
+ //Perform the request on the API
+ ComunicWeb.components.groups.interface.setSettings(id, settings, function(result){
- //Unlock send button
- submitButton.disabled = false;
+ //Unlock send button
+ submitButton.disabled = false;
- //Check for errors
- if(result.error)
- return notify("An error occured while trying to update group settings!", "danger");
- else
- return notify("Group settings have been successfully updated!", "success");
+ //Check for errors
+ if(result.error)
+ return notify("An error occured while trying to update group settings!", "danger");
+ else
+ return notify("Group settings have been successfully updated!", "success");
- });
- });
- },
+ });
+ });
+
+
+ /**
+ * 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;
+
+ });
+
+ });
+ },
}
\ No newline at end of file