[advancedcontentfilter] Move from vue-resource to jQuery ajax

- Remove commented code
- Add custom $.ajaxJSON function
- Add error message display when showVariables fails
- Use Friendica core vue script path
This commit is contained in:
Hypolite Petovan 2018-04-17 20:37:23 -04:00
parent 4c4a8da612
commit faad559799
3 changed files with 56 additions and 48 deletions

View file

@ -1,4 +1,16 @@
Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('#csrf').getAttribute('value'); $.ajaxSetup({headers: {'X-CSRF-Token': document.querySelector('#csrf').getAttribute('value')}});
$.extend({
ajaxJSON: function(method, url, data) {
return $.ajax({
type: method.toUpperCase(),
url: url,
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
}
});
new Vue({ new Vue({
el: '#rules', el: '#rules',
@ -23,10 +35,6 @@ new Vue({
} }
}, },
//created: function () {
// this.fetchRules();
//},
methods: { methods: {
resetForm: function() { resetForm: function() {
this.rule = {id: '', name: '', expression: '', created: ''}; this.rule = {id: '', name: '', expression: '', created: ''};
@ -34,24 +42,17 @@ new Vue({
this.editedIndex = null; this.editedIndex = null;
}, },
//fetchRules: function () {
// this.$http.get('/advancedcontentfilter/api/rules')
// .then(function (response) {
// this.rules = response.body;
// }, function (err) {
// console.log(err);
// });
//},
addRule: function () { addRule: function () {
if (this.rule.name.trim()) { if (this.rule.name.trim()) {
this.errorMessage = ''; this.errorMessage = '';
this.$http.post('/advancedcontentfilter/api/rules', this.rule)
.then(function (res) { var self = this;
this.rules.push(res.body.rule); $.ajaxJSON('post', '/advancedcontentfilter/api/rules', this.rule)
this.resetForm(); .then(function (responseJSON) {
}, function (err) { self.rules.push(responseJSON.rule);
this.errorMessage = err.body.message; self.resetForm();
}, function (response) {
self.errorMessage = response.responseJSON.message;
}); });
} }
}, },
@ -64,47 +65,55 @@ new Vue({
saveRule: function (rule) { saveRule: function (rule) {
this.errorMessage = ''; this.errorMessage = '';
this.$http.put('/advancedcontentfilter/api/rules/' + rule.id, rule)
.then(function (res) { var self = this;
this.rules[this.editedIndex] = rule; $.ajaxJSON('put', '/advancedcontentfilter/api/rules/' + rule.id, rule)
this.resetForm(); .then(function () {
}, function (err) { self.rules[self.editedIndex] = rule;
this.errorMessage = err.body.message; self.resetForm();
}, function (response) {
self.errorMessage = response.responseJSON.message;
}); });
}, },
toggleActive: function (rule) { toggleActive: function (rule) {
this.$http.put('/advancedcontentfilter/api/rules/' + rule.id, {'active': Math.abs(parseInt(rule.active) - 1)}) var previousValue = this.rules[this.rules.indexOf(rule)].active;
.then(function (res) { var newValue = Math.abs(parseInt(rule.active) - 1);
this.rules[this.rules.indexOf(rule)].active = Math.abs(parseInt(rule.active) - 1);
}, function (err) { this.rules[this.rules.indexOf(rule)].active = newValue;
console.log(err);
var self = this;
$.ajaxJSON('put', '/advancedcontentfilter/api/rules/' + rule.id, {'active': newValue})
.fail(function (response) {
self.rules[self.rules.indexOf(rule)].active = previousValue;
console.log(response.responseJSON.message);
}); });
}, },
deleteRule: function (rule) { deleteRule: function (rule) {
if (confirm('Are you sure you want to delete this rule?')) { if (confirm('Are you sure you want to delete this rule?')) {
this.$http.delete('/advancedcontentfilter/api/rules/' + rule.id) var self = this;
.then(function (res) { $.ajaxJSON('delete', '/advancedcontentfilter/api/rules/' + rule.id)
this.rules.splice(this.rules.indexOf(rule), 1); .then(function () {
}, function (err) { self.rules.splice(self.rules.indexOf(rule), 1);
console.log(err); }, function (response) {
console.log(response.responseJSON.message);
}); });
} }
}, },
showVariables: function () { showVariables: function () {
var guid = '';
var urlParts = this.itemUrl.split('/'); var urlParts = this.itemUrl.split('/');
var guid = urlParts[urlParts.length - 1];
guid = urlParts[urlParts.length - 1]; this.itemJson = '';
this.$http.get('/advancedcontentfilter/api/variables/' + guid) var self = this;
.then(function (response) { $.ajaxJSON('get', '/advancedcontentfilter/api/variables/' + guid)
this.itemJson = response.bodyText; .then(function (responseJSON) {
}, function (err) { self.itemJson = responseJSON.variables;
console.log(err); }, function (response) {
self.itemJson = response.responseJSON.message;
}); });
return false; return false;

View file

@ -416,5 +416,5 @@ function advancedcontentfilter_get_variables_guid(ServerRequestInterface $reques
$return[str_replace('-', '_', $key)] = $value; $return[str_replace('-', '_', $key)] = $value;
} }
return str_replace('\\\'', '\'', var_export($return, true)); return json_encode(['variables' => str_replace('\\\'', '\'', var_export($return, true))]);
} }

View file

@ -85,7 +85,7 @@
<button type="submit" class="btn btn-primary">Show Variables</button> <button type="submit" class="btn btn-primary">Show Variables</button>
</fieldset> </fieldset>
</form> </form>
<pre> <pre v-cloak>
{{ itemJson }} {{ itemJson }}
</pre> </pre>
</div> </div>
@ -93,7 +93,6 @@
<script> var existingRules = {{$rules}};</script> <script> var existingRules = {{$rules}};</script>
<!-- JS --> <!-- JS -->
<script src="{{$baseurl}}/addon/advancedcontentfilter/vendor/asset/vue/dist/vue.min.js"></script> <script src="{{$baseurl}}/view/asset/vue/dist/vue.min.js"></script>
<script src="{{$baseurl}}/addon/advancedcontentfilter/vendor/asset/vue-resource/dist/vue-resource.min.js"></script>
<script src="{{$baseurl}}/addon/advancedcontentfilter/advancedcontentfilter.js"></script> <script src="{{$baseurl}}/addon/advancedcontentfilter/advancedcontentfilter.js"></script>
</div> </div>