From 8cff736731a2858df24d5983b825d59c0adf7ed7 Mon Sep 17 00:00:00 2001 From: Mostafa Abdo Date: Thu, 23 Jan 2025 13:53:44 -0800 Subject: [PATCH] update packages and add component --- etc/nginx/default.conf/default.conf | 45 -- web/angular.json | 16 +- web/package-lock.json | 441 ++++++++++-------- web/package.json | 4 +- web/src/app/app.component.html | 352 +------------- web/src/app/app.routes.ts | 5 +- web/src/app/diagram/diagram.component.html | 57 +++ web/src/app/diagram/diagram.component.scss | 0 web/src/app/diagram/diagram.component.spec.ts | 23 + web/src/app/diagram/diagram.component.ts | 40 ++ 10 files changed, 392 insertions(+), 591 deletions(-) delete mode 100644 etc/nginx/default.conf/default.conf create mode 100644 web/src/app/diagram/diagram.component.html create mode 100644 web/src/app/diagram/diagram.component.scss create mode 100644 web/src/app/diagram/diagram.component.spec.ts create mode 100644 web/src/app/diagram/diagram.component.ts diff --git a/etc/nginx/default.conf/default.conf b/etc/nginx/default.conf/default.conf deleted file mode 100644 index 55e5303..0000000 --- a/etc/nginx/default.conf/default.conf +++ /dev/null @@ -1,45 +0,0 @@ -server { - listen 443 ssl; - server_name localhost; - - # Path to SSL certificate and key - ssl_certificate /etc/ssl/certs/localhost.cer; - ssl_certificate_key /etc/ssl/private/localhost.key; - - # Root directory for the Angular app - root /usr/share/nginx/html; - - # Default file to serve - index index.html; - - # Redirect HTTP traffic to HTTPS - error_page 404 /index.html; - - # Handle Angular's HTML5 pushState - location / { - try_files $uri $uri/ /index.html; - } - - # Optional: Gzip compression for improved performance - gzip on; - gzip_types text/plain application/javascript text/css application/json application/xml text/javascript; - gzip_min_length 1024; -} - - -server { - listen 80; - server_name localhost; - - # Serve static files from /usr/share/nginx/html - location / { - root /usr/share/nginx/html; - index index.html index.htm; - } - - # Error pages - error_page 500 502 503 504 /50x.html; - location = /50x.html { - root /usr/share/nginx/html; - } -} diff --git a/web/angular.json b/web/angular.json index 64fe1d0..3d5c0f9 100644 --- a/web/angular.json +++ b/web/angular.json @@ -32,9 +32,12 @@ } ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "node_modules/bootstrap/dist/css/bootstrap.min.css" + ], + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.min.js" ], - "scripts": [], "server": "src/main.server.ts", "prerender": true, "ssr": { @@ -96,9 +99,12 @@ } ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "node_modules/bootstrap/dist/css/bootstrap.min.css" ], - "scripts": [] + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.min.js" + ] } } } @@ -107,4 +113,4 @@ "cli": { "analytics": false } -} +} \ No newline at end of file diff --git a/web/package-lock.json b/web/package-lock.json index 7986bb5..02a24a6 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -18,6 +18,8 @@ "@angular/platform-server": "^18.2.0", "@angular/router": "^18.2.0", "@angular/ssr": "^18.2.8", + "@syncfusion/ej2-angular-diagrams": "^28.1.39", + "bootstrap": "^5.3.3", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -455,6 +457,36 @@ "typescript": ">=5.4 <5.6" } }, + "node_modules/@angular/compiler-cli/node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@angular/compiler-cli/node_modules/readdirp": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz", + "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@angular/core": { "version": "18.2.12", "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.12.tgz", @@ -3935,6 +3967,17 @@ "node": ">=14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.22.4", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", @@ -4276,6 +4319,137 @@ "dev": true, "license": "MIT" }, + "node_modules/@syncfusion/ej2-angular-base": { + "version": "28.1.33", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-28.1.33.tgz", + "integrity": "sha512-jyZgj549kpZEa3hJ4+gSFIZ0zoTY9gyCSaAmdktpUhq2kDV86AZgWwAxrIhxaZGZmiditdDaD71Xx0E5fk4Lxg==", + "hasInstallScript": true, + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-icons": "~28.1.33" + } + }, + "node_modules/@syncfusion/ej2-angular-diagrams": { + "version": "28.1.39", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-diagrams/-/ej2-angular-diagrams-28.1.39.tgz", + "integrity": "sha512-1dGieZRwkheHjnmEfiJqviPaVBV/EEiW2q3P290NvyYO7gXv27KKCT6Qm8LQMrmJyTFcCuohWBm1yFIkgshJ0w==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-angular-base": "~28.1.33", + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-diagrams": "28.1.39" + } + }, + "node_modules/@syncfusion/ej2-base": { + "version": "28.1.33", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-28.1.33.tgz", + "integrity": "sha512-KTv7EAUMzQe3Bo2iXGvJW590YmOnEl9akZckrkR9YmlAlWZgBZOJzakBlCaauRGD5l+mgmZvepECMFkqnndqvg==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-icons": "~28.1.33" + }, + "bin": { + "syncfusion-license": "bin/syncfusion-license.js" + } + }, + "node_modules/@syncfusion/ej2-buttons": { + "version": "28.1.39", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-28.1.39.tgz", + "integrity": "sha512-qykrTIsGRqO4tOEAf7QVRBN4CDcnmRBJNsnmiUBB4H5J3MGA0J7Up3Dok1ztlfiiYrcoFUJmrh43d1hfw4KhHw==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33" + } + }, + "node_modules/@syncfusion/ej2-data": { + "version": "28.1.33", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-28.1.33.tgz", + "integrity": "sha512-LpLHGXh6Bg7ExnJ4o3Zm4ZjUyxkaBxDHwDPC6Hylf+zrSN18sBosUf4fkX4DNa/EW+/Bd5kkHuYXumUOBdRz+Q==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33" + } + }, + "node_modules/@syncfusion/ej2-diagrams": { + "version": "28.1.39", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-diagrams/-/ej2-diagrams-28.1.39.tgz", + "integrity": "sha512-XpaGV0J7mSckB7rL1L06D0+wUiqXmIGLyCFTQcKm1Vm15z+UQ1S9O/6g2wqNFx6/ldHAOD6WHGC8cKiXUnLfFQ==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-buttons": "~28.1.39", + "@syncfusion/ej2-data": "~28.1.33", + "@syncfusion/ej2-inputs": "~28.1.37", + "@syncfusion/ej2-lists": "~28.1.37", + "@syncfusion/ej2-navigations": "~28.1.39", + "@syncfusion/ej2-popups": "~28.1.39" + } + }, + "node_modules/@syncfusion/ej2-icons": { + "version": "28.1.33", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-28.1.33.tgz", + "integrity": "sha512-5rAxRjAfTCLnywPWFJaBiunir+4nthMyFJ/F/fxl6ORnY0UrjvEdKfdnUGO1bmyve/ujqVI05vV6rPnGuIdjaw==", + "license": "SEE LICENSE IN license" + }, + "node_modules/@syncfusion/ej2-inputs": { + "version": "28.1.41", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-28.1.41.tgz", + "integrity": "sha512-mxI9aLK5F5mg7Bb5Upe4YDXqBM3oiCVaoOa6FXRqW/mnPGVRhYRcihI2kDmxGb0TQEYTMArgjI5GpwyzRZJZJw==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-buttons": "~28.1.39", + "@syncfusion/ej2-popups": "~28.1.39", + "@syncfusion/ej2-splitbuttons": "~28.1.41" + } + }, + "node_modules/@syncfusion/ej2-lists": { + "version": "28.1.37", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-28.1.37.tgz", + "integrity": "sha512-7GgiV3j9RxGdRLUBZjmWnMxhUsVpaHSeCNP71nvrrU8Ay7MFsZrfdpjI/QPOMbAM9hq+rEKr8gdyiF8A9/H38Q==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-buttons": "~28.1.37", + "@syncfusion/ej2-data": "~28.1.33", + "@syncfusion/ej2-popups": "~28.1.33" + } + }, + "node_modules/@syncfusion/ej2-navigations": { + "version": "28.1.41", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-28.1.41.tgz", + "integrity": "sha512-zKBZ9ZvU0wRlqPxXJ4Q7IGI4drC5k8glVOM1/OBlJ91ps4SJMKzsUmaB3SWLq5ul8Q/oZmfE1jO2OcdvCGZjfw==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-buttons": "~28.1.39", + "@syncfusion/ej2-data": "~28.1.33", + "@syncfusion/ej2-inputs": "~28.1.41", + "@syncfusion/ej2-lists": "~28.1.37", + "@syncfusion/ej2-popups": "~28.1.39" + } + }, + "node_modules/@syncfusion/ej2-popups": { + "version": "28.1.39", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-28.1.39.tgz", + "integrity": "sha512-uufnfFL5AbkBLmiRvRy8r9dArryTV+d42JCIBgH3SnVJwItkMgNS9U33EPzhqC19WyYKlYofkILU+lvZC5NMCg==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-buttons": "~28.1.39" + } + }, + "node_modules/@syncfusion/ej2-splitbuttons": { + "version": "28.1.41", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-28.1.41.tgz", + "integrity": "sha512-z0Elhze1fdO19ZpkuoBndOycfHNopSjm1o+f6AFVTVgNP3SAGLjjzjkyk2QIoo9Kangy41+gDpky0BTlWM/Gig==", + "license": "SEE LICENSE IN license", + "dependencies": { + "@syncfusion/ej2-base": "~28.1.33", + "@syncfusion/ej2-popups": "~28.1.39" + } + }, "node_modules/@tufjs/canonical-json": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz", @@ -5260,6 +5434,25 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "license": "ISC" }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5526,19 +5719,41 @@ "license": "MIT" }, "node_modules/chokidar": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", - "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, "license": "MIT", "dependencies": { - "readdirp": "^4.0.1" + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" }, "engines": { - "node": ">= 14.16.0" + "node": ">= 8.10.0" }, "funding": { "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" } }, "node_modules/chownr": { @@ -8550,31 +8765,6 @@ "source-map-support": "^0.5.5" } }, - "node_modules/karma/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/karma/node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -8594,19 +8784,6 @@ "dev": true, "license": "MIT" }, - "node_modules/karma/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/karma/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -8617,32 +8794,6 @@ "node": ">=8" } }, - "node_modules/karma/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/karma/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/karma/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -10985,17 +11136,29 @@ } }, "node_modules/readdirp": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", - "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, "engines": { - "node": ">= 14.16.0" + "node": ">=8.10.0" + } + }, + "node_modules/readdirp/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" }, "funding": { - "type": "individual", - "url": "https://paulmillr.com/funding/" + "url": "https://github.com/sponsors/jonschlinkert" } }, "node_modules/reflect-metadata": { @@ -11426,70 +11589,6 @@ } } }, - "node_modules/sass/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/sass/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/sass/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/sass/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/sax": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", @@ -13631,31 +13730,6 @@ "balanced-match": "^1.0.0" } }, - "node_modules/webpack-dev-server/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/webpack-dev-server/node_modules/glob": { "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", @@ -13677,19 +13751,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/webpack-dev-server/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz", @@ -13741,32 +13802,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/webpack-dev-server/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/webpack-dev-server/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/webpack-dev-server/node_modules/rimraf": { "version": "5.0.10", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz", diff --git a/web/package.json b/web/package.json index aa95ae0..a526553 100644 --- a/web/package.json +++ b/web/package.json @@ -21,6 +21,8 @@ "@angular/platform-server": "^18.2.0", "@angular/router": "^18.2.0", "@angular/ssr": "^18.2.8", + "@syncfusion/ej2-angular-diagrams": "^28.1.39", + "bootstrap": "^5.3.3", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -41,4 +43,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.5.2" } -} \ No newline at end of file +} diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index 36093e1..c260f76 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,336 +1,16 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/web/src/app/app.routes.ts b/web/src/app/app.routes.ts index dc39edb..7ad11ae 100644 --- a/web/src/app/app.routes.ts +++ b/web/src/app/app.routes.ts @@ -1,3 +1,6 @@ import { Routes } from '@angular/router'; +import { DiagramComponent } from './diagram/diagram.component'; -export const routes: Routes = []; +export const routes: Routes = [ + { path: "diagram", component: DiagramComponent }, +]; diff --git a/web/src/app/diagram/diagram.component.html b/web/src/app/diagram/diagram.component.html new file mode 100644 index 0000000..daef2f6 --- /dev/null +++ b/web/src/app/diagram/diagram.component.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/src/app/diagram/diagram.component.scss b/web/src/app/diagram/diagram.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/diagram/diagram.component.spec.ts b/web/src/app/diagram/diagram.component.spec.ts new file mode 100644 index 0000000..79c532e --- /dev/null +++ b/web/src/app/diagram/diagram.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DiagramComponent } from './diagram.component'; + +describe('DiagramComponent', () => { + let component: DiagramComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DiagramComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DiagramComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/diagram/diagram.component.ts b/web/src/app/diagram/diagram.component.ts new file mode 100644 index 0000000..247070e --- /dev/null +++ b/web/src/app/diagram/diagram.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { + FlowShapeModel, MarginModel, + NodeModel, OrthogonalSegmentModel, DiagramModule +} from "@syncfusion/ej2-angular-diagrams"; + +@Component({ + selector: 'app-diagram', + standalone: true, + imports: [DiagramModule], + templateUrl: './diagram.component.html', + styleUrl: './diagram.component.scss' +}) +export class DiagramComponent { + public nodeDefaults(node: NodeModel): NodeModel { + node.height = 50; + node.width = 200; + node.offsetX = 700; + return node; + } + public terminatorShape: FlowShapeModel = { type: 'Flow', shape: 'Terminator' }; + + public processShape: FlowShapeModel = { type: 'Flow', shape: 'Process' }; + + public decisionShape: FlowShapeModel = { type: 'Flow', shape: 'Decision' }; + + public preDefinedProcessShape: FlowShapeModel = { + type: 'Flow', shape: 'PreDefinedProcess' + }; + + public annotationMargin: MarginModel = { left: 15, right: 0, bottom: 0, top: 0 }; + + public segment1: OrthogonalSegmentModel = [ + { direction: 'Right', length: 30 }, + { direction: 'Bottom', length: 300 }]; + + public segment2: OrthogonalSegmentModel = [ + { length: 30, direction: "Left" }, + { length: 200, direction: "Top" }]; +}