Merge pull request #4 from williamwbwse/yingde-SentiSight

Yingde senti sight

.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": {}
     }
   ]

src/app/pages/settings/imagesimilarity/imagesimilarity.component.html

@@ -7,4 +7,4 @@
     <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
     </ng2-smart-table>
   </nb-card-body>
-</nb-card>
+</nb-card>

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,16 @@
+<div *ngFor="let image of images" (click)="toggleSelection(image)" class="grid-item">
+
+  <div *ngFor="let labelscore of image.labelscore">
+
+    <div class="d-flex">
+      <ngx-checkbox></ngx-checkbox>
+      <div style="width: max-content;">{{labelscore.label}}</div>
+    </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;
+  }
+
+}