From bdb1f48b5ccf56fe54ecde877cafd31e1eb74173 Mon Sep 17 00:00:00 2001 From: Liew Ying De Date: Tue, 14 Feb 2023 09:30:24 +0800 Subject: [PATCH 1/3] Add label-score & hover-enlarge-image --- .../imagesimilarity.component.html | 2 +- .../imagesimilarity.component.ts | 38 +++++++++++---- .../pages/settings/settings-routing.module.ts | 12 ++++- .../shares/checkbox/checkbox.component.html | 1 + .../shares/checkbox/checkbox.component.scss | 0 .../checkbox/checkbox.component.spec.ts | 28 +++++++++++ .../shares/checkbox/checkbox.component.ts | 15 ++++++ .../hover-enlarge-image.component.html | 7 +++ .../hover-enlarge-image.component.scss | 30 ++++++++++++ .../hover-enlarge-image.component.spec.ts | 28 +++++++++++ .../hover-enlarge-image.component.ts | 17 +++++++ .../label-score/label-score.component.html | 12 +++++ .../label-score/label-score.component.scss | 46 +++++++++++++++++++ .../label-score/label-score.component.spec.ts | 28 +++++++++++ .../label-score/label-score.component.ts | 41 +++++++++++++++++ 15 files changed, 294 insertions(+), 11 deletions(-) create mode 100644 src/app/pages/shares/checkbox/checkbox.component.html create mode 100644 src/app/pages/shares/checkbox/checkbox.component.scss create mode 100644 src/app/pages/shares/checkbox/checkbox.component.spec.ts create mode 100644 src/app/pages/shares/checkbox/checkbox.component.ts create mode 100644 src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.html create mode 100644 src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.scss create mode 100644 src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.spec.ts create mode 100644 src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.ts create mode 100644 src/app/pages/shares/label-score/label-score.component.html create mode 100644 src/app/pages/shares/label-score/label-score.component.scss create mode 100644 src/app/pages/shares/label-score/label-score.component.spec.ts create mode 100644 src/app/pages/shares/label-score/label-score.component.ts diff --git a/src/app/pages/settings/imagesimilarity/imagesimilarity.component.html b/src/app/pages/settings/imagesimilarity/imagesimilarity.component.html index 4aedba54..8c0bebab 100644 --- a/src/app/pages/settings/imagesimilarity/imagesimilarity.component.html +++ b/src/app/pages/settings/imagesimilarity/imagesimilarity.component.html @@ -7,4 +7,4 @@ - + \ No newline at end of file diff --git a/src/app/pages/settings/imagesimilarity/imagesimilarity.component.ts b/src/app/pages/settings/imagesimilarity/imagesimilarity.component.ts index af2637cb..d969e500 100644 --- a/src/app/pages/settings/imagesimilarity/imagesimilarity.component.ts +++ b/src/app/pages/settings/imagesimilarity/imagesimilarity.component.ts @@ -2,6 +2,9 @@ import { Component } from '@angular/core'; import { ServerDataSource } from 'ng2-smart-table'; import { HttpClient } from '@angular/common/http'; import { SmartTableData } from '../../../@core/data/smart-table'; +import { HoverEnlargeImageComponent } from '../../shares/hover-enlarge-image/hover-enlarge-image.component'; +import { LabelScoreComponent } from '../../shares/label-score/label-score.component'; +import { CheckboxComponent } from '../../shares/checkbox/checkbox.component'; @Component({ selector: 'ngx-smart-table', @@ -13,9 +16,9 @@ export class ImageSimilarityComponent { settings = { mode: 'external', actions: { - delete: true, - add: false, - position: 'right' + delete: true, + add: false, + position: 'right' }, // selectMode: 'multi', // add: { @@ -33,6 +36,13 @@ export class ImageSimilarityComponent { confirmDelete: true, }, columns: { + selected: { + title: '', + // type: 'checkbox', + type: 'custom', + width: '16px', + renderComponent: CheckboxComponent + }, no: { title: 'No', type: 'number', @@ -41,18 +51,28 @@ export class ImageSimilarityComponent { title: 'Label', type: 'string', }, + // predicted: { + // title: 'Predicted Score', + // type: 'number', + // }, predicted: { title: 'Predicted Score', - type: 'number', + type: 'custom', + renderComponent: LabelScoreComponent }, picture: { title: 'Picture', - type: 'html', + // type: 'html', height: '100px', - valuePrepareFunction: (images) => { - return `` - } - } + // valuePrepareFunction: (images) => { + // return ``; + + // // return `` + // } + type: 'custom', + renderComponent: HoverEnlargeImageComponent + }, + }, }; diff --git a/src/app/pages/settings/settings-routing.module.ts b/src/app/pages/settings/settings-routing.module.ts index 0291a0e5..3de23272 100644 --- a/src/app/pages/settings/settings-routing.module.ts +++ b/src/app/pages/settings/settings-routing.module.ts @@ -4,6 +4,11 @@ import { Routes, RouterModule } from '@angular/router'; import { SettingsComponent } from './settings.component'; import { KeywordsDictionaryComponent } from './keywordsdictionary/keywordsdictionary.component'; import { ImageSimilarityComponent } from './imagesimilarity/imagesimilarity.component'; +import { HoverEnlargeImageComponent } from '../shares/hover-enlarge-image/hover-enlarge-image.component'; +import { CommonModule } from '@angular/common'; +import { LabelScoreComponent } from '../shares/label-score/label-score.component'; +import { CheckboxComponent } from '../shares/checkbox/checkbox.component'; +import { FormsModule } from '@angular/forms'; const routes: Routes = [{ path: '', @@ -21,7 +26,12 @@ const routes: Routes = [{ }]; @NgModule({ - imports: [RouterModule.forChild(routes)], + declarations: [ + HoverEnlargeImageComponent, + LabelScoreComponent, + CheckboxComponent + ], + imports: [RouterModule.forChild(routes), CommonModule, FormsModule], exports: [RouterModule], }) export class SettingsRoutingModule { } diff --git a/src/app/pages/shares/checkbox/checkbox.component.html b/src/app/pages/shares/checkbox/checkbox.component.html new file mode 100644 index 00000000..68ea8927 --- /dev/null +++ b/src/app/pages/shares/checkbox/checkbox.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/shares/checkbox/checkbox.component.scss b/src/app/pages/shares/checkbox/checkbox.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/shares/checkbox/checkbox.component.spec.ts b/src/app/pages/shares/checkbox/checkbox.component.spec.ts new file mode 100644 index 00000000..35d9157c --- /dev/null +++ b/src/app/pages/shares/checkbox/checkbox.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { CheckboxComponent } from './checkbox.component'; + +describe('CheckboxComponent', () => { + let component: CheckboxComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CheckboxComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CheckboxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/shares/checkbox/checkbox.component.ts b/src/app/pages/shares/checkbox/checkbox.component.ts new file mode 100644 index 00000000..884bfe88 --- /dev/null +++ b/src/app/pages/shares/checkbox/checkbox.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.scss'] +}) +export class CheckboxComponent implements OnInit { + isChecked = false; + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.html b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.html new file mode 100644 index 00000000..8791bf45 --- /dev/null +++ b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.html @@ -0,0 +1,7 @@ +
+ + +
+ +
+
\ No newline at end of file diff --git a/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.scss b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.scss new file mode 100644 index 00000000..0d645bc1 --- /dev/null +++ b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.scss @@ -0,0 +1,30 @@ +div { + position: relative; + display: inline-block; +} + +.overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.5); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.5s; + width: 300px; + height: 300px; + z-index: 1; +} + +.show { + opacity: 1; +} + +img { + max-width: 100%; + max-height: 100%; +} diff --git a/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.spec.ts b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.spec.ts new file mode 100644 index 00000000..44eedf65 --- /dev/null +++ b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { HoverEnlargeImageComponent } from './hover-enlarge-image.component'; + +describe('HoverEnlargeImageComponent', () => { + let component: HoverEnlargeImageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HoverEnlargeImageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HoverEnlargeImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.ts b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.ts new file mode 100644 index 00000000..e6534e8a --- /dev/null +++ b/src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-hover-enlarge-image', + templateUrl: './hover-enlarge-image.component.html', + styleUrls: ['./hover-enlarge-image.component.scss'] +}) +export class HoverEnlargeImageComponent implements OnInit { + + showOverlay = false; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/shares/label-score/label-score.component.html b/src/app/pages/shares/label-score/label-score.component.html new file mode 100644 index 00000000..8f0637c9 --- /dev/null +++ b/src/app/pages/shares/label-score/label-score.component.html @@ -0,0 +1,12 @@ +
+ +
+
{{labelscore.label}}
+
+
+
{{labelscore.score}}%
+
+
+ +
\ No newline at end of file diff --git a/src/app/pages/shares/label-score/label-score.component.scss b/src/app/pages/shares/label-score/label-score.component.scss new file mode 100644 index 00000000..80193348 --- /dev/null +++ b/src/app/pages/shares/label-score/label-score.component.scss @@ -0,0 +1,46 @@ +.progress-container { + width: 100%; + height: 20px; + background-color: #ddd; + border-radius: 10px; + // overflow: hidden; + + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} + +.progress-bar { + height: 100%; + background-color: lightblue; +} + +.progress-percentage { + position: absolute; + right: 10px; + font-size: 16px; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} + +.grid-item { + background-color: #ddd; + height: 150px; + display: block; + align-items: center; + justify-content: center; +} + +.selected { + background-color: blue; +} + +.grid-item img { + max-width: 100%; + max-height: 100%; +} diff --git a/src/app/pages/shares/label-score/label-score.component.spec.ts b/src/app/pages/shares/label-score/label-score.component.spec.ts new file mode 100644 index 00000000..44c3a566 --- /dev/null +++ b/src/app/pages/shares/label-score/label-score.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { LabelScoreComponent } from './label-score.component'; + +describe('LabelScoreComponent', () => { + let component: LabelScoreComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LabelScoreComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LabelScoreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/shares/label-score/label-score.component.ts b/src/app/pages/shares/label-score/label-score.component.ts new file mode 100644 index 00000000..882bf304 --- /dev/null +++ b/src/app/pages/shares/label-score/label-score.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-label-score', + templateUrl: './label-score.component.html', + styleUrls: ['./label-score.component.scss'] +}) +export class LabelScoreComponent implements OnInit { + + + selectedImage!: number; + showOverlay = false; + + constructor() { } + + ngOnInit() { + } + + images = [ + { id: 1, url: 'https://via.placeholder.com/150x150', selected: false, labelscore: [{ "label": "live-casino", "score": 99.6 }, { "label": "baccarat", "score": 96.8 }, { "label": "roulette", "score": 94.2 }, { "label": "dragon-tiger", "score": 80.5 }, { "label": "sicbo", "score": 22.2 }, { "label": "slot", "score": 12.3 }] }, + // { id: 2, url: 'https://via.placeholder.com/150x150', selected: false, labelscore: [{ "label": "live-casino", "score": 99.6 }, { "label": "baccarat", "score": 96.8 }, { "label": "roulette", "score": 94.2 }, { "label": "dragon-tiger", "score": 80.5 }, { "label": "sicbo", "score": 22.2 }, { "label": "slot", "score": 12.3 }] }, + // { id: 3, url: 'https://via.placeholder.com/150x150', selected: false, labelscore: [{ "label": "live-casino", "score": 99.6 }, { "label": "baccarat", "score": 96.8 }, { "label": "roulette", "score": 94.2 }, { "label": "dragon-tiger", "score": 80.5 }, { "label": "sicbo", "score": 22.2 }, { "label": "slot", "score": 12.3 }] }, + ]; + + + + + toggleImageSelection(mImage: any) { + // console.log(mImage) + // this.images.forEach(image => { + // if (image.id === mImage.imageId) { + // image.selected = !image.selected; + // } + // }); + } + + toggleSelection(image: any) { + image.selected = !image.selected; + } + +} From d0c69865040166290066354c496bf5a65d28a017 Mon Sep 17 00:00:00 2001 From: Liew Ying De Date: Tue, 14 Feb 2023 09:41:57 +0800 Subject: [PATCH 2/3] asd --- .eslintrc.json | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 06271d3c..e6500c89 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,18 +1,11 @@ { "root": true, - "ignorePatterns": [ - "projects/**/*" - ], + "ignorePatterns": ["projects/**/*"], "overrides": [ { - "files": [ - "*.ts" - ], + "files": ["*.ts"], "parserOptions": { - "project": [ - "tsconfig.json", - "e2e/tsconfig.json" - ], + "project": ["tsconfig.json", "e2e/tsconfig.json"], "createDefaultProgram": true }, "extends": [ @@ -34,6 +27,7 @@ "type": "element" } ], + "@angular-eslint/no-empty-lifecycle-method": "off", "@angular-eslint/directive-selector": [ "error", { @@ -45,12 +39,8 @@ } }, { - "files": [ - "*.html" - ], - "extends": [ - "plugin:@angular-eslint/template/recommended" - ], + "files": ["*.html"], + "extends": ["plugin:@angular-eslint/template/recommended"], "rules": {} } ] From 514b5b121d240efc7d319ca869a2e3be0e8f4ea0 Mon Sep 17 00:00:00 2001 From: Liew Ying De Date: Tue, 14 Feb 2023 10:27:12 +0800 Subject: [PATCH 3/3] added checkbox beside scoring label --- .../shares/label-score/label-score.component.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/pages/shares/label-score/label-score.component.html b/src/app/pages/shares/label-score/label-score.component.html index 8f0637c9..694c8726 100644 --- a/src/app/pages/shares/label-score/label-score.component.html +++ b/src/app/pages/shares/label-score/label-score.component.html @@ -1,8 +1,12 @@ -
+
-
{{labelscore.label}}
+ +
+ +
{{labelscore.label}}
+
+
{{labelscore.score}}%