Skip to content

Commit

Permalink
version 0.4 of task manager
Browse files Browse the repository at this point in the history
chinonso098 committed Oct 27, 2023
1 parent 2293224 commit f0f77c0
Showing 7 changed files with 188 additions and 111 deletions.
13 changes: 0 additions & 13 deletions src/app/system-apps/desktop/vanta-object/wave.ts

This file was deleted.

95 changes: 75 additions & 20 deletions src/app/system-apps/taskmanager/taskmanager.component.css
Original file line number Diff line number Diff line change
@@ -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,22 +94,24 @@
.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%;
}

/* 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;
}
}


/* 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;
}

84 changes: 53 additions & 31 deletions src/app/system-apps/taskmanager/taskmanager.component.html
Original file line number Diff line number Diff line change
@@ -1,35 +1,57 @@
<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setTaskMangrWindowToFocus(this.processId)">
<div class='card'>
<div class='card-body'>
<div class='table-responsive'>
<table class='table' *ngIf = 'processes.length > 0' >
<thead>
<tr>
<th *ngFor="let column of columns"
(click)="sortTable(column)">
{{ column }}
<span *ngIf="isDescSorting(column)"></span>
<span *ngIf="isAscSorting(column)"></span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let process of processes'>
<td>
<figure>
<img [src]="process.getIcon">
<figcaption>{{ process.getProcessName}}</figcaption>
</figure>
</td>
<td>{{ process.getType}}</td>
<td>{{ process.getProcessId}}</td>
<td>{{ process.getHasWindow}}</td>
<td>{{ process.getCpuUsage}}%</td>
<td>{{ process.getMemoryUsage}}MB</td>
</tr>
</tbody>
</table>

<div class="tabbed-window">
<div class="tabs">
<div class="tab active">Processes</div>
<div class="tab">Performance</div>
<div class="tab">App history</div>
</div>
<div class="tab-content">
<div class="tab-pane active">
<div class='card'>
<div class='card-body'>
<div class='table-responsive'>
<table class='table' *ngIf = 'processes.length > 0' >
<thead>
<tr>
<th *ngFor="let column of columns"
(click)="sortTable(column)">
{{ column }}
<span *ngIf="isDescSorting(column)"></span>
<span *ngIf="isAscSorting(column)"></span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let process of processes'>
<td>
<figure>
<img [src]="process.getIcon">
<figcaption>{{ process.getProcessName}}</figcaption>
</figure>
</td>
<td>{{ process.getStatus}}</td>
<td>{{ process.getCpuUsage}}%</td>
<td>{{ process.getMemoryUsage}} MB</td>
<td>{{ process.getDiskUsage}} MB/s</td>
<td>{{ process.getNetworkUsage}} Mbps</td>
<td>{{ process.getProcessId}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane">
<!-- Content for Tab 2 -->
<p> Somethings is coming</p>
</div>
<div class="tab-pane">
<!-- Content for Tab 3 -->
<p> Somethings is coming</p>
</div>
</div>
</div>
</div>

</cos-window>
60 changes: 46 additions & 14 deletions src/app/system-apps/taskmanager/taskmanager.component.ts
Original file line number Diff line number Diff line change
@@ -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<keyof UserInterface> = ['name','type','process_id','has_window','cpu','memory'];
columns: Array<keyof UserInterface> = ['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{
15 changes: 10 additions & 5 deletions src/app/system-apps/taskmanager/user.interface.ts
Original file line number Diff line number Diff line change
@@ -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;

}
31 changes: 4 additions & 27 deletions src/app/system-apps/window/window.btn.highlight.directives.ts
Original file line number Diff line number Diff line change
@@ -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");
}
}
1 change: 0 additions & 1 deletion src/app/system-files/process.ts
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit f0f77c0

Please sign in to comment.