src/app/components/frequencies-bar.component.ts
Frequency Bar component
OnInit
| selector | frequencies-bar |
| styleUrls | ./frequencies-bar.component.css |
| templateUrl | ./frequencies-bar.component.html |
Properties |
Methods |
Inputs |
constructor(modalService: NgbModal)
|
||||||
|
Parameters :
|
| frequencyBand | |
Type : any
|
|
|
Frequency |
|
| linkType | |
Type : any
|
|
|
LinkType, downLink or Uplink |
|
| providers | |
Type : any
|
|
|
Provider Name |
|
| getFrequencyLTE | ||||||
getFrequencyLTE(arfcn: number)
|
||||||
|
Parameters :
Returns :
string
|
| getFrequencyNR | ||||||
getFrequencyNR(arfcn: number)
|
||||||
|
Parameters :
Returns :
string
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| open | ||||||
open(content: any)
|
||||||
|
Modal Opening
Parameters :
Returns :
void
|
| closeResult |
Type : string
|
Default value : ''
|
|
Modal close result |
| totalBandwidth |
Type : number
|
Default value : 0
|
|
Total Bandwidth, default 0 |
import { Component, OnInit, Input } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
export interface Bands {
/**
* Band Number
*/
band: number;
/**
* Band Type
*/
type: 'FDD' | 'TDD' | 'SDL' | 'SUL';
/**
* Band Frequency
*/
startARFCN: number;
endARFCN: number;
duplexSpacing: number;
startFrequency: number;
endFrequency: number;
}
/**
* Frequency Bar component
*/
@Component({
selector: 'frequencies-bar',
templateUrl: './frequencies-bar.component.html',
styleUrls: ['./frequencies-bar.component.css'],
})
export class FrequenciesBarComponent implements OnInit {
constructor(private modalService: NgbModal) { }
ngOnInit(): void {
this.providers && this.providers.forEach((element: any) => {
this.totalBandwidth += element.frequency[this.linkType].end - element.frequency[this.linkType].start;
});
}
/**
* Modal Opening
* @param content
*/
open(content: any) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
}
/**
* List of Bands in Array
*/
band: Bands[] = [
{ band: 1, type: 'FDD', startARFCN:0, endARFCN: 599, duplexSpacing: 190, startFrequency: 2110 , endFrequency: 2170},
{ band: 2, type: 'FDD', startARFCN:600, endARFCN: 1199, duplexSpacing: 80, startFrequency: 1930 , endFrequency: 1990},
{ band: 3, type: 'FDD', startARFCN:1200, endARFCN: 1949, duplexSpacing: 95, startFrequency: 1805 , endFrequency: 1880},
{ band: 4, type: 'FDD', startARFCN:1950, endARFCN: 2399, duplexSpacing: 400, startFrequency: 2110 , endFrequency: 2155},
{ band: 5, type: 'FDD', startARFCN:2400, endARFCN: 2649, duplexSpacing: 45, startFrequency: 869 , endFrequency: 894},
{ band: 7, type: 'FDD', startARFCN:2750, endARFCN: 3449, duplexSpacing: 120, startFrequency: 2620 , endFrequency: 2690},
{ band: 8, type: 'FDD', startARFCN:3450, endARFCN: 3799, duplexSpacing: 45, startFrequency: 925 , endFrequency: 960},
{ band: 9, type: 'FDD', startARFCN:3800, endARFCN: 4149, duplexSpacing: 95, startFrequency: 1844.9 , endFrequency: 1879.9},
{ band: 11, type: 'FDD', startARFCN:4750, endARFCN: 4949, duplexSpacing: 48, startFrequency: 1475.9 , endFrequency: 1495.9},
{ band: 12, type: 'FDD', startARFCN:5010, endARFCN: 5179, duplexSpacing: 30, startFrequency: 729 , endFrequency: 746},
{ band: 13, type: 'FDD', startARFCN:5180, endARFCN: 5279, duplexSpacing: -31, startFrequency: 746 , endFrequency: 756},
{ band: 14, type: 'FDD', startARFCN:5280, endARFCN: 5379, duplexSpacing: -30, startFrequency: 758 , endFrequency: 768},
{ band: 17, type: 'FDD', startARFCN:5730, endARFCN: 5849, duplexSpacing: 30, startFrequency: 734 , endFrequency: 746},
{ band: 18, type: 'FDD', startARFCN:5850, endARFCN: 5999, duplexSpacing: 45, startFrequency: 860 , endFrequency: 875},
{ band: 19, type: 'FDD', startARFCN:6000, endARFCN: 6149, duplexSpacing: 45, startFrequency: 875 , endFrequency: 890},
{ band: 20, type: 'FDD', startARFCN:6150, endARFCN: 6449, duplexSpacing: -41, startFrequency: 791 , endFrequency: 821},
{ band: 21, type: 'FDD', startARFCN:6450, endARFCN: 6599, duplexSpacing: 48, startFrequency: 1495.9 , endFrequency: 1510.9},
{ band: 25, type: 'FDD', startARFCN:8040, endARFCN: 8689, duplexSpacing: 80, startFrequency: 1930 , endFrequency: 1995},
{ band: 26, type: 'FDD', startARFCN:8690, endARFCN: 9039, duplexSpacing: 45, startFrequency: 859 , endFrequency: 894},
{ band: 28, type: 'FDD', startARFCN:9210, endARFCN: 9659, duplexSpacing: 55, startFrequency: 758 , endFrequency: 803},
{ band: 29, type: 'SDL', startARFCN:9660, endARFCN: 9769, duplexSpacing: 0, startFrequency: 717 , endFrequency: 728},
{ band: 31, type: 'FDD', startARFCN:9870, endARFCN: 9919, duplexSpacing: 10, startFrequency: 462.5 , endFrequency: 467.5},
{ band: 32, type: 'SDL', startARFCN:9920, endARFCN: 10359, duplexSpacing: 0, startFrequency: 1452 , endFrequency: 1496},
{ band: 38, type: 'TDD', startARFCN:37750, endARFCN: 38249, duplexSpacing: 0, startFrequency: 2570 , endFrequency: 2170},
{ band: 39, type: 'TDD', startARFCN:38250, endARFCN: 38649, duplexSpacing: 0, startFrequency: 1880 , endFrequency: 1920},
{ band: 40, type: 'TDD', startARFCN:38650, endARFCN: 39649, duplexSpacing: 0, startFrequency: 2300 , endFrequency: 2400},
{ band: 41, type: 'TDD', startARFCN:39650, endARFCN: 41589, duplexSpacing: 0, startFrequency: 2496 , endFrequency: 2690},
{ band: 42, type: 'TDD', startARFCN:41590, endARFCN: 43589, duplexSpacing: 0, startFrequency: 3400 , endFrequency: 3600},
{ band: 43, type: 'TDD', startARFCN:43590, endARFCN: 45589, duplexSpacing: 0, startFrequency: 3600 , endFrequency: 3800},
{ band: 66, type: 'FDD', startARFCN:66436, endARFCN: 67335, duplexSpacing: 400, startFrequency: 2110 , endFrequency: 2200},
{ band: 67, type: 'SDL', startARFCN:67336, endARFCN: 67535, duplexSpacing: 0, startFrequency: 738 , endFrequency: 758},
{ band: 71, type: 'FDD', startARFCN:68586, endARFCN: 68935, duplexSpacing: -46, startFrequency: 617 , endFrequency: 652},
{ band: 72, type: 'FDD', startARFCN:68936, endARFCN: 68985, duplexSpacing: 10, startFrequency: 461 , endFrequency: 466},
{ band: 75, type: 'SDL', startARFCN:69466, endARFCN: 70315, duplexSpacing: 0, startFrequency: 1432 , endFrequency: 1517}
]
getFrequencyLTE(arfcn: number) {
//let bandName = this.band.find((item) => item.band == band)
//return bandName?.name;
let bandType = this.band.find((item) => item.startARFCN <= arfcn&&item.endARFCN >= arfcn);
console.log(bandType);
let type = bandType?.type as any;
let startFrequency = bandType?.startFrequency as number;
let duplexSpacing = bandType?.duplexSpacing as number;
let startARFCN = bandType?.startARFCN as number;
if(type=="FDD"){
let offset=arfcn-startARFCN;
let DLFreq=startFrequency+(0.1*offset);
let ULFreq=startFrequency-duplexSpacing+(0.1*offset);
return "(↓: "+DLFreq.toFixed(1)+" MHz/↑: "+ULFreq.toFixed(1)+" MHz)";
}
else if(type=="TDD"){
let offset=arfcn-startARFCN;
let Freq=startFrequency+(0.1*offset);
return "(↓/↑: "+Freq.toFixed(1)+" MHz)";
}
else if(type=="SDL"){
let offset=arfcn-startARFCN;
let Freq=startFrequency+(0.1*offset);
return "(↓: "+Freq.toFixed(1)+" MHz)";
}
else{
return "()";
}
}
getFrequencyNR(arfcn: number) {
//let bandName = this.band.find((item) => item.band == band)
//return bandName?.name;
let bandType = this.band.find((item) => item.startARFCN <= arfcn&&item.endARFCN >= arfcn);
console.log(bandType);
let duplexSpacing = bandType?.duplexSpacing as number;
if(arfcn<600000){
let Freq=(0.005*arfcn);
return "(SSB: "+Freq.toFixed(3)+" MHz)";
}
else if(arfcn>=600000&&arfcn<2016667){
let Freq=3000+(0.015*(arfcn-600000));
return "(SSB: "+Freq.toFixed(3)+" MHz)";
}
else if(arfcn>2016667){
let Freq=24250.08+(0.060*(arfcn-2016667));
return "(SSB: "+Freq.toFixed(3)+" MHz)";
}
else{
return "()";
}
}
/** Provider Name */
@Input() providers: any;
/** LinkType, downLink or Uplink */
@Input() linkType: any;
/** Frequency */
@Input() frequencyBand: any;
/** Total Bandwidth, default 0 */
totalBandwidth = 0;
/** Modal close result */
closeResult = '';
}
<div *ngFor="let provider of providers" class="div__container">
<div class="div__child" title="{{provider.provider.name}}" (click)="open(content)" [ngStyle]="{'background-color': provider.provider.backgroundColor, 'color': provider.provider.textColor, 'width': ((provider.frequency.downLink.end - provider.frequency.downLink.start) * 100) / totalBandwidth + '%'}">
<span [ngStyle]="{'color': provider.provider.textColor}">{{provider.provider.name}}</span>
<br />
<span><small><ng-container *ngIf="provider.frequency.downLink != null" else >{{provider.frequency.downLink.end - provider.frequency.downLink.start | number}}</ng-container>
<ng-container *ngIf="provider.frequency.downLink == null && provider.frequency.upLink != null">{{provider.frequency.downLink.end - provider.frequency.downLink.start | number}}</ng-container> MHz</small></span>
</div>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">{{provider.provider.name}} - Band {{frequencyBand}}</h4>
</div>
<div class="modal-body">
<table class="table table-borderless">
<tr>
<th>Provider</th><td><a rel="noopener" target="_blank" href="{{provider.provider.homePage}}">{{provider.provider.longName}}</a></td>
</tr>
<tr *ngIf="provider.technology != null">
<th>Technology</th><td>{{provider.technology.join(", ")}}</td>
</tr>
<tr *ngIf="provider.frequency.downLink != null">
<th>Download Frequency Range</th><td>{{provider.frequency.downLink.start}} - {{provider.frequency.downLink.end}} MHz</td>
</tr>
<tr *ngIf="provider.frequency.upLink != null">
<th>Upload Frequency Range</th><td>{{provider.frequency.upLink.start}} - {{provider.frequency.upLink.end}} MHz</td>
</tr>
<tr>
<th>Bandwidth</th><td>
<ng-container *ngIf="provider.frequency.downLink != null" else >{{provider.frequency.downLink.end - provider.frequency.downLink.start | number}}</ng-container>
<ng-container *ngIf="provider.frequency.downLink == null && provider.frequency.upLink != null">{{provider.frequency.downLink.end - provider.frequency.downLink.start | number}}</ng-container> MHz
</td>
</tr>
<tr *ngIf="provider.valid != null">
<th>Valid</th><td>{{provider.valid.start | date}} - {{provider.valid.end | date}}</td>
</tr>
<ng-container *ngIf="provider.frequency.arfcn != null">
<tr *ngIf="provider.frequency.arfcn.GSM != null">
<th>2G ARFCN</th><td>{{provider.frequency.arfcn.GSM.join(", ")}}</td>
</tr>
<tr *ngIf="provider.frequency.arfcn.UMTS != null">
<th>3G UARFCN</th><td>{{provider.frequency.arfcn.UMTS.join(", ")}}</td>
</tr>
<tr *ngIf="provider.frequency.arfcn.LTE != null">
<th>4G EARFCN</th>
<td>
<ng-container *ngFor="let arfcn of provider.frequency.arfcn.LTE">
<p>{{arfcn}} {{getFrequencyLTE(arfcn)}}</p>
</ng-container>
</td>
</tr>
<tr *ngIf="provider.frequency.arfcn.NR != null">
<th>5G NR-ARFCN</th>
<td>
<ng-container *ngFor="let arfcn of provider.frequency.arfcn.NR">
<p>{{arfcn}} {{getFrequencyNR(arfcn)}}</p>
</ng-container>
</td>
</tr>
</ng-container>
</table>
<ng-container *ngIf="provider.source != null">
<p><strong>Sources:</strong></p>
<ul>
<li *ngFor="let source of provider.source"><a rel="noopener" target="_blank" href="{{source.url}}">{{source.name}}</a></li>
</ul>
</ng-container>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')" ngbAutofocus>Close</button>
</div>
</ng-template>
</div>
./frequencies-bar.component.css
.div__container {
height: 50px;
/* border: 1px solid #000000; */
font-size: medium;
display: inherit;
}
.div__child {
float: left;
height: 50px;
display: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.div__child span {
vertical-align: middle;
cursor: pointer;
}
.div__container a {
color: inherit;
text-decoration: none;
}