Commit a791c0bdf9bd99040ae970679a4f5b9f5e14ea45
1 parent
46c1d3fa
Exists in
master
เพิ่มแท็บเพื่อลองงาน
Showing
3 changed files
with
102 additions
and
21 deletions
Show diff stats
src/app/dashboard/dashboard.component.html
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | <div class="tabbable-custom nav-justified"> |
| 5 | 5 | <ul class="nav nav-tabs"> |
| 6 | 6 | <li class="active sbold font"> |
| 7 | - <a href="#tab1" data-toggle="tab" aria-expanded="true">ติดตั้ง | |
| 7 | + <a href="#tab1" data-toggle="tab" aria-expanded="false">ติดตั้ง | |
| 8 | 8 | <span class="badge"> {{resultNum}} </span> |
| 9 | 9 | </a> |
| 10 | 10 | </li> |
| ... | ... | @@ -38,9 +38,14 @@ |
| 38 | 38 | <span class="badge"> {{resultNum6}} </span> |
| 39 | 39 | </a> |
| 40 | 40 | </li> |
| 41 | + <li class="sbold"> | |
| 42 | + <a href="#tab8" data-toggle="tab" aria-expanded="true">Smart IT | |
| 43 | + <span class="badge"> </span> | |
| 44 | + </a> | |
| 45 | + </li> | |
| 41 | 46 | </ul> |
| 42 | 47 | <div class="tab-content"> |
| 43 | - <div class="panel tab-pane active" id="tab1"> | |
| 48 | + <div class="panel tab-pane " id="tab1"> | |
| 44 | 49 | <div class="caption"> |
| 45 | 50 | <h1 class="icon-bubble font-green-sharp"> |
| 46 | 51 | <span class="caption-subject font-green-sharp sbold font"> Active</span> |
| ... | ... | @@ -54,13 +59,14 @@ |
| 54 | 59 | </div> |
| 55 | 60 | <br> |
| 56 | 61 | <br> |
| 57 | - <button type="button" class ="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button> | |
| 62 | + <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button> | |
| 58 | 63 | <hr> |
| 59 | 64 | <br> |
| 60 | 65 | </div> |
| 61 | 66 | <div class="panel-body"> |
| 62 | 67 | <div class="row"> |
| 63 | - <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' | filter:FilterSearchButton: 'name.valueN' "> | |
| 68 | + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''"> | |
| 69 | + <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p> | |
| 64 | 70 | <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> |
| 65 | 71 | <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> |
| 66 | 72 | <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> |
| ... | ... | @@ -112,7 +118,7 @@ |
| 112 | 118 | </div> |
| 113 | 119 | <br> |
| 114 | 120 | <br> |
| 115 | - <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button> | |
| 121 | + <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button> | |
| 116 | 122 | <hr> |
| 117 | 123 | <br> |
| 118 | 124 | </div> |
| ... | ... | @@ -167,7 +173,7 @@ |
| 167 | 173 | </div> |
| 168 | 174 | <br> |
| 169 | 175 | <br> |
| 170 | - <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button> | |
| 176 | + <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button> | |
| 171 | 177 | <hr> |
| 172 | 178 | <br> |
| 173 | 179 | </div> |
| ... | ... | @@ -826,11 +832,75 @@ |
| 826 | 832 | </div> |
| 827 | 833 | </div> |
| 828 | 834 | |
| 835 | + <div class="panel tab-pane active" id="tab8"> | |
| 836 | + <div class="container"> | |
| 837 | + <div class="row"> | |
| 838 | + <div class="col-xs-12"> | |
| 839 | + <!-- <button class="btn" (click)="onToggleDetails()"> | |
| 840 | + Display Details</button> | |
| 841 | + <p *ngIf="showSecret">Sercet Password = tuna</p> --> | |
| 842 | + <hr> | |
| 843 | + <div class="input-group" style="float: right; margin-top: 11px;"> | |
| 844 | + <div class="input-icon right"> | |
| 845 | + <i class="icon-magnifier"> | |
| 846 | + </i> | |
| 847 | + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch"> | |
| 848 | + </div> | |
| 849 | + </div> | |
| 850 | + <br> | |
| 851 | + <br> | |
| 852 | + <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button> | |
| 853 | + <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p> | |
| 854 | + <hr> | |
| 855 | + <br> | |
| 856 | + </div> | |
| 857 | + <div class="panel-body"> | |
| 858 | + <div class="row"> | |
| 859 | + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''"> | |
| 860 | + | |
| 861 | + | |
| 862 | + | |
| 863 | + | |
| 864 | + | |
| 865 | + | |
| 866 | + <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> | |
| 867 | + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> | |
| 868 | + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> | |
| 869 | + <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> | |
| 870 | + <div class="visual"> | |
| 871 | + <i class="fa fa-comments"></i> | |
| 872 | + </div> | |
| 873 | + <table> | |
| 874 | + <tr> | |
| 875 | + <div class="details" style="width: calc(100% - 50px);"> | |
| 876 | + <div style="text-align: right; margin-top: -60px; color: black;">{{item.type | textshort}}</div> | |
| 877 | + <div style="text-align: right; color: black;">{{item.STATUS}}</div> | |
| 878 | + <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;"> | |
| 879 | + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span> | |
| 880 | + </div> | |
| 881 | + <div class="desc" style=" color: black;">{{item.team}}</div> | |
| 882 | + <br> | |
| 883 | + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> --> | |
| 884 | + </div> | |
| 885 | + </tr> | |
| 886 | + <tr> | |
| 887 | + <div class="details" style="width: calc(100% - 50px);"> | |
| 888 | + <div class="desc" style="text-align: left; color: black; margin-top: 120px;">{{item.COMMENT | short}}</div> | |
| 889 | + <!-- <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div> --> | |
| 890 | + <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div> | |
| 891 | + </div> | |
| 892 | + </tr> | |
| 893 | + </table> | |
| 894 | + </a> | |
| 895 | + </div> | |
| 896 | + </div> | |
| 897 | + </div> | |
| 898 | + </div> | |
| 899 | + </div> | |
| 900 | + </div> | |
| 829 | 901 | </div> |
| 830 | - </div> | |
| 831 | -</div> | |
| 832 | 902 | |
| 833 | -<!-- งานเก่า | |
| 903 | + <!-- งานเก่า | |
| 834 | 904 | <div class="row"> |
| 835 | 905 | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData"> |
| 836 | 906 | <a class="dashboard-stat dashboard-stat-v2 {{item.color}}" href="#"> | ... | ... |
src/app/dashboard/dashboard.component.ts
| ... | ... | @@ -219,7 +219,11 @@ export class DashboardComponent implements OnInit { |
| 219 | 219 | valueN: '' |
| 220 | 220 | }, |
| 221 | 221 | ]; |
| 222 | - | |
| 222 | + | |
| 223 | + showSecret = false; | |
| 224 | + onToggleDetails() { | |
| 225 | + this.showSecret = !this.showSecret; | |
| 226 | + } | |
| 223 | 227 | |
| 224 | 228 | async ngOnInit() { |
| 225 | 229 | //----------------------------1------------------------ |
| ... | ... | @@ -242,9 +246,10 @@ export class DashboardComponent implements OnInit { |
| 242 | 246 | this.resultNum = this.resultData.length; |
| 243 | 247 | this.Show1.push(this.resultData[i]); |
| 244 | 248 | } |
| 245 | - | |
| 249 | + | |
| 246 | 250 | } else { |
| 247 | 251 | this.resultData = []; |
| 252 | + this.showSecret = !this.showSecret; | |
| 248 | 253 | } |
| 249 | 254 | } catch (error) { |
| 250 | 255 | console.log(error); |
| ... | ... | @@ -679,6 +684,7 @@ export class DashboardComponent implements OnInit { |
| 679 | 684 | } |
| 680 | 685 | |
| 681 | 686 | this.resultData = resultArray; |
| 687 | + console.log(this.resultData); | |
| 682 | 688 | } |
| 683 | 689 | /* buttondataOnhold1 */ |
| 684 | 690 | getButton1Onhold(valueN) { | ... | ... |
src/app/dashboard/filter.pipe.ts
| ... | ... | @@ -8,29 +8,30 @@ export class FilterPipe implements PipeTransform { |
| 8 | 8 | transform(value: any, filterString: string, propName: any): any { |
| 9 | 9 | console.log('propName: ', propName); |
| 10 | 10 | |
| 11 | + | |
| 11 | 12 | if (value.length === 0) { |
| 12 | 13 | return value; |
| 13 | 14 | } |
| 14 | - | |
| 15 | + var txt = "0 hi" | |
| 15 | 16 | const resultArray = []; |
| 16 | 17 | for (const item of value) { |
| 17 | 18 | console.log('item: ', item); |
| 18 | 19 | |
| 19 | 20 | var st = ''; |
| 20 | - //st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ; | |
| 21 | - if(item['team']){ | |
| 21 | + //st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ; | |
| 22 | + if (item['team']) { | |
| 22 | 23 | st += item['team'].toLowerCase(); |
| 23 | 24 | } |
| 24 | - if(item['COMMENT']){ | |
| 25 | + if (item['COMMENT']) { | |
| 25 | 26 | st += item['COMMENT'].toLowerCase(); |
| 26 | 27 | } |
| 27 | - if(item['custgroupName']){ | |
| 28 | + if (item['custgroupName']) { | |
| 28 | 29 | st += item['custgroupName'].toLowerCase(); |
| 29 | 30 | } |
| 30 | - if(item['STATUS']){ | |
| 31 | + if (item['STATUS']) { | |
| 31 | 32 | st += item['STATUS'].toLowerCase(); |
| 32 | 33 | } |
| 33 | - if(item['type']){ | |
| 34 | + if (item['type']) { | |
| 34 | 35 | st += item['type'].toLowerCase(); |
| 35 | 36 | } |
| 36 | 37 | |
| ... | ... | @@ -39,9 +40,13 @@ export class FilterPipe implements PipeTransform { |
| 39 | 40 | resultArray.push(item); |
| 40 | 41 | } |
| 41 | 42 | } |
| 42 | - | |
| 43 | - | |
| 44 | - return resultArray; | |
| 43 | + | |
| 44 | + // if(resultArray === []){ | |
| 45 | + // return resultArray.push(txt); | |
| 46 | + // }else{ | |
| 47 | + return resultArray; | |
| 48 | + | |
| 49 | + | |
| 45 | 50 | } |
| 46 | 51 | |
| 47 | 52 | } | ... | ... |