mirror of
https://github.com/HeyPuter/puter.git
synced 2026-08-26 16:07:13 +00:00
Add the workers and websites tabs
This commit is contained in:
Nariman Jelveh
@@ -227,14 +227,14 @@ section {
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#app-list{
|
||||
#app-list, #website-list, #worker-list {
|
||||
display: none;
|
||||
}
|
||||
#app-list-table > thead{
|
||||
#app-list-table > thead, #website-list-table > thead, #worker-list-table > thead{
|
||||
font-size:14px; background-color: #f7fafc; border-top: 1px solid #DDD; text-transform: uppercase; color: #6d767d;
|
||||
cursor: default;
|
||||
}
|
||||
.app-card {
|
||||
.app-card, .website-card, .worker-card {
|
||||
padding: 12px;
|
||||
border-top: 1px solid #d8dce5;
|
||||
border-radius: 0;
|
||||
@@ -245,33 +245,33 @@ section {
|
||||
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
.app-card:hover, .website-card:hover, .worker-card:hover {
|
||||
background-color: #e8eff66e;
|
||||
}
|
||||
.app-card.active {
|
||||
.app-card.active, .website-card.active, .worker-card.active {
|
||||
background-color: #e8eff6;
|
||||
}
|
||||
|
||||
|
||||
.app-card:hover .app-row-toolbar {
|
||||
.app-card:hover .app-row-toolbar, .website-card:hover .website-row-toolbar, .worker-card:hover .worker-row-toolbar {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-toolbar-container {
|
||||
.app-toolbar-container, .website-toolbar-container, .worker-toolbar-container {
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-card h1 {
|
||||
.app-card h1, .website-card h1, .worker-card h1 {
|
||||
margin-top: 0;
|
||||
color: #657188;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#create-app-success {
|
||||
#create-app-success, #create-website-success, #create-worker-success {
|
||||
height: calc(100vh - 40px);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
@@ -286,7 +286,7 @@ label, input[type="text"] {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#delete-app {
|
||||
#delete-app, #delete-website, #delete-worker {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
@@ -294,7 +294,7 @@ label, input[type="text"] {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#delete-app:hover {
|
||||
#delete-app:hover, #delete-website:hover, #delete-worker:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -568,6 +568,14 @@ label {
|
||||
.tab-btn[data-tab="apps"] {
|
||||
background-image: url(../img/apps-outline-black.svg);
|
||||
}
|
||||
|
||||
.tab-btn[data-tab="websites"] {
|
||||
background-image: url(../img/website.svg);
|
||||
}
|
||||
.tab-btn.active[data-tab="websites"] {
|
||||
background-image: url(../img/website-white.svg);
|
||||
}
|
||||
|
||||
.tab-btn[data-tab="workers"] {
|
||||
background-image: url(../img/workers.svg);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-globe-americas" viewBox="0 0 16 16">
|
||||
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 710 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe-americas" viewBox="0 0 16 16">
|
||||
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 717 B |
+47
-10
@@ -78,8 +78,9 @@
|
||||
<div class="sidebar-toggle"></div>
|
||||
<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 active" data-tab="apps">Apps<span class="app-count"></span></li>
|
||||
<li class="tab-btn" data-tab="websites">Websites<span class="website-count"></span></li>
|
||||
<li class="tab-btn" data-tab="workers">Workers<span class="worker-count"></span></li>
|
||||
<li class="tab-btn" data-tab="payout-method" style="display:none;">Payout Method</li>
|
||||
</ul>
|
||||
|
||||
@@ -246,21 +247,57 @@
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!---------------------------------------->
|
||||
<!-- Worker List -->
|
||||
<!---------------------------------------->
|
||||
<section id="worker-list">
|
||||
<h1>My Workers</h1>
|
||||
</section>
|
||||
<div class="worker-list-nav">
|
||||
<h1 class="my-workers-title">My Workers<span class="worker-count"></span></h1>
|
||||
<button class="create-a-worker-btn button button-primary"><img src="./img/workers-white.svg"> New Worker</button>
|
||||
<button class="refresh-worker-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.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>
|
||||
|
||||
<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>
|
||||
<script src="./js/slugify.js"></script>
|
||||
<script type="module" src="./js/html-entities.js"></script>
|
||||
<div style="margin-bottom: 10px; position: relative; width: 300px; float:left;">
|
||||
<input style="background-image:url(./img/magnifier-outline.svg);" class="search">
|
||||
<img class="search-clear" src="./img/close.svg">
|
||||
</div>
|
||||
|
||||
<button class="button button-danger disabled delete-workers-btn" style="float:right;">Delete</button>
|
||||
<div style="overflow-x: auto; clear: both;">
|
||||
<table class="table" id="worker-list-table">
|
||||
<thead class="disable-user-select">
|
||||
<tr></tr>
|
||||
<th><input type="checkbox" class="select-all-workers" style="width: 20px; height: 20px; margin-left:3px;"></th>
|
||||
<th class="sort th-name" data-column="name" style="padding-left: 10px !important;">Worker<span class="sort-arrow sort-arrow-desc">▼</span><span class="sort-arrow sort-arrow-asc">▲</span></th>
|
||||
<th class="sort th-deployed sorted" data-column="deployed_at">Deployed<span class="sort-arrow sort-arrow-desc" style="display:inline;">▼</span><span class="sort-arrow sort-arrow-asc">▲</span></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!---------------------------------------->
|
||||
<!-- Websites List -->
|
||||
<!---------------------------------------->
|
||||
<section id="website-list">
|
||||
<h1>My Websites</h1>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://js.puter.com/v2/"></script>
|
||||
<script src="./js/libs/jquery-3.6.0.min.js"></script>
|
||||
<script src="./js/libs/jquery.dragster.js"></script>
|
||||
<script src="./js/libs/slugify.js"></script>
|
||||
<script type="module" src="./js/libs/html-entities.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
||||
<script type="module" src="./js/apps.js"></script>
|
||||
<script type="module" src="./js/workers.js"></script>
|
||||
<script type="module" src="./js/websites.js"></script>
|
||||
<script type="module" src="./js/dev-center.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+75
-2778
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,4 @@
|
||||
async function init_websites() {
|
||||
}
|
||||
|
||||
export default init_websites;
|
||||
@@ -0,0 +1,63 @@
|
||||
window.workers = [];
|
||||
|
||||
window.create_worker = async (name) => {
|
||||
let worker = await puter.workers.create(name, window.default_worker_file);
|
||||
|
||||
return worker;
|
||||
}
|
||||
|
||||
window.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);
|
||||
}
|
||||
|
||||
|
||||
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});
|
||||
});`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default init_workers;
|
||||
Reference in New Issue
Block a user