Skip to content

Commit

Permalink
UI-975: Added a media selection for voicemail greeting message
Browse files Browse the repository at this point in the history
  • Loading branch information
@mroux
mroux committed Aug 25, 2015
1 parent 95670cb commit b667186
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 3 deletions.
11 changes: 11 additions & 0 deletions i18n/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1083,6 +1083,17 @@
"sectionTitle": "Recipients",
"header": "This panel lets you manage who will be notified when someones leave a message on this voicemail box. Click on \"Add New Recipient\" to add an e-mail address to the list",
"create": "Add New Recipient"
},
"__comment": "UI-975: Adding the prepend feature to numbers",
"__version": "v3.22",
"greeting": {
"menuTitle": "Greeting Media",
"sectionTitle": "Greeting Media",
"dropdownLabel": "Media:",
"noGreeting": "- None -",
"audioUploadButton": "Browse...",
"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
"emptyUploadAlert": "Please select a file to upload"
}
}
},
Expand Down
40 changes: 40 additions & 0 deletions submodules/vmboxes/vmboxes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,4 +242,44 @@

.edit-vmbox .list-entities.emails-list {
padding: 0 20px;
}

.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container {
padding: 0 40px;
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .media-dropdown {
margin-bottom: 0px;
margin-left: 10px
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-toggle {
margin-left: 10px;
min-width: 117px;
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div {
display: none;
margin-top: 20px;
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .upload-input {
margin: 0;
width: 330px;
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div button.upload-action {
margin-left: 10px;
padding-left: 19px;
padding-right: 19px;
}

.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div button > i {
margin-right: 0;
padding-right: 0;
}

.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .file-upload {
margin: 0;
display: inline-block;
}
.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .file-upload > input {
margin: 0;
padding: 6px;
width: 140px;
}
111 changes: 108 additions & 3 deletions submodules/vmboxes/vmboxes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@ define(function(require){
},

vmboxesRenderVmbox: function(data, callback) {
var self = this
var self = this,
mode = data.id ? 'edit' : 'add',
popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().vmboxes.editTitle, { name: data.name }) : self.i18n.active().vmboxes.addTitle;
popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().vmboxes.editTitle, { name: data.name }) : self.i18n.active().vmboxes.addTitle,
templateVMBox = $(monster.template(self, 'vmboxes-edit', data)),
callbacks = {
afterSave: function(vmbox) {
Expand All @@ -128,6 +128,8 @@ define(function(require){
}
};

console.log(data);

_.each(data.notify_email_addresses, function(recipient) {
templateVMBox.find('.saved-entities')
.append(monster.template(self, 'vmboxes-emailRow', { name: recipient }));
Expand Down Expand Up @@ -231,6 +233,96 @@ define(function(require){
templateVMBox.find('.saved-entities').on('click', '.delete-entity', function() {
$(this).parents('.entity-wrapper').remove();
});

//Greeting Media stuff
var mediaToUpload,
greetingContainer = templateVMBox.find('.greeting-container'),
closeUploadDiv = function(newMedia) {
mediaToUpload = undefined;
greetingContainer.find('.upload-div input').val('');
greetingContainer.find('.upload-div').slideUp(function() {
greetingContainer.find('.upload-toggle').removeClass('active');
});
if(newMedia) {
var mediaSelect = greetingContainer.find('.media-dropdown');
mediaSelect.append('<option value="'+newMedia.id+'">'+newMedia.name+'</option>');
mediaSelect.val(newMedia.id);
}
};

greetingContainer.find('.upload-input').fileUpload({
inputOnly: true,
wrapperClass: 'file-upload input-append',
btnText: self.i18n.active().vmboxes.popupSettings.greeting.audioUploadButton,
btnClass: 'monster-button',
maxSize: 5,
success: function(results) {
mediaToUpload = results[0];
},
error: function(errors) {
if(errors.hasOwnProperty('size') && errors.size.length > 0) {
monster.ui.alert(self.i18n.active().vmboxes.popupSettings.greeting.fileTooBigAlert);
}
greetingContainer.find('.upload-div input').val('');
mediaToUpload = undefined;
}
});

greetingContainer.find('.upload-toggle').on('click', function() {
if($(this).hasClass('active')) {
greetingContainer.find('.upload-div').stop(true, true).slideUp();
} else {
greetingContainer.find('.upload-div').stop(true, true).slideDown();
}
});

greetingContainer.find('.upload-cancel').on('click', function() {
closeUploadDiv();
});

greetingContainer.find('.upload-submit').on('click', function() {
if(mediaToUpload) {
self.callApi({
resource: 'media.create',
data: {
accountId: self.accountId,
data: {
streamable: true,
name: mediaToUpload.name,
media_source: "upload",
description: mediaToUpload.name
}
},
success: function(data, status) {
var media = data.data;
self.callApi({
resource: 'media.upload',
data: {
accountId: self.accountId,
mediaId: media.id,
data: mediaToUpload.file
},
success: function(data, status) {
closeUploadDiv(media);
},
error: function(data, status) {
self.callApi({
resource: 'media.delete',
data: {
accountId: self.accountId,
mediaId: media.id,
data: {}
},
success: function(data, status) {}
});
}
});
}
});
} else {
monster.ui.alert(self.i18n.active().vmboxes.popupSettings.greeting.emptyUploadAlert);
}
});
},

vmboxesMergeData: function(originalData, template) {
Expand Down Expand Up @@ -272,7 +364,9 @@ define(function(require){
},
formattedData = $.extend(true, {}, defaults, data.vmbox);

formattedData.extra = {};
formattedData.extra = {
mediaList: data.mediaList
};

return formattedData;
},
Expand Down Expand Up @@ -335,6 +429,17 @@ define(function(require){
else {
callback(null, {});
}
},
mediaList: function(callback) {
self.callApi({
resource: 'media.list',
data: {
accountId: self.accountId
},
success: function(data) {
callback(null, data.data);
}
});
}
},
function(error, results) {
Expand Down
27 changes: 27 additions & 0 deletions views/vmboxes-edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<ul class="dropdown-menu pull-right">
<li><a class="tabs-selector change-section" data-section="options" href="javascript:void(0)"><i class="fa fa-ambulance"></i>{{ i18n.vmboxes.popupSettings.options.menuTitle }}</a></li>
<li><a class="tabs-selector change-section" data-section="recipients" href="javascript:void(0)"><i class="fa fa-envelope"></i>{{ i18n.vmboxes.popupSettings.recipients.menuTitle }}</a></li>
<li><a class="tabs-selector change-section" data-section="greeting" href="javascript:void(0)"><i class="fa icon-telicon-voicemail"></i>{{ i18n.vmboxes.popupSettings.greeting.menuTitle }}</a></li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -167,6 +168,32 @@
</div>
</div>
</div>

<div class="tabs-section" data-section="greeting">
<div class="title">
{{ i18n.vmboxes.popupSettings.greeting.sectionTitle }}
</div>

<div class="greeting-container">
<div>
<span>{{ i18n.vmboxes.popupSettings.greeting.dropdownLabel }}</span>
<select name="media.unavailable" class="media-dropdown">
<option value="none">{{ i18n.vmboxes.popupSettings.greeting.noGreeting }}</option>
{{#each extra.mediaList}}
<option value="{{this.id}}" {{#compare ../media.unavailable '===' this.id}}selected{{/compare}}>{{this.name}}</option>
{{/each}}
</select>
<button type="button" class="monster-button-primary non-fixed upload-toggle" data-toggle="button">
{{ i18n.upload }}
</button>
</div>
<div class="upload-div">
<input type="file" class="upload-input" accept="audio/*">
<button type="button" class="monster-button-success non-fixed upload-action upload-submit"><i class="fa fa-upload"></i></button>
<button type="button" class="monster-button-danger non-fixed upload-action upload-cancel"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</form>
</div>
Expand Down

0 comments on commit b667186

Please sign in to comment.