mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

close #772

Browse Source
This commit is contained in:
Nariman Jelveh 2024-09-22 12:40:38 -07:00
parent 07d3592d88
commit 3ce8da37eb
3 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/dev-center/css/style.css
View File

@ -36,6 +36,16 @@ body{
align-items: center; align-items: center;
flex: 1; flex: 1;
} }
h1 .app-count{
font-size: 20px;
color: #6d767d;
font-weight: 400;
margin-left: 10px;
background-color: #EEE;
padding: 2px 10px;
border-radius: 3px;
}
/* ------------------------------------ /* ------------------------------------
Button Button
------------------------------------*/ ------------------------------------*/
@ -451,6 +461,14 @@ label {
background-color: #3273dc; background-color: #3273dc;
} }
.sidebar-nav > li .app-count{
font-size: 14px;
color: #f6f6f6;
font-weight: 400;
margin-left: 10px;
float: right;
}
.sidebar hr { .sidebar hr {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;

4
src/dev-center/index.html
View File

@ -51,7 +51,7 @@
<body> <body>
<section class="sidebar"> <section class="sidebar">
<ul class="sidebar-nav disable-user-select"> <ul class="sidebar-nav disable-user-select">
<li class="tab-btn active" data-tab="apps">My Apps</li> <li class="tab-btn active" data-tab="apps">My Apps<span class="app-count"></span></li>
<li class="tab-btn" data-tab="payout-method" style="display:none;">Payout Method</li> <li class="tab-btn" data-tab="payout-method" style="display:none;">Payout Method</li>
</ul> </ul>
@ -213,7 +213,7 @@
<!----------------------------------------> <!---------------------------------------->
<section id="app-list"> <section id="app-list">
<div class="app-list-nav"> <div class="app-list-nav">
<h1 class="my-apps-title">My Apps</h1> <h1 class="my-apps-title">My Apps<span class="app-count"></span></h1>
<button class="create-an-app-btn button button-primary"><img src="./img/app-outline-white.svg"> New App</button> <button class="create-an-app-btn button button-primary"><img src="./img/app-outline-white.svg"> New App</button>
<button class="refresh-app-list button button-default" style="width:40px; padding: 10px; float: right; margin-right: 10px;" title="Refresh"><svg style="width: 18px; height: 18px; margin-top: -2px; display: block;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" stroke-width="2"><g stroke-width="2" transform="translate(0.5, 0.5)"><path data-cap="butt" d="M29.382,9.217A15,15,0,0,0,1,16" fill="none" stroke="#444444" stroke-miterlimit="10" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"></path><polyline points="28.383 1.22 29.383 9.22 21.383 8.22" fill="none" stroke="#444444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></polyline><path data-cap="butt" data-color="color-2" d="M2.618,22.783A15,15,0,0,0,31,16" fill="none" stroke="#444444" stroke-miterlimit="10" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"></path><polyline data-color="color-2" points="3.617 30.78 2.617 22.78 10.617 23.78" fill="none" stroke="#444444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></polyline></g></svg></button> <button class="refresh-app-list button button-default" style="width:40px; padding: 10px; float: right; margin-right: 10px;" title="Refresh"><svg style="width: 18px; height: 18px; margin-top: -2px; display: block;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" stroke-width="2"><g stroke-width="2" transform="translate(0.5, 0.5)"><path data-cap="butt" d="M29.382,9.217A15,15,0,0,0,1,16" fill="none" stroke="#444444" stroke-miterlimit="10" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"></path><polyline points="28.383 1.22 29.383 9.22 21.383 8.22" fill="none" stroke="#444444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></polyline><path data-cap="butt" data-color="color-2" d="M2.618,22.783A15,15,0,0,0,31,16" fill="none" stroke="#444444" stroke-miterlimit="10" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"></path><polyline data-color="color-2" points="3.617 30.78 2.617 22.78 10.617 23.78" fill="none" stroke="#444444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></polyline></g></svg></button>
</div> </div>

32
src/dev-center/js/dev-center.js
View File

@ -136,6 +136,7 @@ $(document).ready(function () {
apps.forEach(app => { apps.forEach(app => {
$('#app-list-table > tbody').append(generate_app_card(app)); $('#app-list-table > tbody').append(generate_app_card(app));
}); });
count_apps();
sort_apps(); sort_apps();
} else { } else {
$('#no-apps-notice').show(); $('#no-apps-notice').show();
@ -168,6 +169,7 @@ function refresh_app_list(show_loading = false) {
apps.forEach(app => { apps.forEach(app => {
$('#app-list-table > tbody').append(generate_app_card(app)); $('#app-list-table > tbody').append(generate_app_card(app));
}); });
count_apps();
sort_apps(); sort_apps();
} else { } else {
$('#no-apps-notice').show(); $('#no-apps-notice').show();
@ -358,7 +360,8 @@ $(document).on('click', '.delete-app', async function (e) {
let init_ts = Date.now(); let init_ts = Date.now();
$('.deleting-app-modal')?.get(0)?.showModal(); $('.deleting-app-modal')?.get(0)?.showModal();
puter.apps.delete(app_name).then(async (app) => { puter.apps.delete(app_name).then(async (app) => {
setTimeout(() => { setTimeout(
() => {
$('.deleting-app-modal')?.get(0)?.close(); $('.deleting-app-modal')?.get(0)?.close();
$(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) {
$(this).remove(); $(this).remove();
@ -369,10 +372,11 @@ $(document).on('click', '.delete-app', async function (e) {
$('section:not(.sidebar)').hide(); $('section:not(.sidebar)').hide();
$('#app-list').show(); $('#app-list').show();
} }
count_apps();
}); });
}, },
// make sure the modal was shown for at least 2 seconds // make sure the modal was shown for at least 2 seconds
(Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts));
// get app directory // get app directory
puter.fs.stat({ puter.fs.stat({
@ -397,8 +401,8 @@ $(document).on('click', '.delete-app', async function (e) {
}, },
]); ]);
}, },
// make sure the modal was shown for at least 2 seconds // make sure the modal was shown for at least 2 seconds
(Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts));
}) })
} }
}) })
@ -1065,13 +1069,23 @@ $(document).on('click', '.back-to-main-btn', function (e) {
apps.forEach(app => { apps.forEach(app => {
$('#app-list-table > tbody').append(generate_app_card(app)); $('#app-list-table > tbody').append(generate_app_card(app));
}); });
sort_apps() count_apps();
sort_apps();
} else } else
$('#no-apps-notice').show(); $('#no-apps-notice').show();
}) })
}, 1000); }, 1000);
}) })
function count_apps() {
let count = 0;
$('.app-card').each(function () {
count++;
})
$('.app-count').html(count);
return count;
}
// https://stackoverflow.com/a/43467144/1764493 // https://stackoverflow.com/a/43467144/1764493
function is_valid_url(string) { function is_valid_url(string) {
let url; let url;
@ -1348,7 +1362,7 @@ function sort_apps() {
sorted_apps.forEach(app => { sorted_apps.forEach(app => {
$('#app-list-table > tbody').append(generate_app_card(app)); $('#app-list-table > tbody').append(generate_app_card(app));
}); });
count_apps();
// show apps that match search_query and hide apps that don't // show apps that match search_query and hide apps that don't
if (search_query) { if (search_query) {
// show apps that match search_query and hide apps that don't // show apps that match search_query and hide apps that don't
@ -1895,7 +1909,7 @@ $('.refresh-app-list').on('click', function (e) {
apps.forEach(app => { apps.forEach(app => {
$('#app-list-table > tbody').append(generate_app_card(app)); $('#app-list-table > tbody').append(generate_app_card(app));
}); });
count_apps();
// preserve search query // preserve search query
if (search_query) { if (search_query) {
// show apps that match search_query and hide apps that don't // show apps that match search_query and hide apps that don't
@ -2024,6 +2038,7 @@ $(document).on('click', '.delete-apps-btn', async function (e) {
$('section:not(.sidebar)').hide(); $('section:not(.sidebar)').hide();
$('#app-list').show(); $('#app-list').show();
} }
count_apps();
}); });
try{ try{
@ -2041,6 +2056,7 @@ $(document).on('click', '.delete-apps-btn', async function (e) {
`/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`,
{ recursive: true } { recursive: true }
) )
count_apps();
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }