From 6e7b0e4dd52b4f212221ee8dc0e9dc9e06f11dc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20GRANDIN?= <remy.gr@ndin.fr>
Date: Sat, 23 Apr 2022 02:44:49 +0200
Subject: [PATCH] :sparkles: Add Synology Download Widget

---
 src/assets/locales/en.json                  |   9 +
 src/components/Widgets/SynologyDownload.vue | 174 ++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue       |   8 +
 3 files changed, 191 insertions(+)
 create mode 100644 src/components/Widgets/SynologyDownload.vue

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 741fcbc9..d70594ca 100644
--- a/src/assets/locales/en.json
+++ b/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"
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/Widgets/SynologyDownload.vue b/src/components/Widgets/SynologyDownload.vue
new file mode 100644
index 00000000..15c2af3b
--- /dev/null
+++ b/src/components/Widgets/SynologyDownload.vue
@@ -0,0 +1,174 @@
+<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">
+      <b>{{ $t('widgets.synology-download.downloaded') }}</b>: {{ task.Downloaded | formatSize }}
+      / {{ task.TotalSize | formatSize }} ({{ task.Progress }}%)
+      ({{ task.DownSpeed | formatSize }}/s)<br/>
+      <b>{{ $t('widgets.synology-download.uploaded') }}</b>: {{ 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>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index ac288d4f..089fc226 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/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'),