taskmanager v0.9.15

chinonso098 · Nov 1, 2023 · 747d592 · 747d592
1 parent a2bf6fd
commit 747d592
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 16 deletions.
diff --git a/src/app/system-apps/taskmanager/taskmanager.component.css b/src/app/system-apps/taskmanager/taskmanager.component.css
@@ -113,7 +113,6 @@
   border: 1px solid #ccc;   /* Cell border */
   border-top: none;
   vertical-align: middle;
-
 }
 
 .table th:first-child th:last-child{
@@ -318,7 +317,7 @@ img{
 
 
 .navigation {
-  /* border: 1px solid black;   */
+  /* border: 1px solid black;  */
   background-color: #ffffff;
   display:flex; 
   position:relative;

diff --git a/src/app/system-apps/taskmanager/taskmanager.component.html b/src/app/system-apps/taskmanager/taskmanager.component.html
@@ -52,25 +52,25 @@
         <div class='card'>
             <div class='card-body'>
               <div class='table-responsive'>
-                <table class='table' *ngIf = 'processes.length > 0' >
+                <table class='table' *ngIf = 'processes.length > 0' #tableId>
                   <thead>
                     <span style="height:10px; border-top: none;  "></span>
                     <tr>             
-                      <th [style]="thStyle" (click)="sortTable('Name', true)">
+                      <th [style]="thStyle" (click)="sortTable('Name', true)" >
                         <span style="margin-left:50%; height:50%">
                           <span *ngIf="isDescSorting('Name')">v</span>
                           <span *ngIf="isAscSorting('Name')">ᴧ</span>
                         </span>
                         <span style="padding-left:5px; height:50%; padding-top:5px; font-size:14px;">Name</span>
                       </th>
-                      <th>
+                      <th  (click)="toggleColumnVisibility('Status')">
                         <span style="margin-left:50%; height:50%">
                           <span *ngIf="isDescSorting('Status')">v</span>
                           <span *ngIf="isAscSorting('Status')">ᴧ</span>
                         </span>
                         <span style="padding-left:5px; height:50%; padding-top:5px; font-size:14px;">Status</span>
                       </th>
-                      <th (click)="sortTable('CPU', true)" #cpuId>
+                      <th (click)="sortTable('CPU', true)" (contextmenu)="toggleColumnVisibility('CPU')" #cpuId>
                         <span [style]="setUtilHeaderSpan2section1Colors(cpuUtil,'CPU')">
                           <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
                             <span *ngIf="isDescSorting('CPU')">v</span>
@@ -80,7 +80,7 @@
                         </span>
                         <span [style]="setUtilHeaderSpan3Colors(cpuUtil,'CPU')">CPU</span>
                       </th>
-                      <th (click)="sortTable('Memory', true)" #memoryId>
+                      <th (click)="sortTable('Memory', true)" (contextmenu)="toggleColumnVisibility('Memory')" #memoryId>
                         <span [style]="setUtilHeaderSpan2section1Colors(memUtil,'Memory')">
                           <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
                             <span *ngIf="isDescSorting('Memory')">v</span>
@@ -90,7 +90,7 @@
                         </span>
                         <span [style]="setUtilHeaderSpan3Colors(memUtil,'Memory')">Memory</span>
                       </th>
-                      <th (click)="sortTable('Disk', true)" #diskId>                             
+                      <th (click)="sortTable('Disk', true)" (contextmenu)="toggleColumnVisibility('Disk')" #diskId>                             
                         <span [style]="setUtilHeaderSpan2section1Colors(diskUtil,'Disk')">
                           <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
                             <span *ngIf="isDescSorting('Disk')">v</span>
@@ -101,7 +101,7 @@
                         </span>
                         <span [style]="setUtilHeaderSpan3Colors(diskUtil,'Disk')">Disk</span>
                       </th>
-                      <th (click)="sortTable('Network', true)" #networkId>                                                
+                      <th (click)="sortTable('Network', true)" (contextmenu)="toggleColumnVisibility('Network')" #networkId>                                                
                         <span [style]="setUtilHeaderSpan2section1Colors(networkUtil,'Network')">
                           <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
                             <span *ngIf="isDescSorting('Network')">v</span>
@@ -111,7 +111,7 @@
                         </span>
                         <span [style]="setUtilHeaderSpan3Colors(networkUtil,'Network')">Network</span>
                       </th>
-                      <th [style]="thStyle1" (click)="sortTable('PID', true)">               
+                      <th [style]="thStyle1" (click)="sortTable('PID', true)" (contextmenu)="toggleColumnVisibility('PID')">               
                         <span style="margin-left:50%; height:50%">
                           <span *ngIf="isDescSorting('PID')">v</span>
                           <span *ngIf="isAscSorting('PID')">ᴧ</span>

diff --git a/src/app/system-apps/taskmanager/taskmanager.component.ts b/src/app/system-apps/taskmanager/taskmanager.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit,OnDestroy, AfterViewInit} from '@angular/core';
-import { Subject, Subscription, interval, switchMap, timer } from 'rxjs';
+import { Component, OnInit,OnDestroy, AfterViewInit, ViewChild, ElementRef, Renderer2} from '@angular/core';
+import { Subject, Subscription, interval, switchMap } from 'rxjs';
 import { ProcessIDService } from 'src/app/shared/system-service/process.id.service';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { BaseComponent } from 'src/app/system-base/base/base.component';
@@ -8,7 +8,7 @@ import { Process } from 'src/app/system-files/process';
 import { SortingInterface } from './sorting.interface';
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
 import { FileInfo } from 'src/app/system-files/fileinfo';
-import { RefreshRates, RefreshRatesIntervals } from './refresh.rates';
+import { RefreshRates, RefreshRatesIntervals, TableColumns } from './taskmanager.enum';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 
 @Component({
@@ -24,10 +24,13 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
   // @ViewChild('diskId',{ static: true }) diskId!: ElementRef;
   // @ViewChild('networkId',{ static: true }) networkId!: ElementRef;
 
+  @ViewChild('tableId') tableId!: ElementRef;
+
   private _processIdService:ProcessIDService;
   private _runningProcessService:RunningProcessService;
   private _stateManagmentService: StateManagmentService;
   private _triggerProcessService:TriggerProcessService;
+  private _renderer: Renderer2;
 
   private _processListChangeSub!: Subscription;
   private _taskmgrRefreshIntervalSub!: Subscription;
@@ -44,6 +47,13 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
   private processNumberToSuspend = 0;
   private refreshRateInterval = 0;
   private processIdToClose = 0;
+
+  private statusColumnVisible = true;
+  private cpuColumnVisible = true;
+  private memoryColumnVisible = true;
+  private diskColumnVisible = true;
+  private networkColumnVisible = true;
+  private pidColumnVisible = true;
 
   hasWindow = true;
   icon = 'osdrive/icons/taskmanger.png';
@@ -68,11 +78,14 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
   diskUtil = 0;
   networkUtil = 0;
 
-  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService,stateManagmentService: StateManagmentService,triggerProcessService:TriggerProcessService) { 
+
+  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService,
+     stateManagmentService: StateManagmentService,triggerProcessService:TriggerProcessService, renderer: Renderer2) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this._stateManagmentService = stateManagmentService;
     this._triggerProcessService = triggerProcessService;
+    this._renderer = renderer;
 
     this.processId = this._processIdService.getNewProcessId()
     this._runningProcessService.addProcess(this.getComponentDetail());
@@ -82,8 +95,7 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
     this._chnageTaskmgrRefreshIntervalSub = new Subject<number>();
 
     this.refreshRateInterval = RefreshRatesIntervals.NOMRAL;
-    this.selectedRefreshRate = RefreshRates.NORMAL;
-
+    this.selectedRefreshRate = RefreshRates.NORMAL;     
   }
 
 
@@ -103,6 +115,8 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
   }
 
   ngAfterViewInit(): void {
+    //this.name = this.name + "--beta---v0.9.14.2";
+
     //Initial delay 1 seconds and interval countdown also 2 second
     this._taskmgrRefreshIntervalSub = interval(this.refreshRateInterval).subscribe(() => {
       this.generateLies();
@@ -356,6 +370,50 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
    console.log('processIdToClose',this.processIdToClose);
   }
 
+
+  toggleColumnVisibility(column: string) {
+    if (column === TableColumns.STATUS) {
+      this.statusColumnVisible = !this.statusColumnVisible;
+    }else if (column === TableColumns.CPU) {
+      this.cpuColumnVisible = !this.cpuColumnVisible;
+    }else if (column === TableColumns.MEMORY) {
+      this.memoryColumnVisible = !this.memoryColumnVisible;
+    } else if (column === TableColumns.DISK) {
+      this.diskColumnVisible = !this.diskColumnVisible;
+    }else if (column === TableColumns.NETWORK) {
+      this.networkColumnVisible = !this.networkColumnVisible;
+    }else if (column === TableColumns.PID) {
+      this.pidColumnVisible = !this.pidColumnVisible;
+    }
+    // Apply styles to hide/show the column
+    this.applyColumnStyles(column);
+  }
+
+  applyColumnStyles(column: string) {
+    const table = this.tableId.nativeElement;
+    const tableColumns: string[] = ['Name','Status','CPU','Memory','Disk','Network','PID'];
+    const colNum = tableColumns.indexOf(column);
+
+    for( let i = 0; i <= this.processes.length; i++){
+      if(column === TableColumns.STATUS){
+        console.log('hide status')
+        this.statusColumnVisible
+        ? this._renderer.removeStyle(table.rows[i].cells[colNum], 'display')
+        : this._renderer.setStyle(table.rows[i].cells[colNum], 'display', 'none');
+      }
+
+    }
+
+
+
+    // this.col2Visible
+    //   ? this.renderer.removeStyle(table.rows[0].cells[1], 'display')
+    //   : this.renderer.setStyle(table.rows[0].cells[1], 'display', 'none');
+    // this.col3Visible
+    //   ? this.renderer.removeStyle(table.rows[0].cells[2], 'display')
+    //   : this.renderer.setStyle(table.rows[0].cells[2], 'display', 'none');
+  }
+
   activeFocus(){
     return{ 
       'active': this.isActive ? 'active' : '',

diff --git a/.../system-apps/taskmanager/refresh.rates.ts → ...stem-apps/taskmanager/taskmanager.enum.ts b/.../system-apps/taskmanager/refresh.rates.ts → ...stem-apps/taskmanager/taskmanager.enum.ts
@@ -10,4 +10,14 @@ export enum RefreshRatesIntervals {
     NOMRAL = 2000,  //2 seconds
     LOW = 4000,  //...
     PAUSED = 36000000, //24hrs
+ }
+
+ export enum TableColumns { 
+    NAME = 'Name',
+    STATUS = 'Status',
+    CPU = 'CPU',
+    MEMORY = 'Memory',
+    DISK = 'Disk',
+    NETWORK = 'Network',
+    PID = 'PID'
  }