Add the workers and websites tabs

src/dev-center/css/style.css

@@ -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);
 }

src/dev-center/img/website-white.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>

src/dev-center/img/website.svg

@@ -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>

src/dev-center/index.html

@@ -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>
 

src/dev-center/js/websites.js

@@ -0,0 +1,4 @@
+async function init_websites() {
+}
+
+export default init_websites;

src/dev-center/js/workers.js

@@ -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;