Adding status "unknown"

Changing code as per linter
This commit is contained in:
Andreas Waschinski 2021-07-10 09:58:17 +02:00
parent 3832025b0c
commit bebb6953cb

View File

@ -25,12 +25,8 @@
</template> </template>
</p> </p>
</div> </div>
<div <div v-if="!item.subtitle" class="status" :class="protection">
v-if="status" {{ protection }}
class="status"
v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
>
{{ status.protection_enabled ? 'enabled' : 'disabled' }}
</div> </div>
</div> </div>
<div class="tag" :class="item.tagstyle" v-if="item.tag"> <div class="tag" :class="item.tagstyle" v-if="item.tag">
@ -57,10 +53,18 @@ export default {
computed: { computed: {
percentage: function () { percentage: function () {
if (this.stats) { if (this.stats) {
return (this.stats.num_blocked_filtering * 100 / this.stats.num_dns_queries).toFixed(2); return (
(this.stats.num_blocked_filtering * 100) /
this.stats.num_dns_queries
).toFixed(2);
} }
return ""; return "";
}, },
protection: function () {
if (this.status) {
return this.status.protection_enabled ? "enabled" : "disabled";
} else return "unknown";
},
}, },
created: function () { created: function () {
this.fetchStatus(); this.fetchStatus();
@ -70,21 +74,17 @@ export default {
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
this.status = await fetch( this.status = await fetch(`${this.item.url}/control/status`, {
`${this.item.url}/control/status`, credentials: "include",
{ })
credentials: 'include' .then((response) => response.json())
}
).then((response) => response.json())
.catch((e) => console.log(e)); .catch((e) => console.log(e));
}, },
fetchStats: async function () { fetchStats: async function () {
this.stats = await fetch( this.stats = await fetch(`${this.item.url}/control/stats`, {
`${this.item.url}/control/stats`, credentials: "include",
{ })
credentials: 'include' .then((response) => response.json())
}
).then((response) => response.json())
.catch((e) => console.log(e)); .catch((e) => console.log(e));
}, },
}, },
@ -111,6 +111,12 @@ export default {
box-shadow: 0px 0px 4px 1px #c9404d; box-shadow: 0px 0px 4px 1px #c9404d;
} }
&.unknown:before {
background-color: #c9c740;
border-color: #ccc935;
box-shadow: 0px 0px 4px 1px #c9c740;
}
&:before { &:before {
content: " "; content: " ";
display: inline-block; display: inline-block;