86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
|
const $ = require('jquery');
|
||
|
|
const CoreView = require('backbone/core-view');
|
||
|
|
const TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
|
||
|
|
|
||
|
|
const MAX_QUOTA_BITS = 104857600; // 100Mb
|
||
|
|
|
||
|
|
/* Progress quota bar for organization users */
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'hover .js-quotaProgressSlider': '_showTooltip'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function () {
|
||
|
|
this._initBinds();
|
||
|
|
this._initViews();
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.listenTo(this.model, 'change:quota_in_bytes', this._onQuotaChange);
|
||
|
|
},
|
||
|
|
|
||
|
|
_initViews: function () {
|
||
|
|
const userMinQuota = MAX_QUOTA_BITS / this.model.organization.get('available_quota_for_user');
|
||
|
|
|
||
|
|
// Init slider
|
||
|
|
this.$('.js-slider').slider({
|
||
|
|
max: 100,
|
||
|
|
min: userMinQuota,
|
||
|
|
step: 1,
|
||
|
|
value: this.model.assignedQuotaPercentage(),
|
||
|
|
range: 'min',
|
||
|
|
orientation: 'horizontal',
|
||
|
|
slide: this._onSlideChange.bind(this)
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.ui-slider-handle').addClass('js-quotaProgressSlider');
|
||
|
|
},
|
||
|
|
|
||
|
|
_onSlideChange: function (ev, ui) {
|
||
|
|
const userQuota = Math.max(Math.floor((this.model.organization.get('available_quota_for_user') * ui.value) / 100), 1);
|
||
|
|
const assignedPer = (userQuota * 100) / this.model.organization.get('available_quota_for_user');
|
||
|
|
|
||
|
|
if (ui.value >= this.model.usedQuotaPercentage()) {
|
||
|
|
this.$('.ui-slider-range').css('width', `${assignedPer}%`);
|
||
|
|
this.$('.js-quotaProgressSlider').css('left', `${assignedPer}%`);
|
||
|
|
|
||
|
|
const tooltipLeft = $('.js-quotaProgressSlider').offset().left -
|
||
|
|
($('.js-orgUserQuotaTooltip').outerWidth() / 2) +
|
||
|
|
($('.js-quotaProgressSlider').outerWidth() / 2);
|
||
|
|
|
||
|
|
$('.js-orgUserQuotaTooltip').css('left', tooltipLeft);
|
||
|
|
|
||
|
|
this.model.set('quota_in_bytes', userQuota);
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onQuotaChange: function () {
|
||
|
|
if (this.model.assignedQuotaPercentage() >= this.model.usedQuotaPercentage()) {
|
||
|
|
const assignedQuotaPercentage = Math.min(this.model.assignedQuotaPercentage(), 100);
|
||
|
|
|
||
|
|
$('.ui-slider-range').css('width', `${assignedQuotaPercentage}%`);
|
||
|
|
$('.js-quotaProgressSlider').css('left', `${assignedQuotaPercentage}%`);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_showTooltip: function () {
|
||
|
|
const viewModel = this.model;
|
||
|
|
|
||
|
|
this.addView(
|
||
|
|
new TipsyTooltipView({
|
||
|
|
el: $('.js-quotaProgressSlider'),
|
||
|
|
className: 'js-orgUserQuotaTooltip',
|
||
|
|
title: function () {
|
||
|
|
const quotaPercentage = viewModel.assignedQuotaPercentage().toFixed(0);
|
||
|
|
|
||
|
|
return `${quotaPercentage}% of the available org quota`;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|