Add full server project and mithril workaround

Docs refresh

Author: Ehevi

Framework/README.md

@@ -61,7 +61,7 @@ npm install --save @aliceo2/web-ui
 
 ### Getting started
 * [Step-by-step tutorial: Time server using Ajax and WebSockets](./docs/tutorial/time-server.md)
-* [Advanced frontend demo](https://aliceo2group.github.io/WebUi/Framework/docs/demo/frontend.html)
+* [Advanced frontend demo](./docs/demo/README.md)
 
 ### Backend guide
 * [REST API](./docs/guide/http-server.md) - Serves custom REST API, supports TLS

Framework/docs/demo/README.md

@@ -0,0 +1,51 @@
+# WebUi Demos
+
+This folder contains example demos showcasing the WebUi framework.
+
+> Mithril is the JavaScript frontend framework that WebUi builds on. It provides the virtual DOM engine and rendering API `m()` that all WebUi components depend on. The WebUi framework's [renderer.js](../../Frontend/js/src/renderer.js#L26) explicitly imports Mithril via an absolute path. Without Mithril loaded globally, none of the demos can render.
+
+There are two ways to run the demos:
+1. [Full server approach](#1-full-server-approach-recommended) _(recommended)_ – run a backend that serves Mithril and all demos with clean routes.
+2. [Manual workaround](#2-manual-workaround-quick--dirty) _(quick & dirty)_ – serve Mithril with a static server.
+
+## 1. Full server approach (recommended)
+
+See the [project README](./project/README.md) for setup instructions.
+
+This uses a proper backend that serves Mithril and all demos with clean routes. In the HTTP server's [constructor](./project/index.js#L27) a [`specifyRoutes`](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/Backend/http/server.js#L172) logic is invoked to wire up all required routes.
+
+## 2. Manual workaround (quick & dirty)
+
+Serve docs statically and manually provide Mithril.
+
+Copy Mithril to the expected `mithril/mithril.min.js` path:
+
+```bash
+cd WebUi/Framework
+npm ci
+mkdir -p mithril
+cp node_modules/mithril/mithril.min.js mithril/mithril.min.js
+```
+
+If you don't want to install everything, you can also create the file manually.
+```bash
+cd WebUi/Framework
+mkdir mithril
+touch mithril/mithril.min.js
+```
+Then copy the contents of the `mithril/mithril.min.js` file in there (available for example in the [unpkg.com](https://unpkg.com/mithril@2.3.7/mithril.min.js)).
+
+This is more error-prone than the local copy from `node_modules`.
+
+### Serve the Framework directory
+
+```bash
+python3 -m http.server 8080
+```
+
+Navigate through available demos:
+- [chart](http://localhost:8080/docs/demo/chart.html)
+- [frontend](http://localhost:8080/docs/demo/frontend.html)
+- [notification](http://localhost:8080/docs/demo/notification.html)
+- [template-1](http://localhost:8080/docs/demo/template-1.html)
+- [template-2](http://localhost:8080/docs/demo/template-2.html).

Framework/docs/demo/frontend.html

@@ -136,6 +136,6 @@
 // Mount will listen to model changes and draw inside body the view
 mount(document.body, view, model, debug);
 
-// Expose model to interract with it the browser's console
+// Expose model to interact with it the browser's console
 window.model = model;
 </script>

Framework/docs/demo/project/README.md

@@ -0,0 +1,35 @@
+# Full server approach
+
+For the setup, we're basically going to repeat the steps from the tutorial.
+
+### 1. Fetch project template
+
+```bash
+mkdir project
+git clone https://github.com/AliceO2Group/WebUi.git
+cp -R WebUi/Framework/docs/demo/project/* ./project
+cd project
+```
+
+### 2. Add the framework to dependency list
+
+```bash
+npm init
+npm install --save @aliceo2/web-ui
+```
+
+### 3. Launch the application
+
+Start the server
+```bash
+node index.js
+```
+
+Then, open your browser and navigate to [http://localhost:8080](http://localhost:8080). This is the main demo page.
+
+Navigate through available demos:
+- [chart](http://localhost:8080/chart)
+- [frontend](http://localhost:8080/frontend/)
+- [notification](http://localhost:8080/notification/)
+- [template-1](http://localhost:8080/template-1/)
+- [template-2](http://localhost:8080/template-2/).

Framework/docs/demo/project/config.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/*
+ * This is quick start configuration
+ * See the Backend documentation for more details
+ *
+ */
+module.exports = {
+  jwt: {
+    secret: 'supersecret',
+    expiration: '10m',
+  },
+  http: {
+    port: 8080,
+    hostname: 'localhost',
+    tls: false,
+  },
+};

Framework/docs/demo/project/index.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+// Import the backend classes
+const { HttpServer } = require('@aliceo2/web-ui');
+
+// Define configuration for JWT tokens and HTTP server
+const config = require('./config.js');
+
+/*
+ * HTTP server
+ * -----------
+ *
+ * Instantiate the HTTP server
+ */
+const httpServer = new HttpServer(config.http, config.jwt);
+
+// Server static content in public directory
+httpServer.addStaticPath('./public');
+httpServer.addStaticPath('./public/chart', '/chart');
+httpServer.addStaticPath('./public/frontend', '/frontend');
+httpServer.addStaticPath('./public/notification', '/notification');
+httpServer.addStaticPath('./public/template-1', '/template-1');
+httpServer.addStaticPath('./public/template-2', '/template-2');

Framework/docs/demo/project/public/chart/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<title>Chart Demo</title>
+<link rel="stylesheet" href="/css/src/bootstrap.css">
+<body class="bg-gray">
+<!-- This will be replaced by template engine when loaded completly -->
+Loading...
+</body>
+
+<!-- Main application -->
+<script type="module" src="main.js"></script>

Framework/docs/demo/project/public/chart/main.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import {mount, h, Observable, chartTimeSeries} from '/js/src/index.js';
+
+// Example of chart integration with template engine
+const view = (model) => [
+  h('div.m4', [
+    chartTimeSeries({
+      series: model.series1,
+      title: 'Sinus',
+      colorPrimary: 'red',
+      width: '800',
+    }),
+  ]),
+  h('div.m4', [
+    chartTimeSeries({
+      series: model.series1,
+      title: 'Sinus',
+      colorPrimary: 'red',
+      width: '800',
+      timeWindow: 100,
+    }),
+  ]),
+  h('div.m4', [
+    chartTimeSeries({
+      series: model.series2,
+      title: 'Random',
+      colorPrimary: 'blue',
+      width: '800',
+    }),
+  ]),
+  h('div.m4', [
+    chartTimeSeries({
+      series: model.series3,
+      title: 'Sinus rounded',
+      colorPrimary: 'green',
+      width: '800',
+    }),
+  ]),
+];
+
+// Create some basic model
+const model = new Observable();
+model.series1 = [];
+model.series2 = [];
+model.series3 = [];
+model.notify();
+
+// Add points at 30 FPS but keep only first 800 points for memory leak
+let i = 0;
+setInterval(() => {
+  i++;
+  model.series1.push({value: Math.cos(i / 10), timestamp: Date.now()});
+  model.series2.push({value: Math.random() * 10, timestamp: Date.now()});
+  model.series3.push({value: Math.round(Math.cos(i / 10)), timestamp: Date.now()});
+
+  model.series1.splice(0, model.series1.length - 800);
+  model.series2.splice(0, model.series2.length - 800);
+  model.series3.splice(0, model.series3.length - 800);
+
+  model.notify();
+}, 33);
+
+mount(document.body, view, model, true);
+
+window.model = model;

Framework/docs/demo/project/public/frontend/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<title>Advanced Frontend Demo</title>
+<link rel="stylesheet" href="/css/src/bootstrap.css">
+<body class="bg-gray">
+<!-- This will be replaced by template engine when loaded completly -->
+Loading...
+</body>
+
+<!-- Main application -->
+<script type="module" src="main.js"></script>