mirror of
https://github.com/HeyPuter/puter
synced 2024-11-15 06:15:47 +00:00
Settings: Move 'Usage' tab into its own file
This commit is contained in:
Sam Atkins
parent
e2f048ec2d
commit
f5175941d9
141
src/UI/Settings/UITabUsage.js
Normal file
141
src/UI/Settings/UITabUsage.js
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (C) 2024 Puter Technologies Inc.
|
||||||
|
*
|
||||||
|
* This file is part of Puter.
|
||||||
|
*
|
||||||
|
* Puter is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as published
|
||||||
|
* by the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// About
|
||||||
|
export default {
|
||||||
|
id: 'usage',
|
||||||
|
title_i18n_key: 'usage',
|
||||||
|
icon: 'speedometer-outline.svg',
|
||||||
|
html: () => {
|
||||||
|
return `
|
||||||
|
<h1>Usage</h1>
|
||||||
|
<div class="driver-usage">
|
||||||
|
<h3 style="margin-bottom: 5px; font-size: 14px;">${i18n('storage_usage')}</h3>
|
||||||
|
<div style="font-size: 13px; margin-bottom: 3px;">
|
||||||
|
<span id="storage-used"></span>
|
||||||
|
<span> used of </span>
|
||||||
|
<span id="storage-capacity"></span>
|
||||||
|
<span id="storage-puter-used-w" style="display:none;"> (<span id="storage-puter-used"></span> ${i18n('storage_puter_used')})</span>
|
||||||
|
</div>
|
||||||
|
<div id="storage-bar-wrapper">
|
||||||
|
<span id="storage-used-percent"></span>
|
||||||
|
<div id="storage-bar"></div>
|
||||||
|
<div id="storage-bar-host"></div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
},
|
||||||
|
init: ($el_window) => {
|
||||||
|
$.ajax({
|
||||||
|
url: api_origin + "/drivers/usage",
|
||||||
|
type: 'GET',
|
||||||
|
async: true,
|
||||||
|
contentType: "application/json",
|
||||||
|
headers: {
|
||||||
|
"Authorization": "Bearer " + auth_token
|
||||||
|
},
|
||||||
|
statusCode: {
|
||||||
|
401: function () {
|
||||||
|
logout();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
success: function (res) {
|
||||||
|
let h = ''; // Initialize HTML string for driver usage bars
|
||||||
|
|
||||||
|
// Loop through user services
|
||||||
|
res.user.forEach(service => {
|
||||||
|
const { monthly_limit, monthly_usage } = service;
|
||||||
|
let usageDisplay = ``;
|
||||||
|
|
||||||
|
if (monthly_limit !== null) {
|
||||||
|
let usage_percentage = (monthly_usage / monthly_limit * 100).toFixed(0);
|
||||||
|
usage_percentage = usage_percentage > 100 ? 100 : usage_percentage; // Cap at 100%
|
||||||
|
usageDisplay = `
|
||||||
|
<div class="driver-usage" style="margin-bottom: 10px;">
|
||||||
|
<h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
|
||||||
|
<span style="font-size: 13px; margin-bottom: 3px;">${monthly_usage} used of ${monthly_limit}</span>
|
||||||
|
<div class="usage-progbar-wrapper" style="width: 100%;">
|
||||||
|
<div class="usage-progbar" style="width: ${usage_percentage}%;"><span class="usage-progbar-percent">${usage_percentage}%</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
usageDisplay = `
|
||||||
|
<div class="driver-usage" style="margin-bottom: 10px;">
|
||||||
|
<h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
|
||||||
|
<span style="font-size: 13px; margin-bottom: 3px;">${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')})</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
h += usageDisplay;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append driver usage bars to the container
|
||||||
|
$('.settings-content[data-settings="usage"]').append(`<div class="driver-usage-container">${h}</div>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// df
|
||||||
|
$.ajax({
|
||||||
|
url: api_origin + "/df",
|
||||||
|
type: 'GET',
|
||||||
|
async: true,
|
||||||
|
contentType: "application/json",
|
||||||
|
headers: {
|
||||||
|
"Authorization": "Bearer " + auth_token
|
||||||
|
},
|
||||||
|
statusCode: {
|
||||||
|
401: function () {
|
||||||
|
logout();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
success: function (res) {
|
||||||
|
let usage_percentage = (res.used / res.capacity * 100).toFixed(0);
|
||||||
|
usage_percentage = usage_percentage > 100 ? 100 : usage_percentage;
|
||||||
|
|
||||||
|
let general_used = res.used;
|
||||||
|
|
||||||
|
let host_usage_percentage = 0;
|
||||||
|
if ( res.host_used ) {
|
||||||
|
$('#storage-puter-used').html(byte_format(res.used));
|
||||||
|
$('#storage-puter-used-w').show();
|
||||||
|
|
||||||
|
general_used = res.host_used;
|
||||||
|
host_usage_percentage = ((res.host_used - res.used) / res.capacity * 100).toFixed(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#storage-used').html(byte_format(general_used));
|
||||||
|
$('#storage-capacity').html(byte_format(res.capacity));
|
||||||
|
$('#storage-used-percent').html(
|
||||||
|
usage_percentage + '%' +
|
||||||
|
(host_usage_percentage > 0
|
||||||
|
? ' / ' + host_usage_percentage + '%' : '')
|
||||||
|
);
|
||||||
|
$('#storage-bar').css('width', usage_percentage + '%');
|
||||||
|
$('#storage-bar-host').css('width', host_usage_percentage + '%');
|
||||||
|
if (usage_percentage >= 100) {
|
||||||
|
$('#storage-bar').css({
|
||||||
|
'border-top-right-radius': '3px',
|
||||||
|
'border-bottom-right-radius': '3px',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -24,6 +24,7 @@ import UIWindowChangeUsername from '../UIWindowChangeUsername.js'
|
|||||||
import changeLanguage from "../../i18n/i18nChangeLanguage.js"
|
import changeLanguage from "../../i18n/i18nChangeLanguage.js"
|
||||||
import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
|
import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
|
||||||
import AboutTab from './UITabAbout.js';
|
import AboutTab from './UITabAbout.js';
|
||||||
|
import UsageTab from './UITabUsage.js';
|
||||||
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
|
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
|
||||||
import UIWindowManageSessions from '../UIWindowManageSessions.js';
|
import UIWindowManageSessions from '../UIWindowManageSessions.js';
|
||||||
|
|
||||||
@ -33,7 +34,7 @@ async function UIWindowSettings(options){
|
|||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
AboutTab,
|
AboutTab,
|
||||||
// UsageTab,
|
UsageTab,
|
||||||
// AccountTab,
|
// AccountTab,
|
||||||
// PersonalizationTab,
|
// PersonalizationTab,
|
||||||
// LanguageTab,
|
// LanguageTab,
|
||||||
@ -49,7 +50,6 @@ async function UIWindowSettings(options){
|
|||||||
tabs.forEach((tab, i) => {
|
tabs.forEach((tab, i) => {
|
||||||
h += `<div class="settings-sidebar-item disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
|
h += `<div class="settings-sidebar-item disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
|
||||||
});
|
});
|
||||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="usage" style="background-image: url(${icons['speedometer-outline.svg']});">${i18n('usage')}</div>`;
|
|
||||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="account" style="background-image: url(${icons['user.svg']});">${i18n('account')}</div>`;
|
h += `<div class="settings-sidebar-item disable-user-select" data-settings="account" style="background-image: url(${icons['user.svg']});">${i18n('account')}</div>`;
|
||||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="personalization" style="background-image: url(${icons['palette-outline.svg']});">${i18n('personalization')}</div>`;
|
h += `<div class="settings-sidebar-item disable-user-select" data-settings="personalization" style="background-image: url(${icons['palette-outline.svg']});">${i18n('personalization')}</div>`;
|
||||||
h += `<div class="settings-sidebar-item disable-user-select" data-settings="language" style="background-image: url(${icons['language.svg']});">${i18n('language')}</div>`;
|
h += `<div class="settings-sidebar-item disable-user-select" data-settings="language" style="background-image: url(${icons['language.svg']});">${i18n('language')}</div>`;
|
||||||
@ -65,25 +65,6 @@ async function UIWindowSettings(options){
|
|||||||
</div>`;
|
</div>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Usage
|
|
||||||
h += `<div class="settings-content" data-settings="usage">`;
|
|
||||||
h += `<h1>Usage</h1>`;
|
|
||||||
h += `<div class="driver-usage">
|
|
||||||
<h3 style="margin-bottom: 5px; font-size: 14px;">${i18n('storage_usage')}</h3>
|
|
||||||
<div style="font-size: 13px; margin-bottom: 3px;">
|
|
||||||
<span id="storage-used"></span>
|
|
||||||
<span> used of </span>
|
|
||||||
<span id="storage-capacity"></span>
|
|
||||||
<span id="storage-puter-used-w" style="display:none;"> (<span id="storage-puter-used"></span> ${i18n('storage_puter_used')})</span>
|
|
||||||
</div>
|
|
||||||
<div id="storage-bar-wrapper">
|
|
||||||
<span id="storage-used-percent"></span>
|
|
||||||
<div id="storage-bar"></div>
|
|
||||||
<div id="storage-bar-host"></div>
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
h += `</div>`;
|
|
||||||
|
|
||||||
// Account
|
// Account
|
||||||
h += `<div class="settings-content" data-settings="account">`;
|
h += `<div class="settings-content" data-settings="account">`;
|
||||||
h += `<h1>${i18n('account')}</h1>`;
|
h += `<h1>${i18n('account')}</h1>`;
|
||||||
@ -219,103 +200,6 @@ async function UIWindowSettings(options){
|
|||||||
const $el_window = $(el_window);
|
const $el_window = $(el_window);
|
||||||
tabs.forEach(tab => tab.init($el_window));
|
tabs.forEach(tab => tab.init($el_window));
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: api_origin + "/drivers/usage",
|
|
||||||
type: 'GET',
|
|
||||||
async: true,
|
|
||||||
contentType: "application/json",
|
|
||||||
headers: {
|
|
||||||
"Authorization": "Bearer " + auth_token
|
|
||||||
},
|
|
||||||
statusCode: {
|
|
||||||
401: function () {
|
|
||||||
logout();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
success: function (res) {
|
|
||||||
let h = ''; // Initialize HTML string for driver usage bars
|
|
||||||
|
|
||||||
// Loop through user services
|
|
||||||
res.user.forEach(service => {
|
|
||||||
const { monthly_limit, monthly_usage } = service;
|
|
||||||
let usageDisplay = ``;
|
|
||||||
|
|
||||||
if (monthly_limit !== null) {
|
|
||||||
let usage_percentage = (monthly_usage / monthly_limit * 100).toFixed(0);
|
|
||||||
usage_percentage = usage_percentage > 100 ? 100 : usage_percentage; // Cap at 100%
|
|
||||||
usageDisplay = `
|
|
||||||
<div class="driver-usage" style="margin-bottom: 10px;">
|
|
||||||
<h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
|
|
||||||
<span style="font-size: 13px; margin-bottom: 3px;">${monthly_usage} used of ${monthly_limit}</span>
|
|
||||||
<div class="usage-progbar-wrapper" style="width: 100%;">
|
|
||||||
<div class="usage-progbar" style="width: ${usage_percentage}%;"><span class="usage-progbar-percent">${usage_percentage}%</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
usageDisplay = `
|
|
||||||
<div class="driver-usage" style="margin-bottom: 10px;">
|
|
||||||
<h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
|
|
||||||
<span style="font-size: 13px; margin-bottom: 3px;">${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')})</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
h += usageDisplay;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Append driver usage bars to the container
|
|
||||||
$('.settings-content[data-settings="usage"]').append(`<div class="driver-usage-container">${h}</div>`);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// df
|
|
||||||
$.ajax({
|
|
||||||
url: api_origin + "/df",
|
|
||||||
type: 'GET',
|
|
||||||
async: true,
|
|
||||||
contentType: "application/json",
|
|
||||||
headers: {
|
|
||||||
"Authorization": "Bearer " + auth_token
|
|
||||||
},
|
|
||||||
statusCode: {
|
|
||||||
401: function () {
|
|
||||||
logout();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
success: function (res) {
|
|
||||||
let usage_percentage = (res.used / res.capacity * 100).toFixed(0);
|
|
||||||
usage_percentage = usage_percentage > 100 ? 100 : usage_percentage;
|
|
||||||
|
|
||||||
let general_used = res.used;
|
|
||||||
|
|
||||||
let host_usage_percentage = 0;
|
|
||||||
if ( res.host_used ) {
|
|
||||||
$('#storage-puter-used').html(byte_format(res.used));
|
|
||||||
$('#storage-puter-used-w').show();
|
|
||||||
|
|
||||||
general_used = res.host_used;
|
|
||||||
host_usage_percentage = ((res.host_used - res.used) / res.capacity * 100).toFixed(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#storage-used').html(byte_format(general_used));
|
|
||||||
$('#storage-capacity').html(byte_format(res.capacity));
|
|
||||||
$('#storage-used-percent').html(
|
|
||||||
usage_percentage + '%' +
|
|
||||||
(host_usage_percentage > 0
|
|
||||||
? ' / ' + host_usage_percentage + '%' : '')
|
|
||||||
);
|
|
||||||
$('#storage-bar').css('width', usage_percentage + '%');
|
|
||||||
$('#storage-bar-host').css('width', host_usage_percentage + '%');
|
|
||||||
if (usage_percentage >= 100) {
|
|
||||||
$('#storage-bar').css({
|
|
||||||
'border-top-right-radius': '3px',
|
|
||||||
'border-bottom-right-radius': '3px',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$(el_window).find('.change-password').on('click', function (e) {
|
$(el_window).find('.change-password').on('click', function (e) {
|
||||||
UIWindowChangePassword({
|
UIWindowChangePassword({
|
||||||
window_options:{
|
window_options:{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user