SourceCode / smartzone-home

Download as
Browse Code »

Commit b375b877ef23361d01ccca7a83926aad05d3fa7a

Authored by trainee
1 parent 754c274d
Exists in master

แบ่ง panel, ทำบล็อก, ทำ tab , เพิ่ม active , เพิ่ม onhold

Showing 2 changed files with 103 additions and 33 deletions   Show diff stats
src/app/dashboard/dashboard.component.html
  Diff comments   View file @b375b87
1 1
2 <!-- งานใหม่ --> 2 <!-- งานใหม่ -->
3 - <div class="row">  
4 - <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">  
5 - <a class="dashboard-stat dashboard-stat-v2 red "  
6 - href="{{item.link}}"  
7 - target="_blank"  
8 - [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">  
9 - <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->  
10 - <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->  
11 - <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>  
12 - <div class="visual">  
13 - <i class="fa fa-comments"></i>  
14 - </div>  
15 - <table>  
16 - <tr>  
17 - <div class="details" style="width: calc(100% - 50px);">  
18 - <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>  
19 - <div class= "number" style=" color: black; display: block; text-align: right;">  
20 - <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>  
21 - </div>  
22 - <div class="desc" style=" color: black;">{{item.team}}</div><br>  
23 - <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->  
24 - </div>  
25 - </tr>  
26 - <tr>  
27 - <div class="details" style="width: calc(100% - 50px);">  
28 - <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div> 3 + <!-- Active -->
  4 +<div class="portlet-body">
  5 + <ul class="nav nav-tabs">
  6 + <li class="active sbold">
  7 + <a href="#" data-toggle="tab" aria-expanded="true">Active</a>
  8 + </li>
  9 + <li class="sbold">
  10 + <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
  11 + </li>
  12 + <li class="sbold">
  13 + <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
  14 + </li>
  15 + </ul>
  16 + <br>
  17 + <div class="panel panel-default">
  18 + <div class="caption">
  19 + <h1 class="icon-bubble font-green-sharp">
  20 + <span class="caption-subject font-green-sharp sbold"> Active</span>
  21 + </h1>
  22 + <hr>
  23 + </div>
  24 + <div class="panel-body">
  25 + <div class="row">
  26 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
  27 + <a class="dashboard-stat dashboard-stat-v2 red "
  28 + href="{{item.link}}"
  29 + target="_blank"
  30 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  31 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  32 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  33 + <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>
  34 + <div class="visual">
  35 + <i class="fa fa-comments"></i>
  36 + </div>
  37 + <table>
  38 + <tr>
  39 + <div class="details" style="width: calc(100% - 50px);">
  40 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  41 + <div class= "number" style=" color: black; display: block; text-align: right;">
  42 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  43 + </div>
  44 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  45 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  46 + </div>
  47 + </tr>
  48 + <tr>
  49 + <div class="details" style="width: calc(100% - 50px);">
  50 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  51 + </div>
  52 + </tr>
  53 + </table>
  54 + </a>
29 </div> 55 </div>
30 - </tr>  
31 -  
32 - </table>  
33 -  
34 - </a> 56 + </div>
  57 + </div>
35 </div> 58 </div>
36 - </div>  
37 59
  60 + <!-- On Hold -->
  61 + <div class="panel panel-default">
  62 + <div class="caption">
  63 + <h1 class="icon-bubble font-red-mint">
  64 + <span class="caption-subject font-red-mint sbold"> On Hold</span>
  65 + </h1>
  66 + <hr>
  67 + </div>
  68 + <div class="panel-body">
  69 + <div class="row">
  70 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
  71 + <a class="dashboard-stat dashboard-stat-v2 red "
  72 + href="{{item.link}}"
  73 + target="_blank"
  74 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  75 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  76 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  77 + <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>
  78 + <div class="visual">
  79 + <i class="fa fa-comments"></i>
  80 + </div>
  81 + <table>
  82 + <tr>
  83 + <div class="details" style="width: calc(100% - 50px);">
  84 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  85 + <div class= "number" style=" color: black; display: block; text-align: right;">
  86 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  87 + </div>
  88 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  89 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  90 + </div>
  91 + </tr>
  92 + <tr>
  93 + <div class="details" style="width: calc(100% - 50px);">
  94 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  95 + </div>
  96 + </tr>
  97 + </table>
  98 + </a>
  99 + </div>
  100 + </div>
  101 + </div>
  102 + </div>
  103 + </div>
  104 +
38 <!-- งานเก่า 105 <!-- งานเก่า
39 <div class="row"> 106 <div class="row">
40 <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData"> 107 <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
src/app/dashboard/dashboard.component.scss
  Diff comments   View file @b375b87
@@ -17,5 +17,8 @@ @@ -17,5 +17,8 @@
17 .dashboard-stat { 17 .dashboard-stat {
18 overflow: visible; 18 overflow: visible;
19 height: 220px; 19 height: 220px;
20 - 20 +}
  21 +
  22 +.panel {
  23 + padding: 30px;
21 } 24 }