src/components/services/WUD.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong v-if="running > 0" class="notif warnings" title="Running">
   6           {{ running }}
   7         </strong>
   8         <strong v-if="update > 0" class="notif errors" title="Update">
   9           {{ update }}
  10         </strong>
  11         <strong
  12           v-if="serverError"
  13           class="notif errors"
  14           title="Connection error to WUD API, check url in config.yml"
  15         >
  16           ?
  17         </strong>
  18       </div>
  19     </template>
  20   </Generic>
  21 </template>
  22
  23 <script>
  24 import service from "@/mixins/service.js";
  25 import Generic from "./Generic.vue";
  26
  27 export default {
  28   name: "WUD",
  29   mixins: [service],
  30   props: {
  31     item: Object,
  32   },
  33   components: {
  34     Generic,
  35   },
  36   data: () => {
  37     return {
  38       running: null,
  39       update: null,
  40       serverError: false,
  41     };
  42   },
  43   created: function () {
  44     this.fetchConfig();
  45   },
  46   methods: {
  47     fetchConfig: function () {
  48       this.fetch(`/api/containers`)
  49         .then((containers) => {
  50           this.running = 0;
  51           this.update = 0;
  52           for (var i = 0; i < containers.length; i++) {
  53             this.running++;
  54             if (containers[i].updateAvailable) {
  55               this.update++;
  56             }
  57           }
  58         })
  59         .catch(() => {
  60           this.serverError = true;
  61         });
  62     },
  63   },
  64 };
  65 </script>
  66
  67 <style scoped lang="scss">
  68 .notifs {
  69   position: absolute;
  70   color: white;
  71   font-family: sans-serif;
  72   top: 0.3em;
  73   right: 0.5em;
  74
  75   .notif {
  76     display: inline-block;
  77     padding: 0.2em 0.35em;
  78     border-radius: 0.25em;
  79     position: relative;
  80     margin-left: 0.3em;
  81     font-size: 0.8em;
  82
  83     &.warnings {
  84       background-color: #d08d2e;
  85     }
  86
  87     &.errors {
  88       background-color: #e51111;
  89     }
  90   }
  91 }
  92 </style>