diff --git a/src/app/system-apps/desktop/vanta-object/wave.ts b/src/app/system-apps/desktop/vanta-object/wave.ts deleted file mode 100644 index fdaf2560..00000000 --- a/src/app/system-apps/desktop/vanta-object/wave.ts +++ /dev/null @@ -1,13 +0,0 @@ - - -// export interface WAVES { -// el?: string; -// color: number; -// waveHeight: number; -// shininess: number; -// waveSpeed: number; -// zoom: number; -// mouseControls: boolean; -// touchControls: boolean; -// } - diff --git a/src/app/system-apps/taskmanager/taskmanager.component.css b/src/app/system-apps/taskmanager/taskmanager.component.css index 0e08dbb0..be32cf37 100644 --- a/src/app/system-apps/taskmanager/taskmanager.component.css +++ b/src/app/system-apps/taskmanager/taskmanager.component.css @@ -1,18 +1,19 @@ /* Custom styles for the card */ .card { - min-width: 50px; /* Set the width of the card */ - min-height: 50px; /* Set the height of the card */ + min-width: 150px; /* Set the width of the card */ + min-height: 150px; /* Set the height of the card */ border: 1px solid #ccc; /* Add a border to the card */ border-radius: 1px; /* Add rounded corners to the card */ overflow-x:auto; + overflow: scroll; } /* Custom styles for the card-body */ .card-body { - padding: 10px; /* Add padding inside the card body */ + padding: 0; /* Add padding inside the card body */ background-color: #f0f0f0; /* Set the background color */ - color: #333; /* Set the text color */ + color: #000; /* Set the text color */ border-top: 1px solid #ddd; /* Add a top border to separate from the card header */ } @@ -29,8 +30,10 @@ /* Custom styles for rows */ - .custom-row { - margin: 10px 0; /* Add margin above and below the row */ + .row { + margin: 10px 0px; /* Add margin above and below the row */ + min-height: 10px; + min-width: 10px; } /* Custom styles for columns */ @@ -39,7 +42,7 @@ background-color: #f0f0f0; /* Set a background color for columns */ border: 1px solid #cccccc; /* Add a border to columns */ border-radius: 1px; /* Add rounded corners to columns */ - color: #333; /* Set text color for columns */ + color: #000; /* Set text color for columns */ } /* Additional styles for links inside columns (optional) */ @@ -59,8 +62,8 @@ background-color: #f0f0f0; /* Set a background color for col-md-2 */ padding: 10px; /* Add padding inside col-md-2 */ border: 1px solid #ccc; /* Add a border to col-md-2 */ - border-radius: 1px; /* Add rounded corners to col-md-2 */ - color: #333; /* Set text color for col-md-2 */ + border-radius: 0; /* Add rounded corners to col-md-2 */ + color: #000; /* Set text color for col-md-2 */ min-width: 25px; /* max-width: 100px; */ } @@ -70,8 +73,8 @@ background-color: #f0f0f0; /* Set a background color for col-md-4 */ padding: 10px; /* Add padding inside col-md-4 */ border: 1px solid #ccc; /* Add a border to col-md-4 */ - border-radius: 1px; /* Add rounded corners to col-md-4 */ - color: #333; /* Set text color for col-md-4 */ + border-radius: 0; /* Add rounded corners to col-md-4 */ + color: #000; /* Set text color for col-md-4 */ min-width: 25px; /* max-width: 200px; */ } @@ -81,8 +84,8 @@ background-color: #f0f0f0; /* Set a background color for col-md-6 */ padding: 10px; /* Add padding inside col-md-6 */ border: 1px solid #ccc; /* Add a border to col-md-6 */ - border-radius: 1px; /* Add rounded corners to col-md-6 */ - color: #333; /* Set text color for col-md-6 */ + border-radius: 0; /* Add rounded corners to col-md-6 */ + color: #000; /* Set text color for col-md-6 */ min-width: 25px; /* max-width: 300px; */ } @@ -91,7 +94,7 @@ .table { border-collapse: collapse; /* Remove spacing between table cells */ min-width: 25%; /* Set the table width to 100% of its container */ - margin: 10px 0; /* Add margin above and below the table */ + margin: 1px 0; /* Add margin above and below the table */ font-family: Arial, sans-serif; /* Set the font family for the table */ table-layout: auto; width: 100%; @@ -99,14 +102,16 @@ /* Custom styles for table headers */ .table th { - background-color: #fff; /* Header background color */ + background-color: #f0f0f0; /* Header background color */ color: #007BFF; /* Header text color */ - padding: 1px; /* Header cell padding */ + padding: 0; /* Header cell padding */ text-align: left; /* Header text alignment */ font-weight:lighter; /* Header text bold */ - font-size: 15px; + font-size: 13px; + height: 40px; + border: 2px solid #ccc; /* Cell border */ + border-top: none; - border: 1px solid #fff; /* Header cell border */ } /* Custom styles for table rows */ @@ -124,7 +129,9 @@ .table td { padding: 5px; /* Cell padding */ font-weight:lighter; - font-size: 15px; + margin-left: 5px; + margin-right: 5px; + font-size: 13px; text-align: left; /* Header text alignment */ border: 1px solid #ccc; /* Cell border */ border-top:none; border-bottom:none; @@ -138,6 +145,7 @@ /* Custom styles for .table-responsive (Optional) */ .table-responsive { max-width: 100%; /* Set a maximum width for the responsive container */ + min-width: 400px; overflow: auto; /* Enable horizontal scrolling when needed */ } @@ -161,4 +169,51 @@ img{ image-rendering:optimizeQuality; position: relative; margin: 0 4px 0 0; -} \ No newline at end of file +} + + +/* Styles for the tabbed window container */ +.tabbed-window { + min-width: 100px; /* Adjust the width as needed */ + border: 1px solid #ccc; + /* border-radius: 5px; + overflow: hidden; */ + } + + /* Styles for the tab navigation */ + .tabs { + display: flex; + background-color: #f2f2f2; + border-bottom: 1px solid #ccc; + } + + .tab { + flex: 1; + padding: 5px 10px; + text-align: center; + cursor: pointer; + transition: background-color 0.3s; + font-weight: lighter; + font-size: 13px; + max-width: fit-content; + max-height: fit-content; + } + + .tab.active { + background-color: #ccc; + color: #000; + } + + /* Styles for tab content */ + .tab-content { + padding: 0; + } + + .tab-pane { + display: none; + } + + .tab-pane.active { + display: block; + } + \ No newline at end of file diff --git a/src/app/system-apps/taskmanager/taskmanager.component.html b/src/app/system-apps/taskmanager/taskmanager.component.html index 0a8db948..772f1b61 100644 --- a/src/app/system-apps/taskmanager/taskmanager.component.html +++ b/src/app/system-apps/taskmanager/taskmanager.component.html @@ -1,35 +1,57 @@ -
-
-
- - - - - - - - - - - - - - - - -
- {{ column }} - ▼ - ▲ -
-
- -
{{ process.getProcessName}}
-
- 		{{ process.getType}}{{ process.getProcessId}}{{ process.getHasWindow}}{{ process.getCpuUsage}}%{{ process.getMemoryUsage}}MB
+ +
+
+
Processes
+
Performance
+
App history
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + +
+ {{ column }} + ▼ + ▲ +
+
+ +
{{ process.getProcessName}}
+
+ 		{{ process.getStatus}}{{ process.getCpuUsage}}%{{ process.getMemoryUsage}} MB{{ process.getDiskUsage}} MB/s{{ process.getNetworkUsage}} Mbps{{ process.getProcessId}}
+
+
+
+
+
+ +

Somethings is coming

+
+
+ +

Somethings is coming

-
+
+ \ No newline at end of file diff --git a/src/app/system-apps/taskmanager/taskmanager.component.ts b/src/app/system-apps/taskmanager/taskmanager.component.ts index 500e4db1..c67480b6 100644 --- 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 } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Component, OnInit,OnDestroy, AfterViewInit } from '@angular/core'; +import { Subscription, timer } 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'; @@ -13,14 +13,15 @@ import { UserInterface } from './user.interface'; templateUrl: './taskmanager.component.html', styleUrls: ['./taskmanager.component.css'] }) -export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy { +export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,AfterViewInit { private _processIdService:ProcessIDService; private _runningProcessService:RunningProcessService; private _processListChangeSub!: Subscription; + private _taskmgrTimerSubscription!: Subscription; processes:Process[] =[]; - columns: Array = ['name','type','process_id','has_window','cpu','memory']; + columns: Array = ['Name','Status','CPU','Memory','Disk','Network','PID']; hasWindow = true; icon = 'osdrive/icons/taskmanger.png'; @@ -38,8 +39,6 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy { this._runningProcessService = runningProcessService; this.processId = this._processIdService.getNewProcessId() this._runningProcessService.addProcess(this.getComponentDetail()); - - this._processListChangeSub = this._runningProcessService.processListChangeNotify.subscribe(() =>{this.updateRunningProcess();}) } @@ -48,9 +47,17 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy { this.processes = this._runningProcessService.getProcesses(); } - ngOnDestroy(): void { - this._processListChangeSub?.unsubscribe(); - } + ngOnDestroy(): void { + this._processListChangeSub?.unsubscribe(); + this._taskmgrTimerSubscription?.unsubscribe() + } + + ngAfterViewInit(): void { + //Initial delay 1 seconds and interval countdown also 2 second + this._taskmgrTimerSubscription = timer(1000, 2000) .subscribe(() => { + this.generateNumber() + }); + } isDescSorting(column: string): boolean { return this.sorting.column === column && this.sorting.order === 'desc'; @@ -70,18 +77,43 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy { sortTable(column: string): void { const futureSortingOrder = this.isDescSorting(column) ? 'asc' : 'desc'; + const sortedprocesses:Process[] = this._runningProcessService.getProcesses(); this.sorting = { column, order: futureSortingOrder, }; - if(column == 'cpu'){ - this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getCpuUsage - objA.getCpuUsage) - } else if (column == 'memory'){ + if(column == 'CPU'){ + if(futureSortingOrder == 'asc'){ + this.processes = this.processes.sort((objA, objB) => objB.getCpuUsage - objA.getCpuUsage) + }else{ + this.processes = this.processes.sort((objA, objB) => objB.getCpuUsage - objA.getCpuUsage).reverse(); + } + } else if (column == 'Memory'){ this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getMemoryUsage - objA.getMemoryUsage) - }else if(column == 'process_id'){ - this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getProcessId - objA.getProcessId) + }else if(column == 'Disk'){ + this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getDiskUsage - objA.getDiskUsage) + }else if(column == 'Network'){ + this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getNetworkUsage - objA.getNetworkUsage) } + } + + + generateNumber(){ + const processes:Process[] = this._runningProcessService.getProcesses(); + for(let i =0; i < processes.length; i++){ + const tmpProcess = processes[i]; + tmpProcess.setCpuUsage = this.getRandommNums(0.1, 100); + tmpProcess.setDiskUsage = this.getRandommNums(0.1, 100); + tmpProcess.setMemoryUsage = this.getRandommNums(0.1, 100); + tmpProcess.setNetworkUsage = this.getRandommNums(0.1, 100); + } + this.processes = processes; + } + getRandommNums(min:number, max:number):number{ + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min) + 10) / 10; } private getComponentDetail():Process{ diff --git a/src/app/system-apps/taskmanager/user.interface.ts b/src/app/system-apps/taskmanager/user.interface.ts index 98be40b1..91b79f90 100644 --- a/src/app/system-apps/taskmanager/user.interface.ts +++ b/src/app/system-apps/taskmanager/user.interface.ts @@ -1,9 +1,14 @@ export interface UserInterface { - name: string; - type: string; - process_id: number; + Name: string; + Status: string; + CPU:number; + Memory:number; + Disk:number; + Network:number; + Power_usage:string; + PID: number; has_window:boolean; - cpu:number; - memory:number; + Type: string; + Process_name:string; } \ No newline at end of file diff --git a/src/app/system-apps/window/window.btn.highlight.directives.ts b/src/app/system-apps/window/window.btn.highlight.directives.ts index 04321119..27abd673 100644 --- a/src/app/system-apps/window/window.btn.highlight.directives.ts +++ b/src/app/system-apps/window/window.btn.highlight.directives.ts @@ -24,33 +24,7 @@ export class HighlightDirective { this.highlight('',''); } - // @HostListener("focus") - // onFocus(): void { - // if(this.el.nativeElement.id == "closeBtn"){ - // this.el.nativeElement.style.backgroundColor = this.focusedCloseBtnColor; - // } - // //this.elementHost.nativeElement.classList.add("has-focus"); - // //this.elementHost.nativeElement.classList.remove("has-focus"); - // } - - // @HostListener("blur") - // onBlur(): void { - - // if(this.el.nativeElement.id == "headerSec"){ - // console.log('was-up!!!!!') - // this.el.nativeElement.style.backgroundColor = this.unfocusedWindowColor; - // } - // } - - // @HostListener("click") - // onClick(): void { - // console.log('hello this is el-Click:',this.el.nativeElement) - // if(this.el.nativeElement.id == "headerSec"){ - // this.el.nativeElement.style.backgroundColor = this.unfocusedWindowColor; - // } - // } - - + @HostListener("focus") private highlight(color: string, xBtnColor:string) { if(this.el.nativeElement.id == "closeBtn"){ @@ -59,7 +33,10 @@ export class HighlightDirective { } else if (this.el.nativeElement.id == "hideBtn" || this.el.nativeElement.id == "minBtn" || this.el.nativeElement.id == "maxBtn"){ this.el.nativeElement.style.backgroundColor = color; + } + // this.el.nativeElement.classList.add("has-focus"); + // this.el.nativeElement.classList.remove("has-focus"); } } diff --git a/src/app/system-files/process.ts b/src/app/system-files/process.ts index fbdd2ef9..bd0b68bc 100644 --- a/src/app/system-files/process.ts +++ b/src/app/system-files/process.ts @@ -20,7 +20,6 @@ export class Process{ this._hasWindow = hasWindow; this._type = type; this._processTrigger = processTrigger || null; - this._cpuUsage = 0; this._memoryUsage = 0; this._cpuUsage = 0; this._diskUsage = 0;