Add label-score & hover-enlarge-image

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 { }

src/app/pages/shares/checkbox/checkbox.component.html

@@ -0,0 +1 @@
+<input type="checkbox" [(ngModel)]="isChecked">

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<CheckboxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CheckboxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/pages/shares/hover-enlarge-image/hover-enlarge-image.component.html

@@ -0,0 +1,7 @@
+<div (mouseenter)="showOverlay = true" (mouseleave)="showOverlay = false">
+  <img src="https://via.placeholder.com/150x150">
+
+  <div [ngClass]="{'overlay': true, 'show': showOverlay }">
+    <img src="https://via.placeholder.com/300x300">
+  </div>
+</div>

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%;
+}

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<HoverEnlargeImageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HoverEnlargeImageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HoverEnlargeImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/pages/shares/label-score/label-score.component.html

@@ -0,0 +1,12 @@
+<div *ngFor="let image of images" (click)="toggleSelection(image)" [ngClass]="{'selected': image.selected}"
+  class="grid-item">
+
+  <div *ngFor="let labelscore of image.labelscore">
+    <div style="width: max-content;">{{labelscore.label}}</div>
+    <div class="progress-container">
+      <div class="progress-bar" [ngStyle]="{'width': labelscore.score + '%'}"></div>
+      <div class="progress-percentage">{{labelscore.score}}%</div>
+    </div>
+  </div>
+
+</div>

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%;
+}

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<LabelScoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LabelScoreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LabelScoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+  }
+
+}