holm/homer
1
0
Fork 0
forked from extern/homer
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Ping services

Browse Source 
a  service (type) which check if the given url as available or not. if the service is  available then set the status to enable other to disable
This commit is contained in:
stubbfel 2021-06-28 23:20:20 +02:00 committed by GitHub
parent 996011956b
commit 68955dc1d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/services/Ping.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div>
<div class="card" :class="item.class">
<a :href="item.url" :target="item.target" rel="noreferrer">
<div class="card-content">
<div class="media">
<div v-if="item.logo" class="media-left">
<figure class="image is-48x48">
<img :src="item.logo" :alt="`${item.name} logo`" />
</figure>
</div>
<div v-if="item.icon" class="media-left">
<figure class="image is-48x48">
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
</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>
</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>
<script>
export default {
name: "Ping",
props: {
item: Object,
},
data: () => ({
api: {
status: "",
},
}),
created() {
this.fetchStatus();
},
methods: {
fetchStatus: async function () {
const url = `${this.item.url}`;
this.api.status = await fetch(url)
.then((response) => "enabled")
.catch((e) => "disabled");
},
},
};
</script>
<style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.status {
font-size: 0.8rem;
color: var(--text-title);
&.enabled:before {
background-color: #94e185;
border-color: #78d965;
box-shadow: 0 0 4px 1px #94e185;
}
&.disabled:before {
background-color: #c9404d;
border-color: #c42c3b;
box-shadow: 0 0 4px 1px #c9404d;
}
&:before {
content: " ";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 10px;
border: 1px solid #000;
border-radius: 7px;
}
}
</style>