extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-06-24 19:52:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Services refactoring

Browse Source
This commit is contained in:
Bastien Wirtz 2021-12-12 16:28:20 +01:00
parent e6ba84d35a
commit b4a2db6e37
6 changed files with 153 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -41,7 +41,7 @@
<SearchInput <SearchInput
class="navbar-item is-inline-block-mobile" class="navbar-item is-inline-block-mobile"
:hotkey=searchHotkey() :hotkey="searchHotkey()"
@input="filterServices" @input="filterServices"
@search-focus="showMenu = true" @search-focus="showMenu = true"
@search-open="navigateToFirstService" @search-open="navigateToFirstService"

4
src/components/SearchInput.vue
View File

@ -19,8 +19,8 @@ export default {
value: String, value: String,
hotkey: { hotkey: {
type: String, type: String,
default: "/" default: "/",
} },
}, },
mounted() { mounted() {
this._keyListener = function (event) { this._keyListener = function (event) {

106
src/components/services/Mealie.vue
View File

@ -1,47 +1,33 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #content>
<a :href="item.url" :target="item.target" rel="noreferrer"> <p class="title is-4">{{ item.name }}</p>
<div class="card-content"> <p class="subtitle is-6">
<div class="media"> <template v-if="item.subtitle">
<div v-if="item.logo" class="media-left"> {{ item.subtitle }}
<figure class="image is-48x48"> </template>
<img :src="item.logo" :alt="`${item.name} logo`" /> <template v-else-if="meal"> Today: {{ meal.name }} </template>
</figure> <template v-else-if="stats">
</div> happily keeping {{ stats.totalRecipes }} recipes organized
<div v-if="item.icon" class="media-left"> </template>
<figure class="image is-48x48"> </p>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> </template>
</figure> </Generic>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="meal"> Today: {{ meal.name }} </template>
<template v-else-if="stats">
happily keeping {{ stats.totalRecipes }} recipes organized
</template>
</p>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "Mealie", name: "Mealie",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => ({ data: () => ({
stats: null, stats: null,
meal: null, meal: null,
@ -51,44 +37,20 @@ export default {
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing const headers = {
this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, { Authorization: "Bearer " + this.item.apikey,
headers: { Accept: "application/json",
Authorization: "Bearer " + this.item.apikey, };
Accept: "application/json",
}, if (this.item.subtitle != null) return;
})
.then(function (response) { this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
if (!response.ok) { (e) => console.log(e)
throw new Error("Not 2xx response"); );
} else { this.stats = await this.fetch("/api/debug/statistics/", {
if (response != null) { headers,
return response.json(); }).catch((e) => console.log(e));
}
}
})
.catch((e) => console.log(e));
this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
headers: {
Authorization: "Bearer " + this.item.apikey,
Accept: "application/json",
},
})
.then(function (response) {
if (!response.ok) {
throw new Error("Not 2xx response");
} else {
return response.json();
}
})
.catch((e) => console.log(e));
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss">
.media-left img {
max-height: 100%;
}
</style>

142
src/components/services/Medusa.vue
View File

@ -1,65 +1,49 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #indicator>
<a :href="item.url" :target="item.target" rel="noreferrer"> <div class="notifs">
<div class="card-content"> <strong
<div class="media"> v-if="config !== null && config.system.news.unread > 0"
<div v-if="item.logo" class="media-left"> class="notif news"
<figure class="image is-48x48"> title="News"
<img :src="item.logo" :alt="`${item.name} logo`" /> >{{ config.system.news.unread }}</strong
</figure> >
</div> <strong
<div v-if="item.icon" class="media-left"> v-if="config !== null && config.main.logs.numWarnings > 0"
<figure class="image is-48x48"> class="notif warnings"
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> title="Warning"
</figure> >{{ config.main.logs.numWarnings }}</strong
</div> >
<div class="media-content"> <strong
<p class="title is-4">{{ item.name }}</p> v-if="config !== null && config.main.logs.numErrors > 0"
<p class="subtitle is-6">{{ item.subtitle }}</p> class="notif errors"
</div> title="Error"
<div class="notifs"> >{{ config.main.logs.numErrors }}</strong
<strong >
v-if="config !== null && config.system.news.unread > 0" <strong
class="notif news" v-if="serverError"
title="News" class="notif errors"
>{{ config.system.news.unread }}</strong title="Connection error to Medusa API, check url and apikey in config.yml"
> >?</strong
<strong >
v-if="config !== null && config.main.logs.numWarnings > 0" </div>
class="notif warnings" </template>
title="Warning" </Generic>
>{{ config.main.logs.numWarnings }}</strong
>
<strong
v-if="config !== null && config.main.logs.numErrors > 0"
class="notif errors"
title="Error"
>{{ config.main.logs.numErrors }}</strong
>
<strong
v-if="serverError"
class="notif errors"
title="Connection error to Medusa API, check url and apikey in config.yml"
>?</strong
>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "Medusa", name: "Medusa",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => { data: () => {
return { return {
config: null, config: null,
@ -71,16 +55,9 @@ export default {
}, },
methods: { methods: {
fetchConfig: function () { fetchConfig: function () {
fetch(`${this.item.url}/api/v2/config`, { this.fetch("/api/v2/config", {
credentials: "include", headers: { "X-Api-Key": this.item.apikey },
headers: { "X-Api-Key": `${this.item.apikey}` },
}) })
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
.then((conf) => { .then((conf) => {
this.config = conf; this.config = conf;
}) })
@ -94,35 +71,32 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.notifs { .notifs {
position: absolute; position: absolute;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
top: 0.3em; top: 0.3em;
right: 0.5em; right: 0.5em;
} .notif {
.notif { padding-right: 0.35em;
padding-right: 0.35em; padding-left: 0.35em;
padding-left: 0.35em; padding-top: 0.2em;
padding-top: 0.2em; padding-bottom: 0.2em;
padding-bottom: 0.2em; border-radius: 0.25em;
border-radius: 0.25em; position: relative;
position: relative; margin-left: 0.3em;
margin-left: 0.3em; font-size: 0.8em;
font-size: 0.8em; &.news {
} background-color: #777777;
.news { }
background-color: #777777;
}
.warnings { &.warnings {
background-color: #d08d2e; background-color: #d08d2e;
} }
.errors { &.errors {
background-color: #e51111; background-color: #e51111;
}
}
} }
</style> </style>

79
src/components/services/PaperlessNG.vue
View File

@ -1,46 +1,32 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #content>
<a :href="item.url" :target="item.target" rel="noreferrer"> <p class="title is-4">{{ item.name }}</p>
<div class="card-content"> <p class="subtitle is-6">
<div class="media"> <template v-if="item.subtitle">
<div v-if="item.logo" class="media-left"> {{ item.subtitle }}
<figure class="image is-48x48"> </template>
<img :src="item.logo" :alt="`${item.name} logo`" /> <template v-else-if="api">
</figure> happily storing {{ api.count }} documents
</div> </template>
<div v-if="item.icon" class="media-left"> </p>
<figure class="image is-48x48"> </template>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> </Generic>
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="api">
happily storing {{ api.count }} documents
</template>
</p>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "Paperless", name: "Paperless",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => ({ data: () => ({
api: null, api: null,
}), }),
@ -49,36 +35,21 @@ export default {
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing if (this.item.subtitle != null) return;
var apikey = this.item.apikey;
const apikey = this.item.apikey;
if (!apikey) { if (!apikey) {
console.error( console.error(
"apikey is not present in config.yml for the paperless entry!" "apikey is not present in config.yml for the paperless entry!"
); );
return; return;
} }
const url = `${this.item.url}/api/documents/`; this.api = await this.fetch("/api/documents/", {
this.api = await fetch(url, {
credentials: "include",
headers: { headers: {
Authorization: "Token " + this.item.apikey, Authorization: "Token " + this.item.apikey,
}, },
}) }).catch((e) => console.log(e));
.then(function (response) {
if (!response.ok) {
throw new Error("Not 2xx response");
} else {
return response.json();
}
})
.catch((e) => console.log(e));
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss">
.media-left img {
max-height: 100%;
}
</style>

85
src/components/services/PiHole.vue
View File

@ -1,59 +1,45 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #content>
<a :href="item.url" :target="item.target" rel="noreferrer"> <p class="title is-4">{{ item.name }}</p>
<div class="card-content"> <p class="subtitle is-6">
<div class="media"> <template v-if="item.subtitle">
<div v-if="item.logo" class="media-left"> {{ item.subtitle }}
<figure class="image is-48x48"> </template>
<img :src="item.logo" :alt="`${item.name} logo`" /> <template v-else-if="percentage">
</figure> {{ percentage }}&percnt; blocked
</div> </template>
<div v-if="item.icon" class="media-left"> </p>
<figure class="image is-48x48"> </template>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> <template #indicator>
</figure> <div v-if="status" class="status" :class="status">
</div> {{ status }}
<div class="media-content"> </div>
<p class="title is-4">{{ item.name }}</p> </template>
<p class="subtitle is-6"> </Generic>
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="api">
{{ percentage }}&percnt; blocked
</template>
</p>
</div>
<div v-if="api" class="status" :class="api.status">
{{ api.status }}
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "PiHole", name: "PiHole",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => ({ data: () => ({
api: { status: "",
status: "", ads_percentage_today: 0,
ads_percentage_today: 0,
},
}), }),
computed: { computed: {
percentage: function () { percentage: function () {
if (this.api) { if (this.ads_percentage_today) {
return this.api.ads_percentage_today.toFixed(1); return this.ads_percentage_today.toFixed(1);
} }
return ""; return "";
}, },
@ -63,21 +49,16 @@ export default {
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
const url = `${this.item.url}/api.php`; const result = await this.fetch("/api.php").catch((e) => console.log(e));
this.api = await fetch(url, {
credentials: "include", this.status = result.status;
}) this.ads_percentage_today = result.ads_percentage_today;
.then((response) => response.json())
.catch((e) => console.log(e));
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.status { .status {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-title); color: var(--text-title);