diff --git a/src/UI/Settings/UITabUsage.js b/src/UI/Settings/UITabUsage.js new file mode 100644 index 00000000..88f15b6f --- /dev/null +++ b/src/UI/Settings/UITabUsage.js @@ -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 . + */ + +// About +export default { + id: 'usage', + title_i18n_key: 'usage', + icon: 'speedometer-outline.svg', + html: () => { + return ` +

Usage

+
+

${i18n('storage_usage')}

+
+ + used of + + +
+
+ +
+
+
+
`; + }, + 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 = ` +
+

${service.service['driver.interface']} (${service.service['driver.method']}):

+ ${monthly_usage} used of ${monthly_limit} +
+
${usage_percentage}%
+
+
+ `; + } + else { + usageDisplay = ` +
+

${service.service['driver.interface']} (${service.service['driver.method']}):

+ ${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')}) +
+ `; + } + h += usageDisplay; + }); + + // Append driver usage bars to the container + $('.settings-content[data-settings="usage"]').append(`
${h}
`); + } + }); + + // 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', + }); + } + } + }); + }, +}; diff --git a/src/UI/Settings/UIWindowSettings.js b/src/UI/Settings/UIWindowSettings.js index 3073f8b0..8758ccac 100644 --- a/src/UI/Settings/UIWindowSettings.js +++ b/src/UI/Settings/UIWindowSettings.js @@ -24,6 +24,7 @@ import UIWindowChangeUsername from '../UIWindowChangeUsername.js' import changeLanguage from "../../i18n/i18nChangeLanguage.js" import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js'; import AboutTab from './UITabAbout.js'; +import UsageTab from './UITabUsage.js'; import UIWindowThemeDialog from '../UIWindowThemeDialog.js'; import UIWindowManageSessions from '../UIWindowManageSessions.js'; @@ -33,7 +34,7 @@ async function UIWindowSettings(options){ const tabs = [ AboutTab, - // UsageTab, + UsageTab, // AccountTab, // PersonalizationTab, // LanguageTab, @@ -49,7 +50,6 @@ async function UIWindowSettings(options){ tabs.forEach((tab, i) => { h += `
${i18n(tab.title_i18n_key)}
`; }); - h += `
${i18n('usage')}
`; h += `
${i18n('account')}
`; h += `
${i18n('personalization')}
`; h += `
${i18n('language')}
`; @@ -65,25 +65,6 @@ async function UIWindowSettings(options){ `; }); - // Usage - h += `
`; - h += `

Usage

`; - h += `
-

${i18n('storage_usage')}

-
- - used of - - -
-
- -
-
-
-
` - h += `
`; - // Account h += `
`; h += `

${i18n('account')}

`; @@ -219,103 +200,6 @@ async function UIWindowSettings(options){ const $el_window = $(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 = ` -
-

${service.service['driver.interface']} (${service.service['driver.method']}):

- ${monthly_usage} used of ${monthly_limit} -
-
${usage_percentage}%
-
-
- `; - } - else { - usageDisplay = ` -
-

${service.service['driver.interface']} (${service.service['driver.method']}):

- ${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')}) -
- `; - } - h += usageDisplay; - }); - - // Append driver usage bars to the container - $('.settings-content[data-settings="usage"]').append(`
${h}
`); - } - }) - - // 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) { UIWindowChangePassword({ window_options:{