Tidy up

isaachilly · isaachilly · commit b8cbaf45829c · 2025-11-14T08:50:23.000+01:00
diff --git a/.github/workflows/.gh-action.yml b/.github/workflows/.gh-action.yml
@@ -22,5 +22,7 @@ jobs:
           node-version: '22.x'
       - run: (cd 2-3-4-Exercises; cp config-default.js config.js)
       - run: (cd 2-3-4-Exercises; npm ci)
-      - run: (cd 2-3-4-Exercises; npm test)
-      - run: (cd 2-3-4-Exercises; npm run coverage)
+      - run: (cd 2-3-4-Exercises; npm run coverage)
+
+      # check plicate service, also the remote data double use loading spinner,
+      # check all code quality 
diff --git a/1-Introductory-Exercises/index.js b/1-Introductory-Exercises/index.js
@@ -1,4 +1,3 @@
-// Include required modules
 const {HttpServer, WebSocket, WebSocketMessage, LogManager} = require('@aliceo2/web-ui');
 
 const logger = LogManager.getLogger('Exercise1');
@@ -12,7 +11,7 @@ const http = new HttpServer({
   port: 8080,
 }, jwtConfig);
 
-// Server `public` folder
+// Serve the frontend
 http.addStaticPath('public');
 
 http.get('/helloWorld', (req, res) => {
@@ -25,7 +24,7 @@ http.get('/testJWT', (req, res) => {
 });
 
 http.get('/addDefaultUser', (req, res) => {
-  http.addDefaultUserData(req, res); // adds /api/userData endpoint
+  http.addDefaultUserData(req, res);
 }, { public: true});
 
 // curl cmd to test it
diff --git a/1-Introductory-Exercises/public/index.html b/1-Introductory-Exercises/public/index.html
@@ -7,8 +7,6 @@
     <title>Hello World</title>
     <link rel="shortcut icon" href="o2-favicon.png" />
     <script type="module" src="./webSocket.js"></script>
-
-
 </head>
 
 <body>
diff --git a/1-Introductory-Exercises/public/webSocket.js b/1-Introductory-Exercises/public/webSocket.js
@@ -1,14 +1,15 @@
 import {h, mount, Observable, WebSocketClient, sessionService} from '/js/src/index.js';
 
-
+// Simple Model View setup
 const model = new Observable();
-const view = (model) => h('h1.title', `${model.title}`);
-mount(document.body, view, model);
 model.title = 'Websocket Example';
 model.notify();
 
-sessionService.loadAndHideParameters();
+const view = (model) => h('h1.title', `${model.title}`);
+
+mount(document.body, view, model);
 
+sessionService.loadAndHideParameters();
 
 const ws = new WebSocketClient();
 
diff --git a/2-3-4-Exercises/index.js b/2-3-4-Exercises/index.js
@@ -1,7 +1,7 @@
 const path = require('path');
 const config = require('./config.js');
 
-const {HttpServer, LogManager} = require('@aliceo2/web-ui');
+const {HttpServer, LogManager, WebSocket, WebSocketMessage} = require('@aliceo2/web-ui');
 
 const logger = LogManager.getLogger('Exercise2');
 
@@ -15,3 +15,14 @@ http.get('/applicationData', (req, res) => {
     });
 });
 
+const ws = new WebSocket(http);
+
+ws.bind('random-number', (message) => message);
+
+setInterval(() => {
+    const randomNum = Math.floor(Math.random() * 100);
+    const msg = new WebSocketMessage(200).setCommand('random-number-update')
+        .setPayload({number: randomNum});
+    ws.broadcast(msg);
+    logger.infoMessage(`Broadcasted random number: ${randomNum}`);
+}, 5000);
diff --git a/2-3-4-Exercises/lib/ApplicationService.js b/2-3-4-Exercises/lib/ApplicationService.js
@@ -1,15 +1,12 @@
 class ApplicationService {
-    constructor() {
-        this.details = {
-            appName: '2-3-4 Exercises Application',
-        };
+    constructor(appDetails) {
+        this.details = appDetails
 
     }
 
     getDetails() {
         return this.details;
     }
-
 }     
 
 export default ApplicationService;
diff --git a/2-3-4-Exercises/public/Model.js b/2-3-4-Exercises/public/Model.js
@@ -1,4 +1,4 @@
-import {Observable, QueryRouter, Loader, sessionService} from '/js/src/index.js';
+import {Observable, QueryRouter, Loader, sessionService, WebSocketClient} from '/js/src/index.js';
 import Home from './home/Home.js';
 import About from './about/About.js';
 
@@ -21,7 +21,7 @@ export default class Model extends Observable {
     this.loader = new Loader(this);
     this.loader.bubbleTo(this);
 
-    // Sub-models
+    // Setup sub-models
     this.home = new Home();
     this.home.bubbleTo(this);
 
@@ -33,6 +33,18 @@ export default class Model extends Observable {
     this.router.observe(this.handleLocationChange.bind(this));
     this.router.bubbleTo(this);
 
+    this.randomNumber = null;
+
+    this.ws = new WebSocketClient();
+
+    this.ws.addListener('command', (message) => {
+    if (message.command === 'random-number-update') {
+        console.log('Received message from server:', message.payload);
+        this.randomNumber = message.payload.number;
+        this.notify();
+    }
+});
+
     this.handleLocationChange(); // Init first page
   }
 
diff --git a/2-3-4-Exercises/public/about/About.js b/2-3-4-Exercises/public/about/About.js
@@ -30,7 +30,6 @@ class About extends Observable {
         this.details = details;
         this.notify();
     }
-
 }
 
 export default About;
diff --git a/2-3-4-Exercises/public/about/aboutPage.js b/2-3-4-Exercises/public/about/aboutPage.js
@@ -1,27 +1,26 @@
-import {h, fetchClient, RemoteData} from '/js/src/index.js';
+import {h} from '/js/src/index.js';
 import {iconLaptop, iconHome} from '/js/src/icons.js'
 
 const content = (model) => {
 
     const getStatusMessage = (remoteData) => remoteData.match({
-        NotAsked: () => "Data has not been fetched from the server", // Display a message to the user saying that data has not been fetched
-        Loading: () => "Loading, please wait", // A request has probably been sent to the server but we did not receive any response yet
-        Success: () => "Data has been successfully loaded", // The server response has been stored in the remote data payload, and it is passed as parameter to the Success callback
-        Failure: (error) => `An error has occurred: ${error.message}`, // An error has occurred, displays its message
+        NotAsked: () => "Data has not been fetched from the server", 
+        Loading: () => "Loading, please wait", 
+        Success: () => "Data has been successfully loaded", 
+        Failure: (error) => `An error has occurred: ${error.message}`, 
     });
 
     const getTableData = (remoteData) => remoteData.match({
-        NotAsked: () => ({}), // No data to display
-        Loading: () => ({}), // No data to display
-        Success: (data) => data, // The server response has been stored in the remote data payload, and it is passed as parameter to the Success callback
-        Failure: (error) => ({}), // No data to display
+        NotAsked: () => ({}), 
+        Loading: () => ({}), 
+        Success: (data) => data, 
+        Failure: (error) => ({}), 
     });
 
     return h('div.m2', [
         h('p', 'Welcome to the about page of our application.'),
         h('div.flex.flex-column.w-33', [
             h('.btn.btn-primary.mv2' ,{
-                // on load print to console its purpose
                 oninit: () => {
                     console.log('This button takes you to the Home page');
                 },
@@ -30,17 +29,17 @@ const content = (model) => {
                 },
                 id: 'home-button'
             }, [h('div.flex.flex-row.justify-center.items-center', [h('p', 'Home'), h('span.mh1', iconHome())])]),
+
             h('.btn.btn-primary.mv2' ,{
-                // on load print to console its purpose
                 oninit: () => {
                     console.log('This button tells you application data');
                 },
                 onclick: () => {
                     model.about.requestData()
-                    
                 },
                 id: 'request-application-data-button'
             }, [h('div.flex.flex-row.justify-center.items-center', [h('p', 'Request Application Data'), h('span.mh1', iconLaptop())])]),
+
         ]),
         h('p.mt2', {id: 'application-data-status-display'} ,`Your app data status: ${getStatusMessage(model.about.getDetails())}`),
         h('table.table', [
diff --git a/2-3-4-Exercises/public/home/homePage.js b/2-3-4-Exercises/public/home/homePage.js
@@ -7,7 +7,6 @@ const content = (model) => {
         h('p', 'Welcome to the home page of our application.'),
         h('div.flex.flex-column.w-33', [
             h('.btn.btn-primary.mv2', {
-                // on load print to console its purpose
                 oninit: () => {
                     console.log('This button takes you to the About page');
                 },
@@ -16,8 +15,8 @@ const content = (model) => {
                 },
                 id: 'about-button'
             }, [h('div.flex.flex-row.justify-center.items-center', [h('p', 'About'), h('span.mh1', info())])]),
+            
             h('.btn.btn-primary.mv2', {
-                // on load print to console its purpose
                 oninit: () => {
                     console.log('This button tells you your username');
                 },
diff --git a/2-3-4-Exercises/public/index.js b/2-3-4-Exercises/public/index.js
@@ -2,7 +2,6 @@ import sessionService from '/js/src/sessionService.js';
 import {mount} from '/js/src/index.js';
 import view from './view.js';
 import Model from './Model.js';
-// import {ApplicationService} from '../lib/ApplicationService.js';
 
 sessionService.loadAndHideParameters();
 window.sessionService = sessionService;
@@ -12,15 +11,5 @@ const model = new Model();
 const debug = true; // shows when redraw is done
 mount(document.body, view, model, debug);
 
-// const appService = new ApplicationService();
-
-// try {
-//     const data = await appService.getDetails();
-//     console.log('Fetched data:', data);
-// } catch (error) {
-//     console.error('Error:', error);
-// }
-
-
 // Expose model to interact with it the browser's console
 window.model = model;
diff --git a/2-3-4-Exercises/public/view.js b/2-3-4-Exercises/public/view.js
@@ -20,7 +20,7 @@ export default (model) => [
 const header = (model) =>
   h('.p2.shadow-level2.level2.f3', {
     style: 'display: flex; justify-content: center'
-  }, model.router.params.page || 'default page');
+  }, [model.router.params.page || 'default page', ' - Random number: ', model.randomNumber !== null ? model.randomNumber : 'N/A']);
 
 /**
  * Page content
diff --git a/2-3-4-Exercises/test/mocha-application-service.js b/2-3-4-Exercises/test/mocha-application-service.js
@@ -3,9 +3,12 @@ import ApplicationService from '../lib/ApplicationService.js'; // adjust path as
 
 describe('ApplicationService', () => {
   let appService;
+  const mockDetails = {
+    appName: '2-3-4 Exercises Application',
+  };
 
   beforeEach(() => {
-    appService = new ApplicationService();
+    appService = new ApplicationService(mockDetails);
   });
 
   it('should be initialized', () => {
@@ -14,12 +17,9 @@ describe('ApplicationService', () => {
   });
 
   it('getDetails() should return the expected details JSON object', async () => {
-    const expectedDetails = {
-      appName: '2-3-4 Exercises Application',
-    };
 
     const returnedData = await appService.getDetails();
 
-    expect(returnedData).to.deep.equal(expectedDetails);
+    expect(returnedData).to.deep.equal(mockDetails);
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,12 @@`
`1`	`1`	`class ApplicationService {`
`2`		`- constructor() {`
`3`		`- this.details = {`
`4`		`- appName: '2-3-4 Exercises Application',`
`5`		`- };`
	`2`	`+ constructor(appDetails) {`
	`3`	`+ this.details = appDetails`
`6`	`4`
`7`	`5`	`}`
`8`	`6`
`9`	`7`	`getDetails() {`
`10`	`8`	`return this.details;`
`11`	`9`	`}`
`12`		`-`
`13`	`10`	`}`
`14`	`11`
`15`	`12`	`export default ApplicationService;`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@ class About extends Observable {`
`30`	`30`	`this.details = details;`
`31`	`31`	`this.notify();`
`32`	`32`	`}`
`33`		`-`
`34`	`33`	`}`
`35`	`34`
`36`	`35`	`export default About;`