Add filter and tags

ThingPulse · Jun 20, 2024 · 136d4b1 · 136d4b1
1 parent fcec211
commit 136d4b1
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 6 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,6  11,7 @@ import { AppsComponent } from './apps/apps.component';
 import { CacheInterceptor } from './services/cache.interceptor';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FlasherComponent } from './flasher/flasher.component';
 import { FullTextFilterPipe } from './services/full-text-filter.pipe';
 
 const routes: Routes = [
   { path: '', component: DevicesComponent },
@@ -25,7  26,8 @@ const routes: Routes = [
     AppComponent,
     DevicesComponent,
     AppsComponent,
-    FlasherComponent
     FlasherComponent,
     FullTextFilterPipe
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/apps/apps.component.html b/src/app/apps/apps.component.html
@@ -23,13  23,21 @@
 
 
 <h1>Applications</h1>
-<mat-card *ngFor="let app of apps">
 <mat-form-field class="example-form-field">
   <mat-label>Search Applications</mat-label>
   <input matInput type="text" [(ngModel)]="searchText">
 </mat-form-field>
 
 <mat-card *ngFor="let app of apps | fullTextFilter: searchText">
   <mat-card-header>
     <img mat-card-avatar [src]="app.appIcon" alt="Device"/>
     <mat-card-title>{{app.name}}</mat-card-title>
     <mat-card-subtitle>{{app?.version}}</mat-card-subtitle>
   </mat-card-header>
   <mat-card-content>
     <p>
       <mat-chip *ngFor="let tag of app?.tags">{{tag}}</mat-chip>
     </p>
     <p>
       {{app?.description}}
     </p>

diff --git a/src/app/apps/apps.component.ts b/src/app/apps/apps.component.ts
@@ -15,6  15,7 @@ export class AppsComponent implements OnInit{
   deviceId: string;
   device: Device | undefined;
   apps: App[];
   searchText: string;
 
   constructor(private route: ActivatedRoute, 
               public deviceService: DevicesService,

diff --git a/src/app/devices/devices.component.html b/src/app/devices/devices.component.html
@@ -1,11  1,23 @@
 <h1>Devices</h1>
-<mat-card *ngFor="let device of devices">
 <mat-form-field class="example-form-field">
   <mat-label>Search Devices</mat-label>
   <input matInput type="text" [(ngModel)]="searchText">
 </mat-form-field>
 
 <mat-card *ngFor="let device of devices | fullTextFilter: searchText">
     <mat-card-header>
       <img mat-card-avatar [src]="device.imageThumbnail"  alt="Device"/>
       <mat-card-title>{{device.name}}</mat-card-title>
       <mat-card-subtitle>{{device.manufacturer}}</mat-card-subtitle>
 
     </mat-card-header>
     <mat-card-header>
       <mat-card-title-group>
         <img mat-card-sm-image [src]="device?.image"  alt="Device"/>
         <mat-card-title>{{device?.name}}</mat-card-title>
         <mat-card-subtitle>{{device?.manufacturer}}</mat-card-subtitle>
       </mat-card-title-group>
     </mat-card-header>
 
     <mat-card-content>
       <p>

diff --git a/src/app/devices/devices.component.ts b/src/app/devices/devices.component.ts
@@ -9,6  9,7 @@ import { Device } from '../models/device';
 })
 export class DevicesComponent implements OnInit {
 
   searchText: string = '';
   devices: Device[] = [];
 
   constructor(public deviceService: DevicesService) { }

diff --git a/src/app/flasher/flasher.component.css b/src/app/flasher/flasher.component.css
@@ -13,7  13,12 @@
     justify-content: space-between;
   }
 
-  .mdc-card {
 .mdc-card {
     margin-bottom: 10px;
 }
 
 mat-chip {
   padding: 0px 0px !important;
   margin: 0px 2px !important;
   font-size:smaller;
 }
diff --git a/src/app/flasher/flasher.component.html b/src/app/flasher/flasher.component.html
@@ -9,6  9,9 @@
       <mat-card-subtitle>{{app?.version}}</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
         <p>
           <mat-chip *ngFor="let tag of app?.tags">{{tag}}</mat-chip>
         </p>
         <p>
           {{app?.description}}
         </p>

diff --git a/src/app/models/app.ts b/src/app/models/app.ts
@@ -10,4  10,5 @@ export interface App {
     instructions: string;
     supportedDevices: string[];
     partitions: Partition[];
     tags: string[];
 }
diff --git a/src/app/services/full-text-filter.pipe.ts b/src/app/services/full-text-filter.pipe.ts
@@ -0,0  1,25 @@
 // full-text-filter.pipe.ts
 
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'fullTextFilter'
 })
 export class FullTextFilterPipe implements PipeTransform {
   transform(items: any[], searchText: string): any[] {
     if (!items) {
       return [];
     }
     if (!searchText) {
       return items;
     }
     searchText = searchText.toLowerCase();
 
     return items.filter(item => {
       // Check if the searchText exists in any attribute of the item
       return Object.values(item).some(value =>
         value && value.toString().toLowerCase().includes(searchText)
       );
     });
   }
 }
diff --git a/src/assets/apps.json b/src/assets/apps.json
@@ -14,7  14,8 @@
             "data": [],
             "offset": 0,
             "url": "./assets/apps/super-wifi-duck/app-firmware.bin"
-        }]
         }],
         "tags": ["badusb", "keystroke-injection", "wifi-duck", "hid", "usb-rubber-ducky", "keyboard", "mouse"]
     },
     {
         "id": "tp-pendrive-s3-circuit-python",
@@ -32,7  33,8 @@
             "data": [],
             "offset": 0,
             "url": "./assets/apps/circuitpython/circuit-python-bootloader.bin"
-        }]
         }],
         "tags": ["circuit-python", "adafruit", "microcontroller", "embedded"]
     },
     {
         "id": "other-device",