dashboard: add preview

circle/dashboard/static/dashboard/dashboard.js

@@ -545,4 +545,14 @@ $(function () {
     closed.push($(this).data('id'));
     closed.push($(this).data('id'));
     setCookie('broadcast-messages', JSON.stringify(closed), 7 * 24 * 60 * 60 * 1000, "/");
     setCookie('broadcast-messages', JSON.stringify(closed), 7 * 24 * 60 * 60 * 1000, "/");
   });
   });
+
+  $("#id_message").on('input', function() {
+    $('.broadcast-message').html($(this).val());
+  });
+
+  $("#id_effect").on('input', function() {
+    $('.broadcast-message').removeClass(
+      'alert-info alert-warning alert-success alert-danger').addClass(
+      "alert-" + $(this).val());
+  });
 });
 });

circle/dashboard/templates/dashboard/message-edit.html

@@ -31,4 +31,26 @@
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>
+
+<div class="row">
+  <div class="col-md-12">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="no-margin">
+          <i class="fa fa-eye"></i>
+          {% trans "Preview" %}
+        </h3>
+      </div>
+      <div class="panel-body">
+        <div class="alert alert-{{ message.effect }} text-center broadcast-message">
+          {{ message.message|safe }}
+        </div>
+      </div><!-- .panel-body -->
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+
+{% block broadcast_messages %}
 {% endblock %}
 {% endblock %}