From 84ecac633cdab67d66757fb53f3f6a681dc8acbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Tue, 12 Jul 2016 19:49:06 +0300
Subject: [PATCH] "Usage Examples" item in check's menu

---
 static/css/my_checks.css               |  8 +++
 static/css/my_checks_desktop.css       |  4 ++
 static/js/checks.js                    | 13 +++++
 templates/front/my_checks.html         | 78 ++++++++++++++++++++++++++
 templates/front/my_checks_desktop.html | 11 +++-
 5 files changed, 112 insertions(+), 2 deletions(-)

diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 63f39916..4d184c8d 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -62,3 +62,11 @@
     color: #555;
 }
 
+
+#show-usage-modal  .modal-dialog {
+     width: 1100px;
+ }
+
+ #show-usage-modal .tab-content {
+     margin-top: 15px;
+ }
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index 5d2543c7..057b8998 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -62,6 +62,10 @@ table.table tr > th.th-name {
     visibility: hidden;
 }
 
+.dropdown-menu > li > a.check-menu-remove {
+    color: #B71C1C;
+}
+
 button.copy-link {
     opacity: 0;
 
diff --git a/static/js/checks.js b/static/js/checks.js
index 5ed5838f..2dd74d67 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -176,6 +176,19 @@ $(function () {
 
     });
 
+    $(".usage-examples").click(function(e) {
+        var a = e.target;
+        var url = a.getAttribute("data-url");
+        var email = a.getAttribute("data-email");
+
+        $(".ex", "#show-usage-modal").text(url);
+        $(".em", "#show-usage-modal").text(email);
+
+        $("#show-usage-modal").modal("show");
+        return false;
+    });
+
+
     var clipboard = new Clipboard('button.copy-link');
     $("button.copy-link").mouseout(function(e) {
         setTimeout(function() {
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index a78ef2ff..46408180 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -196,6 +196,84 @@
     </div>
 </div>
 
+<div id="show-usage-modal" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <ul class="nav nav-pills" role="tablist">
+                    <li class="active">
+                        <a href="#crontab" data-toggle="tab">Crontab</a>
+                    </li>
+                    <li>
+                        <a href="#bash" data-toggle="tab">Bash</a>
+                    </li>
+                    <li>
+                        <a href="#python" data-toggle="tab">Python</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#node" data-toggle="tab">Node.js</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#php" data-toggle="tab">PHP</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#browser" data-toggle="tab">Browser</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#powershell" data-toggle="tab">PowerShell</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#email" data-toggle="tab">Email</a>
+                    </li>
+                </ul>
+
+            </div>
+            <div class="modal-body">
+
+
+                <div class="tab-content">
+                    {% with ping_url="<span class='ex'></span>" %}
+                    <div role="tabpanel" class="tab-pane active" id="crontab">
+                        {% include "front/snippets/crontab.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="bash">
+                        {% include "front/snippets/bash.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="python">
+                        {% include "front/snippets/python.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="node">
+                        {% include "front/snippets/node.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="php">
+                        {% include "front/snippets/php.html" %}
+                    </div>
+                    <div class="tab-pane" id="browser">
+                        {% include "front/snippets/browser.html" %}
+                    </div>
+                    <div class="tab-pane" id="powershell">
+                        {% include "front/snippets/powershell.html" %}
+                    </div>
+                    <div class="tab-pane" id="email">
+                            As an alternative to HTTP/HTTPS requests,
+                            you can "ping" this check by sending an
+                            email message to
+                            <div class="email-address">
+                                <code class="em"></code>
+                            </div>
+                    </div>
+                    {% endwith %}
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index 7a319f31..2c2a9367 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -77,16 +77,23 @@
                 <ul class="dropdown-menu">
                     <li>
                         <a href="{% url 'hc-log' check.code %}">
-                            <span class="glyphicon glyphicon-time"></span>
                             Log
                         </a>
                     </li>
+                    <li>
+                        <a
+                            href="#"
+                            class="usage-examples"
+                            data-url="{{ check.url }}"
+                            data-email="{{ check.email }}">
+                            Usage Examples
+                        </a>
+                    </li>
                     <li role="separator" class="divider"></li>
                     <li>
                         <a href="#" class="check-menu-remove"
                             data-name="{{ check.name_then_code }}"
                             data-url="{% url 'hc-remove-check' check.code %}">
-                            <span class="glyphicon glyphicon-trash"></span>
                             Remove
                         </a>
                     </li>