harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

UI tweaks for the "Add Webhook" form.

Browse Source
This commit is contained in:
Pēteris Caune 2017-11-10 13:42:50 +02:00
parent 4cdc7db035
commit 7c7919fdb4
5 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
hc/front/forms.py
View File

@ -67,17 +67,17 @@ class AddWebhookForm(forms.Form):
post_data = forms.CharField(max_length=1000, required=False)
def __init__(self, *args, **kwargs):
self.headers = {}
if all(k in kwargs for k in ("header_keys", "header_values")):
header_keys = kwargs.pop("header_keys")
header_values = kwargs.pop("header_values")
for i, (key, val) in enumerate(zip(header_keys, header_values)):
if key:
self.headers[key] = val
super(AddWebhookForm, self).__init__(*args, **kwargs)
self.headers = {}
if "header_key[]" in self.data and "header_value[]" in self.data:
keys = self.data.getlist("header_key[]")
values = self.data.getlist("header_value[]")
for key, value in zip(keys, values):
if key:
self.headers[key] = value
def get_value(self):
val = dict(self.cleaned_data)
val["headers"] = self.headers

5
hc/front/views.py
View File

@ -437,10 +437,7 @@ def add_email(request):
@login_required
def add_webhook(request):
if request.method == "POST":
header_keys = request.POST.getlist('header_key[]')
header_values = request.POST.getlist('header_value[]')
form = AddWebhookForm(request.POST or None,
header_keys=header_keys, header_values=header_values)
form = AddWebhookForm(request.POST)
if form.is_valid():
channel = Channel(user=request.team.user, kind="webhook")
channel.value = form.get_value()

10
static/css/channels.css
View File

@ -191,4 +191,14 @@ table.channels-table > tbody > tr > th {
.page-channels .icon-delete {
font-size: 16px;
}
/* Add Webhook */
.webhook-header input.form-control {
width: 300px;
}
.webhook-header {
margin-bottom: 4px;
}

44
static/js/webhook.js
View File

@ -1,29 +1,25 @@
$(function() {
$(".webhook_header_btn:first").addClass("btn-info").text("+")
$(".webhook_header_btn:not(:first)").addClass("btn-danger").text("X")
function haveBlankHeaderForm() {
return $("#webhook-headers .webhook-header").filter(function() {
var key = $(".key", this).val();
var value = $(".value", this).val();
return !key && !value;
}).length;
}
$("#webhook_headers").on("click", ".webhook_header_btn.btn-danger", function(e) {
function ensureBlankHeaderForm() {
if (!haveBlankHeaderForm()) {
var tmpl = $("#header-template").html();
$("#webhook-headers").append(tmpl);
}
}
$("#webhook-headers").on("click", "button", function(e) {
e.preventDefault();
$(this).closest("div.row").remove();
});
$(this).closest(".webhook-header").remove();
ensureBlankHeaderForm();
})
$("#webhook_headers").on("click", ".webhook_header_btn.btn-info", function(e) {
e.preventDefault();
// Add new header form
$("#webhook_headers").append(
'<div class="row">\
<div class="col-xs-6 col-sm-6" style="padding-right: 0px;">\
<input type="text" class="form-control" name="header_key[]" placeholder="Key">\
</div>\
<div class="col-xs-6 col-sm-6" style="padding-left: 0px;">\
<div class="input-group">\
<input type="text" class="form-control" name="header_value[]" placeholder="Value">\
<span class="input-group-btn">\
<button class="webhook_header_btn btn btn-danger" type="button" class="btn">X</button>\
</span>\
</div>\
</div>\
</div>');
});
$("#webhook-headers").on("keyup", "input", ensureBlankHeaderForm);
ensureBlankHeaderForm();
});

71
templates/integrations/add_webhook.html
View File

@ -106,40 +106,31 @@
</div>
</div>
<div class="form-group {{ form.headers.css_classes }}">
<label class="col-sm-2 control-label">Headers</label>
<div id="webhook_headers" class="col-xs-12 col-sm-10">
{% if form.headers %}
{% for k,v in form.headers.items %}
<div class="row">
<div class="col-xs-6 col-sm-6" style="padding-right: 0px;">
<input type="text" class="form-control" name="header_key[]" placeholder="Key" value="{{ k|default:"" }}">
</div>
<div class="col-xs-6 col-sm-6" style="padding-left: 0px;">
<div class="input-group">
<input type="text" class="form-control" name="header_value[]" placeholder="Value" value="{{ v|default:"" }}">
<span class="input-group-btn">
<button class="webhook_header_btn btn" type="button" class="btn"></button>
</span>
</div>
</div>
<label class="col-sm-2 control-label">Request Headers</label>
<div id="webhook-headers" class="col-xs-12 col-sm-10">
{% for k, v in form.headers.items %}
<div class="form-inline webhook-header">
<input
type="text"
class="form-control key"
name="header_key[]"
placeholder="Content-Type"
value="{{ k }}" />
<input
type="text"
class="form-control value"
name="header_value[]"
placeholder="application/json"
value="{{ v }}" />
<button class="btn btn-default" type="button">
<span class="icon-delete"></span>
</button>
</div>
{% endfor %}
{% else %}
<div class="row">
<div class="col-xs-6 col-sm-6" style="padding-right: 0px;">
<input type="text" class="form-control" name="header_key[]" placeholder="Key">
</div>
<div class="col-xs-6 col-sm-6" style="padding-left: 0px;">
<div class="input-group">
<input type="text" class="form-control" name="header_value[]" placeholder="Value">
<span class="input-group-btn">
<button class="webhook_header_btn btn btn-info" type="button" class="btn">+</button>
</span>
</div>
</div>
</div>
{% endif %}
</div>
<div class="text-center">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
@ -149,6 +140,24 @@
</form>
</div>
</div>
<div id="header-template" class="hide">
<div class="form-inline webhook-header">
<input
type="text"
class="form-control key"
name="header_key[]"
placeholder="Content-Type" />
<input
type="text"
class="form-control value"
name="header_value[]"
placeholder="application/json" />
<button class="btn btn-default" type="button">
<span class="icon-delete"></span>
</button>
</div>
</div>
{% endblock %}
{% block scripts %}