Merge branch 'master' of github.com:Lissy93/dashy into FEATURE/multi-page-support-2

.github/AUTHORS.txt

@@ -1,6 +1,7 @@
 0n1cOn3 <0n1cOn3@gmx.ch> - 1 commits
 Alicia <liss-bot@d0h.co> - 1 commits
 Begin <support@begin.com> - 1 commits
+CHAIYEON <H> - 1 commits
 David <skaarj1989@gmail.com> - 1 commits
 DeepSource <o> - 1 commits
 Devin <uh> - 1 commits
@@ -29,7 +30,9 @@ liss-bot <87835202+liss-bot@users.noreply.github.com> - 2 commits
 Walkx <71191962+walkxcode@users.noreply.github.com> - 3 commits
 aterox <kenneth@kenneth.church> - 3 commits
 Niklas <abe> - 4 commits
+Rémy <RANDI> - 4 commits
 Alicie <gh@d0h.co> - 5 commits
+Benjamin <ontgomer> - 5 commits
 UrekD <urek.denis@gmail.com> - 5 commits
 Erik <roo> - 6 commits
 Leonardo <ovarrubia> - 6 commits
@@ -41,12 +44,12 @@ snyk-bot <snyk-bot@users.noreply.github.com> - 18 commits
 aterox <church.kennetha@gmail.com> - 19 commits
 EVOTk <45015615+EVOTk@users.noreply.github.com> - 22 commits
 Alicia <yke> - 28 commits
-repo-visualizer <repo-visualizer@users.noreply.github.com> - 32 commits
+repo-visualizer <repo-visualizer@users.noreply.github.com> - 33 commits
 snyk-bot <snyk-bot@snyk.io> - 38 commits
-Alicia <o> - 65 commits
+Alicia <o> - 66 commits
 Lissy93 <gh@d0h.co> - 78 commits
 liss-bot <liss-bot@d0h.co> - 80 commits
-Alicia <yke> - 97 commits
+Alicia <yke> - 99 commits
 Lissy93 <Lissy93@users.noreply.github.com> - 206 commits
-Alicia <yke> - 334 commits
+Alicia <yke> - 336 commits
-Alicia <yke> - 1482 commits
+Alicia <yke> - 1487 commits

docs/credits.md

@@ -146,6 +146,13 @@
             <sub><b>UrekD</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/remygrandin">
+            <img src="https://avatars.githubusercontent.com/u/1934515?v=4" width="80;" alt="remygrandin"/>
+            <br />
+            <sub><b>remygrandin</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/walkxcode">
             <img src="https://avatars.githubusercontent.com/u/71191962?v=4" width="80;" alt="walkxcode"/>
@@ -166,15 +173,15 @@
             <br />
             <sub><b>Alessandro Del Prete</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/BOZG">
             <img src="https://avatars.githubusercontent.com/u/6022344?v=4" width="80;" alt="BOZG"/>
             <br />
             <sub><b>Stephen Rigney</b></sub>
         </a>
-    </td></tr>
+    </td>
-<tr>
     <td align="center">
         <a href="https://github.com/daentech">
             <img src="https://avatars.githubusercontent.com/u/358678?v=4" width="80;" alt="daentech"/>
@@ -209,6 +216,14 @@
             <br />
             <sub><b>Begin</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/moemoeq">
+            <img src="https://avatars.githubusercontent.com/u/1808434?v=4" width="80;" alt="moemoeq"/>
+            <br />
+            <sub><b>CHAIYEON CHO</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/skaarj1989">
@@ -216,8 +231,7 @@
             <br />
             <sub><b>David</b></sub>
         </a>
-    </td></tr>
+    </td>
-<tr>
     <td align="center">
         <a href="https://github.com/deepsourcebot">
             <img src="https://avatars.githubusercontent.com/u/60907429?v=4" width="80;" alt="deepsourcebot"/>
@@ -245,7 +259,8 @@
             <br />
             <sub><b>Ishan Jain</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/KierenConnell">
             <img src="https://avatars.githubusercontent.com/u/46445781?v=4" width="80;" alt="KierenConnell"/>
@@ -259,8 +274,7 @@
             <br />
             <sub><b>Rubjo</b></sub>
         </a>
-    </td></tr>
+    </td>
-<tr>
     <td align="center">
         <a href="https://github.com/turnrye">
             <img src="https://avatars.githubusercontent.com/u/701035?v=4" width="80;" alt="turnrye"/>
@@ -281,20 +295,6 @@
             <br />
             <sub><b>Steven Kast</b></sub>
         </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/XertDev">
-            <img src="https://avatars.githubusercontent.com/u/16572811?v=4" width="80;" alt="XertDev"/>
-            <br />
-            <sub><b>Xert</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/icy-comet">
-            <img src="https://avatars.githubusercontent.com/u/50461557?v=4" width="80;" alt="icy-comet"/>
-            <br />
-            <sub><b>Aniket Teredesai</b></sub>
-        </a>
     </td></tr>
 </table>
 <!-- readme: contributors -end -->

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/Settings/SearchBar.vue

@@ -172,6 +172,7 @@ export default {
         color: var(--search-label-color);
         margin: 0.5rem;
         display: inline;
+        word-break: keep-all;
     }
     input {
       display: inline-block;

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'),