aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-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>