mirror of
https://github.com/pierre42100/ComunicWeb
synced 2025-11-04 04:04:20 +00:00
Send a new group logo to the server.
This commit is contained in:
Pierre HUBERT
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
@@ -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: "<i class='fa fa-arrow-left'></i> 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: "<i class='fa fa-arrow-left'></i> 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;
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user