Slotted Content

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    :root {
      /* define custom colors for build status */
      --build-success: #00c853;
      --build-failed: #d50000;
      --build: pending: #ffab00;
      --zg-caption-background: #3f51b5;
      --zg-caption-color: #fff;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    /* font awesome icon styling */
    .build-status {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    /* font-family: FontAwesome is a MUST */
    .build-status::before {
      font-family: FontAwesome;
      font-size: 3rem;
      margin-right: 1rem;
    }

    /* content defined by Font-Awesome unicode characters */
    .build-success::before {
      content: '\f164';
      color: var(--build-success, green);
    }

    .build-failed::before {
      content: '\f165';
      color: var(--build-failed, red);
    }

    .build-pending::before {
      content: '\f017';
      color: var(--build-pending, orange);
    }

    zing-grid[loading] {
      height: 686px;
    }
  </style>
</head>

<body>
  <zing-grid caption="Current Pipelines">
    <zg-data data='[
        {
          "status": "success",
          "branch": "dev",
          "username": "chocolateRainGuy",
          "commitId": "1582393",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "jennaMarbles",
          "commitId": "32532315",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "starWarsKid",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "pending",
          "branch": "ci-integration",
          "username": "dramticLookGopher",
          "commitId": "aaf1234s",
          "runTime": "1:23",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "dev-unit-tests",
          "username": "leeroyJenkins",
          "commitId": "2345623",
          "runTime": "0:09",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "britneySpears",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "numaNumaGuy",
          "commitId": "62562345",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="status">
        <span class="build-status build-[[index.status]]"></span>
      </zg-column>
      <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
        <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
      </zg-column>
      <zg-column index="avatar" type="image" content-width="75"></zg-column>
      <zg-column index="username"></zg-column>
      <zg-column index="custom" renderer="addChangeEvent">
        <select>
          <option selected disabled>Please Select One</option>
          <option value="1">Restart Build</option>
          <option value="2">Reset Cache</option>
        </select>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function addChangeEvent(customIndex, domCell, $cell) {
      // $cell.record gives us us direct information related to this row
      const record = $cell.record;
      // $cell.dom() gives us direct access to zg-cell DOM contents
      const selectRef = $cell.dom().querySelector('select');
      selectRef.addEventListener('change', e => {
        const changeValue = e.target.value;
        if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
        else alert('Resetting cache');
      });
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <zing-grid caption="Current Pipelines">
    <zg-data data='[
        {
          "status": "success",
          "branch": "dev",
          "username": "chocolateRainGuy",
          "commitId": "1582393",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "jennaMarbles",
          "commitId": "32532315",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "starWarsKid",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "pending",
          "branch": "ci-integration",
          "username": "dramticLookGopher",
          "commitId": "aaf1234s",
          "runTime": "1:23",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "dev-unit-tests",
          "username": "leeroyJenkins",
          "commitId": "2345623",
          "runTime": "0:09",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "success",
          "branch": "master",
          "username": "britneySpears",
          "commitId": "cd34123as",
          "runTime": "4:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        },
        {
          "status": "failed",
          "branch": "master",
          "username": "numaNumaGuy",
          "commitId": "62562345",
          "runTime": "0:52",
          "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="status">
        <span class="build-status build-[[index.status]]"></span>
      </zg-column>
      <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
        <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
      </zg-column>
      <zg-column index="avatar" type="image" content-width="75"></zg-column>
      <zg-column index="username"></zg-column>
      <zg-column index="custom" renderer="addChangeEvent">
        <select>
          <option selected disabled>Please Select One</option>
          <option value="1">Restart Build</option>
          <option value="2">Reset Cache</option>
        </select>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

:root {
  /* define custom colors for build status */
  --build-success: #00c853;
  --build-failed: #d50000;
  --build: pending: #ffab00;
  --zg-caption-background: #3f51b5;
  --zg-caption-color: #fff;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* font awesome icon styling */
.build-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* font-family: FontAwesome is a MUST */
.build-status::before {
  font-family: FontAwesome;
  font-size: 3rem;
  margin-right: 1rem;
}

/* content defined by Font-Awesome unicode characters */
.build-success::before {
  content: '\f164';
  color: var(--build-success, green);
}

.build-failed::before {
  content: '\f165';
  color: var(--build-failed, red);
}

.build-pending::before {
  content: '\f017';
  color: var(--build-pending, orange);
}

function addChangeEvent(customIndex, domCell, $cell) {
  // $cell.record gives us us direct information related to this row
  const record = $cell.record;
  // $cell.dom() gives us direct access to zg-cell DOM contents
  const selectRef = $cell.dom().querySelector('select');
  selectRef.addEventListener('change', e => {
    const changeValue = e.target.value;
    if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
    else alert('Resetting cache');
  });
}