src/components/services/OpenHAB.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #content>
   4       <p class="title is-4">{{ item.name }}</p>
   5       <p class="subtitle is-6">
   6         <template v-if="item.subtitle">
   7           {{ item.subtitle }}
   8         </template>
   9         <template v-else>
  10           {{ details }}
  11         </template>
  12       </p>
  13     </template>
  14     <template #indicator>
  15       <div v-if="status" class="status" :class="status">
  16         {{ status }}
  17       </div>
  18     </template>
  19   </Generic>
  20 </template>
  21
  22 <script>
  23 import service from "@/mixins/service.js";
  24 import Generic from "./Generic.vue";
  25
  26 export default {
  27   name: "OpenHAB",
  28   mixins: [service],
  29   props: {
  30     item: Object,
  31   },
  32   components: {
  33     Generic,
  34   },
  35   data: () => ({
  36     status: "",
  37     things: {
  38       count: 0,
  39       online: 0,
  40     },
  41     items: {
  42       count: 0,
  43     },
  44   }),
  45   computed: {
  46     headers: function () {
  47       const basicAuth = `${this.item.apikey}:`;
  48
  49       return {
  50         Authorization: `Basic ${btoa(basicAuth)}`,
  51       };
  52     },
  53     details: function () {
  54       const details = [];
  55
  56       if (this.item.things) {
  57         details.push(
  58           `${this.things.count} things (${this.things.online} Online)`,
  59         );
  60       }
  61
  62       if (this.item.items) {
  63         details.push(`${this.items.count} items`);
  64       }
  65
  66       return details.join(", ");
  67     },
  68   },
  69   created() {
  70     this.fetchServerStatus();
  71
  72     if (!this.item.subtitle && this.status !== "dead") {
  73       this.fetchServerStats();
  74     }
  75   },
  76   methods: {
  77     fetchServerStatus: async function () {
  78       const headers = this.headers;
  79       this.fetch("/rest/systeminfo", { headers })
  80         .then((response) => {
  81           if (response && response.systemInfo) this.status = "running";
  82           else throw new Error();
  83         })
  84         .catch((e) => {
  85           console.log(e);
  86           this.status = "dead";
  87         });
  88     },
  89     fetchServerStats: async function () {
  90       const headers = this.headers;
  91
  92       if (this.item.things) {
  93         const data = await this.fetch("/rest/things?summary=true", {
  94           headers,
  95         }).catch((e) => {
  96           console.log(e);
  97         });
  98
  99         this.things.count = data.length;
 100         this.things.online = data.filter(
 101           (e) => e.statusInfo.status === "ONLINE",
 102         ).length;
 103       }
 104
 105       if (this.item.items) {
 106         const data = await this.fetch("/rest/items", { headers }).catch((e) => {
 107           console.log(e);
 108         });
 109
 110         this.items.count = data.length;
 111       }
 112     },
 113   },
 114 };
 115 </script>
 116
 117 <style scoped lang="scss">
 118 .status {
 119   font-size: 0.8rem;
 120   color: var(--text-title);
 121
 122   &.running:before {
 123     background-color: #94e185;
 124     border-color: #78d965;
 125     box-shadow: 0 0 5px 1px #94e185;
 126   }
 127
 128   &.dead:before {
 129     background-color: #c9404d;
 130     border-color: #c42c3b;
 131     box-shadow: 0 0 5px 1px #c9404d;
 132   }
 133
 134   &:before {
 135     content: " ";
 136     display: inline-block;
 137     width: 7px;
 138     height: 7px;
 139     margin-right: 10px;
 140     border: 1px solid #000;
 141     border-radius: 7px;
 142   }
 143 }
 144 </style>