mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
Added functinality to switch between processes
This commit is contained in:
Eraldo Hasanaj
@@ -1,4 +1,5 @@
|
||||
export class Process {
|
||||
id: number;
|
||||
name: string;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
@@ -15,8 +15,15 @@ export class ProcessHeaderComponent implements OnInit {
|
||||
|
||||
addProcess() {
|
||||
const process: Process = new Process();
|
||||
process.id = this.processes.length;
|
||||
process.name = '# ' + this.processes.length;
|
||||
const itemNr = this.processes.length + 1;
|
||||
process.id = itemNr;
|
||||
process.name = '# ' + itemNr;
|
||||
// if this is the first process created set it as active
|
||||
if (this.processes.length === 0) {
|
||||
process.selected = true;
|
||||
} else {
|
||||
process.selected = false;
|
||||
}
|
||||
this.processes.push(process);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="grid-item">
|
||||
<div class="grid-container">
|
||||
<div>
|
||||
<img class="process-leading-icon" src="/assets/images/avatar_inactive.svg">
|
||||
<div class="grid-container" [ngClass]="{'selected-process': process.selected}">
|
||||
<div (click)="selectProcess(process)">
|
||||
<img class="process-leading-icon" src="/assets/images/cat.svg">
|
||||
</div>
|
||||
<div>{{process.name}}</div>
|
||||
<div (click)="selectProcess(process)">{{process.name}}</div>
|
||||
<div>
|
||||
<a (click)="deleteProcess(process)">
|
||||
<img class="process-delete-icon" src="/assets/images/close.svg">
|
||||
|
||||
@@ -20,5 +20,13 @@
|
||||
|
||||
.grid-item {
|
||||
display: inline-block;
|
||||
padding-right: 6px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.selected-process {
|
||||
border-bottom: 2px solid $hima-color-red;
|
||||
}
|
||||
|
||||
.not-selected-process {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
@@ -17,6 +17,17 @@ export class ProcessTabComponent implements OnInit {
|
||||
this.processes.splice(this.processes.indexOf(process), 1);
|
||||
}
|
||||
|
||||
selectProcess(process: Process): void {
|
||||
this.removeCurrentProcessSelection();
|
||||
process.selected = true;
|
||||
}
|
||||
|
||||
removeCurrentProcessSelection(): void {
|
||||
this.processes.find(function(process): boolean {
|
||||
return process.selected === true;
|
||||
}).selected = false;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
|
||||
83
src/assets/images/cat.svg
Normal file
83
src/assets/images/cat.svg
Normal file
@@ -0,0 +1,83 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 502.4 502.4" style="enable-background:new 0 0 502.4 502.4;" xml:space="preserve">
|
||||
<circle style="fill:#FD8469;" cx="251.2" cy="251.2" r="251.2"/>
|
||||
<path style="fill:#FFD05B;" d="M389,109.9c-47.5,0-86.1,38.5-86.1,86.1v18.2h18.3c47.5,0,86.1-38.5,86.1-86.1v-18.3H389V109.9z"/>
|
||||
<path style="fill:#F9B54C;" d="M373.3,128.9c-38.9,0-70.4,31.5-70.4,70.4v15h15c38.9,0,70.4-31.5,70.4-70.4v-15L373.3,128.9
|
||||
L373.3,128.9z"/>
|
||||
<path style="fill:#FFD05B;" d="M113.4,109.9c47.5,0,86.1,38.5,86.1,86.1v18.2h-18.3c-47.5,0-86.1-38.5-86.1-86.1v-18.3h18.3V109.9z"
|
||||
/>
|
||||
<path style="fill:#F9B54C;" d="M129.1,128.9c38.9,0,70.4,31.5,70.4,70.4v15h-15c-38.9,0-70.4-31.5-70.4-70.4v-15L129.1,128.9
|
||||
L129.1,128.9z"/>
|
||||
<circle style="fill:#FFD05B;" cx="251.2" cy="266.6" r="125.9"/>
|
||||
<path style="fill:#E6E9EE;" d="M353.7,339.7c-22.6,31.8-59.7,52.6-101.6,52.8c-0.3-0.5-0.6-0.9-0.9-1.4c-0.3,0.5-0.6,0.9-0.9,1.4
|
||||
c-41.9-0.3-79-21.1-101.6-52.8c8.6-21.1,29.3-35.9,53.4-35.9c20.8,0,39.1,11.1,49.2,27.6c10.1-16.6,28.3-27.6,49.2-27.6
|
||||
C324.5,303.7,345.2,318.6,353.7,339.7z"/>
|
||||
<path style="fill:#324A5E;" d="M271.7,325.7c0,8.1-9.2,18.7-20.5,18.7s-20.5-10.6-20.5-18.7c0-8.1,9.2-10.7,20.5-10.7
|
||||
S271.7,317.6,271.7,325.7z"/>
|
||||
<circle style="fill:#FFFFFF;" cx="292.7" cy="258.9" r="18.1"/>
|
||||
<circle style="fill:#84DBFF;" cx="292.7" cy="258.9" r="12.7"/>
|
||||
<circle style="fill:#324A5E;" cx="292.7" cy="258.9" r="8.4"/>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="287.7" cy="253.9" r="3.9"/>
|
||||
<circle style="fill:#FFFFFF;" cx="293.1" cy="259.3" r="2"/>
|
||||
<circle style="fill:#FFFFFF;" cx="209.7" cy="258.9" r="18.1"/>
|
||||
</g>
|
||||
<circle style="fill:#84DBFF;" cx="209.7" cy="258.9" r="12.7"/>
|
||||
<circle style="fill:#324A5E;" cx="209.7" cy="258.9" r="8.4"/>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="214.7" cy="253.9" r="3.9"/>
|
||||
<circle style="fill:#FFFFFF;" cx="209.3" cy="259.3" r="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:none;stroke:#324A5E;stroke-linecap:round;stroke-miterlimit:10;" d="M251.2,319.3v26.9c0,5.4,4.4,9.7,9.7,9.7
|
||||
l0,0c5.4,0,9.7-4.4,9.7-9.7"/>
|
||||
<path style="fill:none;stroke:#324A5E;stroke-linecap:round;stroke-miterlimit:10;" d="M251.2,319.3v26.9c0,5.4-4.4,9.7-9.7,9.7
|
||||
l0,0c-5.4,0-9.7-4.4-9.7-9.7"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#324A5E;" d="M388.4,314.4l-86.5,15.3c-1.1,0.2-1.8,1.2-1.6,2.3c0.2,1,1,1.6,1.9,1.6c0.1,0,0.2,0,0.3,0l86.5-15.3
|
||||
c1.1-0.2,1.8-1.2,1.6-2.3C390.4,314.9,389.5,314.2,388.4,314.4z"/>
|
||||
<path style="fill:#324A5E;" d="M384.4,345.9l-74.9-5.6c-1.1-0.1-2,0.7-2.1,1.8c-0.1,1.1,0.7,2,1.8,2.1l74.9,5.6h0.1
|
||||
c1,0,1.9-0.8,2-1.8C386.3,346.9,385.5,346,384.4,345.9z"/>
|
||||
<path style="fill:#324A5E;" d="M359.9,373.4l-59.2-20.5c-1-0.4-2.1,0.2-2.5,1.2c-0.4,1,0.2,2.1,1.2,2.5l59.2,20.6
|
||||
c0.2,0.1,0.4,0.1,0.6,0.1c0.8,0,1.6-0.5,1.9-1.3C361.5,374.9,361,373.7,359.9,373.4z"/>
|
||||
<path style="fill:#324A5E;" d="M200.1,333.6c0.9,0,1.8-0.7,1.9-1.6c0.2-1.1-0.5-2.1-1.6-2.3l-86.5-15.3c-1.1-0.2-2.1,0.5-2.3,1.6
|
||||
c-0.2,1.1,0.5,2.1,1.6,2.3l86.5,15.3C199.9,333.5,200,333.6,200.1,333.6z"/>
|
||||
<path style="fill:#324A5E;" d="M195,342.1c-0.1-1.1-1-1.9-2.1-1.8l-74.9,5.6c-1.1,0.1-1.9,1-1.8,2.1c0.1,1,0.9,1.8,2,1.8h0.1
|
||||
l74.9-5.6C194.3,344.1,195.1,343.2,195,342.1z"/>
|
||||
<path style="fill:#324A5E;" d="M201.6,352.8l-59.2,20.5c-1,0.4-1.6,1.5-1.2,2.5c0.3,0.8,1,1.3,1.9,1.3c0.2,0,0.4,0,0.6-0.1
|
||||
l59.2-20.6c1-0.4,1.6-1.5,1.2-2.5C203.8,353,202.6,352.5,201.6,352.8z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
Reference in New Issue
Block a user