From f8c2a28c471bb835cd4bc0a715cf4d2c7b9fb3e9 Mon Sep 17 00:00:00 2001 From: Youen Toupin Date: Sat, 9 Apr 2022 18:38:04 +0200 Subject: [PATCH] refactored code to avoid relative paths added Component and Page base classes added Clock widget (wip) --- WebApp/package.json | 1 + WebApp/src/app.ts | 4 ++-- WebApp/src/components/component.ts | 19 +++++++++++++++++++ WebApp/src/components/page.ts | 5 +++++ WebApp/src/components/widgets/clock.tsx | 8 ++++++++ .../{ => pages/dashboard}/dashboard-page.tsx | 11 +++++++---- .../{ => pages/raw-data}/raw-data-page.css | 0 .../{ => pages/raw-data}/raw-data-page.tsx | 5 +++-- WebApp/tsconfig.json | 7 +++++-- WebApp/webpack.config.js | 2 ++ 10 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 WebApp/src/components/component.ts create mode 100644 WebApp/src/components/page.ts create mode 100644 WebApp/src/components/widgets/clock.tsx rename WebApp/src/{ => pages/dashboard}/dashboard-page.tsx (62%) rename WebApp/src/{ => pages/raw-data}/raw-data-page.css (100%) rename WebApp/src/{ => pages/raw-data}/raw-data-page.tsx (87%) diff --git a/WebApp/package.json b/WebApp/package.json index e73cbcb..e721be2 100644 --- a/WebApp/package.json +++ b/WebApp/package.json @@ -19,6 +19,7 @@ "purgecss-webpack-plugin": "^4.1.3", "style-loader": "^3.3.1", "ts-loader": "^9.2.8", + "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "^4.6.2", "webpack": "^5.70.0", "webpack-cli": "^4.9.2" diff --git a/WebApp/src/app.ts b/WebApp/src/app.ts index 7ec4b0f..05957ff 100644 --- a/WebApp/src/app.ts +++ b/WebApp/src/app.ts @@ -1,8 +1,8 @@ import m from 'mithril'; import Layout from './layout'; -import RawDataPage from './raw-data-page'; -import DashboardPage from './dashboard-page'; +import { RawDataPage } from 'pages/raw-data/raw-data-page'; +import { DashboardPage } from 'pages/dashboard/dashboard-page'; require('../node_modules/bulma/css/bulma.css'); diff --git a/WebApp/src/components/component.ts b/WebApp/src/components/component.ts new file mode 100644 index 0000000..8016793 --- /dev/null +++ b/WebApp/src/components/component.ts @@ -0,0 +1,19 @@ +import m from 'mithril'; + +export abstract class Component { + abstract view(vnode: m.Vnode): m.Children; + + oninit(vnode: m.Vnode) {} + + oncreate(vnode: m.Vnode) {} + + onbeforeupdate(newVnode: m.Vnode, oldVnode: m.Vnode) { + return true; + } + + onupdate(vnode: m.Vnode) {} + + onbeforeremove(vnode: m.Vnode): Promise | void {} + + onremove(vnode: m.Vnode) {} +} diff --git a/WebApp/src/components/page.ts b/WebApp/src/components/page.ts new file mode 100644 index 0000000..b6edad3 --- /dev/null +++ b/WebApp/src/components/page.ts @@ -0,0 +1,5 @@ +import { Component } from 'components/component'; + +export abstract class Page extends Component { + +} diff --git a/WebApp/src/components/widgets/clock.tsx b/WebApp/src/components/widgets/clock.tsx new file mode 100644 index 0000000..1caff97 --- /dev/null +++ b/WebApp/src/components/widgets/clock.tsx @@ -0,0 +1,8 @@ +import m from 'mithril'; +import { Component } from 'components/component' + +export default class Clock extends Component { + view(vnode: m.Vnode<{}, {}>): m.Children { + return

clock

; + } +} diff --git a/WebApp/src/dashboard-page.tsx b/WebApp/src/pages/dashboard/dashboard-page.tsx similarity index 62% rename from WebApp/src/dashboard-page.tsx rename to WebApp/src/pages/dashboard/dashboard-page.tsx index 3d914a0..20855b2 100644 --- a/WebApp/src/dashboard-page.tsx +++ b/WebApp/src/pages/dashboard/dashboard-page.tsx @@ -1,7 +1,9 @@ import m from 'mithril'; -import { MonitorApi, Status } from './monitor-api'; +import { Page } from 'components/page'; +import { MonitorApi, Status } from 'monitor-api'; +import Clock from 'components/widgets/clock'; -export default class DashboardPage { +export class DashboardPage extends Page { status: Status = null; autoRefresh = true; @@ -10,8 +12,8 @@ export default class DashboardPage { this.refresh(); } - onbeforeremove() { - this.autoRefresh = false; + onbeforeremove(vnode: m.Vnode<{}, {}>) { + this.autoRefresh = false; } async refresh() { @@ -23,6 +25,7 @@ export default class DashboardPage { view() { return this.status ?
+
:

Chargement...

; } diff --git a/WebApp/src/raw-data-page.css b/WebApp/src/pages/raw-data/raw-data-page.css similarity index 100% rename from WebApp/src/raw-data-page.css rename to WebApp/src/pages/raw-data/raw-data-page.css diff --git a/WebApp/src/raw-data-page.tsx b/WebApp/src/pages/raw-data/raw-data-page.tsx similarity index 87% rename from WebApp/src/raw-data-page.tsx rename to WebApp/src/pages/raw-data/raw-data-page.tsx index a52a780..432b0ea 100644 --- a/WebApp/src/raw-data-page.tsx +++ b/WebApp/src/pages/raw-data/raw-data-page.tsx @@ -1,9 +1,10 @@ import m from 'mithril'; -import { MonitorApi, Status } from './monitor-api'; +import { Page } from 'components/page'; +import { MonitorApi, Status } from 'monitor-api'; require("./raw-data-page.css"); -export default class RawDataPage { +export class RawDataPage extends Page { status: Status = null; autoRefresh = true; diff --git a/WebApp/tsconfig.json b/WebApp/tsconfig.json index 3134765..fc79bf5 100644 --- a/WebApp/tsconfig.json +++ b/WebApp/tsconfig.json @@ -1,12 +1,15 @@ { "compilerOptions": { "noImplicitAny": true, - "module": "CommonJS", + "module": "ES6", "esModuleInterop": true, "target": "es5", "jsx": "react", "jsxFactory": "m", "allowJs": true, - "moduleResolution": "node" + "moduleResolution": "node", + "baseUrl": "./src", + "paths": { + } } } diff --git a/WebApp/webpack.config.js b/WebApp/webpack.config.js index e789128..0cccebb 100644 --- a/WebApp/webpack.config.js +++ b/WebApp/webpack.config.js @@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const PurgecssPlugin = require('purgecss-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { entry: './src/app.ts', @@ -23,6 +24,7 @@ module.exports = { }, resolve: { extensions: ['.tsx', '.ts', '.js'], + plugins: [new TsconfigPathsPlugin({})] }, output: { filename: '[name].js',