diff options
| author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2021-10-06 22:55:09 +0200 |
|---|---|---|
| committer | Bastien Wirtz <bastien.wirtz@gmail.com> | 2021-10-06 22:55:09 +0200 |
| commit | 2ca4faad9cb336ac8904bbc775fdcc2a12731b90 (patch) | |
| tree | 76f26d0503c5f86e6240e3d84fa4e793cc4c44ed /src/components/services/AdGuardHome.vue | |
| parent | c7dc6bfd0d73f803914092593d440d8b27e2c851 (diff) | |
| download | homer-2ca4faad9cb336ac8904bbc775fdcc2a12731b90.tar.gz homer-2ca4faad9cb336ac8904bbc775fdcc2a12731b90.tar.zst homer-2ca4faad9cb336ac8904bbc775fdcc2a12731b90.zip | |
Extendable base service for easier development.
Diffstat (limited to 'src/components/services/AdGuardHome.vue')
| -rw-r--r-- | src/components/services/AdGuardHome.vue | 60 |
1 files changed, 23 insertions, 37 deletions
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue index 61d4bed..16881fa 100644 --- a/src/components/services/AdGuardHome.vue +++ b/src/components/services/AdGuardHome.vue | |||
| @@ -1,49 +1,35 @@ | |||
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <Generic :item="item"> |
| 3 | <div class="card" :class="item.class"> | 3 | <template #content> |
| 4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | 4 | <p class="title is-4">{{ item.name }}</p> |
| 5 | <div class="card-content"> | 5 | <p class="subtitle is-6"> |
| 6 | <div class="media"> | 6 | <template v-if="item.subtitle"> |
| 7 | <div v-if="item.logo" class="media-left"> | 7 | {{ item.subtitle }} |
| 8 | <figure class="image is-48x48"> | 8 | </template> |
| 9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | 9 | <template v-else-if="stats"> |
| 10 | </figure> | 10 | {{ percentage }}% blocked |
| 11 | </div> | 11 | </template> |
| 12 | <div v-if="item.icon" class="media-left"> | 12 | </p> |
| 13 | <figure class="image is-48x48"> | 13 | </template> |
| 14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | 14 | <template #indicator> |
| 15 | </figure> | 15 | <div class="status" :class="protection"> |
| 16 | </div> | 16 | {{ protection }} |
| 17 | <div class="media-content"> | 17 | </div> |
| 18 | <p class="title is-4">{{ item.name }}</p> | 18 | </template> |
| 19 | <p class="subtitle is-6"> | 19 | </Generic> |
| 20 | <template v-if="item.subtitle"> | ||
| 21 | {{ item.subtitle }} | ||
| 22 | </template> | ||
| 23 | <template v-else-if="stats"> | ||
| 24 | {{ percentage }}% blocked | ||
| 25 | </template> | ||
| 26 | </p> | ||
| 27 | </div> | ||
| 28 | <div class="status" :class="protection"> | ||
| 29 | {{ protection }} | ||
| 30 | </div> | ||
| 31 | </div> | ||
| 32 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | ||
| 33 | <strong class="tag-text">#{{ item.tag }}</strong> | ||
| 34 | </div> | ||
| 35 | </div> | ||
| 36 | </a> | ||
| 37 | </div> | ||
| 38 | </div> | ||
| 39 | </template> | 20 | </template> |
| 40 | 21 | ||
| 41 | <script> | 22 | <script> |
| 23 | import Generic from "./Generic.vue"; | ||
| 24 | |||
| 42 | export default { | 25 | export default { |
| 43 | name: "AdGuardHome", | 26 | name: "AdGuardHome", |
| 44 | props: { | 27 | props: { |
| 45 | item: Object, | 28 | item: Object, |
| 46 | }, | 29 | }, |
| 30 | components: { | ||
| 31 | Generic, | ||
| 32 | }, | ||
| 47 | data: () => { | 33 | data: () => { |
| 48 | return { | 34 | return { |
| 49 | status: null, | 35 | status: null, |