From eb69734a38f69471bbde6da80a237dd237c28788 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Wed, 4 Jul 2018 13:27:07 +0200 Subject: [PATCH] Send a new group logo to the server. --- assets/css/pages/groups/pages/settings.css | 11 + assets/js/components/groups/interface.js | 15 + assets/js/pages/groups/pages/settings.js | 344 +++++++++++++-------- 3 files changed, 233 insertions(+), 137 deletions(-) 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