weseek__growi/lib/views/admin/global-notification.html

<a href="/admin/global-notification/detail">
  <p data-toggle="collapse" class="btn btn-default">通知設定の追加</p>
</a>
<h2>通知設定一覧</h2>

{% set tags = {
  pageCreate: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Create"><i class="icon-doc"></i> CREATE</span>',
  pageEdit: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Edit"><i class="icon-doc"></i> EDIT</span>',
  pageDelete: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Delte"><i class="icon-doc"></i> DELETE</span>',
  pageMove: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Move"><i class="icon-doc"></i> MOVE</span>',
  pageLike: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Like"><i class="icon-doc"></i> LIKE</span>',
  comment: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="New Comment"><i class="icon-fw icon-bubbles"></i> POST</span>'
} %}

<table class="table table-bordered">
  <thead>
    <th>ON/OFF</th>
    <th>Trigger Path (expression with <code>*</code> is supported)</th>
    <th>Trigger Events</th>
    <th>Notify To</th>
  </thead>
  <tbody class="admin-notif-list">
    {% set detailPageUrl = '/admin/global-notification/detail' %}
    {% for globalNotif in globalNotifications %}
    <tr class="clickable-row" data-href="{{ detailPageUrl }}" data-updatepost-id="{{ globalNotif._id.toString() }}">
      <td class="unclickable">
        <label class="switch">
          <input type="checkbox" class="isEnabledToggle" {% if globalNotif.isEnabled %}checked{% endif %}>
          <span class="slider round"></span>
        </label>
      </td>
      <td>
        {{ globalNotif.triggerPath }}
      </td>
      <td style="max-width: 200px;">
        {% for event in globalNotif.triggerEvents %}
          {{ tags[event] | safe }}
        {% endfor %}
      </td>
      <td>
        {% if globalNotif.__t == 'mail' %}<span data-toggle="tooltip" data-placement="top" title="Email"><i class="ti-email"></i> {{ globalNotif.toEmail }}</span>
        {% elseif globalNotif.__t == 'slack' %}<span data-toggle="tooltip" data-placement="top" title="Slack"><i class="fa fa-slack"></i> {{ globalNotif.slackChannels }}</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<style>
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.clickable-row > :not(.unclickable) {
  cursor: pointer;
}

.clickable-row:hover {
  background-color: #2196F3;
  color: white;
}
</style>

<script>
  $(".clickable-row > :not('.unclickable')").click(function(event) {
    var $target = $(event.currentTarget).parent();
    window.location = $target.data("href") + "/" + $target.data("updatepost-id");
  });

  $(".isEnabledToggle").on("change", function(event) {
    var id = $(event.currentTarget).closest("tr").data("updatepost-id")
    $.post('/_api/admin/global-notification/toggleIsEnabled?id=' + id, function(res) {
      if (res.ok) {
        // do something
      }
    });
  });
</script>