src/components/services/Immich.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong v-if="users > 0" class="notif users" title="Users">
   6           {{ users }}
   7         </strong>
   8         <strong v-if="photos > 0" class="notif photos" title="Photos">
   9           {{ photos }}
  10         </strong>
  11         <strong v-if="videos > 0" class="notif videos" title="Videos">
  12           {{ videos }}
  13         </strong>
  14         <strong v-if="usage > 0" class="notif usage" title="Usage">
  15           {{ humanizeSize }}
  16         </strong>
  17         <strong
  18           v-if="serverError"
  19           class="notif errors"
  20           title="Connection error to Immich API, check your url and apikey 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: "Immich",
  34   mixins: [service],
  35   props: {
  36     item: Object,
  37   },
  38   components: {
  39     Generic,
  40   },
  41   data: () => {
  42     return {
  43       users: null,
  44       photos: null,
  45       videos: null,
  46       usage: null,
  47       serverError: false,
  48     };
  49   },
  50   created: function () {
  51     const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
  52     if (updateInterval > 0) {
  53       setInterval(() => this.fetchConfig(), updateInterval);
  54     }
  55     this.fetchConfig();
  56   },
  57   computed: {
  58     humanizeSize: function () {
  59       let bytes = this.usage;
  60       if (Math.abs(bytes) < 1024) return bytes + " B";
  61
  62       const units = ["KiB", "MiB", "GiB", "TiB"];
  63       let u = -1;
  64       do {
  65         bytes /= 1024;
  66         ++u;
  67       } while (
  68         Math.round(Math.abs(bytes) * 100) / 100 >= 1024 &&
  69         u < units.length - 1
  70       );
  71
  72       return bytes.toFixed(2) + " " + units[u];
  73     },
  74   },
  75   methods: {
  76     fetchConfig: function () {
  77       const headers = {
  78         "x-api-key": this.item.apikey,
  79       };
  80
  81       this.fetch(`/api/server-info/stats`, { headers })
  82         .then((stats) => {
  83           this.photos = stats.photos;
  84           this.videos = stats.videos;
  85           this.usage = stats.usage;
  86           this.users = stats.usageByUser.length;
  87         })
  88         .catch((e) => {
  89           console.error(e);
  90           this.serverError = true;
  91         });
  92     },
  93   },
  94 };
  95 </script>
  96
  97 <style scoped lang="scss">
  98 .notifs {
  99   position: absolute;
 100   color: white;
 101   font-family: sans-serif;
 102   top: 0.3em;
 103   right: 0.5em;
 104   .notif {
 105     display: inline-block;
 106     padding: 0.2em 0.35em;
 107     border-radius: 0.25em;
 108     position: relative;
 109     margin-left: 0.3em;
 110     font-size: 0.8em;
 111     &.photos {
 112       background-color: #4fb5d6;
 113     }
 114
 115     &.videos {
 116       background-color: #d08d2e;
 117     }
 118
 119     &.usage {
 120       background-color: #e51111;
 121     }
 122
 123     &.users {
 124       background-color: #8dd475;
 125     }
 126   }
 127 }
 128 </style>