From dec006890cd6b0a8b9a252504929abd840cb77f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Thu, 29 Jun 2017 15:48:59 +0300
Subject: [PATCH] Badges can now return either SVG or JSON

---
 hc/accounts/views.py           |  9 ++++++---
 hc/api/urls.py                 |  4 ++++
 hc/api/views.py                |  7 +++++--
 hc/lib/badges.py               |  5 +++--
 static/css/settings.css        | 14 ++++++++++++--
 static/js/badges.js            | 19 +++++++++++++++++++
 templates/accounts/badges.html | 34 ++++++++++++++++++++++++++++------
 7 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 static/js/badges.js

diff --git a/hc/accounts/views.py b/hc/accounts/views.py
index 11d9d10b..ca55cc3c 100644
--- a/hc/accounts/views.py
+++ b/hc/accounts/views.py
@@ -256,16 +256,19 @@ def badges(request):
         tags.update(check.tags_list())
 
     username = request.team.user.username
-    badge_urls = []
+    urls = []
     for tag in sorted(tags, key=lambda s: s.lower()):
         if not re.match("^[\w-]+$", tag):
             continue
 
-        badge_urls.append(get_badge_url(username, tag))
+        urls.append({
+            "svg": get_badge_url(username, tag),
+            "json": get_badge_url(username, tag, format="json"),
+        })
 
     ctx = {
         "page": "profile",
-        "badge_urls": badge_urls,
+        "urls": urls
     }
 
     return render(request, "accounts/badges.html", ctx)
diff --git a/hc/api/urls.py b/hc/api/urls.py
index da2a6874..17b56f2e 100644
--- a/hc/api/urls.py
+++ b/hc/api/urls.py
@@ -10,7 +10,11 @@ urlpatterns = [
     url(r'^api/v1/checks/([\w-]+)/pause$', views.pause, name="hc-api-pause"),
     url(r'^api/v1/notifications/([\w-]+)/bounce$', views.bounce,
         name="hc-api-bounce"),
+
     url(r'^badge/([\w-]+)/([\w-]{8})/([\w-]+).svg$', views.badge,
         name="hc-badge"),
+    url(r'^badge/([\w-]+)/([\w-]{8})/([\w-]+).json$', views.badge,
+        {"format": "json"}, name="hc-badge-json", ),
+
     url(r'^api/v1/status/$', views.status),
 ]
diff --git a/hc/api/views.py b/hc/api/views.py
index 3d216fc4..d351b867 100644
--- a/hc/api/views.py
+++ b/hc/api/views.py
@@ -138,7 +138,7 @@ def update(request, code):
         return HttpResponseForbidden()
 
     _update(check, request.json)
-    return JsonResponse(check.to_dict(), status=200)
+    return JsonResponse(check.to_dict())
 
 
 @csrf_exempt
@@ -156,7 +156,7 @@ def pause(request, code):
 
 
 @never_cache
-def badge(request, username, signature, tag):
+def badge(request, username, signature, tag, format="svg"):
     if not check_signature(username, tag, signature):
         return HttpResponseNotFound()
 
@@ -173,6 +173,9 @@ def badge(request, username, signature, tag):
             status = "down"
             break
 
+    if format == "json":
+        return JsonResponse({"status": status})
+
     svg = get_badge_svg(tag, status)
     return HttpResponse(svg, content_type="image/svg+xml")
 
diff --git a/hc/lib/badges.py b/hc/lib/badges.py
index e7ffec7f..78ab327f 100644
--- a/hc/lib/badges.py
+++ b/hc/lib/badges.py
@@ -49,7 +49,8 @@ def check_signature(username, tag, sig):
     return ours == sig
 
 
-def get_badge_url(username, tag):
+def get_badge_url(username, tag, format="svg"):
+    view = "hc-badge-json" if format == "json" else "hc-badge"
     sig = base64_hmac(str(username), tag, settings.SECRET_KEY)
-    url = reverse("hc-badge", args=[username, sig[:8], tag])
+    url = reverse(view, args=[username, sig[:8], tag])
     return settings.SITE_ROOT + url
diff --git a/static/css/settings.css b/static/css/settings.css
index 1d900d70..ebbc8a6f 100644
--- a/static/css/settings.css
+++ b/static/css/settings.css
@@ -11,7 +11,7 @@
     padding-bottom: 24px;
 }
 
-#badges-description {
+#badges-description, #b-format {
     margin-bottom: 24px;
 }
 
@@ -27,4 +27,14 @@
 
 #close-account:hover {
     background-color: #ffebea;
-}
\ No newline at end of file
+}
+
+#badges-json {
+    display: none;
+}
+
+.json-response code {
+    display: inline-block;
+    background: #eee;
+    padding: 3px;
+}
diff --git a/static/js/badges.js b/static/js/badges.js
new file mode 100644
index 00000000..2701334c
--- /dev/null
+++ b/static/js/badges.js
@@ -0,0 +1,19 @@
+$(function() {
+
+    $(".json-response").each(function(idx, el) {
+        $.getJSON(el.dataset.url, function(data) {
+            el.innerHTML = "<code>" + JSON.stringify(data) + "</code>";
+        });
+    });
+
+    $("#show-svg").click(function() {
+        $("#badges-json").hide();
+        $("#badges-svg").show();
+    })
+
+    $("#show-json").click(function() {
+        $("#badges-svg").hide();
+        $("#badges-json").show();
+    })
+
+});
\ No newline at end of file
diff --git a/templates/accounts/badges.html b/templates/accounts/badges.html
index c3863970..1d074db0 100644
--- a/templates/accounts/badges.html
+++ b/templates/accounts/badges.html
@@ -29,15 +29,36 @@
                     URLs. If you wish, you can add them to your READMEs,
                     dashboards or status pages.
                 </p>
-                {% if badge_urls %}
-                <table class="badges table">
-                    {% for badge_url in badge_urls %}
+                {% if urls %}
+
+                <div id="b-format" class="btn-group" data-toggle="buttons">
+                    <label id="show-svg" class="btn btn-default active">
+                        <input type="radio" autocomplete="off" checked> SVG
+                    </label>
+                    <label id="show-json" class="btn btn-default">
+                        <input type="radio" autocomplete="off"> JSON
+                    </label>
+                </div>
+
+                <table id="badges-svg" class="badges table">
+                    {% for urldict in urls %}
                     <tr>
                         <td>
-                            <img src="{{ badge_url }}" alt="" />
+                            <img src="{{ urldict.svg }}" alt="" />
                         </td>
-                        <td>
-                            <code>{{ badge_url }}</code>
+                        <td class="svg-url">
+                            <code>{{ urldict.svg }}</code>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </table>
+                <table id="badges-json" class="badges table">
+                    {% for urldict in urls %}
+                    <tr>
+                        <td class="json-response" data-url="{{ urldict.json }}">
+                        </td>
+                        <td class="json-url">
+                            <code>{{ urldict.json }}</code>
                         </td>
                     </tr>
                     {% endfor %}
@@ -59,5 +80,6 @@
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/badges.js' %}"></script>
 {% endcompress %}
 {% endblock %}