🔀 Merge pull request #610 from remygrandin/FEATURE/widget-synology-download

Feature/widget synology download

docs/widgets.md

@@ -46,6 +46,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Pi Hole Queries](#pi-hole-queries)
   - [Recent Traffic](#recent-traffic)
   - [Stat Ping Statuses](#stat-ping-statuses)
+  - [Synology Download Station](#synology-download-station)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -1325,6 +1326,41 @@ Displays the current and recent uptime of your running services, via a self-host
 
 ---
 
+### Synology Download Station
+
+Displays the current downloads/torrents tasks of your Synology NAS
+
+<p align="center"><img width="300" src="https://i.ibb.co/N2kKWTN/image.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`hostname`** | `string` |  Required | The URL to your Synology NAS, without a trailing slash
+**`username`** | `string` |  Required | The username of a user on your synology NAS. You will see only this user download station tasks if he is not part of the administrator group. Currently don't support OTP protected accounts.
+**`password`** | `string` |  Required | The password of the account specified above.
+
+##### Example 
+
+```yaml
+- type: synology-download
+  options:
+    hostname: http://192.168.1.1:8080
+    username: dashy
+    password: totally-secure-password
+
+
+```
+
+##### Info
+- **CORS**: 🟠 Proxied
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Synology](https://www.synology.com/en-us))
+- **Privacy**: _See [Synology Privacy Statement](https://www.synology.com/en-us/company/legal/privacy)_
+
+---
+
 ## System Resource Monitoring
 
 The easiest method for displaying system info and resource usage in Dashy is with [Glances](https://nicolargo.github.io/glances/).

src/assets/locales/en.json

@@ -290,6 +290,15 @@
     "tfl-status": {
       "good-service-all": "Good Service on all Lines",
       "good-service-rest": "Good Service on all other Lines"
+    },
+    "synology-download": {
+      "download": "Download",
+      "upload": "Upload",
+      "downloaded": "Downloaded",
+      "uploaded": "Uploaded",
+      "remaining": "Remaining",
+      "up": "Up",
+      "down": "Down"
     }
   }
 }

src/components/Charts/PercentageChart.vue

@@ -13,7 +13,7 @@
     ></div>
   </div>
   <!-- Chart Legend / Key -->
-  <div class="legend">
+  <div class="legend" v-if="showLegend">
     <div v-for="(block, inx) in blocks" :key="inx"
       class="legend-item" v-tooltip="`${Math.round(block.width)}% (${block.value})`">
       <div class="dot" v-if="block.label" :style="makeDotColor(block)"></div>
@@ -31,6 +31,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
     height: {
       number: Boolean,
       default: 1,

src/components/Widgets/SynologyDownload.vue

@@ -0,0 +1,176 @@
+<template>
+<div class="synology-download-wrapper" v-if="tasks">
+  <div v-for="(task, key) in tasks" :key="key" class="task-row">
+    <PercentageChart :title="task.DisplayTitle"
+      :showAsPercent=false
+      :showLegend=false
+      :values="[
+      { label: $t('widgets.synology-download.downloaded'),
+        size: task.Progress, color: '#20e253' },
+      { label: $t('widgets.synology-download.remaining'),
+        size: 100 - task.Progress, color: '#6092d1' },
+      ]" />
+    <p class="info">
+      <strong>{{ $t('widgets.synology-download.downloaded') }}</strong>:
+       {{ task.Downloaded | formatSize }}
+      / {{ task.TotalSize | formatSize }} ({{ task.Progress }}%)
+      ({{ task.DownSpeed | formatSize }}/s)<br/>
+      <strong>{{ $t('widgets.synology-download.uploaded') }}</strong>:
+       {{ task.Uploaded | formatSize }}
+      ({{ task.UpSpeed | formatSize }}/s)
+      (ratio : {{ Math.floor( task.Uploaded / task.Downloaded * 100 ) / 100 }})
+    </p>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import PercentageChart from '@/components/Charts/PercentageChart';
+import { getValueFromCss, convertBytes } from '@/utils/MiscHelpers';
+import { serviceEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {
+    PercentageChart,
+  },
+  data() {
+    return {
+      tasks: null,
+      sid: null,
+    };
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('A hostname is required');
+      return this.options.hostname;
+    },
+    username() {
+      if (!this.options.username) this.error('A username is required');
+      return this.options.username;
+    },
+    password() {
+      if (!this.options.password) this.error('A password is required');
+      return this.options.password;
+    },
+    endpointLogin() {
+      return `${this.hostname}/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=login&account=${this.username}&passwd=${this.password}&session=DownloadStation&format=sid`;
+    },
+    endpointTasks() {
+      return `${this.hostname}/webapi/DownloadStation/task.cgi?api=SYNO.DownloadStation.Task&version=1&method=list&additional=transfer,detail&_sid=${this.sid}`;
+    },
+    endpointLogout() {
+      return `${this.hostname}/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=logout&session=DownloadStation&_sid=${this.sid}`;
+    },
+    proxyReqEndpoint() {
+      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
+      return `${baseUrl}${serviceEndpoints.corsProxy}`;
+    },
+  },
+  filters: {
+    formatSize(byteValue) {
+      return convertBytes(byteValue);
+    },
+  },
+  methods: {
+    login() {
+      axios.request({
+        method: 'GET',
+        url: this.proxyReqEndpoint,
+        headers: { 'Target-URL': this.endpointLogin },
+      })
+        .then(this.processLogin);
+    },
+    getTasks() {
+      axios.request({
+        method: 'GET',
+        url: this.proxyReqEndpoint,
+        headers: { 'Target-URL': this.endpointTasks },
+      })
+        .then(this.processTask);
+    },
+    logout() {
+      axios.request({
+        method: 'GET',
+        url: this.proxyReqEndpoint,
+        headers: { 'Target-URL': this.endpointLogout },
+      });
+    },
+    fetchData() {
+      this.startLoading();
+      this.login();
+    },
+    update() {
+      this.startLoading();
+      this.login();
+    },
+    processLogin(loginData) {
+      if (loginData.status !== 200 || !loginData.data.success) {
+        this.error('Auth failed, check hostname, username & password (OTP not supported yet)');
+      }
+      this.sid = loginData.data.data.sid;
+      this.getTasks();
+    },
+    processTask(taskData) {
+      this.tasks = taskData.data.data.tasks.map(item => ({
+        Title: item.title,
+        DisplayTitle: `[${item.status}] ${item.title}`,
+        Status: item.status,
+        TotalSize: item.size,
+        CreatedTime: item.additional.detail.create_time,
+        Downloaded: item.additional.transfer.size_downloaded,
+        Uploaded: item.additional.transfer.size_uploaded,
+        DownSpeed: item.additional.transfer.speed_download,
+        UpSpeed: item.additional.transfer.speed_upload,
+        Progress: Math.floor((item.additional.transfer.size_downloaded / item.size) * 10000) / 100,
+      })).sort((a, b) => this.statusToInt(b) - this.statusToInt(a)
+        || b.CreatedTime - a.CreatedTime);
+      this.finishLoading();
+      this.logout();
+    },
+    statusToInt(status) {
+      switch (status) {
+        case 'downloading':
+          return 1;
+        case 'seeding':
+          return 2;
+        case 'finished':
+          return 4;
+        default:
+          return 0;
+      }
+    },
+  },
+  mounted() {
+    this.background = getValueFromCss('widget-accent-color');
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.synology-download-wrapper {
+  color: var(--widget-text-color);
+  .task-row {
+    padding: 0.25rem 0 0.5rem 0;
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+    p.info {
+      font-size: 0.8rem;
+      margin: 0.25rem 0;
+      color: var(--widget-text-color);
+      opacity: var(--dimming-factor);
+      font-family: var(--font-monospace);
+    }
+  }
+  max-height: 350px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.synology-download-wrapper::-webkit-scrollbar {
+    display: none;
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -349,6 +349,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <SynologyDownload
+        v-else-if="widgetType === 'synology-download'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <SystemInfo
         v-else-if="widgetType === 'system-info'"
         :options="widgetOptions"
@@ -461,6 +468,7 @@ export default {
     SportsScores: () => import('@/components/Widgets/SportsScores.vue'),
     StatPing: () => import('@/components/Widgets/StatPing.vue'),
     StockPriceChart: () => import('@/components/Widgets/StockPriceChart.vue'),
+    SynologyDownload: () => import('@/components/Widgets/SynologyDownload.vue'),
     SystemInfo: () => import('@/components/Widgets/SystemInfo.vue'),
     TflStatus: () => import('@/components/Widgets/TflStatus.vue'),
     WalletBalance: () => import('@/components/Widgets/WalletBalance.vue'),