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": {} } ] 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..694c8726 --- /dev/null +++ b/src/app/pages/shares/label-score/label-score.component.html @@ -0,0 +1,16 @@ +
+ +
+ +
+ +
{{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; + } + +}