aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2021-07-14 02:13:52 -0700
committerGitHub <noreply@github.com>2021-07-14 02:13:52 -0700
commitf5b467f93349b326e832bcd92b29a854bb737c57 (patch)
treee21d14ffb74a4f00339f342690355c4c9c1543e0
parentded5228972356f2161152df097421c9f46c0a6e9 (diff)
parent24229b541181c8ef0813b015c5589e9a34269cb0 (diff)
downloadhomer-f5b467f93349b326e832bcd92b29a854bb737c57.tar.gz
homer-f5b467f93349b326e832bcd92b29a854bb737c57.tar.zst
homer-f5b467f93349b326e832bcd92b29a854bb737c57.zip
Merge pull request #245 from boerniee/paperlessng-integration
Added paperless service
-rw-r--r--docs/configuration.md13
-rw-r--r--src/components/services/PaperlessNG.vue81
2 files changed, 94 insertions, 0 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index a472b41..ce36c51 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -167,3 +167,16 @@ In order to easily generate all required icon preset for the PWA to work, a tool
167```bash 167```bash
168npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder} 168npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
169``` 169```
170
171### Supported services
172
173Currently the following services are supported for showing quick infos on the card. They can be used by setting the type to one of the following values at the item.
174
175- PiHole
176- AdGuardHome
177- PaperlessNG
178
179### Additional configuration
180
181#### Paperless
182For Paperless you need an API-Key which you have to store at the item in the field `apikey`. \ No newline at end of file
diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
new file mode 100644
index 0000000..c4f50eb
--- /dev/null
+++ b/src/components/services/PaperlessNG.vue
@@ -0,0 +1,81 @@
1<template>
2 <div>
3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
6 <div class="media">
7 <div v-if="item.logo" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="item.logo" :alt="`${item.name} logo`" />
10 </figure>
11 </div>
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.name }}</p>
19 <p class="subtitle is-6">
20 <template v-if="item.subtitle">
21 {{ item.subtitle }}
22 </template>
23 <template v-else-if="api">
24 happily storing {{ api.count }} documents
25 </template>
26 </p>
27 </div>
28 </div>
29 <div class="tag" :class="item.tagstyle" v-if="item.tag">
30 <strong class="tag-text">#{{ item.tag }}</strong>
31 </div>
32 </div>
33 </a>
34 </div>
35 </div>
36</template>
37
38<script>
39export default {
40 name: "Paperless",
41 props: {
42 item: Object,
43 },
44 data: () => ({
45 api: null,
46 }),
47 created() {
48 this.fetchStatus();
49 },
50 methods: {
51 fetchStatus: async function () {
52 if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
53 var apikey = this.item.apikey;
54 if (!apikey) {
55 console.error("apikey is not present in config.yml for the paperless entry!");
56 return;
57 }
58 const url = `${this.item.url}/api/documents/`;
59 this.api = await fetch(url, {
60 headers: {
61 "Authorization": "Token " + this.item.apikey
62 }
63 })
64 .then(function(response) {
65 if (!response.ok) {
66 throw new Error("Not 2xx response")
67 } else {
68 return response.json()
69 }
70 })
71 .catch((e) => console.log(e));
72 },
73 },
74};
75</script>
76
77<style scoped lang="scss">
78.media-left img {
79 max-height: 100%;
80}
81</style>