freeswitch/html5/verto/verto_communicator/src/partials/dialpad.html

<div ng-show="loading">
  <h2 ng-show="cancelled" style="margin-top: 4%;" class="text-center">{{ 'CANCELLING' | translate}}</h2>
  <span ng-show="!cancelled">
      <h2 style="margin-top: 4%;" class="text-center">{{ 'DETERMINING_SPEED' | translate}}</h2>
      <h4 style="margin-top: 4%;" class="text-center">
          {{ 'CALLING_TO' | translate}} {{ dialpadNumber }}...
          <a class="btn btn-sm btn-raised btn-warning" ng-click="cancel()">
              Cancel<div class="ripple-container"></div>
          </a>
      </h4>
  </span>
  <svg class="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
  </svg>
</div>
<div class="centered-block-frame" id="dialpad" ng-show="!loading">
  <div id="call-history-wrapper">
    <div id="call_history" class="shadow-z-2 panel">
      <div class="panel-heading">
        <div class="panel-title">
            <i class="mdi-navigation-arrow-back back-icon" ng-click="viewCallsList()" ng-if="call_list"></i>
            <span ng-if="!call_list">{{ 'CALL_HISTORY' | translate}}</span>
            <span ng-if="call_list">{{ call_list[0].number }}</span>

            <span class="pull-right pull-right-margin dropdown">
              <a href="" class="dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="true">
                <i class="mdi-navigation-more-vert"></i>
              </a>
              <ul class="dropdown-menu">
                  <li><a href="" ng-click="clearCallHistory()">{{ 'CLEAR_CALL_HISTORY' | translate}}</a></li>
              </ul>
            </span>
        </div>
      </div>
      <ul class="call-history">
        <div ng-if="!has_history">
          <p class="text-center text-muted">{{ 'NO_CALL_HISTORY' | translate}}</p>
        </div>

        <li ng-repeat="number in history_control track by number" ng-if="!call_list">
          <a ng-init="call = call_history[number][0]" class="inline-block" ng-show="call.number" href="" ng-dblclick="$parent.call(call.number)" ng-click="$parent.fillDialpadNumber(call.number)">
            <div class="call-history-info">
            <i ng-if="call.direction == 'inbound'" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
            <i ng-if="call.direction == 'outbound'" class="mdi-communication-call-made call_direction"></i>
            <h2 class="dialpad-number dialpad-number-limited">{{ call.number }} ({{ call_history[number].length }})</h2>
            <br/>
            <span class="date">{{ call.call_start }}</span>
            </div>
          </a>
          <a href="" ng-click="$parent.viewCallsList(call_history[number])" class="list-icon">
            <i class="mdi-action-view-list"></i>
          </a>
        </li>

        <li ng-repeat="call in call_list">
          <a ng-show="call.number" href="" ng-dblclick="$parent.call(call.number)" ng-click="$parent.fillDialpadNumber(call.number)">
            <i ng-if="call.direction == 'inbound'" class="icon-tiny" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
            <i ng-if="call.direction == 'outbound'" class="icon-tiny mdi-communication-call-made"></i>
            <span class="dialpad-alpha">{{ call.call_start }}</span>
          </a>

        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-4 col-sm-12 col-xs-12 centered-block">
    <div class="panel panel-default shadow-z-2" ng-class="{'shadow-z-4': call_history, 'shadow-z-2': !call_history}">
      <form name="form">
        <div class="input-group dialpad-display">
          <span class="input-group-btn-left">
            <a href="" ng-click="toggleCallHistory()">
              <i class="mdi-action-settings-phone"></i>
            </a>
          </span>
          <input name="dialpadnumber" type="text" class="form-control text-center" placeholder="{{ 'ENTER_EXTENSION' | translate}}" ng-model="dialpadNumber" autofocus/>
          <span class="input-group-btn">
            <a href="" ng-click="backspace()">
              <i class="mdi-content-backspace"></i>
            </a>
          </span>
        </div>
        <div class="panel-body">
          <div class="dialpad-numbers">
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(1)">
                  <h2 class="dialpad-number">1</h2>
                  <span class="dialpad-alpha">./@</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(2)">
                  <h2 class="dialpad-number">2</h2>
                  <span class="dialpad-alpha">ABC</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(3)">
                  <h2 class="dialpad-number">3</h2>
                  <span class="dialpad-alpha">DEF</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(4)">
                  <h2 class="dialpad-number">4</h2>
                  <span class="dialpad-alpha">GHI</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(5)">
                  <h2 class="dialpad-number">5</h2>
                  <span class="dialpad-alpha">JKL</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(6)">
                  <h2 class="dialpad-number">6</h2>
                  <span class="dialpad-alpha">MNO</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(7)">
                  <h2 class="dialpad-number">7</h2>
                  <span class="dialpad-alpha">PQRS</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(8)">
                  <h2 class="dialpad-number">8</h2>
                  <span class="dialpad-alpha">TUV</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(9)">
                  <h2 class="dialpad-number">9</h2>
                  <span class="dialpad-alpha">WXYZ</span>
                </a>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf('*')">
                  <h2 class="dialpad-number dialpad-star">*</h2>
                  <span class="dialpad-alpha"></span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf(0)">
                  <h2 class="dialpad-number">0</h2>
                  <span class="dialpad-alpha">+</span>
                </a>
              </div>
              <div class="col-md-4 col-xs-4">
                <a class="btn btn-block" href="" ng-click="dtmf('#')">
                  <h2 class="dialpad-number dialpad-pound">#</h2>
                  <span class="dialpad-alpha"></span>
                </a>
              </div>
            </div>
          </div>
          <div class="form-group text-center">
            <button type="submit" class="btn btn-success btn-fab" ng-click="call(dialpadNumber)" title="{{ 'CALL_EXTENSION' | translate}}">
              <i class="mdi-communication-call"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>