Skip to content

Commit 649a75a

Browse files
simaobsimaob
authored
Merge pull request #3048 from Vizzuality/disposable/release-webhooks-fwpane
Disposable/release webhooks fwpane
2 parents 354a899 + 913a564 commit 649a75a

22 files changed

+827
-65
lines changed

‎app/assets/images/home/[email protected]

84.9 KB
Loading

‎app/assets/javascripts/connect/models/Subscription.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,14 @@ define([
7979
},
8080

8181
hasValidEmail: function() {
82-
var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
83-
return emailRegex.test(this.get('resource').content);
82+
var valid = false;
83+
var content = this.get('resource') && this.get('resource').content || null;
84+
85+
if (content) {
86+
var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
87+
valid = emailRegex.test(content);
88+
}
89+
return valid;
8490
}
8591
});
8692

‎app/assets/javascripts/connect/templates/subscriptionNewCountry.handlebars

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,20 @@
4343
<div class="field -default -medium">
4444
<label for="email">Enter your email address</label>
4545
<input type="email" name="email" placeholder="Enter your email" value="{{email}}">
46+
47+
<div class="separator">
48+
<span>or</span>
49+
</div>
50+
51+
<label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
52+
<input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
53+
<p class="-hint">
54+
<a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
55+
<a href="#" class="js-test-webhook test-webhook">
56+
<span class="webhook-text">Test webhook</span>
57+
<span class="webhook-loader"></span>
58+
</a>
59+
</p>
4660
</div>
4761

4862
<div class="field -default -medium">

‎app/assets/javascripts/connect/templates/subscriptionNewData.handlebars

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,20 @@
5353
<div class="field -default -medium">
5454
<label for="email">Enter your email address</label>
5555
<input type="email" name="email" placeholder="Enter your email" value="{{email}}">
56+
57+
<div class="separator">
58+
<span>or</span>
59+
</div>
60+
61+
<label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
62+
<input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
63+
<p class="-hint">
64+
<a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
65+
<a href="#" class="js-test-webhook test-webhook">
66+
<span class="webhook-text">Test webhook</span>
67+
<span class="webhook-loader"></span>
68+
</a>
69+
</p>
5670
</div>
5771

5872
<div class="field -default -medium">

‎app/assets/javascripts/connect/templates/subscriptionNewDraw.handlebars

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,20 @@
5656
<div class="field -default -medium">
5757
<label for="email">Enter your email address</label>
5858
<input type="email" name="email" placeholder="Enter your email" value="{{email}}">
59+
60+
<div class="separator">
61+
<span>or</span>
62+
</div>
63+
64+
<label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
65+
<input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
66+
<p class="-hint">
67+
<a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
68+
<a href="#" class="js-test-webhook test-webhook">
69+
<span class="webhook-text">Test webhook</span>
70+
<span class="webhook-loader"></span>
71+
</a>
72+
</p>
5973
</div>
6074

6175
<div class="field -default -medium">

‎app/assets/javascripts/connect/views/SubscriptionNewView.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ define([
1818
'connect/views/LayerSelectionView',
1919
'connect/views/DatasetsListView',
2020
'map/services/GeostoreService',
21+
'services/SubscriptionsService',
2122
'text!connect/templates/subscriptionNew.handlebars',
2223
'text!connect/templates/subscriptionNewDraw.handlebars',
2324
'text!connect/templates/subscriptionNewData.handlebars',
@@ -42,6 +43,7 @@ define([
4243
LayerSelectionView,
4344
DatasetsListView,
4445
GeostoreService,
46+
subscriptionsService,
4547
tpl,
4648
tplDraw,
4749
tplData,
@@ -92,6 +94,7 @@ define([
9294
'change #aoi': 'onChangeAOI',
9395
'submit #new-subscription': 'onSubmitSubscription',
9496
'change input,textarea,select' : 'onChangeInput',
97+
'click .js-test-webhook': 'onClickTestWebhook',
9598
},
9699

97100
initialize: function(router, user, params) {
@@ -333,6 +336,8 @@ define([
333336
this.$form = this.$el.find('#new-subscription');
334337
this.$formType = this.$el.find('#new-subscription-content');
335338
this.$selects = this.$el.find('select.chosen-select');
339+
this.$subscriptionUrl = this.$el.find('#subscriptionUrl');
340+
this.$testWebhookButton = this.$el.find('.js-test-webhook');
336341
},
337342

338343
initSubViews: function() {
@@ -369,6 +374,22 @@ define([
369374
})
370375
},
371376

377+
getResource: function(formData) {
378+
var type = 'EMAIL';
379+
var content = this.user.get('email');
380+
381+
if (formData.url && formData.url.length > 0) {
382+
type = 'URL';
383+
content = formData.url;
384+
}
385+
386+
return {
387+
resource: {
388+
type: type,
389+
content: content
390+
}
391+
}
392+
},
372393

373394
/**
374395
* CHANGE EVENTS
@@ -497,7 +518,37 @@ define([
497518
}.bind(this));
498519
},
499520

521+
onClickTestWebhook: function (e) {
522+
e && e.preventDefault();
523+
524+
var value = this.$subscriptionUrl.val();
525+
526+
if (value !== '' && !this.$testWebhookButton.hasClass('-loading')) {
527+
_.each(this.subscription.attributes.datasets, function(dataset, i) {
528+
setTimeout(function () {
529+
subscriptionsService.testWebhook(this.$subscriptionUrl.val(), dataset)
530+
}.bind(this), i * 100);
531+
}.bind(this));
500532

533+
var loader = this.$testWebhookButton.find('.webhook-loader');
534+
loader.html(this.$testWebhookButton.find('.webhook-text').html());
535+
this.$testWebhookButton.addClass('-loading');
536+
var intervalTimes = 0;
537+
var pointsInterval = setInterval(function() {
538+
if (intervalTimes === 3) {
539+
loader.html('Test webhook - data sent');
540+
setTimeout(function () {
541+
this.$testWebhookButton.removeClass('-loading');
542+
}.bind(this), 2000);
543+
544+
clearInterval(pointsInterval);
545+
} else {
546+
loader.html(loader.html() + '.');
547+
}
548+
intervalTimes++;
549+
}.bind(this), 500);
550+
}
551+
},
501552

502553

503554
/**

‎app/assets/javascripts/map/presenters/tabs/SubscribePresenter.js

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -94,49 +94,73 @@ define([
9494
this.view.updateCurrentStep(this.currentStep);
9595
},
9696

97-
// Email
98-
checkEmail: function(email) {
99-
this.subscription.set('resource', {
100-
type: 'EMAIL',
101-
content: email
102-
});
97+
previousStep: function() {
98+
this.currentStep -= 1;
99+
100+
this.view.updateCurrentStep(this.currentStep);
101+
},
102+
103+
// Email or URL (Webhook)
104+
checkEmailOrURL: function(params) {
105+
var type = 'EMAIL';
106+
var content = params.email;
107+
108+
if (params.url && params.url.length > 0) {
109+
type = 'URL';
110+
content = params.url;
103111

104-
if (this.subscription.hasValidEmail()) {
105112
this.getDatasets();
106113
this.nextStep();
107114
} else {
108-
this.publishNotification('notification-email-incorrect');
115+
if (params.email || this.subscription.hasValidEmail()) {
116+
this.getDatasets();
117+
this.nextStep();
118+
} else {
119+
this.publishNotification('notification-email-incorrect');
120+
}
109121
}
122+
123+
this.subscription.set('resource', {
124+
type: type,
125+
content: content
126+
});
127+
},
128+
129+
goBack: function () {
130+
this.previousStep();
110131
},
111132

112133
getDatasets: function() {
113-
var params = this.subscription.attributes.params;
114-
params = _.extend({}, params, params.iso);
115-
var paramsValues = _.pick(params, 'use', 'useid', 'wdpaid',
116-
'geostore', 'country', 'region');
117-
118-
var values = _.compact(_.values(paramsValues));
119-
120-
if (values.length) {
121-
this.view.renderDatasets({
122-
datasets: []
123-
});
124-
125-
CoverageService.get(params)
126-
.then(function(layers) {
127-
this.view.renderDatasets({
128-
datasets: datasetsHelper.getFilteredList(layers, this.subscription.attributes.datasets)
129-
});
130-
}.bind(this))
131-
132-
.error(function(error) {
133-
console.log(error);
134-
}.bind(this));
135-
} else {
136-
this.view.renderDatasets({
137-
datasets: datasetsHelper.getListSelected(this.subscription.attributes.datasets)
138-
});
134+
if (typeof this.subscription !== 'undefined') {
135+
var params = this.subscription.attributes.params;
136+
params = _.extend({}, params, params.iso);
137+
var paramsValues = _.pick(params, 'use', 'useid', 'wdpaid',
138+
'geostore', 'country', 'region');
139+
140+
var values = _.compact(_.values(paramsValues));
141+
142+
if (values.length) {
143+
this.view.renderDatasets({
144+
datasets: []
145+
});
146+
147+
CoverageService.get(params)
148+
.then(function(layers) {
149+
this.view.renderDatasets({
150+
datasets: datasetsHelper.getFilteredList(layers, this.subscription.attributes.datasets)
151+
});
152+
}.bind(this))
153+
154+
.error(function(error) {
155+
console.log(error);
156+
}.bind(this));
157+
} else {
158+
this.view.renderDatasets({
159+
datasets: datasetsHelper.getListSelected(this.subscription.attributes.datasets)
160+
});
161+
}
139162
}
163+
140164
},
141165

142166
updateDatasets: function(datasets) {
@@ -160,7 +184,12 @@ define([
160184

161185
// Set email and save it in the user Model
162186
this.user.setEmailIfEmpty(this.subscription.get('resource').content);
163-
this.user.save({ email: this.user.attributes.email }, { patch: true });
187+
this.user.setLanguageIfEmpty(this.subscription.get('language'));
188+
189+
this.user.save({
190+
email: this.user.attributes.email,
191+
language: this.user.attributes.language
192+
}, { patch: true });
164193

165194
this.subscription.save()
166195
.then(this.onSubscriptionSave.bind(this))

‎app/assets/javascripts/map/templates/tabs/subscribe.handlebars

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,10 @@
1717
{{#if loggedIn}}
1818
<div class="steps current">
1919
<header>
20-
<h2>Subscribe to alerts</h2>
21-
<p>
22-
{{#if dataset}}
23-
Enter your email below to receive an email notification when
24-
there are new <strong>{{dataset}}</strong> available for this area.
25-
{{else}}
26-
Enter your email below to subscribe to this area.
27-
{{/if}}
28-
</p>
20+
<h2>Forest change alerts</h2>
2921
</header>
30-
31-
<input class="field" type="email" id="subscriptionEmail" placeholder="Enter your email" value="{{email}}">
32-
<div class="m-btncontainer is-center">
33-
<button class="btn medium green uppercase" id="showName">Next</button>
34-
</div>
22+
<p>Select the forest change alerts you would like to receive</p>
23+
<div id="subscription-datasets"></div>
3524
</div>
3625
{{else}}
3726
<div class="steps current">
@@ -71,13 +60,46 @@
7160

7261
<div class="steps">
7362
<header>
74-
<h2>Forest change alerts</h2>
63+
<h2>Subscribe to alerts</h2>
64+
<p>
65+
{{#if dataset}}
66+
Enter your email below to receive an email notification when
67+
there are new <strong>{{dataset}}</strong> available for this area.
68+
{{else}}
69+
Enter your email below to subscribe to this area.
70+
{{/if}}
71+
</p>
7572
</header>
7673

77-
<p>Select the forest change alerts you would like to receive</p>
78-
79-
<div id="subscription-datasets"></div>
80-
74+
<ul class="m-tabs">
75+
<div class="tabs">
76+
<div class="tab">
77+
<input type="radio" name="tabs" id="tab1" checked />
78+
<label for="tab1" tabindex="0">E-mail</label>
79+
<div id="tab-content1" class="tab-content">
80+
<input class="field" type="email" id="subscriptionEmail" placeholder="Enter your email" value="{{email}}">
81+
</div>
82+
</div>
83+
<div class="tab">
84+
<input type="radio" name="tabs" id="tab2" />
85+
<label for="tab2">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
86+
<div id="tab-content2" class="tab-content">
87+
<input class="field" type="text" id="subscriptionUrl" placeholder="Enter your url" value="{{url}}">
88+
<p>
89+
<a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
90+
<a href="#" class="js-test-webhook test-webhook">
91+
<span class="webhook-text">Test webhook</span>
92+
<span class="webhook-loader"></span>
93+
</a>
94+
</p>
95+
</div>
96+
</div>
97+
</div>
98+
</ul>
99+
<div class="m-btncontainer is-space-between">
100+
<button class="btn medium green uppercase js-subscribe-back">Back</button>
101+
<button class="btn medium green uppercase" id="showName">Next</button>
102+
</div>
81103
</div>
82104

83105
<div class="steps">
@@ -101,7 +123,8 @@
101123
</div>
102124
</div>
103125

104-
<div class="m-btncontainer is-center">
126+
<div class="m-btncontainer is-space-between">
127+
<button class="btn medium green uppercase js-subscribe-back">Back</button>
105128
<button class="btn medium green uppercase" id="subscribe">Save</button>
106129
</div>
107130
</div>

‎app/assets/javascripts/map/templates/tabs/subscribeDatasets.handlebars

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</div>
1717
</div>
1818

19-
<div class="m-btncontainer is-center">
19+
<div class="m-btncontainer is-flex-end">
2020
<button class="btn medium green uppercase" id="datasets">Next</button>
2121
</div>
2222
{{else}}

0 commit comments

Comments
 (0)