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 55 </div>
30   - </tr>
31   -
32   - </table>
33   -
34   - </a>
  56 + </div>
  57 + </div>
35 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 106 <div class="row">
40 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 17 .dashboard-stat {
18 18 overflow: visible;
19 19 height: 220px;
20   -
  20 +}
  21 +
  22 +.panel {
  23 + padding: 30px;
21 24 }
... ...