global notification form

lib/routes/admin.js

@@ -309,6 +309,14 @@ module.exports = function(crowi, app) {
     });
   };
 
+  actions.globalNotification = {};
+  actions.globalNotification.detail = function(req, res) {
+    const notificationSettingId = req.params.id;
+    const renderVars = {
+    };
+    return res.render('admin/global-notification-detail', renderVars);
+  };
+
   actions.search.buildIndex = function(req, res) {
     var search = crowi.getSearcher();
     if (!search) {

lib/routes/index.js

@@ -103,6 +103,8 @@ module.exports = function(crowi, app) {
   app.post('/admin/notification/slackSetting', loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.slackSetting, admin.notification.slackSetting);
   app.get('/admin/notification/slackAuth'    , loginRequired(crowi, app) , middleware.adminRequired() , admin.notification.slackAuth);
   app.get('/admin/notification/slackSetting/disconnect', loginRequired(crowi, app) , middleware.adminRequired() , admin.notification.disconnectFromSlack);
+  app.get('/admin/global-notification/detail/:id', loginRequired(crowi, app) , middleware.adminRequired() , admin.globalNotification.detail);
+  app.get('/admin/global-notification/detail', loginRequired(crowi, app) , middleware.adminRequired() , admin.globalNotification.detail);
   app.post('/_api/admin/notification.add'    , loginRequired(crowi, app) , middleware.adminRequired() , csrf, admin.api.notificationAdd);
   app.post('/_api/admin/notification.remove' , loginRequired(crowi, app) , middleware.adminRequired() , csrf, admin.api.notificationRemove);
   app.get('/_api/admin/users.search'         , loginRequired(crowi, app) , middleware.adminRequired() , admin.api.usersSearch);

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

@@ -0,0 +1,142 @@
+{% extends '../layout/admin.html' %}
+
+{% block html_title %}{{ customTitle(t('Notification settings')) }}{% endblock %}
+
+{% block content_header %}
+<div class="header-wrap">
+  <header id="page-header">
+    <h1 class="title" id="">{{ t('Notification settings') }}</h1>
+  </header>
+</div>
+{% endblock %}
+
+{% block content_main %}
+<div class="content-main">
+  {% set smessage = req.flash('successMessage') %}
+  {% if smessage.length %}
+  <div class="alert alert-success">
+    {{ smessage }}
+  </div>
+  {% endif %}
+
+  {% set emessage = req.flash('errorMessage') %}
+  {% if emessage.length %}
+  <div class="alert alert-danger">
+    {{ emessage }}
+  </div>
+  {% endif %}
+
+  <div class="row">
+    <div class="col-md-3">
+      {% include './widget/menu.html' with {current: 'notification'} %}
+    </div>
+
+    <div class="col-md-9">
+      <a href="/admin/notification#global-notification" class="btn btn-default">
+        <i class="icon-fw ti-arrow-left" aria-hidden="true"></i>
+        通知設定一覧に戻る
+      </a>
+
+      <div class="m-t-20 form-box col-md-11">
+        <form action="" method="post" class="form-horizontal" role="form">
+          <legend>通知設定詳細</legend>
+
+          <fieldset class="col-sm-offset-1 col-sm-4">
+            <div class="form-group">
+              <label for="triggerPath" class="control-label">トリガーパス</label><br />
+              <input class="form-control" type="text" name="triggerPath" value="" required>
+            </div>
+
+            <div class="form-group">
+              <label for="notifyToType"class="control-label">通知先</label><br />
+              <div class="radio radio-primary">
+                <input type="radio" id="mail" name="notifyToType" value="mail">
+                <label for="mail">
+                  <p class="font-weight-bold">Email</p>
+                </label>
+              </div>
+              <div class="radio radio-primary">
+                <input type="radio" id="slack" name="notifyToType" value="slack">
+                <label for="slack">
+                  <p class="font-weight-bold">Slack</p>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-group notify-to-option d-none" id="mail-input">
+              <label for="toEmail"class="control-label">Email</label><br />
+              <input class="form-control" type="text" name="toEmail" value="">
+            </div>
+
+            <div class="form-group notify-to-option d-none" id="slack-input">
+              <label for="slackChannels"class="control-label">Slack Channels</label><br />
+              <input class="form-control" type="text" name="slackChannels" value="">
+            </div>
+          </fieldset>
+
+          <fieldset class="col-sm-offset-1 col-sm-4">
+            <div class="form-group">
+              <label for="triggerEvent"class="control-label">トリガーイベント</label><br />
+              <div class="checkbox checkbox-info">
+                <input type="checkbox" id="trigger-event-pageCreate" name="triggerEvent[pageCreate]" value="1" />
+                <label for="trigger-event-pageCreate">
+                    <i class="icon-note"></i> - When New Page is Created
+                </label>
+              </div>
+              <div class="checkbox checkbox-info">
+                <input type="checkbox" id="trigger-event-pageEdit" name="triggerEvent[pageEdit]" value="1" />
+                <label for="trigger-event-pageEdit">
+                    <i class="icon-note"></i> - When Page is Edited
+                </label>
+              </div>
+              <div class="checkbox checkbox-info">
+                <input type="checkbox" id="trigger-event-pageDelete" name="triggerEvent[pageDelete]" value="1" />
+                <label for="trigger-event-pageDelete">
+                    <i class="icon-note"></i> - When is Deleted
+                </label>
+              </div>
+              <div class="checkbox checkbox-info">
+                <input type="checkbox" id="trigger-event-pageMove" name="triggerEvent[pageMove]" value="1" />
+                <label for="trigger-event-pageMove">
+                    <i class="icon-note"></i> - When Page is Moved (Renamed)
+                </label>
+              </div>
+              <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-pageLike" name="triggerEvent[pageLike]" value="1" />
+                  <label for="trigger-event-pageLike">
+                      <i class="icon-note"></i> - When Someone Likes Page
+                  </label>
+                </div>
+              <div class="checkbox checkbox-info">
+                <input type="checkbox" id="trigger-event-comment" name="triggerEvent[comment]" value="1" />
+                <label for="trigger-event-comment">
+                    <i class="icon-note"></i> - When Someone Comments on Page
+                </label>
+              </div>
+            </div>
+          </fieldset>
+
+          <div class="col-sm-offset-5 col-sm-12 m-t-20">
+            <input type="hidden" name="globalNotificationSettingId" value="">
+            <input type="hidden" name="_csrf" value="{{ csrf() }}">
+            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('input[name="notifyToType"]').change(function() {
+    var val = $(this).val();
+    $('.notify-to-option').addClass('d-none');
+    $('#' + val + '-input').removeClass('d-none');
+  });
+</script>
+{% endblock content_main %}
+
+{% block content_footer %}
+{% endblock content_footer %}
+
+

lib/views/admin/global-notification.html

@@ -0,0 +1,151 @@
+<a href="/admin/global-notification/detail">
+  <p data-toggle="collapse" class="btn btn-default">通知設定の追加</p>
+</a>
+<h2>通知設定一覧</h2>
+<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>
+        <table>
+          <tr>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i><span style="padding-right: 50px;"></span></td>
+          </tr>
+          <tr>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+            <td><input type="checkbox" value="1" checked=""></td>
+          </tr>
+        </table>
+      </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>
+
+    {% for setting in settings %}
+    {% set detailPageUrl = '/admin/global-notification/detail' %}
+    <tr class="clickable-row" data-href="{{ detailPageUrl }}" data-updatepost-id="{{ notif._id.toString() }}">
+      <td class="unclickable">
+        <label class="switch">
+          <input type="checkbox">
+          <span class="slider round"></span>
+        </label>
+      </td>
+      <td>
+        {{ setting.pathPattern }}
+      </td>
+      <td>
+        <table>
+          <tr>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+            <td><i class="icon-note"></i></td>
+          </tr>
+        </table>
+      </td>
+      <td>
+        {{ setting.channel }}
+      </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")
+  });
+</script>

lib/views/admin/notification.html

@@ -251,7 +251,7 @@
         </div><!-- /#user-trigger-notification -->
 
         <div id="global-notification" class="tab-pane" role="tabpanel" >
-          <p class="alert alert-info">not implemented now</p>
+          {% include './global-notification.html' %}
         </div><!-- /#global-notification -->
 
       </div><!-- /.tab-content -->