lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-07-09 00:31:53 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

layout fix

Browse Source
This commit is contained in:
Nariman Jelveh
2025-08-02 19:12:22 -07:00
parent 4b43b24e50
commit 2f30ce3d4d
2 changed files with 385 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dev-center/index.html
+1 -1
View File
@@ -222,7 +222,6 @@
<div class="app-list-nav">
<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="refresh-app-list" 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 style="margin-bottom: 10px; position: relative; width: 300px; float:left;">
@@ -231,6 +230,7 @@
</div>
<button class="button button-danger disabled delete-apps-btn" style="float:right;">Delete</button>
<button class="refresh-app-list" 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 style="overflow-x: auto; clear: both;">
<table class="table" id="app-list-table">
<thead class="disable-user-select">
src/dev-center/js/websites.js
+384 -2
View File
@@ -1,4 +1,386 @@
async function init_websites() {
let sortBy = 'created_at';
let sortDirection = 'desc';
window.websites = [];
let search_query;
window.create_website = async (subdomain) => {
let website = await puter.hosting.create(subdomain);
return website;
}
export default init_websites;
window.refresh_website_list = async (show_loading = false) => {
if (show_loading)
puter.ui.showSpinner();
// puter.hosting.list() returns an array of website objects
window.websites = await puter.hosting.list();
// Get workers
if (window.activeTab === 'websites' && window.websites.length > 0) {
$('.website-card').remove();
$('#no-websites-notice').hide();
$('#website-list').show();
window.websites.forEach((website) => {
// append row to website-list-table
$('#website-list-table > tbody').append(generate_website_card(website));
});
} else {
$('#no-websites-notice').show();
$('#website-list').hide();
}
count_workers();
}
async function init_workers() {
}
$(document).on('click', '.create-a-worker-btn', async function (e) {
let name = await puter.ui.prompt('Please enter a name for your worker:', 'my-awesome-worker');
if (name) {
console.log(name);
await create_worker(name);
}
})
window.createDefaultWorkerFile = async () => {
window.default_worker_file = `/${auth_username}/AppData/${dev_center_uid}/default_worker_file.js`;
let existingFile;
try {
// Check if default_worker_file exists
existingFile = await puter.fs.read(default_worker_file);
} catch (err) {
console.error('Error creating default worker file:', err);
}
if (!existingFile) {
// Create default_worker_file
await puter.fs.write(default_worker_file, `// This is an example application for Puter Workers
router.get('/', ({request}) => {
return 'Hello World'; // returns a string
});
router.get('/api/hello', ({request}) => {
return {'msg': 'hello'}; // returns a JSON object
});
router.get('/*page', ({request, params}) => {
return new Response(\`Page \${params.page} not found\`, {status: 404});
});`);
}
}
$(document).on('change', '.worker-checkbox', function (e) {
// determine if select-all checkbox should be checked, indeterminate, or unchecked
if ($('.worker-checkbox:checked').length === $('.worker-checkbox').length) {
$('.select-all-workers').prop('indeterminate', false);
$('.select-all-workers').prop('checked', true);
} else if ($('.worker-checkbox:checked').length > 0) {
$('.select-all-workers').prop('indeterminate', true);
$('.select-all-workers').prop('checked', false);
}
else {
$('.select-all-workers').prop('indeterminate', false);
$('.select-all-workers').prop('checked', false);
}
// activate row
if ($(this).is(':checked'))
$(this).closest('tr').addClass('active');
else
$(this).closest('tr').removeClass('active');
// enable delete button if at least one checkbox is checked
if ($('.worker-checkbox:checked').length > 0)
$('.delete-workers-btn').removeClass('disabled');
else
$('.delete-workers-btn').addClass('disabled');
})
$(document).on('change', '.select-all-workers', function (e) {
if ($(this).is(':checked')) {
$('.worker-checkbox').prop('checked', true);
$('.worker-card').addClass('active');
$('.delete-workers-btn').removeClass('disabled');
} else {
$('.worker-checkbox').prop('checked', false);
$('.worker-card').removeClass('active');
$('.delete-workers-btn').addClass('disabled');
}
})
$('.refresh-worker-list').on('click', function (e) {
puter.ui.showSpinner();
refresh_worker_list();
puter.ui.hideSpinner();
})
$('th.sort').on('click', function (e) {
// determine what column to sort by
const sortByColumn = $(this).attr('data-column');
// toggle sort direction
if (sortByColumn === sortBy) {
if (sortDirection === 'asc')
sortDirection = 'desc';
else
sortDirection = 'asc';
}
else {
sortBy = sortByColumn;
sortDirection = 'desc';
}
// update arrow
$('.sort-arrow').css('display', 'none');
$('#worker-list-table').find('th').removeClass('sorted');
$(this).find('.sort-arrow-' + sortDirection).css('display', 'inline');
$(this).addClass('sorted');
sort_workers();
});
function sort_workers() {
let sorted_workers;
// sort
if (sortDirection === 'asc'){
sorted_workers = workers.sort((a, b) => {
if(sortBy === 'name'){
return a[sortBy].localeCompare(b[sortBy]);
}else if(sortBy === 'created_at'){
return new Date(a[sortBy]) - new Date(b[sortBy]);
} else if(sortBy === 'user_count' || sortBy === 'open_count'){
return a.stats[sortBy] - b.stats[sortBy];
}else{
a[sortBy] > b[sortBy] ? 1 : -1
}
});
}else{
sorted_workers = workers.sort((a, b) => {
if(sortBy === 'name'){
return b[sortBy].localeCompare(a[sortBy]);
}else if(sortBy === 'created_at'){
return new Date(b[sortBy]) - new Date(a[sortBy]);
} else if(sortBy === 'user_count' || sortBy === 'open_count'){
return b.stats[sortBy] - a.stats[sortBy];
}else{
b[sortBy] > a[sortBy] ? 1 : -1
}
});
}
// refresh worker list
$('.worker-card').remove();
sorted_workers.forEach(worker => {
$('#worker-list-table > tbody').append(generate_worker_card(worker));
});
count_workers();
// show workers that match search_query and hide workers that don't
if (search_query) {
// show workers that match search_query and hide workers that don't
workers.forEach((worker) => {
if (worker.name.toLowerCase().includes(search_query.toLowerCase())) {
$(`.worker-card[data-name="${html_encode(worker.name)}"]`).show();
} else {
$(`.worker-card[data-name="${html_encode(worker.name)}"]`).hide();
}
})
}
}
function count_workers() {
let count = 0;
$('.worker-card').each(function () {
count++;
})
$('.worker-count').html(count);
return count;
}
function generate_worker_card(worker) {
return `
<tr class="worker-card" data-name="${html_encode(worker.name)}">
<td style="width:50px; vertical-align: middle;">
<input type="checkbox" class="worker-checkbox" data-worker-name="${worker.name}" style="width: 20px; height: 20px;">
</td>
<td style="font-family: monospace; font-size: 14px; vertical-align: middle;">${worker.name}</td>
<td style="font-size: 14px; vertical-align: middle;">${worker.created_at}</td>
<td style="vertical-align: middle;">
<button class="button button-danger delete-worker-btn" data-worker-name="${worker.name}">Delete</button>
</td>
</tr>
`;
}
$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
// search apps for query
search_query = $(this).val().toLowerCase();
if (search_query === '') {
// hide 'clear search' button
$('.search-clear').hide();
// show all apps again
$(`.worker-card`).show();
} else {
// show 'clear search' button
$('.search-clear').show();
// show apps that match search_query and hide apps that don't
workers.forEach((worker) => {
if (
worker.name.toLowerCase().includes(search_query.toLowerCase())
)
{
$(`.worker-card[data-name="${worker.name}"]`).show();
} else {
$(`.worker-card[data-name="${worker.name}"]`).hide();
}
})
}
})
$(document).on('click', '.delete-workers-btn', async function (e) {
// show confirmation alert
let resp = await puter.ui.alert(`Are you sure you want to delete the selected workers?`, [
{
label: 'Delete',
type: 'danger',
value: 'delete',
},
{
label: 'Cancel',
},
], {
type: 'warning',
});
if (resp === 'delete') {
// disable delete button
$('.delete-workers-btn').addClass('disabled');
// show 'deleting' modal
puter.ui.showSpinner();
let start_ts = Date.now();
const workers = $('.worker-checkbox:checked').toArray();
// delete all checked workers
for (let worker of workers) {
let worker_name = $(worker).attr('data-worker-name');
// delete worker
await puter.workers.delete(worker_name)
// remove worker card
$(`.worker-card[data-name="${worker_name}"]`).fadeOut(200, function name(params) {
$(this).remove();
if ($(`.worker-card`).length === 0) {
$('section:not(.sidebar)').hide();
$('#no-workers-notice').show();
} else {
$('section:not(.sidebar)').hide();
$('#worker-list').show();
}
count_workers();
});
try{
count_workers();
} catch(err) {
console.log(err);
}
}
// close 'deleting' modal
setTimeout(() => {
puter.ui.hideSpinner();
if($('.worker-checkbox:checked').length === 0){
// disable delete button
$('.delete-workers-btn').addClass('disabled');
// reset the 'select all' checkbox
$('.select-all-workers').prop('indeterminate', false);
$('.select-all-workers').prop('checked', false);
}
}, (start_ts - Date.now()) > 500 ? 0 : 500);
}
})
$(document).on('click', '.delete-worker-btn', async function (e) {
let worker_name = $(this).attr('data-worker-name');
// get worker
const worker_data = await puter.workers.get(worker_name);
if(worker_data.metadata?.locked){
puter.ui.alert(`<strong>${worker_data.name}</strong> is locked and cannot be deleted.`, [
{
label: 'Ok',
},
], {
type: 'warning',
});
return;
}
// confirm delete
const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete <strong>${html_encode(worker_data.name)}</strong>?`,
[
{
label: 'Yes, delete permanently',
value: 'delete',
type: 'danger',
},
{
label: 'Cancel'
},
]
);
if (alert_resp === 'delete') {
let init_ts = Date.now();
puter.ui.showSpinner();
puter.workers.delete(worker_name).then(async (worker) => {
setTimeout(() => {
puter.ui.hideSpinner();
$(`.worker-card[data-name="${worker_name}"]`).fadeOut(200, function name(params) {
$(this).remove();
if ($(`.worker-card`).length === 0) {
$('section:not(.sidebar)').hide();
$('#no-workers-notice').show();
} else {
$('section:not(.sidebar)').hide();
$('#worker-list').show();
}
count_workers();
});
},
// make sure the modal was shown for at least 2 seconds
(Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts));
// delete worker directory
puter.fs.delete(
`/${auth_username}/AppData/${dev_center_uid}/${worker_name}`,
{ recursive: true }
)
}).catch(async (err) => {
setTimeout(() => {
puter.ui.hideSpinner();
puter.ui.alert(err?.message, [
{
label: 'Ok',
},
]);
},
// make sure the modal was shown for at least 2 seconds
(Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts));
})
}
})
export default init_workers;