mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-19 04:49:30 +00:00
Move v1 assets
This commit is contained in:
James Cole
166
resources/assets/v1/src/components/webhooks/Create.vue
Normal file
166
resources/assets/v1/src/components/webhooks/Create.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<!--
|
||||
- Create.vue
|
||||
- Copyright (c) 2022 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<form accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
|
||||
<input name="_token" type="hidden" value="xxx">
|
||||
|
||||
<div v-if="error_message !== ''" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>{{ $t("firefly.flash_error") }}</strong> {{ error_message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="success_message !== ''" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>{{ $t("firefly.flash_success") }}</strong> <span v-html="success_message"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12 col-sm-12">
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
{{ $t('firefly.create_new_webhook') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<Title :value=this.title :error="errors.title" v-on:input="title = $event"></Title>
|
||||
<WebhookTrigger :value=this.trigger :error="errors.trigger"
|
||||
v-on:input="trigger = $event"></WebhookTrigger>
|
||||
<WebhookResponse :value=this.response :error="errors.response"
|
||||
v-on:input="response = $event"></WebhookResponse>
|
||||
<WebhookDelivery :value=this.delivery :error="errors.delivery"
|
||||
v-on:input="delivery = $event"></WebhookDelivery>
|
||||
<URL :value=this.url :error="errors.url" v-on:input="url = $event"></URL>
|
||||
<Checkbox :value=this.active :error="errors.active" help="ACTIVE HELP TODO" :title="$t('form.active')" v-on:input="active = $event"></Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="btn-group">
|
||||
<button id="submitButton" ref="submitButton" class="btn btn-success" @click="submit">
|
||||
{{ $t('firefly.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-success" v-html="success_message"></p>
|
||||
<p class="text-danger" v-html="error_message"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Title from "../form/Title";
|
||||
import WebhookTrigger from "../form/WebhookTrigger";
|
||||
import WebhookResponse from "../form/WebhookResponse";
|
||||
import WebhookDelivery from "../form/WebhookDelivery";
|
||||
import URL from "../form/URL";
|
||||
import Checkbox from "../form/Checkbox";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
components: {URL, Title, WebhookTrigger, WebhookResponse, WebhookDelivery, Checkbox},
|
||||
data() {
|
||||
return {
|
||||
error_message: '',
|
||||
success_message: '',
|
||||
title: '',
|
||||
trigger: 100,
|
||||
response: 200,
|
||||
delivery: 300,
|
||||
active: true,
|
||||
url: '',
|
||||
errors: {
|
||||
title: [],
|
||||
trigger: [],
|
||||
response: [],
|
||||
delivery: [],
|
||||
url: [],
|
||||
active: []
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit: function (e) {
|
||||
// reset messages
|
||||
this.error_message = '';
|
||||
this.success_message = '';
|
||||
this.errors = {
|
||||
title: [],
|
||||
trigger: [],
|
||||
response: [],
|
||||
delivery: [],
|
||||
url: [],
|
||||
active: [],
|
||||
};
|
||||
|
||||
// disable button
|
||||
$('#submitButton').prop("disabled", true);
|
||||
|
||||
// collect data
|
||||
let data = {
|
||||
title: this.title,
|
||||
trigger: this.trigger,
|
||||
response: this.response,
|
||||
delivery: this.delivery,
|
||||
url: this.url,
|
||||
active: this.active,
|
||||
};
|
||||
|
||||
// post!
|
||||
axios.post('./api/v1/webhooks', data).then((response) => {
|
||||
//this.success_message = $.text(response.data.message);
|
||||
// console.log('Will now go to redirectUser()');
|
||||
let webhookId = response.data.data.id;
|
||||
window.location.href = window.previousUrl + '?webhook_id=' + webhookId + '&message=created';
|
||||
}).catch((error) => {
|
||||
//console.log(error.response.data);
|
||||
this.error_message = error.response.data.message;
|
||||
this.errors.title = error.response.data.errors.title;
|
||||
this.errors.trigger = error.response.data.errors.trigger;
|
||||
this.errors.response = error.response.data.errors.response;
|
||||
this.errors.delivery = error.response.data.errors.delivery;
|
||||
this.errors.url = error.response.data.errors.url;
|
||||
|
||||
// enable button again
|
||||
$('#submitButton').prop("disabled", false);
|
||||
|
||||
});
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
211
resources/assets/v1/src/components/webhooks/Edit.vue
Normal file
211
resources/assets/v1/src/components/webhooks/Edit.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<!--
|
||||
- Edit.vue
|
||||
- Copyright (c) 2022 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<form accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
|
||||
<input name="_token" type="hidden" value="xxx">
|
||||
|
||||
<div v-if="error_message !== ''" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>{{ $t("firefly.flash_error") }}</strong> {{ error_message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="success_message !== ''" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>{{ $t("firefly.flash_success") }}</strong> <span v-html="success_message"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12 col-sm-12">
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
{{ $t('firefly.edit_webhook_js', {title: this.title}) }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<Title :value=this.title :error="errors.title" v-on:input="title = $event"></Title>
|
||||
<WebhookTrigger :value=this.trigger :error="errors.trigger"
|
||||
v-on:input="trigger = $event"></WebhookTrigger>
|
||||
<WebhookResponse :value=this.response :error="errors.response"
|
||||
v-on:input="response = $event"></WebhookResponse>
|
||||
<WebhookDelivery :value=this.delivery :error="errors.delivery"
|
||||
v-on:input="delivery = $event"></WebhookDelivery>
|
||||
<URL :value=this.url :error="errors.url" v-on:input="url = $event"></URL>
|
||||
<Checkbox :value=this.active :error="errors.active" help="ACTIVE HELP TODO" :title="$t('form.active')"
|
||||
v-on:input="active = $event"></Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="btn-group">
|
||||
<button id="submitButton" ref="submitButton" class="btn btn-success" @click="submit">
|
||||
{{ $t('firefly.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-success" v-html="success_message"></p>
|
||||
<p class="text-danger" v-html="error_message"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Title from "../form/Title";
|
||||
import WebhookTrigger from "../form/WebhookTrigger";
|
||||
import WebhookResponse from "../form/WebhookResponse";
|
||||
import WebhookDelivery from "../form/WebhookDelivery";
|
||||
import URL from "../form/URL";
|
||||
import Checkbox from "../form/Checkbox";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
components: {URL, Title, WebhookTrigger, WebhookResponse, WebhookDelivery, Checkbox},
|
||||
data() {
|
||||
return {
|
||||
error_message: '',
|
||||
success_message: '',
|
||||
title: '',
|
||||
trigger: 100,
|
||||
response: 200,
|
||||
delivery: 300,
|
||||
id: 0,
|
||||
active: false,
|
||||
url: '',
|
||||
errors: {
|
||||
title: [],
|
||||
trigger: [],
|
||||
response: [],
|
||||
delivery: [],
|
||||
url: [],
|
||||
active: []
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getWebhook();
|
||||
},
|
||||
methods: {
|
||||
getWebhook: function () {
|
||||
const page = window.location.href.split('/');
|
||||
const webhookId = parseInt(page[page.length - 1]);
|
||||
this.downloadWebhook(webhookId);
|
||||
},
|
||||
downloadWebhook: function (id) {
|
||||
axios.get('./api/v1/webhooks/' + id).then(response => {
|
||||
console.log(response.data.data.attributes);
|
||||
this.title = response.data.data.attributes.title;
|
||||
this.id = parseInt(response.data.data.id);
|
||||
|
||||
// trigger value on content
|
||||
if ('STORE_TRANSACTION' === response.data.data.attributes.trigger) {
|
||||
this.trigger = 100;
|
||||
}
|
||||
if ('UPDATE_TRANSACTION' === response.data.data.attributes.trigger) {
|
||||
this.trigger = 110;
|
||||
}
|
||||
if ('DESTROY_TRANSACTION' === response.data.data.attributes.trigger) {
|
||||
this.trigger = 120;
|
||||
}
|
||||
|
||||
// response value
|
||||
if ('TRANSACTIONS' === response.data.data.attributes.response) {
|
||||
this.response = 200;
|
||||
}
|
||||
if ('ACCOUNTS' === response.data.data.attributes.response) {
|
||||
this.response = 210;
|
||||
}
|
||||
if ('NONE' === response.data.data.attributes.response) {
|
||||
this.response = 220;
|
||||
}
|
||||
if ('JSON' === response.data.data.attributes.delivery) {
|
||||
this.delivery = 300;
|
||||
}
|
||||
|
||||
this.active = response.data.data.attributes.active;
|
||||
this.url = response.data.data.attributes.url;
|
||||
}).catch(error => {
|
||||
this.error_message = error.response.data.message;
|
||||
});
|
||||
},
|
||||
submit: function (e) {
|
||||
// reset messages
|
||||
this.error_message = '';
|
||||
this.success_message = '';
|
||||
this.errors = {
|
||||
title: [],
|
||||
trigger: [],
|
||||
response: [],
|
||||
delivery: [],
|
||||
url: [],
|
||||
active: [],
|
||||
};
|
||||
|
||||
// disable button
|
||||
$('#submitButton').prop("disabled", true);
|
||||
|
||||
// collect data
|
||||
let data = {
|
||||
title: this.title,
|
||||
trigger: this.trigger,
|
||||
response: this.response,
|
||||
delivery: this.delivery,
|
||||
url: this.url,
|
||||
active: this.active,
|
||||
};
|
||||
|
||||
// post!
|
||||
axios.put('./api/v1/webhooks/' + this.id, data).then((response) => {
|
||||
let webhookId = response.data.data.id;
|
||||
window.location.href = window.previousUrl + '?webhook_id=' + webhookId + '&message=updated';
|
||||
}).catch((error) => {
|
||||
|
||||
this.error_message = error.response.data.message;
|
||||
this.errors.title = error.response.data.errors.title;
|
||||
this.errors.trigger = error.response.data.errors.trigger;
|
||||
this.errors.response = error.response.data.errors.response;
|
||||
this.errors.delivery = error.response.data.errors.delivery;
|
||||
this.errors.url = error.response.data.errors.url;
|
||||
|
||||
// enable button again
|
||||
$('#submitButton').prop("disabled", false);
|
||||
|
||||
});
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
159
resources/assets/v1/src/components/webhooks/Index.vue
Normal file
159
resources/assets/v1/src/components/webhooks/Index.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<!--
|
||||
- Index.vue
|
||||
- Copyright (c) 2022 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
{{ $t('firefly.webhooks') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="box-body no-padding">
|
||||
<div style="padding:8px;">
|
||||
<a href="webhooks/create" class="btn btn-success"><span class="fa fa-plus fa-fw"></span>{{ $t('firefly.create_new_webhook') }}</a>
|
||||
</div>
|
||||
|
||||
<table class="table table-responsive table-hover" v-if="webhooks.length > 0" aria-label="A table.">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Responds when</th>
|
||||
<th>Responds with (delivery)</th>
|
||||
<th style="width:20%;">Secret (show / hide)</th>
|
||||
<th>URL</th>
|
||||
<th class="hidden-sm hidden-xs"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="webhook in webhooks" :key="webhook.id">
|
||||
<td>
|
||||
<a :href="'webhooks/show/' + webhook.id">{{ webhook.title }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="webhook.active">{{ triggers[webhook.trigger] }}</span>
|
||||
<span v-if="!webhook.active" class="text-muted"><s>{{ triggers[webhook.trigger] }}</s> ({{ $t('firefly.inactive') }})</span>
|
||||
</td>
|
||||
<td>{{ responses[webhook.response] }} ({{ deliveries[webhook.delivery] }})</td>
|
||||
<td>
|
||||
<em style="cursor:pointer"
|
||||
v-if="webhook.show_secret" class="fa fa-eye" @click="toggleSecret(webhook)"></em>
|
||||
<em style="cursor:pointer"
|
||||
v-if="!webhook.show_secret" class="fa fa-eye-slash" @click="toggleSecret(webhook)"></em>
|
||||
<code v-if="webhook.show_secret">{{ webhook.secret }}</code>
|
||||
<code v-if="!webhook.show_secret">********</code>
|
||||
</td>
|
||||
<td>
|
||||
<code :title="webhook.full_url">{{ webhook.url }}</code>
|
||||
|
||||
</td>
|
||||
<td class="hidden-sm hidden-xs">
|
||||
<div class="btn-group btn-group-xs pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ $t('firefly.actions') }} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li><a :href="'webhooks/show/' + webhook.id"><span class="fa fa-fw fa-search"></span> {{ $t('firefly.inspect') }}</a></li>
|
||||
<li><a :href="'webhooks/edit/' + webhook.id"><span class="fa fa-fw fa-pencil"></span> {{$t( 'firefly.edit') }}</a></li>
|
||||
<li><a :href="'webhooks/delete/' + webhook.id"><span class="fa fa-fw fa-trash"></span> {{ $t('firefly.delete') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="webhooks.length > 0" style="padding:8px;">
|
||||
<a href="webhooks/create" class="btn btn-success"><span class="fa fa-plus fa-fw"></span>{{ $t('firefly.create_new_webhook') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Index",
|
||||
data() {
|
||||
return {
|
||||
webhooks: [],
|
||||
triggers: {
|
||||
STORE_TRANSACTION: this.$t('firefly.webhook_trigger_STORE_TRANSACTION'),
|
||||
UPDATE_TRANSACTION: this.$t('firefly.webhook_trigger_UPDATE_TRANSACTION'),
|
||||
DESTROY_TRANSACTION: this.$t('firefly.webhook_trigger_DESTROY_TRANSACTION'),
|
||||
},
|
||||
responses: {
|
||||
TRANSACTIONS: this.$t('firefly.webhook_response_TRANSACTIONS'),
|
||||
ACCOUNTS: this.$t('firefly.webhook_response_ACCOUNTS'),
|
||||
NONE: this.$t('firefly.webhook_response_none_NONE'),
|
||||
},
|
||||
deliveries: {
|
||||
JSON: this.$t('firefly.webhook_delivery_JSON'),
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getWebhooks();
|
||||
},
|
||||
methods: {
|
||||
getWebhooks: function () {
|
||||
this.webhooks = [];
|
||||
this.downloadWebhooks(1);
|
||||
},
|
||||
toggleSecret: function (webhook) {
|
||||
webhook.show_secret = !webhook.show_secret;
|
||||
},
|
||||
downloadWebhooks: function (page) {
|
||||
axios.get("/api/v1/webhooks?page=" + page).then((response) => {
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
let webhook = {
|
||||
id: current.id,
|
||||
title: current.attributes.title,
|
||||
url: current.attributes.url,
|
||||
active: current.attributes.active,
|
||||
full_url: current.attributes.url,
|
||||
secret: current.attributes.secret,
|
||||
trigger: current.attributes.trigger,
|
||||
response: current.attributes.response,
|
||||
delivery: current.attributes.delivery,
|
||||
show_secret: false,
|
||||
};
|
||||
if(current.attributes.url.length > 20) {
|
||||
webhook.url = current.attributes.url.slice(0, 20) + '...';
|
||||
}
|
||||
this.webhooks.push(webhook);
|
||||
}
|
||||
}
|
||||
|
||||
if (response.data.meta.pagination.current_page < response.data.meta.pagination.total_pages) {
|
||||
this.downloadWebhooks(response.data.meta.pagination.current_page + 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
384
resources/assets/v1/src/components/webhooks/Show.vue
Normal file
384
resources/assets/v1/src/components/webhooks/Show.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<!--
|
||||
- Show.vue
|
||||
- Copyright (c) 2022 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="success_message !== ''" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>{{ $t("firefly.flash_success") }}</strong> <span v-html="success_message"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">{{ title }}</h3>
|
||||
</div>
|
||||
<div class="box-body no-padding">
|
||||
<table class="table table-hover" aria-label="A table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width:40%;">Title</th>
|
||||
<td>{{ title }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">{{ $t('list.active') }}</th>
|
||||
<td>
|
||||
<em class="fa fa-check text-success" v-if="active"></em>
|
||||
<em class="fa fa-times text-danger" v-if="!active"></em>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">{{ $t('list.trigger') }}</th>
|
||||
<td> {{ trigger }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">{{ $t('list.response') }}</th>
|
||||
<td> {{ response }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">{{ $t('list.delivery') }}</th>
|
||||
<td> {{ delivery }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="btn-group pull-right">
|
||||
<a :href=edit_url class="btn btn-default"><em class="fa fa-pencil"></em> {{ $t('firefly.edit') }}</a>
|
||||
<a id="triggerButton" v-if="active" href="#" @click="submitTest" :class="disabledTrigger ? 'btn btn-default disabled ' : 'btn btn-default'"><em
|
||||
class="fa fa-bolt"></em>
|
||||
{{ $t('list.trigger') }}
|
||||
</a>
|
||||
<a :href=delete_url class="btn btn-danger"><em class="fa fa-trash"></em> {{ $t('firefly.delete') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">{{ $t('firefly.meta_data') }}</h3>
|
||||
</div>
|
||||
<div class="box-body no-padding">
|
||||
<table class="table table-hover" aria-label="A table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" style="width:40%;">{{ $t('list.url') }}</th>
|
||||
<td><input type="text" readonly class="form-control" :value=url></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('list.secret') }}
|
||||
</td>
|
||||
<td>
|
||||
<em style="cursor:pointer"
|
||||
v-if="show_secret" class="fa fa-eye" @click="toggleSecret"></em>
|
||||
<em style="cursor:pointer"
|
||||
v-if="!show_secret" class="fa fa-eye-slash" @click="toggleSecret"></em>
|
||||
<code v-if="show_secret">{{ secret }}</code>
|
||||
<code v-if="!show_secret">********</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<a :href=url class="btn btn-default">
|
||||
<em class="fa fa-globe-europe"></em> {{ $t('firefly.visit_webhook_url') }}
|
||||
</a>
|
||||
<a @click="resetSecret" class="btn btn-default">
|
||||
<em class="fa fa-lock"></em> {{ $t('firefly.reset_webhook_secret') }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">{{ $t('firefly.webhook_messages') }}</h3>
|
||||
</div>
|
||||
<div class="box-body" v-if="messages.length === 0 && !loading">
|
||||
<p>
|
||||
{{ $t('firefly.no_webhook_messages') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="box-body" v-if="loading">
|
||||
<p class="text-center">
|
||||
<em class="fa fa-spin fa-spinner"></em>
|
||||
</p>
|
||||
</div>
|
||||
<div class="box-body no-padding" v-if="messages.length > 0 && !loading">
|
||||
<table class="table table-hover" aria-label="A table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Date and time
|
||||
</th>
|
||||
<th>
|
||||
UID
|
||||
</th>
|
||||
<th>
|
||||
Success?
|
||||
</th>
|
||||
<th>
|
||||
More details
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="message in messages">
|
||||
<td>
|
||||
{{ message.created_at }}
|
||||
</td>
|
||||
<td>
|
||||
{{ message.uuid }}
|
||||
</td>
|
||||
<td>
|
||||
<em class="fa fa-check text-success" v-if="message.success"></em>
|
||||
<em class="fa fa-times text-danger" v-if="!message.success"></em>
|
||||
</td>
|
||||
<td>
|
||||
<a @click="showWebhookMessage(message.id)" class="btn btn-default">
|
||||
<em class="fa fa-envelope"></em>
|
||||
{{ $t('firefly.view_message') }}
|
||||
</a>
|
||||
<a @click="showWebhookAttempts(message.id)" class="btn btn-default">
|
||||
<em class="fa fa-cloud-upload"></em>
|
||||
{{ $t('firefly.view_attempts') }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- modal for message content -->
|
||||
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ $t('firefly.message_content_title') }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ $t('firefly.message_content_help') }}
|
||||
</p>
|
||||
<textarea class="form-control" rows="10" readonly>{{ message_content }}</textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ $t('firefly.close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal for message attempts -->
|
||||
<div class="modal fade" id="attemptModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ $t('firefly.attempt_content_title') }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ $t('firefly.attempt_content_help') }}
|
||||
</p>
|
||||
<p v-if="0===message_attempts.length">
|
||||
<em>
|
||||
{{ $t('firefly.no_attempts') }}
|
||||
</em>
|
||||
</p>
|
||||
<div v-for="message in message_attempts" style="border:1px #eee solid;margin-bottom:0.5em;">
|
||||
<strong>
|
||||
{{ $t('firefly.webhook_attempt_at', {moment: message.created_at}) }}
|
||||
<span class="text-danger">({{ message.status_code }})</span>
|
||||
</strong>
|
||||
<p>
|
||||
{{ $t('firefly.logs') }}: <br/>
|
||||
<textarea class="form-control" rows="5" readonly>{{ message.logs }}</textarea>
|
||||
</p>
|
||||
<p v-if="null !== message.response">
|
||||
{{ $t('firefly.response') }}: <br/>
|
||||
<textarea class="form-control" rows="5" readonly>{{ message.response }}</textarea>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ $t('firefly.close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import format from "date-fns/format";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
mounted() {
|
||||
this.getWebhook();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
url: '',
|
||||
id: 0,
|
||||
secret: '',
|
||||
show_secret: false,
|
||||
trigger: '',
|
||||
loading: true,
|
||||
response: '',
|
||||
message_content: '',
|
||||
message_attempts: [],
|
||||
delivery: '',
|
||||
messages: [],
|
||||
active: false,
|
||||
edit_url: '#',
|
||||
delete_url: '#',
|
||||
success_message: '',
|
||||
disabledTrigger: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getWebhook() {
|
||||
this.loading = true;
|
||||
const page = window.location.href.split('/');
|
||||
this.id = parseInt(page[page.length - 1]);
|
||||
this.downloadWebhook();
|
||||
this.downloadWebhookMessages();
|
||||
},
|
||||
toggleSecret: function () {
|
||||
this.show_secret = !this.show_secret;
|
||||
},
|
||||
submitTest: function (e) {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
let journalId = parseInt(prompt('Enter a transaction ID'));
|
||||
if (journalId !== null && journalId > 0 && journalId <= 16777216) {
|
||||
console.log('OK 1');
|
||||
this.disabledTrigger = true;
|
||||
// disable button. Add informative message.
|
||||
//let button = $('#triggerButton');
|
||||
//button.prop('disabled', true).addClass('disabled');
|
||||
|
||||
this.success_message = this.$t('firefly.webhook_was_triggered');
|
||||
// TODO actually trigger the webhook.
|
||||
axios.post('./api/v1/webhooks/' + this.id + '/trigger-transaction/' + journalId, {});
|
||||
//button.prop('disabled', false).removeClass('disabled');
|
||||
console.log('OK 2');
|
||||
|
||||
// set a time-outs.
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.getWebhook();
|
||||
this.disabledTrigger = false;
|
||||
}, 2000);
|
||||
console.log('OK 3');
|
||||
}
|
||||
|
||||
|
||||
return false;
|
||||
},
|
||||
resetSecret: function () {
|
||||
axios.put('./api/v1/webhooks/' + this.id, {secret: 'anything'}).then(() => {
|
||||
this.downloadWebhook();
|
||||
});
|
||||
},
|
||||
downloadWebhookMessages: function () {
|
||||
this.messages = [];
|
||||
axios.get('./api/v1/webhooks/' + this.id + '/messages').then(response => {
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
this.messages.push({
|
||||
id: current.id,
|
||||
created_at: format(new Date(current.attributes.created_at), this.$t('config.date_time_fns')),
|
||||
uuid: current.attributes.uuid,
|
||||
success: current.attributes.sent && !current.attributes.errored,
|
||||
message: current.attributes.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
showWebhookMessage: function (id) {
|
||||
axios.get('./api/v1/webhooks/' + this.id + '/messages/' + id).then(response => {
|
||||
$('#messageModal').modal('show');
|
||||
this.message_content = response.data.data.attributes.message;
|
||||
});
|
||||
},
|
||||
showWebhookAttempts: function (id) {
|
||||
this.message_attempts = [];
|
||||
axios.get('./api/v1/webhooks/' + this.id + '/messages/' + id + '/attempts').then(response => {
|
||||
$('#attemptModal').modal('show');
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
this.message_attempts.push({
|
||||
id: current.id,
|
||||
created_at: format(new Date(current.attributes.created_at), this.$t('config.date_time_fns')),
|
||||
logs: current.attributes.logs,
|
||||
status_code: current.attributes.status_code,
|
||||
response: current.attributes.response,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadWebhook: function () {
|
||||
axios.get('./api/v1/webhooks/' + this.id).then(response => {
|
||||
console.log(response.data.data.attributes);
|
||||
this.edit_url = './webhooks/edit/' + this.id;
|
||||
this.delete_url = './webhooks/delete/' + this.id;
|
||||
this.title = response.data.data.attributes.title;
|
||||
this.url = response.data.data.attributes.url;
|
||||
this.secret = response.data.data.attributes.secret;
|
||||
this.trigger = this.$t('firefly.webhook_trigger_' + response.data.data.attributes.trigger);
|
||||
this.response = this.$t('firefly.webhook_response_' + response.data.data.attributes.response);
|
||||
this.delivery = this.$t('firefly.webhook_delivery_' + response.data.data.attributes.delivery);
|
||||
|
||||
this.active = response.data.data.attributes.active;
|
||||
this.url = response.data.data.attributes.url;
|
||||
}).catch(error => {
|
||||
this.error_message = error.response.data.message;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user