• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     :root {
    11.       /* Define custom colors for build status */
    12.       --build-success: #00c853;
    13.       --build-failed: #d50000;
    14.       --build: pending: #ffab00;
    15.       --zg-caption-background: #3f51b5;
    16.       --zg-caption-color: #fff;
    17.  
    18.       /* Modify ZG Display */
    19.       --zing-grid-background: #fff;
    20.     }
    21.  
    22.  
    23.     /* ZingGrid Overrides
    24. ---------------------------------- */
    25.     /* Hide grid's body 'header' cells */
    26.     zg-head {
    27.       display: none;
    28.     }
    29.  
    30.     /* Turn off native row highlighting */
    31.     zg-row:hover {
    32.       background: inherit;
    33.     }
    34.  
    35.     /* Remove native cell padding - we add our own to the custom row */
    36.     zg-cell {
    37.       padding: 0;
    38.     }
    39.  
    40.     /* Allow full-width custom rows */
    41.     [data-field-index] {
    42.       width: 100%;
    43.     }
    44.  
    45.  
    46.     /* Custom Row Styling
    47. ---------------------------------- */
    48.     .row-wrapper {
    49.       padding: 1rem;
    50.     }
    51.  
    52.     .row-container {
    53.       background: #fff;
    54.       border-radius: .5rem;
    55.       cursor: pointer;
    56.       display: flex;
    57.       flex-wrap: wrap;
    58.       justify-content: space-between;
    59.       margin-bottom: .25rem;
    60.       overflow: hidden;
    61.       padding: 1rem;
    62.     }
    63.  
    64.     .row-container:hover {
    65.       box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
    66.     }
    67.  
    68.     /* First Cell */
    69.     .row-container .first-cell {
    70.       display: flex;
    71.       flex-wrap: wrap;
    72.       flex-grow: 1;
    73.       justify-content: space-between;
    74.       align-items: center;
    75.     }
    76.  
    77.     /* First Cell Child Elements */
    78.     .flex-center {
    79.       display: flex;
    80.       align-items: center;
    81.     }
    82.  
    83.     /* Add padding for mobile view */
    84.     zing-grid[viewport="mobile"] .flex-center {
    85.       margin: 1.0rem;
    86.     }
    87.  
    88.     /* On all views EXCEPT zing-grid mobile view */
    89.     zing-grid:not([viewport="mobile"]) .user-contents {
    90.       min-width: 300px;
    91.     }
    92.  
    93.     /* User Contents Cell */
    94.     .user-contents span {
    95.       margin-right: 1.5rem;
    96.     }
    97.  
    98.     .user-contents img {
    99.       height: 25px;
    100.     }
    101.  
    102.     /* Font Awesome icon styling */
    103.     .build-status {
    104.       display: flex;
    105.       flex-direction: row;
    106.       align-items: center;
    107.     }
    108.  
    109.     .build-status::before {
    110.       font-family: FontAwesome;
    111.       font-size: 3rem;
    112.       margin-right: 1rem;
    113.     }
    114.  
    115.     /* Content defined by Font-Awesome unicode characters */
    116.     .build-success::before {
    117.       content: '\f164';
    118.       color: var(--build-success, green);
    119.     }
    120.  
    121.     .build-failed::before {
    122.       content: '\f165';
    123.       color: var(--build-failed, red);
    124.     }
    125.  
    126.     .build-pending::before {
    127.       content: '\f017';
    128.       color: var(--build-pending, orange);
    129.     }
    130.  
    131.     zing-grid[loading] {
    132.       height: 961px;
    133.     }
    134.   </style>
    135. </head>
    136.  
    137. <body>
    138.  
    139.   <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
    140.     <zg-data data='[
    141.         {
    142.           "status": "success",
    143.           "branch": "dev",
    144.           "username": "chocolateRainGuy",
    145.           "commitId": "1582393",
    146.           "runTime": "4:52",
    147.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    148.         },
    149.         {
    150.           "status": "failed",
    151.           "branch": "master",
    152.           "username": "jennaMarbles",
    153.           "commitId": "32532315",
    154.           "runTime": "0:52",
    155.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    156.         },
    157.         {
    158.           "status": "success",
    159.           "branch": "master",
    160.           "username": "starWarsKid",
    161.           "commitId": "cd34123as",
    162.           "runTime": "4:52",
    163.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    164.         },
    165.         {
    166.           "status": "pending",
    167.           "branch": "ci-integration",
    168.           "username": "dramticLookGopher",
    169.           "commitId": "aaf1234s",
    170.           "runTime": "1:23",
    171.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    172.         },
    173.         {
    174.           "status": "failed",
    175.           "branch": "dev-unit-tests",
    176.           "username": "leeroyJenkins",
    177.           "commitId": "2345623",
    178.           "runTime": "0:09",
    179.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    180.         },
    181.         {
    182.           "status": "success",
    183.           "branch": "master",
    184.           "username": "britneySpears",
    185.           "commitId": "cd34123as",
    186.           "runTime": "4:52",
    187.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    188.         },
    189.         {
    190.           "status": "failed",
    191.           "branch": "master",
    192.           "username": "numaNumaGuy",
    193.           "commitId": "62562345",
    194.           "runTime": "0:52",
    195.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    196.         }
    197.       ]'></zg-data>
    198.     <zg-colgroup>
    199.       <zg-column index=" " renderer="addChangeEvent">
    200.         <!-- Template tag is preferred so that the content is never rendered -->
    201.         <template>
    202.           <div class="row-wrapper">
    203.             <div class="row-container">
    204.               <!-- First Cell -->
    205.               <div class="first-cell">
    206.                 <div class="flex-center">
    207.                   <!-- Dynamically inject class with templating -->
    208.                   <div class="build-status build-[[record.status]]"></div>
    209.                   <span>[[record.branch]]/[[record.commitId]]</span>
    210.                 </div>
    211.                 <div class="user-contents flex-center">
    212.                   <span><img src="[[record.avatar]]" alt="N/A"></span>
    213.                   <span>[[record.username]]</span>
    214.                   <span>[[record.runTime]]</span>
    215.                 </div>
    216.               </div>
    217.               <!-- Select Dropdown Cell -->
    218.               <div class="flex-center">
    219.                 <select>
    220.                   <option disabled selected>Please Select One</option>
    221.                   <option value="1">Restart Build</option>
    222.                   <option value="2">Reset Cache</option>
    223.                 </select>
    224.               </div>
    225.             </div>
    226.           </div>
    227.         </template>
    228.       </zg-column>
    229.     </zg-colgroup>
    230.   </zing-grid>
    231.  
    232.   <script>
    233.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    234.     /**
    235.      * @description This custom render function should return NOTHING. If you
    236.      * return content here it will override your slotted contents.
    237.      * NOTE: renderer NOT REQUIRED for slotted content.
    238.      */
    239.     function addChangeEvent(customIndex, cellRef, $cell) {
    240.       // $cell.record gives us us direct information related to this row
    241.       const record = $cell.record;
    242.       // $cell.dom() gives us direct access to zg-cell DOM contents
    243.       const selectRef = cellRef.querySelector('select');
    244.       selectRef.addEventListener('change', e => {
    245.         const changeValue = e.target.value;
    246.         if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    247.         else alert('Resetting cache');
    248.       });
    249.     }
    250.  
    251.     // Init
    252.     // ----------------------------------
    253.     /* Get the ZG instance */
    254.     const zgRef = document.querySelector('zing-grid')
    255.     // Add click event listener, so you can drill into another page on row click
    256.     zgRef.addEventListener('row:click', e => {
    257.       console.log('row clicked', e.detail);
    258.     });
    259.   </script>
    260. </body>
    261.  
    262. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.  
    13.   <zing-grid layout="row" layout-controls="disabled" vieport-stop caption="Current Pipelines">
    14.     <zg-data data='[
    15.         {
    16.           "status": "success",
    17.           "branch": "dev",
    18.           "username": "chocolateRainGuy",
    19.           "commitId": "1582393",
    20.           "runTime": "4:52",
    21.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    22.         },
    23.         {
    24.           "status": "failed",
    25.           "branch": "master",
    26.           "username": "jennaMarbles",
    27.           "commitId": "32532315",
    28.           "runTime": "0:52",
    29.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    30.         },
    31.         {
    32.           "status": "success",
    33.           "branch": "master",
    34.           "username": "starWarsKid",
    35.           "commitId": "cd34123as",
    36.           "runTime": "4:52",
    37.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    38.         },
    39.         {
    40.           "status": "pending",
    41.           "branch": "ci-integration",
    42.           "username": "dramticLookGopher",
    43.           "commitId": "aaf1234s",
    44.           "runTime": "1:23",
    45.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    46.         },
    47.         {
    48.           "status": "failed",
    49.           "branch": "dev-unit-tests",
    50.           "username": "leeroyJenkins",
    51.           "commitId": "2345623",
    52.           "runTime": "0:09",
    53.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    54.         },
    55.         {
    56.           "status": "success",
    57.           "branch": "master",
    58.           "username": "britneySpears",
    59.           "commitId": "cd34123as",
    60.           "runTime": "4:52",
    61.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    62.         },
    63.         {
    64.           "status": "failed",
    65.           "branch": "master",
    66.           "username": "numaNumaGuy",
    67.           "commitId": "62562345",
    68.           "runTime": "0:52",
    69.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    70.         }
    71.       ]'></zg-data>
    72.     <zg-colgroup>
    73.       <zg-column index=" " renderer="addChangeEvent">
    74.         <!-- Template tag is preferred so that the content is never rendered -->
    75.         <template>
    76.           <div class="row-wrapper">
    77.             <div class="row-container">
    78.               <!-- First Cell -->
    79.               <div class="first-cell">
    80.                 <div class="flex-center">
    81.                   <!-- Dynamically inject class with templating -->
    82.                   <div class="build-status build-[[record.status]]"></div>
    83.                   <span>[[record.branch]]/[[record.commitId]]</span>
    84.                 </div>
    85.                 <div class="user-contents flex-center">
    86.                   <span><img src="[[record.avatar]]" alt="N/A"></span>
    87.                   <span>[[record.username]]</span>
    88.                   <span>[[record.runTime]]</span>
    89.                 </div>
    90.               </div>
    91.               <!-- Select Dropdown Cell -->
    92.               <div class="flex-center">
    93.                 <select>
    94.                   <option disabled selected>Please Select One</option>
    95.                   <option value="1">Restart Build</option>
    96.                   <option value="2">Reset Cache</option>
    97.                 </select>
    98.               </div>
    99.             </div>
    100.           </div>
    101.         </template>
    102.       </zg-column>
    103.     </zg-colgroup>
    104.   </zing-grid>
    105.  
    106. </body>
    107.  
    108. </html>
    1. :root {
    2.   /* Define custom colors for build status */
    3.   --build-success: #00c853;
    4.   --build-failed: #d50000;
    5.   --build: pending: #ffab00;
    6.   --zg-caption-background: #3f51b5;
    7.   --zg-caption-color: #fff;
    8.  
    9.   /* Modify ZG Display */
    10.   --zing-grid-background: #fff;
    11. }
    12.  
    13.  
    14. /* ZingGrid Overrides
    15. ---------------------------------- */
    16. /* Hide grid's body 'header' cells */
    17. zg-head {
    18.   display: none;
    19. }
    20.  
    21. /* Turn off native row highlighting */
    22. zg-row:hover {
    23.   background: inherit;
    24. }
    25.  
    26. /* Remove native cell padding - we add our own to the custom row */
    27. zg-cell {
    28.   padding: 0;
    29. }
    30.  
    31. /* Allow full-width custom rows */
    32. [data-field-index] {
    33.   width: 100%;
    34. }
    35.  
    36.  
    37. /* Custom Row Styling
    38. ---------------------------------- */
    39. .row-wrapper {
    40.   padding: 1rem;
    41. }
    42.  
    43. .row-container {
    44.   background: #fff;
    45.   border-radius: .5rem;
    46.   cursor: pointer;
    47.   display: flex;
    48.   flex-wrap: wrap;
    49.   justify-content: space-between;
    50.   margin-bottom: .25rem;
    51.   overflow: hidden;
    52.   padding: 1rem;
    53. }
    54.  
    55. .row-container:hover {
    56.   box-shadow: 6px 6px 31px -1px rgba(156, 156, 156, 0.82);
    57. }
    58.  
    59. /* First Cell */
    60. .row-container .first-cell {
    61.   display: flex;
    62.   flex-wrap: wrap;
    63.   flex-grow: 1;
    64.   justify-content: space-between;
    65.   align-items: center;
    66. }
    67.  
    68. /* First Cell Child Elements */
    69. .flex-center {
    70.   display: flex;
    71.   align-items: center;
    72. }
    73.  
    74. /* Add padding for mobile view */
    75. zing-grid[viewport="mobile"] .flex-center {
    76.   margin: 1.0rem;
    77. }
    78.  
    79. /* On all views EXCEPT zing-grid mobile view */
    80. zing-grid:not([viewport="mobile"]) .user-contents {
    81.   min-width: 300px;
    82. }
    83.  
    84. /* User Contents Cell */
    85. .user-contents span {
    86.   margin-right: 1.5rem;
    87. }
    88.  
    89. .user-contents img {
    90.   height: 25px;
    91. }
    92.  
    93. /* Font Awesome icon styling */
    94. .build-status {
    95.   display: flex;
    96.   flex-direction: row;
    97.   align-items: center;
    98. }
    99.  
    100. .build-status::before {
    101.   font-family: FontAwesome;
    102.   font-size: 3rem;
    103.   margin-right: 1rem;
    104. }
    105.  
    106. /* Content defined by Font-Awesome unicode characters */
    107. .build-success::before {
    108.   content: '\f164';
    109.   color: var(--build-success, green);
    110. }
    111.  
    112. .build-failed::before {
    113.   content: '\f165';
    114.   color: var(--build-failed, red);
    115. }
    116.  
    117. .build-pending::before {
    118.   content: '\f017';
    119.   color: var(--build-pending, orange);
    120. }
    1. /**
    2.  * @description This custom render function should return NOTHING. If you
    3.  * return content here it will override your slotted contents.
    4.  * NOTE: renderer NOT REQUIRED for slotted content.
    5.  */
    6. function addChangeEvent(customIndex, cellRef, $cell) {
    7.   // $cell.record gives us us direct information related to this row
    8.   const record = $cell.record;
    9.   // $cell.dom() gives us direct access to zg-cell DOM contents
    10.   const selectRef = cellRef.querySelector('select');
    11.   selectRef.addEventListener('change', e => {
    12.     const changeValue = e.target.value;
    13.     if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    14.     else alert('Resetting cache');
    15.   });
    16. }
    17.  
    18. // Init
    19. // ----------------------------------
    20. /* Get the ZG instance */
    21. const zgRef = document.querySelector('zing-grid')
    22. // Add click event listener, so you can drill into another page on row click
    23. zgRef.addEventListener('row:click', e => {
    24.   console.log('row clicked', e.detail);
    25. });