SourceCode / smartzone-home

Download as
Browse Code »

Commit b2f214e7559482f6bd6cce7bee2e8bd0ab5e5ff7

Authored by trainee
1 parent 0f4a9983
Exists in master

เพิ่มแท็ปและใส่ข้อมูล

Showing 1 changed file with 430 additions and 2 deletions   Show diff stats
src/app/dashboard/dashboard.component.html
  Diff comments   View file @b2f214e
@@ -14,6 +14,12 @@ @@ -14,6 +14,12 @@
14 <li class="sbold"> 14 <li class="sbold">
15 <a href="#tab3" data-toggle="tab" aria-expanded="false">page 3</a> 15 <a href="#tab3" data-toggle="tab" aria-expanded="false">page 3</a>
16 </li> 16 </li>
  17 + <li class="sbold">
  18 + <a href="#tab4" data-toggle="tab" aria-expanded="false">page 4</a>
  19 + </li>
  20 + <li class="sbold">
  21 + <a href="#tab5" data-toggle="tab" aria-expanded="false">page 5</a>
  22 + </li>
17 </ul> 23 </ul>
18 <div class="tab-content"> 24 <div class="tab-content">
19 <div class="panel tab-pane active" id="tab1"> 25 <div class="panel tab-pane active" id="tab1">
@@ -121,10 +127,432 @@ @@ -121,10 +127,432 @@
121 </div> 127 </div>
122 </div> 128 </div>
123 </div> 129 </div>
  130 + </div>
  131 +
  132 + <div class="panel tab-pane" id="tab2">
  133 + <div class="caption">
  134 + <h1 class="icon-bubble font-green-sharp">
  135 + <span class="caption-subject font-green-sharp sbold font"> Active</span>
  136 + </h1>
  137 +
  138 + <div class="input-group" style="float: right; margin-top: 11px;">
  139 + <div class="input-icon right">
  140 + <i class="icon-magnifier">
  141 + </i>
  142 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
  143 + </div>
  144 + </div>
  145 +
  146 + <hr>
  147 + <br>
  148 + </div>
  149 + <div class="panel-body">
  150 + <div class="row">
  151 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' ">
  152 + <a class="dashboard-stat dashboard-stat-v2 red "
  153 + href="{{item.link}}"
  154 + target="_blank"
  155 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  156 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  157 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  158 + <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>
  159 + <div class="visual">
  160 + <i class="fa fa-comments"></i>
  161 + </div>
  162 + <table>
  163 + <tr>
  164 + <div class="details" style="width: calc(100% - 50px);">
  165 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  166 + <div class= "number" style=" color: black; display: block; text-align: right;">
  167 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  168 + </div>
  169 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  170 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  171 + </div>
  172 + </tr>
  173 + <tr>
  174 + <div class="details" style="width: calc(100% - 50px);">
  175 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  176 + </div>
  177 + </tr>
  178 + </table>
  179 + </a>
  180 + </div>
  181 + </div>
  182 + </div>
  183 + <br>
  184 + <br>
  185 + <br>
  186 + <br>
  187 + <!-- On Hold -->
  188 +
  189 + <div class="caption">
  190 + <h1 class="icon-bubble font-grey-gallery">
  191 + <span class="caption-subject font-grey-gallery sbold font"> On Hold</span>
  192 + </h1>
  193 + <div class="input-group" style="float: right; margin-top: 11px;">
  194 + <div class="input-icon right">
  195 + <i class="icon-magnifier">
  196 + </i>
  197 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearchOnHold">
  198 + </div>
  199 + </div>
  200 + <hr>
  201 + <br>
  202 + </div>
  203 + <div class="panel-body">
  204 + <div class="row">
  205 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultDataOnHold | filter:FilterSearchOnHold: '' ">
  206 + <a class="dashboard-stat dashboard-stat-v2 red "
  207 + href="{{item.link}}"
  208 + target="_blank"
  209 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  210 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  211 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  212 + <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>
  213 + <div class="visual">
  214 + <i class="fa fa-comments"></i>
  215 + </div>
  216 + <table>
  217 + <tr>
  218 + <div class="details" style="width: calc(100% - 50px);">
  219 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  220 + <div class= "number" style=" color: black; display: block; text-align: right;">
  221 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  222 + </div>
  223 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  224 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  225 + </div>
  226 + </tr>
  227 + <tr>
  228 + <div class="details" style="width: calc(100% - 50px);">
  229 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  230 + </div>
  231 + </tr>
  232 + </table>
  233 + </a>
  234 + </div>
  235 + </div>
  236 + </div>
  237 + </div>
  238 + <div class="panel tab-pane" id="tab3">
  239 + <div class="caption">
  240 + <h1 class="icon-bubble font-green-sharp">
  241 + <span class="caption-subject font-green-sharp sbold font"> Active</span>
  242 + </h1>
  243 +
  244 + <div class="input-group" style="float: right; margin-top: 11px;">
  245 + <div class="input-icon right">
  246 + <i class="icon-magnifier">
  247 + </i>
  248 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
  249 + </div>
  250 + </div>
  251 +
  252 + <hr>
  253 + <br>
  254 + </div>
  255 + <div class="panel-body">
  256 + <div class="row">
  257 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' ">
  258 + <a class="dashboard-stat dashboard-stat-v2 red "
  259 + href="{{item.link}}"
  260 + target="_blank"
  261 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  262 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  263 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  264 + <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>
  265 + <div class="visual">
  266 + <i class="fa fa-comments"></i>
  267 + </div>
  268 + <table>
  269 + <tr>
  270 + <div class="details" style="width: calc(100% - 50px);">
  271 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  272 + <div class= "number" style=" color: black; display: block; text-align: right;">
  273 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  274 + </div>
  275 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  276 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  277 + </div>
  278 + </tr>
  279 + <tr>
  280 + <div class="details" style="width: calc(100% - 50px);">
  281 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  282 + </div>
  283 + </tr>
  284 + </table>
  285 + </a>
  286 + </div>
  287 + </div>
  288 + </div>
  289 + <br>
  290 + <br>
  291 + <br>
  292 + <br>
  293 + <!-- On Hold -->
124 294
  295 + <div class="caption">
  296 + <h1 class="icon-bubble font-grey-gallery">
  297 + <span class="caption-subject font-grey-gallery sbold font"> On Hold</span>
  298 + </h1>
  299 + <div class="input-group" style="float: right; margin-top: 11px;">
  300 + <div class="input-icon right">
  301 + <i class="icon-magnifier">
  302 + </i>
  303 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearchOnHold">
  304 + </div>
  305 + </div>
  306 + <hr>
  307 + <br>
  308 + </div>
  309 + <div class="panel-body">
  310 + <div class="row">
  311 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultDataOnHold | filter:FilterSearchOnHold: '' ">
  312 + <a class="dashboard-stat dashboard-stat-v2 red "
  313 + href="{{item.link}}"
  314 + target="_blank"
  315 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  316 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  317 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  318 + <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>
  319 + <div class="visual">
  320 + <i class="fa fa-comments"></i>
  321 + </div>
  322 + <table>
  323 + <tr>
  324 + <div class="details" style="width: calc(100% - 50px);">
  325 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  326 + <div class= "number" style=" color: black; display: block; text-align: right;">
  327 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  328 + </div>
  329 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  330 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  331 + </div>
  332 + </tr>
  333 + <tr>
  334 + <div class="details" style="width: calc(100% - 50px);">
  335 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  336 + </div>
  337 + </tr>
  338 + </table>
  339 + </a>
  340 + </div>
  341 + </div>
  342 + </div>
  343 + </div>
  344 + <div class="panel tab-pane" id="tab4">
  345 + <div class="caption">
  346 + <h1 class="icon-bubble font-green-sharp">
  347 + <span class="caption-subject font-green-sharp sbold font"> Active</span>
  348 + </h1>
  349 +
  350 + <div class="input-group" style="float: right; margin-top: 11px;">
  351 + <div class="input-icon right">
  352 + <i class="icon-magnifier">
  353 + </i>
  354 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
  355 + </div>
  356 + </div>
  357 +
  358 + <hr>
  359 + <br>
  360 + </div>
  361 + <div class="panel-body">
  362 + <div class="row">
  363 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' ">
  364 + <a class="dashboard-stat dashboard-stat-v2 red "
  365 + href="{{item.link}}"
  366 + target="_blank"
  367 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  368 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  369 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  370 + <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>
  371 + <div class="visual">
  372 + <i class="fa fa-comments"></i>
  373 + </div>
  374 + <table>
  375 + <tr>
  376 + <div class="details" style="width: calc(100% - 50px);">
  377 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  378 + <div class= "number" style=" color: black; display: block; text-align: right;">
  379 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  380 + </div>
  381 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  382 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  383 + </div>
  384 + </tr>
  385 + <tr>
  386 + <div class="details" style="width: calc(100% - 50px);">
  387 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  388 + </div>
  389 + </tr>
  390 + </table>
  391 + </a>
  392 + </div>
  393 + </div>
  394 + </div>
  395 + <br>
  396 + <br>
  397 + <br>
  398 + <br>
  399 + <!-- On Hold -->
  400 +
  401 + <div class="caption">
  402 + <h1 class="icon-bubble font-grey-gallery">
  403 + <span class="caption-subject font-grey-gallery sbold font"> On Hold</span>
  404 + </h1>
  405 + <div class="input-group" style="float: right; margin-top: 11px;">
  406 + <div class="input-icon right">
  407 + <i class="icon-magnifier">
  408 + </i>
  409 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearchOnHold">
  410 + </div>
  411 + </div>
  412 + <hr>
  413 + <br>
  414 + </div>
  415 + <div class="panel-body">
  416 + <div class="row">
  417 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultDataOnHold | filter:FilterSearchOnHold: '' ">
  418 + <a class="dashboard-stat dashboard-stat-v2 red "
  419 + href="{{item.link}}"
  420 + target="_blank"
  421 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  422 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  423 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  424 + <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>
  425 + <div class="visual">
  426 + <i class="fa fa-comments"></i>
  427 + </div>
  428 + <table>
  429 + <tr>
  430 + <div class="details" style="width: calc(100% - 50px);">
  431 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  432 + <div class= "number" style=" color: black; display: block; text-align: right;">
  433 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  434 + </div>
  435 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  436 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  437 + </div>
  438 + </tr>
  439 + <tr>
  440 + <div class="details" style="width: calc(100% - 50px);">
  441 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  442 + </div>
  443 + </tr>
  444 + </table>
  445 + </a>
  446 + </div>
  447 + </div>
  448 + </div>
  449 + </div>
  450 + <div class="panel tab-pane" id="tab5">
  451 + <div class="caption">
  452 + <h1 class="icon-bubble font-green-sharp">
  453 + <span class="caption-subject font-green-sharp sbold font"> Active</span>
  454 + </h1>
  455 +
  456 + <div class="input-group" style="float: right; margin-top: 11px;">
  457 + <div class="input-icon right">
  458 + <i class="icon-magnifier">
  459 + </i>
  460 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
  461 + </div>
  462 + </div>
  463 +
  464 + <hr>
  465 + <br>
  466 + </div>
  467 + <div class="panel-body">
  468 + <div class="row">
  469 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' ">
  470 + <a class="dashboard-stat dashboard-stat-v2 red "
  471 + href="{{item.link}}"
  472 + target="_blank"
  473 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  474 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  475 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  476 + <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>
  477 + <div class="visual">
  478 + <i class="fa fa-comments"></i>
  479 + </div>
  480 + <table>
  481 + <tr>
  482 + <div class="details" style="width: calc(100% - 50px);">
  483 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  484 + <div class= "number" style=" color: black; display: block; text-align: right;">
  485 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  486 + </div>
  487 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  488 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  489 + </div>
  490 + </tr>
  491 + <tr>
  492 + <div class="details" style="width: calc(100% - 50px);">
  493 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  494 + </div>
  495 + </tr>
  496 + </table>
  497 + </a>
  498 + </div>
  499 + </div>
  500 + </div>
  501 + <br>
  502 + <br>
  503 + <br>
  504 + <br>
  505 + <!-- On Hold -->
  506 +
  507 + <div class="caption">
  508 + <h1 class="icon-bubble font-grey-gallery">
  509 + <span class="caption-subject font-grey-gallery sbold font"> On Hold</span>
  510 + </h1>
  511 + <div class="input-group" style="float: right; margin-top: 11px;">
  512 + <div class="input-icon right">
  513 + <i class="icon-magnifier">
  514 + </i>
  515 + <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearchOnHold">
  516 + </div>
  517 + </div>
  518 + <hr>
  519 + <br>
  520 + </div>
  521 + <div class="panel-body">
  522 + <div class="row">
  523 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultDataOnHold | filter:FilterSearchOnHold: '' ">
  524 + <a class="dashboard-stat dashboard-stat-v2 red "
  525 + href="{{item.link}}"
  526 + target="_blank"
  527 + [ngStyle] = "{'background-color': getColorDay(item.days.toFixed(0))}">
  528 + <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
  529 + <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
  530 + <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>
  531 + <div class="visual">
  532 + <i class="fa fa-comments"></i>
  533 + </div>
  534 + <table>
  535 + <tr>
  536 + <div class="details" style="width: calc(100% - 50px);">
  537 + <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
  538 + <div class= "number" style=" color: black; display: block; text-align: right;">
  539 + <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
  540 + </div>
  541 + <div class="desc" style=" color: black;">{{item.team}}</div><br>
  542 + <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
  543 + </div>
  544 + </tr>
  545 + <tr>
  546 + <div class="details" style="width: calc(100% - 50px);">
  547 + <div class="desc" style="text-align: left; color: black; margin-top: 100px;">{{item.COMMENT | short}}</div>
  548 + </div>
  549 + </tr>
  550 + </table>
  551 + </a>
  552 + </div>
  553 + </div>
  554 + </div>
125 </div> 555 </div>
126 - <div class="panel tab-pane" id="tab2">page 2</div>  
127 - <div class="panel tab-pane" id="tab3">page 3</div>  
128 </div> 556 </div>
129 </div> 557 </div>
130 </div> 558 </div>