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 icons = {
  pageCreate: '<i class="icon-note"></i>',
  pageEdit: '<i class="icon-note"></i>',
  pageDelete: '<i class="icon-note"></i>',
  pageMove: '<i class="icon-note"></i>',
  pageLike: '<i class="icon-note"></i>',
  comment: '<i class="icon-note"></i>'
} %}

<table class="table table-bordered">
  <thead>
    <th>ON/OFF</th>
    <th>Pattern</th>
    <th>Triggers</th>
    <th>Notify To</th>
  </thead>
  <tbody class="admin-notif-list">
    <form id="">
    <tr>
      <td></td>
      <td>
        <input class="form-control" type="text" placeholder="e.g. /projects/xxx/MTG/*">
        <p class="help-block">
          Path Pattern of wiki. Expression with <code>*</code> is supported.
        </p>
      </td>
      <td>
        {% for icon in icons %}
          {{ icon | safe }}
        {% endfor %}
      </td>
      <td>
        <input class="form-control" type="text" placeholder="e.g. xxx@example.com">
        <p class="help-block">
          Notifications are sent to this email.
        </p>
      </td>
    </tr>
    </form>

    {% 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>
        {% for event in globalNotif.triggerEvents %}
          {{ icons[event] | safe }}
        {% endfor %}
      </td>
      <td>
        {% if globalNotif.__t == 'mail' %}emailicon {{ globalNotif.toEmail }}
        {% elseif globalNotif.__t == 'slack' %}slackicon {{ globalNotif.slackChannels }}
        {% 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%;
}
</style>

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

  $(".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>