File
Implements
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
isAnyCellAvailable
|
Type : boolean
|
Default value : false
|
|
|
|
subs
|
Type : Subscription[]
|
Default value : []
|
|
|
import { Subscription } from 'rxjs';
import { CellService } from './../../../../services/cell.service';
import { Router } from '@angular/router';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';
@Component({
selector: 'app-cells',
templateUrl: './cells.component.html',
styleUrls: ['./cells.component.css'],
})
export class CellsComponent implements OnInit, OnDestroy {
isAnyCellAvailable: boolean = false;
subs: Subscription[] = [];
constructor(
private router: Router,
private location: Location,
private _cellService: CellService
) {
//console.log(router.routerState.snapshot.url)
if (window.location.hostname != 'localhost') {
this.location.replaceState('./'); //on prod
}
}
ngOnInit(): void {
const sub = this._cellService.getCells().subscribe({
next: (data: any) => {
if (data.length > 0) {
this.isAnyCellAvailable = true;
}
},
});
this.subs.push(sub);
}
ngOnDestroy(): void {
this.subs.forEach((sub) => {
sub.unsubscribe();
});
}
}
<div class="intro-container">
<div class="row justify-content-center">
<div class="col-md-3 test-icon text-center">
<span class="material-symbols-outlined align-middle">
battery_profile
</span>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-7">
<h4 class="text-center">Battery Cells</h4>
<p class="about text-center">
Our battery cell management page provides a simple and effective way to
maintain detailed records of your battery cells, ensuring that you have
the information you need to succeed.
</p>
</div>
</div>
<div class="control">
<div class="row justify-content-center">
<div class="col-md-2 text-center">
<button
type="button"
class="btn btn-primary"
routerLink="add"
skipLocationChange="true"
>
Add a new cell
</button>
</div>
<div class="col-md-2 text-center" *ngIf="isAnyCellAvailable">
<button
type="button"
class="btn btn-primary"
routerLink="view"
skipLocationChange="true"
>
Existing cells
</button>
</div>
</div>
</div>
</div>
<div class="row">
<button
id="collapse-btn"
class="btn btn-danger"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
See Features
</button>
</div>
<div class="features-container collapse" id="collapseExample">
<div class="card card-body">
<div class="row align-items-center">
<div class="col-md-8">
<div class="row">
<div class="cells-features">
<ul>
<li>
<strong>Battery Cell Tracking:</strong> Keep detailed records of
your battery cells for future testing and analysis.
</li>
<li>
<strong>Warehouse Management:</strong> Organize and manage your
battery cell inventory with ease.
</li>
<li>
<strong>Test Result Analysis:</strong> Analyze the results of
your battery cell tests to identify trends and patterns.
</li>
<li>
<strong>Easy Integration:</strong> Seamlessly integrate with
other pages, such as testchamber, to streamline your battery
testing process.
</li>
<li>
<strong>Customizable:</strong> Tailor the page to your specific
needs with flexible options for adding and organizing battery
cells.
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="image-container" id="cells-image"></div>
</div>
</div>
</div>
</div>
#cells-image {
background-image: url("/e_mobility/i-bms/assets/Classic_iOS_Battery_Icon.png");
}
.image-container {
height: 300px;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.text-center span {
font-size: 200px;
color: #19151540;
}
.about {
color: rgba(33, 37, 41, 0.75);
}
.cells-features {
margin-top: 40px;
}
.cells-features h2 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.cells-features ul {
list-style: none;
margin: 0;
padding: 0;
}
.btn-primary {
background-color: rgb(0, 113, 184);
}
.cells-features li {
margin-bottom: 10px;
line-height: 1.5;
color: rgba(33, 37, 41, 0.75);
}
.cells-features strong {
font-weight: bold;
}
.intro-container {
padding-top: 20px;
padding-bottom: 50px;
}
.control div {
padding: 10px;
}
#collapse-btn {
height: 50px;
}
button {
background-color: white;
border: none;
padding: 10px 20px;
font-size: 18px;
color: #333;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
overflow: hidden;
z-index: 0;
}
button::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0.4),
rgba(0, 0, 0, 0.2)
);
filter: blur(30px);
z-index: -1;
}
button:hover::before {
filter: blur(10px);
}
.control button {
height: 100%;
width: 100%;
}
Legend
Html element with directive