diff --git a/package-lock.json b/package-lock.json index 26e6ed7..ca8c7f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "ngx-clipboard": "^16.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" @@ -9987,6 +9988,36 @@ "dev": true, "license": "MIT" }, + "node_modules/ngx-clipboard": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-16.0.0.tgz", + "integrity": "sha512-rZ/Eo1PqiKMiyF8tdjhmUkoUu68f7OzBJ7YH1YFeh2RAaNrerTaW8XfFOzppSckjFQqA1fwGSYuTTJlDhDag5w==", + "license": "MIT", + "dependencies": { + "ngx-window-token": ">=7.0.0", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": ">=13.0.0", + "@angular/core": ">=13.0.0" + } + }, + "node_modules/ngx-window-token": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-7.0.0.tgz", + "integrity": "sha512-5+XfRVSY7Dciu8xyCNMkOlH2UfwR9W2P1Pirz7caaZgOZDjFbL8aEO2stjfJJm2FFf1D6dlVHNzhLWGk9HGkqA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0" + }, + "peerDependencies": { + "@angular/common": ">=13.0.0", + "@angular/core": ">=13.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/package.json b/package.json index 0e9ff3f..352d3af 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "ngx-clipboard": "^16.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..ee10137 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

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 }} - - - - - } -
- -
-
-
- - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 91a2808..91059ef 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { ToolListComponent } from "./components/pages/tool-list/tool-list.component"; +import { TitleComponent } from "./components/partials/title/title.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, ToolListComponent, TitleComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) diff --git a/src/app/components/pages/tool-list/tool-list.component.html b/src/app/components/pages/tool-list/tool-list.component.html new file mode 100644 index 0000000..1725b09 --- /dev/null +++ b/src/app/components/pages/tool-list/tool-list.component.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/src/app/components/pages/tool-list/tool-list.component.scss b/src/app/components/pages/tool-list/tool-list.component.scss new file mode 100644 index 0000000..9a620e1 --- /dev/null +++ b/src/app/components/pages/tool-list/tool-list.component.scss @@ -0,0 +1,7 @@ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 2rem; +} \ No newline at end of file diff --git a/src/app/components/pages/tool-list/tool-list.component.spec.ts b/src/app/components/pages/tool-list/tool-list.component.spec.ts new file mode 100644 index 0000000..c61b856 --- /dev/null +++ b/src/app/components/pages/tool-list/tool-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolListComponent } from './tool-list.component'; + +describe('ToolListComponent', () => { + let component: ToolListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ToolListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ToolListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/pages/tool-list/tool-list.component.ts b/src/app/components/pages/tool-list/tool-list.component.ts new file mode 100644 index 0000000..9665956 --- /dev/null +++ b/src/app/components/pages/tool-list/tool-list.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { ToolComponent } from "../../partials/tool/tool.component"; +import { ToolListService } from '../../../shared/module/tool-list.module'; +import { Tool } from '../../../shared/model/tool.model'; +import { CommonModule } from '@angular/common'; +import { TitleComponent } from "../../partials/title/title.component"; + +@Component({ + selector: 'app-tool-list', + standalone: true, + imports: [ToolComponent, CommonModule, TitleComponent], + templateUrl: './tool-list.component.html', + styleUrl: './tool-list.component.scss' +}) +export class ToolListComponent implements OnInit { + tools!: Tool[]; + + constructor(private toolListService: ToolListService) {} + + ngOnInit() { + this.tools = this.toolListService.getAllTools() + } + +} diff --git a/src/app/components/partials/floating-message/floating-message.component.html b/src/app/components/partials/floating-message/floating-message.component.html new file mode 100644 index 0000000..7910d0e --- /dev/null +++ b/src/app/components/partials/floating-message/floating-message.component.html @@ -0,0 +1 @@ +

floating-message works!

diff --git a/src/app/components/partials/floating-message/floating-message.component.scss b/src/app/components/partials/floating-message/floating-message.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/partials/floating-message/floating-message.component.spec.ts b/src/app/components/partials/floating-message/floating-message.component.spec.ts new file mode 100644 index 0000000..f1ce4eb --- /dev/null +++ b/src/app/components/partials/floating-message/floating-message.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FloatingMessageComponent } from './floating-message.component'; + +describe('FloatingMessageComponent', () => { + let component: FloatingMessageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FloatingMessageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FloatingMessageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/partials/floating-message/floating-message.component.ts b/src/app/components/partials/floating-message/floating-message.component.ts new file mode 100644 index 0000000..f20f4f1 --- /dev/null +++ b/src/app/components/partials/floating-message/floating-message.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-floating-message', + standalone: true, + imports: [], + templateUrl: './floating-message.component.html', + styleUrl: './floating-message.component.scss' +}) +export class FloatingMessageComponent { + +} diff --git a/src/app/components/partials/title/title.component.html b/src/app/components/partials/title/title.component.html new file mode 100644 index 0000000..8be4ccb --- /dev/null +++ b/src/app/components/partials/title/title.component.html @@ -0,0 +1 @@ +

{{title}}

\ No newline at end of file diff --git a/src/app/components/partials/title/title.component.scss b/src/app/components/partials/title/title.component.scss new file mode 100644 index 0000000..4ff2f20 --- /dev/null +++ b/src/app/components/partials/title/title.component.scss @@ -0,0 +1,3 @@ +h1{ + padding: 2rem; +} \ No newline at end of file diff --git a/src/app/components/partials/title/title.component.spec.ts b/src/app/components/partials/title/title.component.spec.ts new file mode 100644 index 0000000..a4be199 --- /dev/null +++ b/src/app/components/partials/title/title.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TitleComponent } from './title.component'; + +describe('TitleComponent', () => { + let component: TitleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TitleComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TitleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/partials/title/title.component.ts b/src/app/components/partials/title/title.component.ts new file mode 100644 index 0000000..92b4f33 --- /dev/null +++ b/src/app/components/partials/title/title.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-title', + standalone: true, + imports: [], + templateUrl: './title.component.html', + styleUrl: './title.component.scss' +}) +export class TitleComponent { + @Input() title!: string; +} diff --git a/src/app/components/partials/tool/tool.component.html b/src/app/components/partials/tool/tool.component.html new file mode 100644 index 0000000..7ef6864 --- /dev/null +++ b/src/app/components/partials/tool/tool.component.html @@ -0,0 +1,5 @@ +
+ +
{{ userName }}
+
{{ password }}
+
\ No newline at end of file diff --git a/src/app/components/partials/tool/tool.component.scss b/src/app/components/partials/tool/tool.component.scss new file mode 100644 index 0000000..82d2935 --- /dev/null +++ b/src/app/components/partials/tool/tool.component.scss @@ -0,0 +1,17 @@ +.container { + display: flex; +} + +.container>div { + padding: 2rem 20rem 2rem 2rem; + border: 1px solid black; + opacity: 0.5; + text-wrap: nowrap; + max-width: 5rem; + font-size: 1.5rem; + transition: opacity 0.3s ease-in-out; + &:hover { + cursor: pointer; + opacity: 1; + } +} \ No newline at end of file diff --git a/src/app/components/partials/tool/tool.component.spec.ts b/src/app/components/partials/tool/tool.component.spec.ts new file mode 100644 index 0000000..ac6dd61 --- /dev/null +++ b/src/app/components/partials/tool/tool.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolComponent } from './tool.component'; + +describe('ToolComponent', () => { + let component: ToolComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ToolComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ToolComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/partials/tool/tool.component.ts b/src/app/components/partials/tool/tool.component.ts new file mode 100644 index 0000000..f9bae20 --- /dev/null +++ b/src/app/components/partials/tool/tool.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from '@angular/core'; +import { ClipboardModule } from 'ngx-clipboard'; + +@Component({ + selector: 'tool', + standalone: true, + imports: [ClipboardModule], + templateUrl: './tool.component.html', + styleUrl: './tool.component.scss' +}) +export class ToolComponent { + @Input() name!: string; + @Input() url!: string; + @Input() userName!: string; + @Input() password!: string; +} diff --git a/src/app/shared/model/tool.model.ts b/src/app/shared/model/tool.model.ts new file mode 100644 index 0000000..4ef8919 --- /dev/null +++ b/src/app/shared/model/tool.model.ts @@ -0,0 +1,6 @@ +export class Tool{ + name!: string; + url!: string; + userName!: string; + password!: string; +} \ No newline at end of file diff --git a/src/app/shared/module/tool-list.module.ts b/src/app/shared/module/tool-list.module.ts new file mode 100644 index 0000000..4f8e744 --- /dev/null +++ b/src/app/shared/module/tool-list.module.ts @@ -0,0 +1,14 @@ +import { Injectable } from "@angular/core"; +import { Tool } from "../model/tool.model"; +import { all_tools } from "../../urls"; + +@Injectable({ + providedIn: 'root' +}) + +export class ToolListService { + + getAllTools() { + return all_tools; + } +} \ No newline at end of file diff --git a/src/app/shared/scss/colors.scss b/src/app/shared/scss/colors.scss new file mode 100644 index 0000000..2b8f18e --- /dev/null +++ b/src/app/shared/scss/colors.scss @@ -0,0 +1 @@ +$bg-color: #FEEFAD; \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..f28e5f6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,12 @@ /* You can add global styles to this file, and also import other style files */ +@import "./app/shared/scss/colors.scss"; + +*{ + box-sizing: border-box; +} + +body { + margin: 0; + background: $bg-color; + font-size: 16px; +} \ No newline at end of file diff --git a/src/tool_list_maker.py b/src/tool_list_maker.py new file mode 100644 index 0000000..647a61c --- /dev/null +++ b/src/tool_list_maker.py @@ -0,0 +1,11 @@ +name = input("Enter Tool Name: ") +url = input("Enter URL: ") +user = input("Enter user: ") +password = input("Enter Password:") + +print(f''' + name: "{name}", + url: "{url}", + userName: "{user}", + password: "{password}" +''')