src/components/services/PiAlert.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong class="notif total" title="Total Devices">
   6           {{ total }}
   7         </strong>
   8         <strong class="notif connected" title="Connected Devices">
   9           {{ connected }}
  10         </strong>
  11         <strong class="notif newdevices" title="New Devices">
  12           {{ newdevices }}
  13         </strong>
  14         <strong class="notif alert" title="Down Alerts">
  15           {{ downalert }}
  16         </strong>
  17         <strong
  18           v-if="serverError"
  19           class="notif alert"
  20           title="Connection error to PiAlert server, check the url in config.yml"
  21           >?</strong
  22         >
  23       </div>
  24     </template>
  25   </Generic>
  26 </template>
  27
  28 <script>
  29 import service from "@/mixins/service.js";
  30 import Generic from "./Generic.vue";
  31
  32 export default {
  33   name: "PiAlert",
  34   mixins: [service],
  35   props: {
  36     item: Object,
  37   },
  38   components: {
  39     Generic,
  40   },
  41   data: () => {
  42     return {
  43       total: 0,
  44       connected: 0,
  45       newdevices: 0,
  46       downalert: 0,
  47       serverError: false,
  48     };
  49   },
  50   created() {
  51     const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
  52     if (updateInterval > 0) {
  53       setInterval(() => this.fetchStatus(), updateInterval);
  54     }
  55     this.fetchStatus();
  56   },
  57   methods: {
  58     fetchStatus: async function () {
  59       this.fetch("/php/server/devices.php?action=getDevicesTotals")
  60         .then((response) => {
  61           this.total = response[0];
  62           this.connected = response[1];
  63           this.newdevices = response[3];
  64           this.downalert = response[4];
  65         })
  66         .catch((e) => {
  67           console.log(e);
  68           this.serverError = true;
  69         });
  70     },
  71   },
  72 };
  73 </script>
  74
  75 <style scoped lang="scss">
  76 .notifs {
  77   position: absolute;
  78   color: white;
  79   font-family: sans-serif;
  80   top: 0.3em;
  81   right: 0.5em;
  82
  83   .notif {
  84     display: inline-block;
  85     padding: 0.2em 0.35em;
  86     border-radius: 0.25em;
  87     position: relative;
  88     margin-left: 0.3em;
  89     font-size: 0.8em;
  90
  91     &.total {
  92       background-color: #4fb5d6;
  93     }
  94
  95     &.connected {
  96       background-color: #4fd671;
  97     }
  98
  99     &.newdevices {
 100       background-color: #d08d2e;
 101     }
 102
 103     &.alert {
 104       background-color: #e51111;
 105     }
 106   }
 107 }
 108 </style>