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,7 +4,7 @@ | ||
| 4 | <div class="tabbable-custom nav-justified"> | 4 | <div class="tabbable-custom nav-justified"> |
| 5 | <ul class="nav nav-tabs"> | 5 | <ul class="nav nav-tabs"> |
| 6 | <li class="active sbold font"> | 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 | <span class="badge"> {{resultNum}} </span> | 8 | <span class="badge"> {{resultNum}} </span> |
| 9 | </a> | 9 | </a> |
| 10 | </li> | 10 | </li> |
| @@ -38,9 +38,14 @@ | @@ -38,9 +38,14 @@ | ||
| 38 | <span class="badge"> {{resultNum6}} </span> | 38 | <span class="badge"> {{resultNum6}} </span> |
| 39 | </a> | 39 | </a> |
| 40 | </li> | 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 | </ul> | 46 | </ul> |
| 42 | <div class="tab-content"> | 47 | <div class="tab-content"> |
| 43 | - <div class="panel tab-pane active" id="tab1"> | 48 | + <div class="panel tab-pane " id="tab1"> |
| 44 | <div class="caption"> | 49 | <div class="caption"> |
| 45 | <h1 class="icon-bubble font-green-sharp"> | 50 | <h1 class="icon-bubble font-green-sharp"> |
| 46 | <span class="caption-subject font-green-sharp sbold font"> Active</span> | 51 | <span class="caption-subject font-green-sharp sbold font"> Active</span> |
| @@ -54,13 +59,14 @@ | @@ -54,13 +59,14 @@ | ||
| 54 | </div> | 59 | </div> |
| 55 | <br> | 60 | <br> |
| 56 | <br> | 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 | <hr> | 63 | <hr> |
| 59 | <br> | 64 | <br> |
| 60 | </div> | 65 | </div> |
| 61 | <div class="panel-body"> | 66 | <div class="panel-body"> |
| 62 | <div class="row"> | 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 | <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> | 70 | <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> |
| 65 | <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> | 71 | <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> |
| 66 | <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> | 72 | <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> |
| @@ -112,7 +118,7 @@ | @@ -112,7 +118,7 @@ | ||
| 112 | </div> | 118 | </div> |
| 113 | <br> | 119 | <br> |
| 114 | <br> | 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 | <hr> | 122 | <hr> |
| 117 | <br> | 123 | <br> |
| 118 | </div> | 124 | </div> |
| @@ -167,7 +173,7 @@ | @@ -167,7 +173,7 @@ | ||
| 167 | </div> | 173 | </div> |
| 168 | <br> | 174 | <br> |
| 169 | <br> | 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 | <hr> | 177 | <hr> |
| 172 | <br> | 178 | <br> |
| 173 | </div> | 179 | </div> |
| @@ -826,11 +832,75 @@ | @@ -826,11 +832,75 @@ | ||
| 826 | </div> | 832 | </div> |
| 827 | </div> | 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 | </div> | 901 | </div> |
| 830 | - </div> | ||
| 831 | -</div> | ||
| 832 | 902 | ||
| 833 | -<!-- งานเก่า | 903 | + <!-- งานเก่า |
| 834 | <div class="row"> | 904 | <div class="row"> |
| 835 | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData"> | 905 | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData"> |
| 836 | <a class="dashboard-stat dashboard-stat-v2 {{item.color}}" href="#"> | 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,7 +219,11 @@ export class DashboardComponent implements OnInit { | ||
| 219 | valueN: '' | 219 | valueN: '' |
| 220 | }, | 220 | }, |
| 221 | ]; | 221 | ]; |
| 222 | - | 222 | + |
| 223 | + showSecret = false; | ||
| 224 | + onToggleDetails() { | ||
| 225 | + this.showSecret = !this.showSecret; | ||
| 226 | + } | ||
| 223 | 227 | ||
| 224 | async ngOnInit() { | 228 | async ngOnInit() { |
| 225 | //----------------------------1------------------------ | 229 | //----------------------------1------------------------ |
| @@ -242,9 +246,10 @@ export class DashboardComponent implements OnInit { | @@ -242,9 +246,10 @@ export class DashboardComponent implements OnInit { | ||
| 242 | this.resultNum = this.resultData.length; | 246 | this.resultNum = this.resultData.length; |
| 243 | this.Show1.push(this.resultData[i]); | 247 | this.Show1.push(this.resultData[i]); |
| 244 | } | 248 | } |
| 245 | - | 249 | + |
| 246 | } else { | 250 | } else { |
| 247 | this.resultData = []; | 251 | this.resultData = []; |
| 252 | + this.showSecret = !this.showSecret; | ||
| 248 | } | 253 | } |
| 249 | } catch (error) { | 254 | } catch (error) { |
| 250 | console.log(error); | 255 | console.log(error); |
| @@ -679,6 +684,7 @@ export class DashboardComponent implements OnInit { | @@ -679,6 +684,7 @@ export class DashboardComponent implements OnInit { | ||
| 679 | } | 684 | } |
| 680 | 685 | ||
| 681 | this.resultData = resultArray; | 686 | this.resultData = resultArray; |
| 687 | + console.log(this.resultData); | ||
| 682 | } | 688 | } |
| 683 | /* buttondataOnhold1 */ | 689 | /* buttondataOnhold1 */ |
| 684 | getButton1Onhold(valueN) { | 690 | getButton1Onhold(valueN) { |
src/app/dashboard/filter.pipe.ts
| @@ -8,29 +8,30 @@ export class FilterPipe implements PipeTransform { | @@ -8,29 +8,30 @@ export class FilterPipe implements PipeTransform { | ||
| 8 | transform(value: any, filterString: string, propName: any): any { | 8 | transform(value: any, filterString: string, propName: any): any { |
| 9 | console.log('propName: ', propName); | 9 | console.log('propName: ', propName); |
| 10 | 10 | ||
| 11 | + | ||
| 11 | if (value.length === 0) { | 12 | if (value.length === 0) { |
| 12 | return value; | 13 | return value; |
| 13 | } | 14 | } |
| 14 | - | 15 | + var txt = "0 hi" |
| 15 | const resultArray = []; | 16 | const resultArray = []; |
| 16 | for (const item of value) { | 17 | for (const item of value) { |
| 17 | console.log('item: ', item); | 18 | console.log('item: ', item); |
| 18 | 19 | ||
| 19 | var st = ''; | 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 | st += item['team'].toLowerCase(); | 23 | st += item['team'].toLowerCase(); |
| 23 | } | 24 | } |
| 24 | - if(item['COMMENT']){ | 25 | + if (item['COMMENT']) { |
| 25 | st += item['COMMENT'].toLowerCase(); | 26 | st += item['COMMENT'].toLowerCase(); |
| 26 | } | 27 | } |
| 27 | - if(item['custgroupName']){ | 28 | + if (item['custgroupName']) { |
| 28 | st += item['custgroupName'].toLowerCase(); | 29 | st += item['custgroupName'].toLowerCase(); |
| 29 | } | 30 | } |
| 30 | - if(item['STATUS']){ | 31 | + if (item['STATUS']) { |
| 31 | st += item['STATUS'].toLowerCase(); | 32 | st += item['STATUS'].toLowerCase(); |
| 32 | } | 33 | } |
| 33 | - if(item['type']){ | 34 | + if (item['type']) { |
| 34 | st += item['type'].toLowerCase(); | 35 | st += item['type'].toLowerCase(); |
| 35 | } | 36 | } |
| 36 | 37 | ||
| @@ -39,9 +40,13 @@ export class FilterPipe implements PipeTransform { | @@ -39,9 +40,13 @@ export class FilterPipe implements PipeTransform { | ||
| 39 | resultArray.push(item); | 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 | } |