dashboard.component.html 6.06 KB

    <!-- งานใหม่ -->
  <!-- Active -->
  
<div class="portlet-body">
  <ul class="nav nav-tabs">
    <li class="active sbold font">
      <a href="#" data-toggle="tab" aria-expanded="true">Active</a>
    </li>
    <li class="sbold">
      <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
    </li>
    <li class="sbold">
        <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
    </li>
  </ul>
  <br>
    <div class="panel panel-default">
      <div class="caption">
        <h1 class="icon-bubble font-green-sharp">
          <span class="caption-subject font-green-sharp sbold font"> Active</span>
          <input type="text" placeholder="Search.." >
        </h1>
        <hr>
      </div>
      <div class="panel-body">
        <div class="row">
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
              <a class="dashboard-stat dashboard-stat-v2 red "
                  href="{{item.link}}" 
                  target="_blank"
                  [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
            <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
            <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;" >{{item.days.toFixed(0)}}D</div>
                <div class="visual">
                  <i class="fa fa-comments"></i>
                </div>
                <table>
                  <tr>
                    <div class="details" style="width: calc(100% - 50px);">
                      <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
                        <div class= "number" style=" color: black; display: block; text-align: right;">
                          <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
                        </div>
                      <div class="desc" style=" color: black;">{{item.team}}</div><br>
                      <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
                    </div>
                  </tr>
                  <tr>
                    <div class="details" style="width: calc(100% - 50px);">
                      <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div> 
                    </div>
                  </tr>
                </table>
                </a>
              </div>
            </div>
        </div>
      </div>

      <!-- On Hold -->
      <div class="panel panel-default">
          <div class="caption">
            <h1 class="icon-bubble font-red-mint">
              <span class="caption-subject font-red-mint sbold font"> On Hold</span>
            </h1>
            <hr>
          </div>
          <div class="panel-body">
            <div class="row">
                <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
                  <a class="dashboard-stat dashboard-stat-v2 red "
                      href="{{item.link}}" 
                      target="_blank"
                      [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
                <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
                    <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;" >{{item.days.toFixed(0)}}D</div>
                    <div class="visual">
                      <i class="fa fa-comments"></i>
                    </div>
                    <table>
                      <tr>
                        <div class="details" style="width: calc(100% - 50px);">
                          <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
                            <div class= "number" style=" color: black; display: block; text-align: right;">
                              <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
                            </div>
                          <div class="desc" style=" color: black;">{{item.team}}</div><br>
                          <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
                        </div>
                      </tr>
                      <tr>
                        <div class="details" style="width: calc(100% - 50px);">
                          <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div> 
                        </div>
                      </tr>
                    </table>
                    </a>
                  </div>
            </div>
          </div>
      </div>
  </div>   
      
    <!-- งานเก่า
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
        <a class="dashboard-stat dashboard-stat-v2 {{item.color}}" href="#">
          <div class="avater {{item.color}}">{{item.id}} D</div>
          <div style="margin-left: 20px; margin-top: 10px; color:aliceblue;">{{item.days + " Days"}}</div>
          <div class="visual">
            <i class="fa fa-comments"></i>
          </div>
          
          <div class="details" style="width: calc(100% - 50px);">
              <div class="number">
                <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
              </div>
              <div class="desc">{{item.team}}</div>
              <div class="desc" style="text-align: left;">{{item.comment}}</div> 
          </div>

        </a>
      </div>
    </div> -->