lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-24 14:16:06 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Add 'My Workers' tab

Browse Source
This commit is contained in:
Nariman Jelveh
2025-08-03 18:24:01 -07:00
parent 33629a7acd
commit b2cf01e57c
6 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dev-center/css/style.css
+15 -2
View File
@@ -568,7 +568,12 @@ label {
.tab-btn[data-tab="apps"] {
background-image: url(../img/apps-outline-black.svg);
}
.tab-btn[data-tab="workers"] {
background-image: url(../img/workers.svg);
}
.tab-btn.active[data-tab="workers"] {
background-image: url(../img/workers-white.svg);
}
.tab-btn[data-tab="payout-method"] {
background-image: url(../img/wallet.svg);
}
@@ -590,7 +595,7 @@ label {
box-sizing: border-box;
}
#no-apps-notice, #loading {
#no-apps-notice, #no-workers-notice, #loading {
display: flex;
flex-direction: column;
justify-content: center;
@@ -924,6 +929,14 @@ ol li:before {
margin-bottom: -5px;
margin-right: 10px;
}
.create-a-worker-btn{
float:right; margin-bottom: 10px;
}
.create-a-worker-btn img{
width: 20px;
margin-bottom: -5px;
margin-right: 5px;
}
.jip-submit-btn{
float: left;
margin-top: 10px;
src/dev-center/img/workers-placeholder.svg
+13
View File
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<polygon style="fill:#FF9911;" points="357.016,284.718 414.093,251.548 184.458,478.831 127.381,512 "/>
<polygon style="fill:#FFEB9A;" points="246.056,220.655 303.133,187.485 414.093,251.548 357.016,284.718 "/>
<polygon style="fill:#FF9911;" points="327.203,104.979 384.28,71.81 303.133,187.485 246.056,220.655 "/>
<polygon style="fill:#FFEB9A;" points="202.824,33.17 259.902,0 384.28,71.81 327.203,104.979 "/>
<polygon style="fill:#FEDA44;" points="357.016,284.718 127.381,512 218.95,282.398 97.907,212.514 202.824,33.17 327.203,104.979
246.056,220.655 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 896 B

src/dev-center/img/workers-white.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-lightning" viewBox="0 0 16 16">
<path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

src/dev-center/img/workers.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightning" viewBox="0 0 16 16">
<path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

src/dev-center/index.html
+16
View File
@@ -79,6 +79,7 @@
<div class="sidebar-content">
<ul class="sidebar-nav disable-user-select">
<li class="tab-btn active" data-tab="apps">My Apps<span class="app-count"></span></li>
<li class="tab-btn" data-tab="workers">My Workers<span class="worker-count"></span></li>
<li class="tab-btn" data-tab="payout-method" style="display:none;">Payout Method</li>
</ul>
@@ -177,6 +178,14 @@
<button class="create-an-app-btn button button-primary"><img src="./img/app-outline-white.svg">Create an App</button>
</section>
<!---------------------------------------->
<!-- No Workers Message -->
<!---------------------------------------->
<section id="no-workers-notice" style="display:none;">
<img src="./img/workers-placeholder.svg" style="width: 64px; opacity: 0.62; filter: grayscale(100%); transform: rotate(-20deg);">
<p style="color: #606062;">You haven't created any workers yet.</p>
<button class="create-a-worker-btn button button-primary"><img src="./img/workers-white.svg">Create a Worker</button>
</section>
<!---------------------------------------->
<!-- Edit App -->
<!---------------------------------------->
@@ -239,6 +248,13 @@
</section>
</div>
<!---------------------------------------->
<!-- Worker List -->
<!---------------------------------------->
<section id="worker-list">
<h1>My Workers</h1>
</section>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/jquery.dragster.js"></script>
<script src="http://puter.localhost:4100/puter.js/v2"></script>
src/dev-center/js/dev-center.js
+46
View File
@@ -21,6 +21,7 @@ let URLParams = new URLSearchParams(window.location.search);
let domain = 'puter.com', authUsername;
let source_path
let apps = [];
let workers = [];
let sortBy = 'created_at';
let sortDirection = 'desc';
const dev_center_uid = puter.appID;
@@ -210,6 +211,18 @@ function refresh_app_list(show_loading = false) {
}, show_loading ? 1000 : 0);
}
function refresh_worker_list(show_loading = false) {
if (show_loading)
puter.ui.showSpinner();
// get workers
setTimeout(function () {
puter.workers.list().then((workers_res) => {
workers = workers_res;
puter.ui.hideSpinner();
})
}, 1000);
}
$(document).on('click', '.tab-btn', function (e) {
puter.ui.showSpinner();
$('section:not(.sidebar)').hide();
@@ -225,6 +238,26 @@ $(document).on('click', '.tab-btn', function (e) {
activeTab = 'apps';
}
// ---------------------------------------------------------------
// Workers tab
// ---------------------------------------------------------------
else if ($(this).attr('data-tab') === 'workers') {
// Get workers
puter.workers.list().then((resp) => {
workers = resp || [];
if (activeTab === 'workers' && workers.length > 0) {
$('#no-workers-notice').hide();
$('#worker-list').show();
workers.forEach(worker => {
$('#worker-list-table > tbody').append(generate_worker_card(worker));
});
} else {
$('#no-workers-notice').show();
$('#worker-list').hide();
}
})
activeTab = 'workers';
}
// ---------------------------------------------------------------
// Payout Method tab
// ---------------------------------------------------------------
else if ($(this).attr('data-tab') === 'payout-method') {
@@ -263,6 +296,14 @@ $(document).on('click', '.create-an-app-btn', async function (e) {
}
})
$(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) {
create_worker(name);
}
})
async function create_app(title, source_path = null, items = null) {
// name
let name = slugify(title, {
@@ -375,6 +416,11 @@ async function create_app(title, source_path = null, items = null) {
})
}
async function create_worker(name) {
let worker = await puter.workers.create({
name: name,
});
}
$(document).on('click', '.deploy-btn', function (e) {
deploy(currently_editing_app, dropped_items);