feat(components): Register Generic component globally

pull/904/head
Bastien Wirtz 2025-03-30 15:23:22 +02:00
parent 02ff6a2039
commit 234e063d2e
49 changed files with 26 additions and 186 deletions

8
.jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

View File

@ -18,6 +18,6 @@ export default [
},
},
{
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
},
];

View File

@ -64,7 +64,7 @@ export default {
});
},
hasFocus: function () {
return document.activeElement == this.$refs.search
return document.activeElement == this.$refs.search;
},
setSearchURL: function (value) {
const url = new URL(window.location);

View File

@ -1,10 +1,12 @@
<template>
<component :is="component" :item="item" :proxy="proxy"></component>
<Generic v-if="isGeneric" :item="item"></Generic>
<component :is="component" v-else :item="item" :proxy="proxy"></component>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Generic from "./services/Generic.vue";
const defaultService = "Generic";
export default {
name: "Service",
@ -13,12 +15,13 @@ export default {
proxy: Object,
},
computed: {
isGeneric() {
return defaultService === (this.item.type || defaultService);
},
component() {
const type = this.item.type || "Generic";
if (type === "Generic") {
return Generic;
}
return defineAsyncComponent(() => import(`./services/${type}.vue`));
return defineAsyncComponent(
() => import(`./services/${this.item.type}.vue`),
);
},
},
};

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "AdGuardHome",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -15,13 +15,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "CopyToClipboard",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Docuseal",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Emby",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -25,13 +25,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "FreshRSS",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Gitea",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -17,13 +17,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Glances",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -19,13 +19,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Gotify",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -18,13 +18,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Healthchecks",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "HomeAssistant",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -27,13 +27,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Immich",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -20,13 +20,9 @@
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Jellyfin",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -27,13 +27,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Lidarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -19,13 +19,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Mealie",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -33,13 +33,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Medusa",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -22,13 +22,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Mylar",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -16,13 +16,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Nextcloud",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -51,13 +51,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "OctoPrint",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Olivetin",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "OpenHAB",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -16,13 +16,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Paperless",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -19,13 +19,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "PeaNUT",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -27,13 +27,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "PiAlert",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "PiHole",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Ping",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -22,13 +22,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Portainer",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -19,7 +19,6 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
const AlertsStatus = Object.freeze({
firing: "firing",
@ -29,9 +28,6 @@ const AlertsStatus = Object.freeze({
export default {
name: "Prometheus",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -22,13 +22,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Prowlarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -76,13 +76,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Proxmox",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -27,16 +27,12 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
const V3_API = "/api/v3";
const LEGACY_API = "/api";
export default {
name: "Radarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -27,15 +27,11 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
const API = "/api/v1";
export default {
name: "Readarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -23,8 +23,6 @@
</template>
<script>
import Generic from "./Generic.vue";
// Units to add to download and upload rates.
const units = ["B", "kiB", "MiB", "GiB"];
@ -48,7 +46,6 @@ const displayRate = (rate) => {
export default {
name: "RTorrent",
components: { Generic },
props: { item: Object },
// Properties for download, upload, torrent count and errors.
data: () => ({ dl: null, ul: null, count: null, error: null }),

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "SABnzbd",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -24,13 +24,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Scrutiny",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -28,16 +28,12 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
const V3_API = "/api/v3";
const LEGACY_API = "/api";
export default {
name: "Sonarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -15,13 +15,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "SpeedtestTracker",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Tautulli",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -28,13 +28,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Tdarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -20,16 +20,11 @@
</template>
<script>
import Generic from "./Generic.vue";
let currentTheme;
const app = document.getElementById("app");
export default {
name: "ThemeChooser",
components: {
Generic,
},
props: {
item: Object,
},

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Traefik",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "UptimeKuma",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -22,13 +22,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "WUD",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -21,13 +21,9 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Wallabag",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,

View File

@ -28,7 +28,6 @@
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
const units = ["B", "KB", "MB", "GB"];
// Take the rate in bytes and keep dividing it by 1k until the lowest
@ -50,7 +49,6 @@ const displayRate = (rate) => {
export default {
name: "QBittorrent",
components: { Generic },
mixins: [service],
props: { item: Object },
data: () => ({ dl: null, ul: null, count: null, error: null }),

View File

@ -3,9 +3,12 @@ import { createApp, h } from "vue";
import App from "./App.vue";
const app = createApp(App);
import Generic from "./components/services/Generic.vue";
app.component("DynamicStyle", (_props, context) => {
return h("style", {}, context.slots);
});
app
.component("Generic", Generic)
.component("DynamicStyle", (_props, context) => {
return h("style", {}, context.slots);
});
app.mount("#app-mount");