diff --git a/web/package-lock.json b/web/package-lock.json index 6dddfec..11508ee 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,6 +13,7 @@ "@angular/compiler": "^19.1.3", "@angular/core": "^19.1.3", "@angular/forms": "^19.1.3", + "@angular/material": "^19.1.1", "@angular/platform-browser": "^19.1.3", "@angular/platform-browser-dynamic": "^19.1.3", "@angular/platform-server": "^19.1.3", @@ -20,6 +21,7 @@ "@angular/ssr": "^19.1.4", "@syncfusion/ej2-angular-diagrams": "^28.1.39", "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -590,6 +592,24 @@ } } }, + "node_modules/@angular/cdk": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.1.tgz", + "integrity": "sha512-MmfNB9iANuDN1TS+HL8uKqA3/7pdVeCRN+HdAcfqFrcqZmSUUSlYWy8PXqymmyeXxoSwt9p4I/6R0By03VoCMw==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "19.1.4", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.4.tgz", @@ -815,6 +835,24 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.1.tgz", + "integrity": "sha512-x/EwyBx3yCIYyu/hve19eecmufJzwltRWOO/3Y74jY4jSNNFrR9046t0ptw4fyEXjN8UQZI6Fp/melcZxl3IiA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^19.0.0 || ^20.0.0", + "@angular/cdk": "19.1.1", + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "19.1.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.3.tgz", @@ -6255,6 +6293,22 @@ "@popperjs/core": "^2.11.8" } }, + "node_modules/bootstrap-icons": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz", + "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -7628,7 +7682,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -11405,7 +11459,7 @@ "version": "7.2.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "entities": "^4.5.0" diff --git a/web/package.json b/web/package.json index ecdca34..8e05f87 100644 --- a/web/package.json +++ b/web/package.json @@ -16,6 +16,7 @@ "@angular/compiler": "^19.1.3", "@angular/core": "^19.1.3", "@angular/forms": "^19.1.3", + "@angular/material": "^19.1.1", "@angular/platform-browser": "^19.1.3", "@angular/platform-browser-dynamic": "^19.1.3", "@angular/platform-server": "^19.1.3", @@ -23,6 +24,7 @@ "@angular/ssr": "^19.1.4", "@syncfusion/ej2-angular-diagrams": "^28.1.39", "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -43,4 +45,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.5.2" } -} +} \ No newline at end of file diff --git a/web/src/app/diagram/diagram.component.html b/web/src/app/diagram/diagram.component.html deleted file mode 100644 index daef2f6..0000000 --- a/web/src/app/diagram/diagram.component.html +++ /dev/null @@ -1,57 +0,0 @@ -<ejs-diagram width="100%" height="850px" [getNodeDefaults]='nodeDefaults'> - <e-nodes> - <e-node id='node1' [offsetY]=100 [shape]='terminatorShape'> - <e-node-annotations> - <e-node-annotation content='Battery'></e-node-annotation> - </e-node-annotations> - </e-node> - <e-node id='node2' [offsetY]=200 [shape]='processShape'> - <e-node-annotations> - <e-node-annotation content='var i = 0;'></e-node-annotation> - </e-node-annotations> - </e-node> - <e-node id='node3' [offsetY]=300 [shape]='decisionShape'> - <e-node-annotations> - <e-node-annotation content='i > 10?'></e-node-annotation> - </e-node-annotations> - </e-node> - <e-node id='node4' [offsetY]=400 [shape]='preDefinedProcessShape'> - <e-node-annotations> - <e-node-annotation content='print(\"Syncfusion!!\");'> - </e-node-annotation> - </e-node-annotations> - </e-node> - <e-node id='node5' [offsetY]=500 [shape]='processShape'> - <e-node-annotations> - <e-node-annotation content='i++;'></e-node-annotation> - </e-node-annotations> - </e-node> - <e-node id='node6' [offsetY]=600 [shape]='terminatorShape'> - <e-node-annotations> - <e-node-annotation content='End'></e-node-annotation> - </e-node-annotations> - </e-node> - </e-nodes> - <e-connectors> - <e-connector sourceID='node1' targetID='node2'></e-connector> - <e-connector sourceID='node2' targetID='node3'></e-connector> - <e-connector sourceID='node3' targetID='node6' type="Orthogonal" - [segments]='segment1'> - <e-connector-annotations> - <e-connector-annotation content='Yes' - [margin]="annotationMargin"></e-connector-annotation> - </e-connector-annotations> - </e-connector> - <e-connector sourceID='node3' targetID='node4'> - <e-connector-annotations> - <e-connector-annotation content='No' - [margin]="annotationMargin"></e-connector-annotation> - </e-connector-annotations> - </e-connector> - <e-connector sourceID='node4' targetID='node5'></e-connector> - <e-connector sourceID='node5' targetID='node3' type="Orthogonal" - [segments]='segment2'> - </e-connector> - </e-connectors> - -</ejs-diagram> \ No newline at end of file diff --git a/web/src/app/diagram/diagram.component.scss b/web/src/app/diagram/diagram.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/web/src/app/diagram/diagram.component.spec.ts b/web/src/app/diagram/diagram.component.spec.ts deleted file mode 100644 index 79c532e..0000000 --- a/web/src/app/diagram/diagram.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DiagramComponent } from './diagram.component'; - -describe('DiagramComponent', () => { - let component: DiagramComponent; - let fixture: ComponentFixture<DiagramComponent>; - - 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 deleted file mode 100644 index f5932ef..0000000 --- a/web/src/app/diagram/diagram.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component } from '@angular/core'; -import { - FlowShapeModel, MarginModel, - NodeModel, OrthogonalSegmentModel, DiagramModule -} from "@syncfusion/ej2-angular-diagrams"; - -@Component({ - selector: 'app-diagram', - 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" }]; -}