Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-11-22 20:19:21 +00:00
Code Issues Projects Releases Wiki Activity

Send a new group logo to the server.

Browse Source
This commit is contained in:
Pierre HUBERT 2018-07-04 13:27:07 +02:00
parent 6239d43f05
commit eb69734a38
3 changed files with 233 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/pages/groups/pages/settings.css
View File

@ -18,3 +18,14 @@
.group-settings-container .submit-button-container { .group-settings-container .submit-button-container {
text-align: center; 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;
}

15
assets/js/components/groups/interface.js
View File

@ -82,4 +82,19 @@ ComunicWeb.components.groups.interface = {
ComunicWeb.common.api.makeAPIrequest(apiURI, settings, true, callback); 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);
}
}; };

336
assets/js/pages/groups/pages/settings.js
View File

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