bump version to 0.0.14 in package.json; add user and connection management with WebSocket support

riccardodebenedictis · riccardodebenedictis · commit 7ccd861f86f5 · 2025-01-12T17:54:29.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ratio-gui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/settings.json.in b/settings.json.in
@@ -0,0 +1,6 @@
+{
+  "protocol": "@API_PROTOCOL@",
+  "hostname": "@API_HOSTNAME@",
+  "port": "@API_PORT@",
+  "ws_path": "@API_WS_PATH@"
+}
diff --git a/src/app.ts b/src/app.ts
@@ -1,3 +1,5 @@
+import { ConnectionListener } from "./utils/connection";
+
 export class App implements AppListener {
 
   private static instance: App;
@@ -95,7 +97,7 @@ export abstract class ListComponent<P, E extends HTMLElement, L extends HTMLElem
   }
 }
 
-export class AppComponent extends Component<App, HTMLDivElement> implements AppListener {
+export class AppComponent extends Component<App, HTMLDivElement> implements AppListener, ConnectionListener {
 
   private main: HTMLDivElement;
 
@@ -146,6 +148,11 @@ export class AppComponent extends Component<App, HTMLDivElement> implements AppL
       this.main.appendChild(component.element);
   }
 
+  connected(info: any): void { }
+  received_message(message: any): void { }
+  disconnected(): void { }
+  error(error: any): void { }
+
   populate_navbar(container: HTMLDivElement): void { }
 
   unmounting(): void { App.get_instance().remove_app_listener(this); }
@@ -156,6 +163,11 @@ export class AnchorComponent<P> extends Component<P, HTMLAnchorElement> {
   constructor(payload: P) { super(payload, document.createElement('a')); }
 }
 
+export class ButtonComponent<P> extends Component<P, HTMLButtonElement> {
+
+  constructor(payload: P) { super(payload, document.createElement('button')); }
+}
+
 export class UListComponent<P> extends ListComponent<P, HTMLLIElement, HTMLUListElement> {
 
   constructor(payload: Component<P, HTMLLIElement>[], compareFn?: (a: P, b: P) => number) {
diff --git a/src/index.ts b/src/index.ts
@@ -7,10 +7,10 @@ import cytoscapePopper, { RefElement } from 'cytoscape-popper';
 import tippy from 'tippy.js';
 
 export * from './app';
-export { solver } from './solver';
-export { SolverGraph } from './solver_graph';
-export { TimelinesChart } from './solver_timelines';
-export * from './solver_components';
+export { solver } from './solver/solver';
+export { SolverGraph } from './solver/solver_graph';
+export { TimelinesChart } from './solver/solver_timelines';
+export * from './solver/solver_components';
 
 function tippyFactory(ref: RefElement, content: HTMLElement) {
   // Since tippy constructor requires DOM element/elements, create a placeholder
diff --git a/src/settings.json b/src/settings.json
@@ -0,0 +1,6 @@
+{
+  "protocol": "http",
+  "hostname": "localhost",
+  "port": "80",
+  "ws_path": "ws"
+}
diff --git a/src/solver/solver.ts b/src/solver/solver.ts
diff --git a/src/solver/solver_components.ts b/src/solver/solver_components.ts
@@ -1,4 +1,4 @@
-import { App, Component, AnchorComponent, UListComponent } from './app';
+import { App, Component, AnchorComponent, UListComponent } from '../app';
 import { solver } from "./solver";
 import { library, icon } from '@fortawesome/fontawesome-svg-core'
 import { faBrain, faPauseCircle, faPlayCircle, faCheckCircle, faXmarkCircle } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/solver/solver_graph.ts b/src/solver/solver_graph.ts
@@ -1,4 +1,4 @@
-import { Component } from "./app";
+import { Component } from "../app";
 import { solver } from "./solver";
 import cytoscape from 'cytoscape';
 import { interpolateRgb } from 'd3-interpolate';
diff --git a/src/solver/solver_timelines.ts b/src/solver/solver_timelines.ts
@@ -1,4 +1,4 @@
-import { Component } from "./app";
+import { Component } from "../app";
 import { solver } from "./solver";
 import Plotly, { Shape } from 'plotly.js-dist-min';
 export class TimelinesChart extends Component<solver.Solver, HTMLDivElement> implements solver.SolverListener {
diff --git a/src/utils/connection.ts b/src/utils/connection.ts
@@ -0,0 +1,62 @@
+import settings from '../settings.json';
+
+export class Connection {
+
+  private static instance: Connection;
+  private socket: WebSocket | null = null;
+  private connection_listeners: Set<ConnectionListener> = new Set();
+
+  private constructor() { }
+
+  static get_instance() {
+    if (!Connection.instance)
+      Connection.instance = new Connection();
+    return Connection.instance;
+  }
+
+  connect(token: string | null = null, timeout = 5000) {
+    if (this.socket)
+      this.socket.close();
+
+    console.debug('Connecting to server: ', settings.protocol + '://' + settings.hostname + ':' + settings.port);
+    this.socket = new WebSocket(settings.protocol + '://' + settings.hostname + ':' + settings.port + '/' + settings.ws_path);
+
+    this.socket.onopen = () => {
+      console.debug('Connected to server');
+      if (token)
+        this.socket!.send(JSON.stringify({ type: 'login', token: token }));
+      else
+        for (const listener of this.connection_listeners) { listener.connected({}); }
+    };
+
+    this.socket.onmessage = (event) => {
+      console.debug('Received message from server: ', event.data);
+      const message = JSON.parse(event.data);
+      if (message.type === 'login')
+        for (const listener of this.connection_listeners) { listener.connected(message.info); }
+      else
+        for (const listener of this.connection_listeners) { listener.received_message(message); }
+    };
+
+    this.socket.onclose = () => {
+      console.debug('Disconnected from server');
+      for (const listener of this.connection_listeners) { listener.disconnected(); }
+    };
+
+    this.socket.onerror = (error) => {
+      console.error('Connection error: ', error);
+      for (const listener of this.connection_listeners) { listener.error(error); }
+    };
+  }
+}
+
+export interface ConnectionListener {
+
+  connected(info: any): void;
+
+  received_message(message: any): void;
+
+  disconnected(): void;
+
+  error(error: any): void;
+}
diff --git a/src/utils/user.ts b/src/utils/user.ts
@@ -0,0 +1,67 @@
+import settings from '../settings.json';
+import { Connection } from './connection';
+
+export class User {
+
+  username: string;
+
+  constructor(username: string) {
+    this.username = username;
+  }
+}
+
+export class CurrentUser implements UserListener {
+
+  private static instance: CurrentUser;
+  private user: User | null = null;
+  private user_listeners: Set<UserListener> = new Set();
+
+  private constructor() { }
+
+  static get_instance() {
+    if (!CurrentUser.instance)
+      CurrentUser.instance = new CurrentUser();
+    return CurrentUser.instance;
+  }
+
+  async login(username: string, password: string, remember_input: boolean = false): Promise<boolean> {
+    const response = await fetch(settings.protocol + '://' + settings.hostname + ':' + settings.port + '/login', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ username: username, password: password }) });
+    if (response.ok) { // Login successful
+      const data = await response.json();
+      if (remember_input)
+        localStorage.setItem('token', data.token);
+      Connection.get_instance().connect(data.token);
+      return true;
+    } else { // Login failed
+      return false;
+    }
+  }
+
+  get_user(): User | null { return this.user; }
+
+  connected(user: User): void {
+    this.user = user;
+    for (const listener of this.user_listeners) { listener.connected(user); }
+  }
+
+  logged_out(): void {
+    this.user = null;
+    localStorage.removeItem('token');
+    for (const listener of this.user_listeners) { listener.logged_out(); }
+  }
+
+  add_user_listener(listener: UserListener): void {
+    this.user_listeners.add(listener);
+  }
+
+  remove_user_listener(listener: UserListener): void {
+    this.user_listeners.delete(listener);
+  }
+}
+
+export interface UserListener {
+
+  connected(user: User): void;
+
+  logged_out(): void;
+}
diff --git a/src/utils/user_components.ts b/src/utils/user_components.ts
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ratio-gui",`
`3`		`- "version": "0.0.13",`
	`3`	`+ "version": "0.0.14",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"types": "dist/index.d.ts",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { App, Component, AnchorComponent, UListComponent } from './app';`
	`1`	`+import { App, Component, AnchorComponent, UListComponent } from '../app';`
`2`	`2`	`import { solver } from "./solver";`
`3`	`3`	`import { library, icon } from '@fortawesome/fontawesome-svg-core'`
`4`	`4`	`import { faBrain, faPauseCircle, faPlayCircle, faCheckCircle, faXmarkCircle } from '@fortawesome/free-solid-svg-icons'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component } from "./app";`
	`1`	`+import { Component } from "../app";`
`2`	`2`	`import { solver } from "./solver";`
`3`	`3`	`import cytoscape from 'cytoscape';`
`4`	`4`	`import { interpolateRgb } from 'd3-interpolate';`