diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 6 | ||||
-rw-r--r-- | src/assets/defaults.yml | 3 | ||||
-rw-r--r-- | src/components/Service.vue | 3 | ||||
-rw-r--r-- | src/components/services/AdGuardHome.vue | 18 | ||||
-rw-r--r-- | src/components/services/Ping.vue | 14 | ||||
-rw-r--r-- | src/mixins/service.js | 43 |
6 files changed, 64 insertions, 23 deletions
diff --git a/src/App.vue b/src/App.vue index 9b4803f..5e71796 100644 --- a/src/App.vue +++ b/src/App.vue | |||
@@ -75,7 +75,8 @@ | |||
75 | <Service | 75 | <Service |
76 | v-for="(item, index) in group.items" | 76 | v-for="(item, index) in group.items" |
77 | :key="index" | 77 | :key="index" |
78 | v-bind:item="item" | 78 | :item="item" |
79 | :proxy="config.proxy" | ||
79 | :class="['column', `is-${12 / config.columns}`]" | 80 | :class="['column', `is-${12 / config.columns}`]" |
80 | /> | 81 | /> |
81 | </template> | 82 | </template> |
@@ -103,7 +104,8 @@ | |||
103 | <Service | 104 | <Service |
104 | v-for="(item, index) in group.items" | 105 | v-for="(item, index) in group.items" |
105 | :key="index" | 106 | :key="index" |
106 | v-bind:item="item" | 107 | :item="item" |
108 | :proxy="config.proxy" | ||
107 | /> | 109 | /> |
108 | </div> | 110 | </div> |
109 | </div> | 111 | </div> |
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml index f011346..ae4f523 100644 --- a/src/assets/defaults.yml +++ b/src/assets/defaults.yml | |||
@@ -42,3 +42,6 @@ colors: | |||
42 | message: ~ | 42 | message: ~ |
43 | links: [] | 43 | links: [] |
44 | services: [] | 44 | services: [] |
45 | |||
46 | |||
47 | proxy: ~ \ No newline at end of file | ||
diff --git a/src/components/Service.vue b/src/components/Service.vue index 39a9ac4..25b86d5 100644 --- a/src/components/Service.vue +++ b/src/components/Service.vue | |||
@@ -1,5 +1,5 @@ | |||
1 | <template> | 1 | <template> |
2 | <component v-bind:is="component" :item="item"></component> | 2 | <component v-bind:is="component" :item="item" :proxy="proxy"></component> |
3 | </template> | 3 | </template> |
4 | 4 | ||
5 | <script> | 5 | <script> |
@@ -9,6 +9,7 @@ export default { | |||
9 | name: "Service", | 9 | name: "Service", |
10 | props: { | 10 | props: { |
11 | item: Object, | 11 | item: Object, |
12 | proxy: Object, | ||
12 | }, | 13 | }, |
13 | computed: { | 14 | computed: { |
14 | component() { | 15 | component() { |
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue index 16881fa..b01f0f4 100644 --- a/src/components/services/AdGuardHome.vue +++ b/src/components/services/AdGuardHome.vue | |||
@@ -20,10 +20,12 @@ | |||
20 | </template> | 20 | </template> |
21 | 21 | ||
22 | <script> | 22 | <script> |
23 | import service from "@/mixins/service.js"; | ||
23 | import Generic from "./Generic.vue"; | 24 | import Generic from "./Generic.vue"; |
24 | 25 | ||
25 | export default { | 26 | export default { |
26 | name: "AdGuardHome", | 27 | name: "AdGuardHome", |
28 | mixins: [service], | ||
27 | props: { | 29 | props: { |
28 | item: Object, | 30 | item: Object, |
29 | }, | 31 | }, |
@@ -60,18 +62,14 @@ export default { | |||
60 | }, | 62 | }, |
61 | methods: { | 63 | methods: { |
62 | fetchStatus: async function () { | 64 | fetchStatus: async function () { |
63 | this.status = await fetch(`${this.item.url}/control/status`, { | 65 | this.status = await this.fetch("/control/status").catch((e) => |
64 | credentials: "include", | 66 | console.log(e) |
65 | }) | 67 | ); |
66 | .then((response) => response.json()) | ||
67 | .catch((e) => console.log(e)); | ||
68 | }, | 68 | }, |
69 | fetchStats: async function () { | 69 | fetchStats: async function () { |
70 | this.stats = await fetch(`${this.item.url}/control/stats`, { | 70 | this.stats = await this.fetch("/control/stats").catch((e) => |
71 | credentials: "include", | 71 | console.log(e) |
72 | }) | 72 | ); |
73 | .then((response) => response.json()) | ||
74 | .catch((e) => console.log(e)); | ||
75 | }, | 73 | }, |
76 | }, | 74 | }, |
77 | }; | 75 | }; |
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue index 6fd3ec5..d1fda57 100644 --- a/src/components/services/Ping.vue +++ b/src/components/services/Ping.vue | |||
@@ -9,10 +9,12 @@ | |||
9 | </template> | 9 | </template> |
10 | 10 | ||
11 | <script> | 11 | <script> |
12 | import service from "@/mixins/service.js"; | ||
12 | import Generic from "./Generic.vue"; | 13 | import Generic from "./Generic.vue"; |
13 | 14 | ||
14 | export default { | 15 | export default { |
15 | name: "Ping", | 16 | name: "Ping", |
17 | mixins: [service], | ||
16 | props: { | 18 | props: { |
17 | item: Object, | 19 | item: Object, |
18 | }, | 20 | }, |
@@ -27,16 +29,8 @@ export default { | |||
27 | }, | 29 | }, |
28 | methods: { | 30 | methods: { |
29 | fetchStatus: async function () { | 31 | fetchStatus: async function () { |
30 | const url = `${this.item.url}`; | 32 | this.fetch("/", { method: "HEAD", cache: "no-cache" }, false) |
31 | fetch(url, { | 33 | .then(() => { |
32 | method: "HEAD", | ||
33 | cache: "no-cache", | ||
34 | credentials: "include", | ||
35 | }) | ||
36 | .then((response) => { | ||
37 | if (!response.ok) { | ||
38 | throw Error(response.statusText); | ||
39 | } | ||
40 | this.status = "online"; | 34 | this.status = "online"; |
41 | }) | 35 | }) |
42 | .catch(() => { | 36 | .catch(() => { |
diff --git a/src/mixins/service.js b/src/mixins/service.js new file mode 100644 index 0000000..17fa6fc --- /dev/null +++ b/src/mixins/service.js | |||
@@ -0,0 +1,43 @@ | |||
1 | export default { | ||
2 | props: { | ||
3 | proxy: Object, | ||
4 | }, | ||
5 | created: function () { | ||
6 | // custom service often consume info from an API using the item link (url) as a base url, | ||
7 | // but sometimes the base url is different. An optional alternative URL can be provided with the "endpoint" key. | ||
8 | this.endpoint = this.item.endpoint || this.item.url; | ||
9 | |||
10 | if (this.endpoint.endsWith("/")) { | ||
11 | this.endpoint = this.endpoint.slice(0, -1); | ||
12 | } | ||
13 | }, | ||
14 | methods: { | ||
15 | fetch: function (path, init, json = true) { | ||
16 | let options = {}; | ||
17 | |||
18 | if (this.proxy?.useCredentials) { | ||
19 | options.credentials = "include"; | ||
20 | } | ||
21 | |||
22 | // Each item can override the credential settings | ||
23 | if (this.item.useCredentials !== undefined) { | ||
24 | options.credentials = | ||
25 | this.item.useCredentials === true ? "include" : "omit"; | ||
26 | } | ||
27 | |||
28 | options = Object.assign(options, init); | ||
29 | |||
30 | if (path.startsWith("/")) { | ||
31 | path = path.slice(1); | ||
32 | } | ||
33 | |||
34 | return fetch(`${this.endpoint}/${path}`, options).then((response) => { | ||
35 | if (!response.ok) { | ||
36 | throw new Error("Not 2xx response"); | ||
37 | } | ||
38 | |||
39 | return json ? response.json() : response; | ||
40 | }); | ||
41 | }, | ||
42 | }, | ||
43 | }; | ||