Dinamically fetch examples list in the web ui

Signed-off-by: yzamir <[email protected]>

build-pages.sh

@@ -12,3 +12,6 @@ cp -R ./src/* ./pages/js/src/
 
 mkdir -p ./pages/js/examples
 cp -R ./examples/* ./pages/js/examples/
+
+# add an example list file
+for f in ./pages/js/examples/*.asm; do basename "$f"; done > ./pages/js/examples/examples.txt 

public/index.html

@@ -84,7 +84,7 @@
                         <led-switch layout="horizontal" autoreset="true" value="false" color="red" class="compile" id="compile-switch"></led-switch>
                     </div>
 
-                    <examples-table id="examples-table"></examples-table>
+                    <examples-table id="examples-table" path="./js/examples/examples.txt"></examples-table>
                     <op-codes-table id="op-codes-table"></op-codes-table>
                 </div>
             </div>

public/js/components/examples-table.js

@@ -7,46 +7,61 @@ class ExampleTable extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = html`
-        <style>
-          table {
-            border-collapse: collapse;
-            width: 100%;
-          }
-          th, td {
-            border: 0;
-            text-align: left;
-            padding: 4px;
-          }
-          td {
-            cursor: pointer;
-          }
-          td:hover {
-            color: #f0f0f0;
-          }
-        </style>
-        <table>
-          <tr>
-            <th>Examples</th>
-          </tr>
-        </table>
-      `;
+      <style>
+        table {
+          border-collapse: collapse;
+          width: 100%;
+        }
+        th, td {
+          border: 0;
+          text-align: left;
+          padding: 4px;
+        }
+        td {
+          cursor: pointer;
+        }
+        td:hover {
+          color: #f0f0f0;
+        }
+      </style>
+      <table>
+        <tr>
+          <th>Examples</th>
+        </tr>
+      </table>
+    `;
   }
 
   connectedCallback() {
+    this.fetchExamplesList();
+  }
+
+  async fetchExamplesList() {
+    const path = this.getAttribute('path');
+    if (!path) {
+      console.error('Path attribute is missing');
+      return;
+    }
+
+    try {
+      const response = await fetch(path);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const text = await response.text();
+      const examples = text.trim().split('\n');
+      this.renderTable(examples);
+    } catch (error) {
+      console.error('Error fetching the examples list:', error);
+    }
+  }
+
+  renderTable(examples) {
     const table = this.shadowRoot.querySelector('table');
-    const examples = [
-      'addition.asm',
-      'factorial.asm',
-      'bitwise_not.asm',
-      'divide_by_2.asm',
-      'multiply_by_2.asm',
-    ];
 
     for (let i in examples) {
       const row = document.createElement('tr');
-      row.innerHTML = `
-          <td class="example">${examples[i]}</td>
-        `;
+      row.innerHTML = `<td class="example">${examples[i]}</td>`;
       row.addEventListener('click', () => this.handleRowClick(examples[i]));
       table.appendChild(row);
     }

server.mjs

@@ -1,24 +1,48 @@
+// Disabling some ESLint rules for this file
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-extraneous-dependencies */
+
 import express, { static as staticMiddleware } from 'express';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { promises as fsPromises } from 'fs';
+
+const PORT = 3000;
 
+// Getting the directory name and file name of the current module
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+// Defining paths to various directories
+const publicDir = join(__dirname, 'public');
+const srcDir = join(__dirname, 'src');
+const examplesDir = join(__dirname, 'examples');
+
 const app = express();
 
-// Serve 'public' directory at '/'
-app.use('/', staticMiddleware(join(__dirname, 'public')));
+// Setting up middleware to serve static files from various directories
+app.use('/', staticMiddleware(publicDir));
+app.use('/js/src', staticMiddleware(srcDir));
+app.use('/js/examples', staticMiddleware(examplesDir));
 
-// Serve 'src' directory at '/js/src/'
-app.use('/js/src', staticMiddleware(join(__dirname, 'src')));
+// Function to get all files with .asm extension in a specified directory
+const getAsmFiles = async (dir) => {
+  const files = await fsPromises.readdir(dir);
+  return files.filter((file) => file.endsWith('.asm'));
+};
 
-// Serve 'examples' directory at '/js/examples/'
-app.use('/js/examples', staticMiddleware(join(__dirname, 'examples')));
+// Defining a route to serve a text file containing the names of all .asm files in the examples directory
+app.get('/js/examples/examples.txt', async (req, res) => {
+  try {
+    const asmFiles = await getAsmFiles(examplesDir);
+    res.type('text/plain');
+    res.send(asmFiles.join('\n'));
+  } catch (error) {
+    console.error(error);
+    res.status(500).send('Server error');
+  }
+});
 
-const PORT = 3000;
 app.listen(PORT, () => {
   console.log(`Server is running at http://localhost:${PORT}`);
   console.log('Press Ctrl-C to stop');