File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
Optional
_timerId
|
Type : number
|
|
|
|
labelledByText
|
Type : string
|
Default value : ''
|
|
|
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'amc-duration',
templateUrl: './duration.component.html',
styleUrls: ['./duration.component.scss', './../uilibrary.module.scss']
})
export class DurationComponent implements OnInit, OnDestroy {
@Input() statusText: string;
@Input() callId: string;
@Input() startTime: number;
displayTime: string;
labelledByText = '';
private _timerId?: number;
constructor() {
this.displayTime = '00:00/00:00';
}
ngOnInit() {
if (this.statusText && this.callId) {
this.labelledByText = `${this.statusText} ${this.callId}`;
} else if (this.statusText) {
this.labelledByText = this.statusText;
} else if (this.callId) {
this.labelledByText = this.callId
}
this.startCallCounter();
}
/**
* @ignore
*/
private startCallCounter(): void {
if (this._timerId == null) {
this._timerId = window.setInterval(() => {
const callStartTime: number = this.startTime;
const currentTime: number = new Date().getTime() / 1000;
const secondsPassed: number = Math.floor((currentTime) - (callStartTime / 1000));
this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
}, 1000);
}
}
ngOnDestroy(): void {
// clear the timer.
if (this._timerId != null) {
clearInterval(this._timerId);
this._timerId = null;
}
}
}
<div class="holdCallDurationDiv">
<input
readonly
class="block durationInput"
name="CallDuration"
type="text"
tabindex="-1"
title="Call Duration"
[value]="displayTime"
[attr.aria-labelledby]="labelledByText || null">
</div>
.durationInput:focus {
outline-style: none;
}
/* You can add global styles to this file, and also import other style files */
body {
padding-top: 5px;
padding-bottom: 5px;
margin: 0px;
}
.login {
width: 20px;
height: 20px;
display: block;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
}
.editor {
font-size: 0.9em;
text-align: left;
margin: 4px 5% 0px 0px;
font-family: Arial;
white-space: nowrap;
/*overflow: hidden;*/
text-overflow: ellipsis;
overflow: hidden;
border: 0;
padding-top: 2px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.editor .standalone-line {
width: 90% !important;
text-align: center !important;
}
.editorHyperLink label {
font-size: 0.95em;
float: left;
width: 30%;
margin-left: 2%;
text-align: left;
color: black;
font-family: Arial;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0;
padding-top: 0;
}
.editorHyperLink input[type="text"] {
font-size: 0.95em;
width: 60%;
text-align: left;
margin: 0 5% 0 0px;
color: #318fc5;
cursor: pointer;
font-family: Arial;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 0;
padding-top: 0;
box-sizing: border-box;
/* Opera/IE 8+ */
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
}
.AnswerCallImages {
height: 20px;
margin: 5px;
}
.AnswerCallFocused {
border: 1px solid #939598;
margin-left: 0px;
font-family: Arial;
position: relative;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
}
.ViewExpandImage {
width: 20px;
height: 20px;
float: right;
cursor: pointer;
}
.ViewCollapseImage {
width: 20px;
height: 20px;
float: right;
cursor: pointer;
}
.answerPhoneNumberStyle {
border: 0;
position: relative;
top: -12px;
left: -38px;
max-width: 80px;
height: 15px;
text-overflow: ellipsis;
font-size: 0.85em;
}
.callHeaderTop {
border-bottom: 1px solid;
background-color: #f4f5fb;
width: 100%;
margin-top: 0px;
}
.statusImage {
width: 15px;
height: 15px;
margin-left: 10px;
float: left;
margin-right: 5px;
}
.statusText {
float: left;
margin-top: 1px;
}
.displayDiv {
width: 100%;
display: flex;
}
.DurationDiv {
float: right;
width: 17%;
text-align: right;
margin-right: 5px;
}
.displayLabels {
margin-left: 5px;
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
}
.displayData {
border: 0;
outline: none;
}
.callOptions {
background-color: #f6f7fb;
bottom: 0px;
width: 100%;
text-align: center;
}
.directionText {
font-size: 0.8em;
margin-left: 2px;
}
.phoneNumberValue {
font-weight: bold;
font-size: 1em;
margin-left: 5px;
}
.durationInput {
background-color: transparent;
border: 0px;
width: 100%;
text-align: right;
}
.topBorder {
border-top: 1px solid #939598;
}
.holdCallDurationDiv {
float: left;
margin-top: 1px;
margin-left: 2px;
}
.holdCallDurationTimer {
background-color: transparent;
border: 0px;
width: 100%;
}
.verticalDivider {
margin-left: 2px;
float: left;
}
.callImage {
height: 20px;
}
Legend
Html element with directive