diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css index 4758a145e..0924b882f 100644 --- a/src/dev-center/css/style.css +++ b/src/dev-center/css/style.css @@ -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; diff --git a/src/dev-center/img/workers-placeholder.svg b/src/dev-center/img/workers-placeholder.svg new file mode 100644 index 000000000..4da6d5d3a --- /dev/null +++ b/src/dev-center/img/workers-placeholder.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/dev-center/img/workers-white.svg b/src/dev-center/img/workers-white.svg new file mode 100644 index 000000000..b664600ef --- /dev/null +++ b/src/dev-center/img/workers-white.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/dev-center/img/workers.svg b/src/dev-center/img/workers.svg new file mode 100644 index 000000000..d2faa0fbf --- /dev/null +++ b/src/dev-center/img/workers.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/dev-center/index.html b/src/dev-center/index.html index 02fb8d873..b3ec46ac3 100644 --- a/src/dev-center/index.html +++ b/src/dev-center/index.html @@ -79,6 +79,7 @@
@@ -177,6 +178,14 @@ + + + + @@ -239,6 +248,13 @@
+ + + +
+

My Workers

+
+ diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js index 772d80555..9ba704a6f 100644 --- a/src/dev-center/js/dev-center.js +++ b/src/dev-center/js/dev-center.js @@ -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);