|
|
<div id="myoffice_container">
|
|
|
<div class="dashboard-header">
|
|
|
<div class="header-title">{{account.name}}</div>
|
|
|
<a href="#" class="header-link strategy-hours link-box" data-category="strategy" data-subcategory="strategy-hours">
|
|
|
<div class="header-link-icon"><i class="fa fa-clock-o fa-lg monster-white"></i></div>
|
|
|
<div class="header-link-title">{{i18n.myOffice.topBarLinks.hours}}</div>
|
|
|
</a>
|
|
|
<!-- <a href="#" class="header-link call-recording">
|
|
|
<div class="header-link-icon"><i class="monster-white fa-lg fa fa-microphone"></i></div>
|
|
|
<div class="header-link-title">{{i18n.myOffice.topBarLinks.callRecording}}</div>
|
|
|
</a> -->
|
|
|
<a href="#" class="header-link music-on-hold">
|
|
|
<div class="header-link-icon"><i class="monster-white fa-lg fa fa-music"></i></div>
|
|
|
<div class="header-link-title">{{i18n.myOffice.topBarLinks.musicOnHold}}</div>
|
|
|
</a>
|
|
|
{{#if isCnamEnabled}}
|
|
|
<a href="#" class="header-link caller-id{{#compare mainNumbers.length "===" 0}} disabled{{/compare}}">
|
|
|
<div class="header-link-icon"><i class="monster-white fa-lg fa fa-user"></i></div>
|
|
|
<div class="header-link-title">{{i18n.myOffice.topBarLinks.callerID}}</div>
|
|
|
</a>
|
|
|
{{/if}}
|
|
|
</div>
|
|
|
|
|
|
<div class="dashboard-content">
|
|
|
{{#if topMessage}}
|
|
|
<div class="dashboard-top-message {{topMessage.cssClass}}">
|
|
|
<i class="fa fa-exclamation-triangle"></i>{{topMessage.message}}<!-- {{i18n.myOffice.missingE911Message}} -->
|
|
|
</div>
|
|
|
{{/if}}
|
|
|
<div class="dashboard-content-div dashboard-left-content">
|
|
|
<div class="dashboard-left-section clearfix">
|
|
|
<div class="left-section-header link-box" data-category="users">
|
|
|
<span class="title">{{i18n.myOffice.totalUsers}}</span>
|
|
|
<span class="number">{{totalUsers}}</span>
|
|
|
</div>
|
|
|
<div class="left-section-content users-section-content">
|
|
|
{{#if showUserTypes}}
|
|
|
<div class="users-chart">
|
|
|
<div class="users-canvas-wrapper pull-left">
|
|
|
<canvas id="dashboard_user_type_chart"></canvas>
|
|
|
</div>
|
|
|
<div class="users-chart-legend">
|
|
|
<ul>
|
|
|
{{#each usersList}}
|
|
|
{{#if label}}
|
|
|
<li class="legend-element{{#unless count}} no-user{{/unless}}">
|
|
|
<i class="fa fa-circle legend-color" style="color: {{color}};"></i>
|
|
|
<span class="legend-label">{{label}}</span>
|
|
|
<span class="legend-number">{{count}}</span>
|
|
|
</li>
|
|
|
{{/if}}
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{else}}
|
|
|
{{#times totalUsers}}
|
|
|
<div class="users-element"><i class="fa-2x fa fa-male{{#compare this '<' ../totalChannels}} monster-primary-color{{/compare}}"></i></div>
|
|
|
{{/times}}
|
|
|
{{/if}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dashboard-left-section clearfix">
|
|
|
<div class="left-section-header link-box" data-category="devices">
|
|
|
<span class="title">{{i18n.myOffice.totalDevices}}</span>
|
|
|
<span class="number">{{totalDevices}}</span>
|
|
|
</div>
|
|
|
<div class="left-section-content devices-section-content">
|
|
|
<div class="devices-chart">
|
|
|
<div class="devices-canvas-wrapper pull-left">
|
|
|
<canvas id="dashboard_devices_chart"></canvas>
|
|
|
</div>
|
|
|
<div class="devices-chart-legend">
|
|
|
<ul>
|
|
|
{{#each devicesList}}
|
|
|
{{#if label}}
|
|
|
<li class="legend-element{{#unless count}} no-device{{/unless}}">
|
|
|
<i class="fa fa-circle legend-color" style="color: {{color}};"></i>
|
|
|
<span class="legend-label">{{label}}</span>
|
|
|
<span class="legend-number">{{count}}</span>
|
|
|
</li>
|
|
|
{{/if}}
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="unregistered-devices clearfix">
|
|
|
<div class="value{{#unless unregisteredDevices}} none{{/unless}}">{{unregisteredDevices}}</div>
|
|
|
<div class="title">{{i18n.myOffice.unregisteredDevices}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dashboard-left-section conf-section clearfix">
|
|
|
<div class="left-section-header conf-section-header">
|
|
|
<span class="title">{{i18n.myOffice.totalConfs}}</span>
|
|
|
<span class="number">{{totalConferences}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="dashboard-content-div dashboard-right-content">
|
|
|
<div class="dashboard-box">
|
|
|
{{#if mainNumbers.length}}
|
|
|
<div class="dashboard-box-row main-number-row link-box" data-category="strategy" data-subcategory="main-number">
|
|
|
<div class="row-title">
|
|
|
<div>{{i18n.myOffice.mainNumberLabel}}</div>
|
|
|
</div>
|
|
|
<div class="row-content">
|
|
|
<ul class="number-list">
|
|
|
{{#each mainNumbers}}
|
|
|
<li{{#compare this.number '===' ../account.caller_id.external.number}} class="caller-id"{{/compare}}>
|
|
|
<div class="features pull-right">
|
|
|
{{#numberFeatures this.features}}{{/numberFeatures}}
|
|
|
</div>
|
|
|
<div class="number-div">{{formatPhoneNumber this.number}}</div>
|
|
|
</li>
|
|
|
{{else}}
|
|
|
<li>{{i18n.myOffice.noMainNumber}}</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{else}}
|
|
|
<div class="dashboard-warning-row main-number-row link-box" data-category="strategy" data-subcategory="main-number">
|
|
|
<i class="fa fa-exclamation-triangle"></i>{{@root.i18n.myOffice.missingMainNumberMessage}}
|
|
|
</div>
|
|
|
{{/if}}
|
|
|
<div class="dashboard-box-row conf-number-row link-box" data-category="strategy" data-subcategory="strategy-confnum">
|
|
|
<div class="row-title">
|
|
|
<div>{{i18n.myOffice.confNumberLabel}}</div>
|
|
|
</div>
|
|
|
<div class="row-content">
|
|
|
<ul class="number-list">
|
|
|
{{#each confNumbers}}
|
|
|
<li>
|
|
|
<div class="features pull-right">
|
|
|
{{#numberFeatures this.features}}{{/numberFeatures}}
|
|
|
</div>
|
|
|
<div class="number-div">{{formatPhoneNumber number}}</div>
|
|
|
</li>
|
|
|
{{else}}
|
|
|
<li>-</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dashboard-box-row faxing-number-row link-box" data-category="strategy" data-subcategory="strategy-faxingnum">
|
|
|
<div class="row-title">
|
|
|
<div>{{i18n.myOffice.faxingNumberLabel}}</div>
|
|
|
</div>
|
|
|
<div class="row-content">
|
|
|
<ul class="number-list">
|
|
|
{{#each faxingNumbers}}
|
|
|
<li>
|
|
|
<div class="features pull-right">
|
|
|
{{#numberFeatures this.features}}{{/numberFeatures}}
|
|
|
</div>
|
|
|
<div class="number-div">{{formatPhoneNumber number}}</div>
|
|
|
</li>
|
|
|
{{else}}
|
|
|
<li>-</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dashboard-box-row fax-number-row link-box" data-category="strategy" data-subcategory="strategy-faxnum">
|
|
|
<div class="row-title">
|
|
|
<div>{{i18n.myOffice.faxNumberLabel}}</div>
|
|
|
</div>
|
|
|
<div class="row-content">
|
|
|
<ul class="number-list">
|
|
|
{{#each faxNumbers}}
|
|
|
<li>
|
|
|
<i class="fa fa-ambulance monster-red pull-right{{#if e911}} enabled{{/if}}"></i>
|
|
|
<i class="fa fa-user monster-green pull-right{{#if callerId}} enabled{{/if}}"></i>
|
|
|
<div class="number-div">{{formatPhoneNumber number}}</div>
|
|
|
</li>
|
|
|
{{else}}
|
|
|
<li>-</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dashboard-box-div total-numbers-div clearfix">
|
|
|
<div class="div-title link-box" data-category="numbers">
|
|
|
<span class="title">{{i18n.myOffice.totalNumbers}}</span>
|
|
|
<span class="number">{{totalNumbers}}</span>
|
|
|
</div>
|
|
|
<div class="chart-container clearfix">
|
|
|
<div class="numbers-canvas-wrapper">
|
|
|
<canvas id="dashboard_assigned_numbers_chart"></canvas>
|
|
|
</div>
|
|
|
<div class="chart-legend assigned-numbers-legend">
|
|
|
<ul>
|
|
|
{{#each assignedNumbersList}}
|
|
|
<li class="legend-element">
|
|
|
<span class="legend-label">{{label}}</span>
|
|
|
<span class="legend-number" style="color: {{color}};">{{count}}</span>
|
|
|
</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-container clearfix">
|
|
|
<div class="numbers-canvas-wrapper">
|
|
|
<canvas id="dashboard_number_types_chart"></canvas>
|
|
|
</div>
|
|
|
<div class="chart-legend number-types-legend">
|
|
|
<ul>
|
|
|
{{#each classifiedNumbers}}
|
|
|
<li class="legend-element">
|
|
|
<i class="fa fa-circle legend-color" style="color: {{color}};"></i>
|
|
|
<span class="legend-label">{{label}}</span>
|
|
|
<span class="legend-number">{{count}}</span>
|
|
|
</li>
|
|
|
{{else}}
|
|
|
<li class="no-number">{{@root.i18n.myOffice.numberChartLegend.noNumber}}</li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="dashboard-box-row">
|
|
|
<div class="row-label">Download Phone System Manual</div>
|
|
|
<div class="row-link pull-right"><a href="#">Print</a></div>
|
|
|
</div> -->
|
|
|
<div class="dashboard-box-row account-info-box">
|
|
|
<div class="row-label">{{i18n.myOffice.directoryLabel}}</div>
|
|
|
<div class="row-value">{{directoryUsers}}</div>
|
|
|
{{#if directoryLink}}
|
|
|
<div class="row-link pull-right"><a href="{{directoryLink}}" target="_blank"><i class="fa fa-download monster-blue"></i> {{i18n.download}}</a></div>
|
|
|
{{/if}}
|
|
|
</div>
|
|
|
<div class="dashboard-box-row account-info-box">
|
|
|
<div class="row-label">{{i18n.myOffice.accountId}}</div>
|
|
|
<div class="row-value">{{account.id}}</div>
|
|
|
</div>
|
|
|
<div class="dashboard-box-row account-info-box">
|
|
|
<div class="row-label">{{i18n.myOffice.accountRealm}}</div>
|
|
|
<div class="row-value">{{account.realm}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|