First commit

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -0,0 +1,26 @@
+# todo-ninja
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/app']
+};

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "vuetr",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "apexcharts": "^3.6.5",
+    "axios": "^0.18.0",
+    "date-fns": "^1.29.0",
+    "filepond": "^4.3.9",
+    "filepond-plugin-file-validate-size": "^2.1.3",
+    "filepond-plugin-file-validate-type": "^1.2.4",
+    "filepond-plugin-image-preview": "^4.0.8",
+    "register-service-worker": "^1.6.2",
+    "vue": "^2.5.17",
+    "vue-apexcharts": "^1.3.2",
+    "vue-filepond": "^5.1.0",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.3.0",
+    "vuex": "^3.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.5.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-plugin-pwa": "^3.6.0",
+    "@vue/cli-service": "^3.5.3",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.4.5",
+    "vue-template-compiler": "^2.5.17",
+    "vuetify-loader": "^1.0.5",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,149 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
+fill="#000000" stroke="none">
+<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
+-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
+173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
+13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
+20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
+-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
+11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
+-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
+-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
+11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
+-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
+36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
+-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
+-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
+-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
+10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
+-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
+221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
+-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
+-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
+-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
+-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
+-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
+30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
+-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
+-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
+96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
+-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
+-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
+-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
+-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
+-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
+30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
+342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
+22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
+-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
+-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
+-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
+-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
+-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
+17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
+-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
+-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
+-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
+72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
+35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
+-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
+-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
+0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
+-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
+-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
+-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
+11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
+-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
+12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
+145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
+-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
+-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
+-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
+248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
+29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
+-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
+-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
+-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
+109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
+-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
+-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
+-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
+38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
+34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
+136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
+67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
+150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
+116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
+113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
+175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
+89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
+11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
+6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
+430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
+220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
+24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
+478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
+394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
+55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
+175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
+88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
+155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
+11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
+14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
+51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
+37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
+55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
+55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
+295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
+16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
+157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
+200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
+241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
+61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
+28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
+62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
+56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
+350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
+90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
+121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
+60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
+167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
+171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
+97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
+111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
+11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
+13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
+101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
+19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
+54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
+0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
+90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
+108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
+20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
+-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
+-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
+-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
+-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
+-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
+-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
+-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
+-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
+396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
+110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
+-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
+-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
+583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
+408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
+561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
+-9615 0 20 -32z"/>
+</g>
+</svg>

public/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>VueTorrent</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Material+Icons"
+    />
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but VueTorrent doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "VueTorrent",
+  "short_name": "VueTr",
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#4DBA87"
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/App.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-app class="grey lighten-4">
+    <!--snackbar popup for torrent added -->
+    <v-snackbar :value="snackbar" :timeout="4000" top color="success">
+      <span>{{succes_msg}}</span>
+      <v-btn color="white" flat @click="snackbarClose">Close</v-btn>
+    </v-snackbar>
+
+    <!--snackbar popup for errors -->
+    <v-snackbar :value="snackbar_error" :timeout="4000" top color="error">
+      <span>{{error_msg}}</span>
+      <v-btn color="white" flat @click="snackbar_errorClose">Close</v-btn>
+    </v-snackbar>
+
+    <div v-if="authenticated">
+      <Navbar/>
+      <v-content class="mx-4 mb-4">
+        <router-view></router-view>
+      </v-content>
+    </div>
+    <v-container v-else fill-height>
+      <v-layout row wrap align-center class="justify-center" justify-center>
+        <div style="margin: 0 auto">
+          <Login/>
+        </div>
+      </v-layout>
+    </v-container>
+
+    <v-spacer></v-spacer>
+    <p class="grey--text caption text-sm-center text-md-center text-xs-center">Made by Daan Wijns</p>
+  </v-app>
+</template>
+
+<script>
+import Navbar from "./components/Navbar";
+import Login from "./components/Login";
+import { mapState } from "vuex";
+
+export default {
+  components: { Navbar, Login },
+  name: "App",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState([
+      "authenticated",
+      "snackbar_error",
+      "error_msg",
+      "snackbar",
+      "succes_msg"
+    ])
+  },
+  methods: {
+    snackbar_errorClose() {
+      this.$store.state.snackbar_error = false;
+    },
+    snackbarClose() {
+      this.$store.state.snackbar = false;
+    }
+  }
+};
+</script>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

src/assets/mockup_state.txt

@@ -0,0 +1,81 @@
+ state: {
+    intervals: [],
+    stats: {
+      status: 'init',
+      dlspeed: '6 Mbps',
+      upspeed: '1 Mbps',
+      downloaded: '6.95 Gb',
+      uploaded: '1014 Mb'
+    },
+    upload_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    download_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    torrents: [
+      {
+        hash: 2,
+        name: 'ubuntu-18.10-desktop-amd64.iso',
+        dloaded: '560.3 Mb',
+        size: '1.86 Gb',
+        uploaded: '22.4 Mb',
+        dlspeed: '15 Mbps',
+        upspeed: '2 Mbps',
+        num_leechs: 9,
+        num_seeds: 12,
+        available_peers: 84,
+        available_seeds: 2641,
+        eta: '2h 15min',
+        state: 'done'
+      },
+      {
+        hash: 3,
+        name: 'linuxmint-17-cinnamon-32bit-v2.iso',
+        dloaded: '960.3 Mb',
+        dlspeed: '20 Mbps',
+        upspeed: '1 Mbps',
+        size: '1.16 Gb',
+        uploaded: '122.4 Mb',
+        num_leechs: 7,
+        num_seeds: 8,
+        available_peers: 49,
+        available_seeds: 20,
+        eta: '1h 35min',
+        state: 'busy'
+      },
+      {
+        hash: 4,
+        name: 'kali-linux-2019-1a-amd64-iso',
+        dloaded: '3.24 Gb',
+        dlspeed: '9 Mbps',
+        upspeed: '4 Mbps',
+        size: '1.93 Gb',
+        uploaded: '542.1 Mb',
+        num_leechs: 4,
+        num_seeds: 5,
+        available_peers: 50,
+        available_seeds: 43,
+        eta: '15 min',
+        state: 'fail'
+      },
+      {
+        hash: 5,
+        name: '2019-04-08-raspbian-stretch-lite.zip',
+        dloaded: '260.3 Mb',
+        dlspeed: '9 Mbps',
+        upspeed: '4 Mbps',
+        size: '351.6 Mb',
+        uploaded: '542.1 Mb',
+        num_leechs: 4,
+        num_seeds: 5,
+        available_peers: 299,
+        available_seeds: 11,
+        eta: '15 min',
+        state: 'paused'
+      }
+    ],
+    selected_torrents: [],
+    network_error: false,
+    snackbar_error: false,
+    error_msg: '',
+    snackbar: false,
+    succes_msg: '',
+    authenticated: true,
+    loading: false

src/components/AddTorrent.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-dialog max-width="400px" v-model="dialog">
+    <v-btn flat small fab slot="activator" color="grey" class="mr-0 ml-0">
+      <v-icon color="grey">add</v-icon>
+    </v-btn>
+    <v-card>
+      <v-container :class="`pa-0 project done`">
+        <v-card-title class="justify-center">
+          <h2>Add a new Torrent</h2>
+        </v-card-title>
+        <div class="mr-5 ml-5">
+          <file-pond
+            name="file"
+            ref="pond"
+            label-idle="Drop file here..."
+            accepted-file-types="application/x-bittorrent"
+            data-max-file-size="1MB"
+            server="http://localhost:3000/upload"
+            v-model="Files"
+          />
+        </div>
+        <v-card-text>
+          <v-form class="px-3" ref="form">
+            <!-- <v-text-field
+            v-model="filename"
+            label="File"
+            prepend-icon="attach_file"
+            :rules="inputRules"
+            ></v-text-field>-->
+            <v-text-field v-model="directory" label="Download Directory" prepend-icon="folder"></v-text-field>
+            <v-spacer></v-spacer>
+            <v-card-actions class="justify-center">
+              <v-btn
+                :loading="loading"
+                flat
+                @click="submit"
+                class="blue_accent white--text mx-0 mt-3"
+              >Add Torrent</v-btn>
+            </v-card-actions>
+          </v-form>
+        </v-card-text>
+      </v-container>
+    </v-card>
+  </v-dialog>
+</template>
+
+
+<script>
+// Import Vue FilePond
+import vueFilePond from "vue-filepond";
+
+// Import FilePond styles
+import "filepond/dist/filepond.min.css";
+
+// Import image preview plugin styles
+import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
+
+// Import image preview and file type validation plugins
+import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
+import FilePondPluginImagePreview from "filepond-plugin-image-preview";
+import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
+
+// Create component
+const FilePond = vueFilePond(
+  FilePondPluginFileValidateType,
+  FilePondPluginImagePreview,
+  FilePondPluginFileValidateSize
+);
+
+export default {
+  data() {
+    return {
+      filename: "",
+      directory: "",
+      inputRules: [
+        v =>
+          v.indexOf("magnet") > -1 ||
+          v.indexOf("http") > -1 ||
+          this.validFile ||
+          "Not a valid magnet link"
+      ],
+      loading: false,
+      dialog: false,
+      Files: []
+    };
+  },
+  methods: {
+    submit() {
+      if (this.$refs.form.validate()) {
+        this.loading = true;
+
+        this.$store.dispatch("ADD_TORRENT", {
+          name: this.filename,
+          dir: this.directory
+        });
+
+        //reset input
+        this.$refs.form.reset();
+        this.filename = "";
+        this.directory = "";
+
+        this.$refs.pond.removeFiles();
+        this.dialog = false;
+        this.loading = false;
+      }
+    }
+  },
+  computed: {
+    validFile() {
+      return this.Files.length > 0;
+    }
+  },
+  components: {
+    vueFilePond
+  }
+};
+</script>

src/components/Login.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-container class="grey lighten-4">
+    <v-card max-width="400" flat>
+      <v-container :class="`pa-3 project done`">
+        <v-card-title class="justify-center">
+          <h2>Login</h2>
+        </v-card-title>
+        <div class="mr-5 ml-5"></div>
+        <v-card-text>
+          <v-form class="px-3" ref="form">
+            <v-text-field
+              flat
+              solo
+              background-color="grey lighten-4"
+              label="username"
+              prepend-icon="person"
+              v-model="username"
+              :rules="inputRules"
+              @keyup.enter.native="Login"
+            ></v-text-field>
+            <v-text-field
+              flat
+              solo
+              background-color="grey lighten-4"
+              type="password"
+              label="password"
+              prepend-icon="lock"
+              v-model="password"
+              :rules="inputRules"
+              @keyup.enter.native="Login"
+            ></v-text-field>
+            <v-spacer></v-spacer>
+            <v-card-actions class="justify-center">
+              <v-btn
+                :loading="loading"
+                flat
+                @click="Login"
+                class="blue_accent white--text mx-0 mt-3"
+              >Login</v-btn>
+            </v-card-actions>
+          </v-form>
+        </v-card-text>
+      </v-container>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      username: "",
+      password: "",
+      inputRules: [v => v.length >= 1 || "At least 1 character"]
+    };
+  },
+  methods: {
+    Login() {
+      this.$store.state.loading = true;
+      this.$store.dispatch("LOGIN", {
+        username: this.username,
+        password: this.password
+      });
+    }
+  },
+  computed: {
+    ...mapState(["loading"])
+  }
+};
+</script>

src/components/Navbar.vue

@@ -0,0 +1,213 @@
+<template>
+  <nav>
+    <!--title-->
+    <v-toolbar flat app>
+      <v-toolbar-side-icon @click="drawer = !drawer" class="grey--text"></v-toolbar-side-icon>
+      <v-toolbar-title
+        :class="['grey--text', {'subheading ml-0': $vuetify.breakpoint.smAndDown}]"
+      >
+        <span class="font-weight-light">Vue</span>
+        <span>Torrent</span>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+
+      <!--right corner functions-->
+      <AddTorrent @torrentAdded="snackbar = true"/>
+      <v-btn small fab flat class="mr-0 ml-0" @click="removeTorrents">
+        <v-icon color="grey">remove</v-icon>
+      </v-btn>
+      <v-btn small fab flat class="mr-0 ml-0" @click="resumeTorrents">
+        <v-icon color="grey">play_arrow</v-icon>
+      </v-btn>
+      <v-btn small fab flat class="mr-0 ml-0" @click="pauseTorrents">
+        <v-icon color="grey">pause</v-icon>
+      </v-btn>
+      <v-btn small fab flat class="mr-0 ml-0" @click="REFRESH_TORRENTS">
+        <v-icon color="grey">autorenew</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <!--navigation drawer itself -->
+    <v-navigation-drawer app v-model="drawer" class="primary allow-spacer">
+      <!--current download speeds -->
+      <v-flex class="mt-3">
+        <div class="secondary_lighter--text text-uppercase caption ml-4">current speed</div>
+        <v-card color="secondary" flat class="mr-2 ml-2">
+          <v-layout row wrap :class="`pa-3 project nav_download`">
+            <v-icon color="download">keyboard_arrow_down</v-icon>
+            <span class="download--text title">
+              {{stats.dlspeed.substring(0, stats.dlspeed.indexOf(' '))}}
+              <span
+                class="font-weight-light caption"
+              >{{stats.dlspeed.substring(stats.dlspeed.indexOf(' '))}}</span>
+            </span>
+            <v-icon class="pl-5" color="upload">keyboard_arrow_up</v-icon>
+            <span class="upload--text title">
+              {{stats.upspeed.substring(0, stats.upspeed.indexOf(' '))}}
+              <span
+                class="font-weight-light caption"
+              >{{stats.upspeed.substring(stats.upspeed.indexOf(' '))}}</span>
+            </span>
+          </v-layout>
+        </v-card>
+        <!--speeds graph -->
+        <div class="mt-4">
+          <apexchart ref="chart" type="line" :options="chartOptions" :series="series"></apexchart>
+        </div>
+        <div class="mt-4"></div>
+        <div class="secondary_lighter--text text-uppercase caption ml-4">session stats</div>
+        <v-card flat color="secondary" class="mr-2 ml-2">
+          <v-layout row wrap :class="`pa-3 project nav_download`">
+            <v-flex md6>
+              <div class="download--text">Total downloaded</div>
+            </v-flex>
+            <v-flex md5 class="mr-2">
+              <span class="download--text title pl-3">
+                {{stats.downloaded.substring(0, stats.downloaded.indexOf(' '))}}
+                <span
+                  class="font-weight-light caption"
+                >{{stats.downloaded.substring(stats.downloaded.indexOf(' '))}}</span>
+              </span>
+            </v-flex>
+          </v-layout>
+        </v-card>
+        <v-card flat color="secondary" class="mr-2 ml-2 mt-1">
+          <v-layout row wrap :class="`pa-3 project nav_upload`">
+            <v-flex md6>
+              <div class="upload--text">Total uploaded</div>
+            </v-flex>
+            <v-flex md5 class="mr-2">
+              <span class="upload--text title pl-3">
+                {{stats.uploaded.substring(0, stats.uploaded.indexOf(' '))}}
+                <span
+                  class="font-weight-light caption"
+                >{{stats.uploaded.substring(stats.uploaded.indexOf(' '))}}</span>
+              </span>
+            </v-flex>
+          </v-layout>
+        </v-card>
+      </v-flex>
+      <v-spacer></v-spacer>
+      <v-layout class="align-end">
+        <Settings/>
+        <v-spacer></v-spacer>
+        <v-tooltip top v-if="paused">
+          <v-btn small fab flat class="mr-4" @click="startInterval" slot="activator">
+            <v-icon color="green_accent">play_arrow</v-icon>
+          </v-btn>
+          <span>Resumes connection to client</span>
+        </v-tooltip>
+        <v-tooltip top v-else>
+          <v-btn small fab flat class="mr-4" @click="clearInterval" slot="activator">
+            <v-icon color="green_accent">pause</v-icon>
+          </v-btn>
+          <span>Pauses connection to client</span>
+        </v-tooltip>
+      </v-layout>
+    </v-navigation-drawer>
+  </nav>
+</template>
+
+<script>
+import AddTorrent from "./AddTorrent";
+import Settings from "./Settings";
+import { mapMutations, mapGetters, mapState } from "vuex";
+import { setInterval } from "timers";
+export default {
+  components: { AddTorrent, Settings },
+  data() {
+    return {
+      drawer: false,
+      paused: false,
+      links: [
+        { icon: "dashboard", text: "Dashboard", route: "/" },
+        { icon: "settings", text: "Settings", route: "/settings" }
+      ],
+      chartOptions: {
+        chart: {
+          sparkline: {
+            enabled: true
+          },
+          animations: {
+            enabled: false,
+            dynamicAnimation: {
+              speed: 2000
+            }
+          }
+        },
+        colors: ["#00b3fa", "#64CEAA"],
+        stroke: {
+          show: true,
+          curve: "smooth",
+          lineCap: "round",
+          width: 4
+        },
+        fill: {
+          type: "gradient",
+          gradient: {
+            shade: "dark",
+            type: "vertical",
+            shadeIntensity: 0.5,
+            opacityFrom: 0.6,
+            opacityTo: 0.5,
+            stops: [0, 50, 100]
+          }
+        }
+      },
+      series: [
+        {
+          name: "upload",
+          type: "area",
+          data: this.$store.state.upload_data
+        },
+        {
+          name: "download",
+          type: "area",
+          data: this.$store.state.download_data
+        }
+      ]
+    };
+  },
+  methods: {
+    ...mapMutations(["REFRESH_TORRENTS", "CLEAR_INTERVALS"]),
+    clearInterval() {
+      this.$store.commit("CLEAR_INTERVALS");
+      this.$data.paused = !this.$data.paused;
+    },
+    startInterval() {
+      this.$store.dispatch("REFRESH_TORRENTS");
+      this.$store.dispatch("REFRESH_SESSION_STATS");
+      this.$data.paused = !this.$data.paused;
+    },
+    pauseTorrents() {
+      this.$store.dispatch("PAUSE_TORRENTS");
+    },
+    resumeTorrents() {
+      this.$store.dispatch("RESUME_TORRENTS");
+    },
+    removeTorrents() {
+      this.$store.dispatch("REMOVE_TORRENTS");
+    },
+    closeSnackbar() {
+      this.$store.state.snackbar = false;
+    }
+  },
+  created: function() {
+    this.$store.dispatch("REFRESH_SESSION_STATS");
+  },
+  computed: {
+    ...mapState(["stats", "snackbar_error", "error_msg", "snackbar"])
+  }
+};
+</script>
+<style>
+.project.nav_upload {
+  border-left: 4px solid #00b3fa;
+}
+.project.nav_download {
+  border-left: 4px solid #64ceaa;
+}
+.allow-spacer {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/components/Settings.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-dialog max-width="600px" max-height="800px">
+    <v-btn flat small fab slot="activator" color="grey" class="mr-0 ml-0">
+      <v-icon color="blue_accent">settings</v-icon>
+    </v-btn>
+    <v-container class="grey lighten-4">
+      <v-card class="pa-3">
+        <div>Nothing here yet!</div>
+      </v-card>
+      <div class="mt-3">
+        <v-card-actions class="justify-center">
+          <v-btn target="blank" href="https://paypal.me/Dwijns" class="blue_accent white--text">
+            <v-icon>attach_money</v-icon>support me on paypal (or dont)
+          </v-btn>
+        </v-card-actions>
+      </div>
+    </v-container>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  }
+};
+</script>

src/main.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import './plugins/vuetify';
+import App from './App.vue';
+import router from './router';
+import VueApexCharts from 'vue-apexcharts';
+import store from './services/store';
+import './registerServiceWorker'
+
+Vue.use(VueApexCharts);
+
+Vue.component('apexchart', VueApexCharts);
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app');

src/plugins/vuetify.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import 'vuetify/src/stylus/app.styl';
+
+Vue.use(Vuetify, {
+  iconfont: 'md',
+  theme: {
+    primary: '#35495e',
+    secondary: '#3e556d',
+    secondary_lighter: "#56718c",
+    blue_accent: '#3cd1c2',
+    info: '#ffaa2c',
+    error: '#f83e70',
+    green_accent: '#3cd1c2',
+    download : '#64CEAA',
+    upload: '#00b3fa'
+  }
+});

src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

src/router.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Dashboard from './views/Dashboard.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'dashboard',
+      component: Dashboard
+    }
+  ]
+})

src/services/qbit.js

@@ -0,0 +1,60 @@
+import {timingSafeEqual} from 'crypto';
+
+const axios = require('axios');
+
+class Qbit {
+  constructor() {
+    this._axios = axios.create({
+      baseURL: 'http://localhost:3000',
+      timeout: 1000
+    });
+  }
+  async getAll(sort) {
+    let res = await this._axios.post('/all', sort);
+    return res.data;
+  }
+
+  async get_sessions_stats() {
+    let res = await this._axios.get('/session');
+    return res.data;
+  }
+
+  async pause_torrents(torrents) {
+    let res = await this._axios.post('/pause', torrents);
+    return res.data;
+  }
+
+  async pause_all() {
+    let res = await this._axios.post('/pause_all');
+    return res.data;
+  }
+
+  async resume_torrents(torrents) {
+    let res = await this._axios.post('/resume', torrents);
+    return res.data;
+  }
+
+  async resume_all() {
+    let res = await this._axios.post('/resume_all');
+    return res.data;
+  }
+
+  async add_torrent(torrent) {
+    let res = await this._axios.post('/add', torrent);
+    return res;
+  }
+
+  async remove_torrents(torrents) {
+    let res = await this._axios.post('/remove', torrents);
+    return res.data;
+  }
+
+  async login(credentials) {
+    let res = await this._axios.post('/login', credentials);
+    return res.data;
+  }
+}
+
+const qbit = new Qbit();
+
+export default qbit;

src/services/store.js

@@ -0,0 +1,198 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import qbit from './qbit';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    intervals: [],
+    stats: {
+      status: 'init',
+      dlspeed: '6 Mbps',
+      upspeed: '1 Mbps',
+      downloaded: '6.95 Gb',
+      uploaded: '1014 Mb'
+    },
+    upload_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    download_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    torrents: [],
+    selected_torrents: [],
+    network_error: false,
+    snackbar_error: false,
+    error_msg: '',
+    snackbar: false,
+    succes_msg: '',
+    authenticated: false,
+    loading: false,
+    sort_options: {sort: 'name', reverse: false}
+  },
+  getters: {
+    CONTAINS_TORRENT: state => hash => {
+      return state.selected_torrents.includes(hash);
+    }
+  },
+  mutations: {
+    REFRESH_TORRENTS: async state => {
+      let torrents = await qbit.getAll(state.sort_options).catch(() => {
+        state.network_error = true;
+        state.error_msg = 'Lost connection with server, reload page';
+        state.snackbar_error = true;
+      });
+      state.torrents = torrents.map(a => ({...a}));
+    },
+    REFRESH_SESSION_STATS: async state => {
+      let _stats = await qbit.get_sessions_stats();
+      //push in array for graph
+      state.download_data.splice(0, 1);
+      if (_stats.dlspeed.indexOf('KB' > -1)) {
+        state.download_data.push(
+          _stats.dlspeed.substring(0, _stats.dlspeed.indexOf(' ')) / 1000
+        );
+      } else {
+        state.download_data.push(
+          _stats.dlspeed(0, _stats.dlspeed.indexOf(' '))
+        );
+      }
+      state.upload_data.splice(0, 1);
+      if (_stats.upspeed.indexOf('KB' > -1)) {
+        state.upload_data.push(
+          _stats.upspeed.substring(0, _stats.upspeed.indexOf(' ')) / 1000
+        );
+      } else {
+        state.upload_data.push(
+          _stats.upspeed.substring(0, _stats.upspeed.indexOf(' '))
+        );
+      }
+      state.stats = _stats;
+    },
+    CLEAR_INTERVALS: state => {
+      if (state.intervals.length > 1)
+        state.intervals.forEach(el => clearInterval(el));
+    },
+    ADD_SELECTED: (state, payload) => {
+      state.selected_torrents.push(payload);
+    },
+    REMOVE_SELECTED: (state, payload) => {
+      state.selected_torrents.splice(
+        state.selected_torrents.indexOf(payload),
+        1
+      );
+    },
+    RESET_SELECTED: state => {
+      state.selected_torrents = [];
+    },
+    PAUSE_TORRENTS: async state => {
+      let res;
+      if (state.selected_torrents.length === 0) {
+        res = await qbit.pause_all();
+      } else {
+        res = await qbit.pause_torrents(state.selected_torrents);
+      }
+    },
+    RESUME_TORRENTS: async state => {
+      let res;
+      if (state.selected_torrents.length === 0) {
+        res = await qbit.resume_all();
+      } else {
+        res = await qbit.resume_torrents(state.selected_torrents);
+      }
+    },
+    ADD_TORRENT: async (state, payload) => {
+      let res = await qbit.add_torrent(payload);
+      if (res.statusText === 'OK') {
+        state.snackbar = true;
+        state.succes_msg = 'Awesome! You added a new Torrent.';
+        setTimeout(() => {
+          state.snackbar = false;
+        }, 4000);
+      } else {
+        state.snackbar_error = true;
+        state.error_msg = 'Something went wrong';
+        setTimeout(() => {
+          state.snackbar_error = false;
+        }, 4000);
+      }
+    },
+    REMOVE_TORRENTS: async state => {
+      if (state.selected_torrents.length !== 0) {
+        let res = await qbit.remove_torrents(state.selected_torrents);
+      }
+    },
+    LOGIN: async (state, payload) => {
+      let res = await qbit.login(payload);
+      switch (res) {
+        case 'No such user':
+          state.snackbar_error = true;
+          state.error_msg = 'No such user!';
+          setTimeout(() => {
+            state.snackbar_error = false;
+          }, 4000);
+          break;
+        case 'Wrong password!':
+          state.snackbar_error = true;
+          state.error_msg = 'Wrong password!';
+          setTimeout(() => {
+            state.snackbar_error = false;
+          }, 4000);
+          break;
+        case 'SUCCES':
+          state.snackbar = true;
+          state.succes_msg = 'Succesfully logged in!';
+          state.authenticated = true;
+          setTimeout(() => {
+            state.snackbar = false;
+          }, 4000);
+          break;
+        default:
+          state.snackbar_error = true;
+          state.error_msg = 'Something went wrong';
+          setTimeout(() => {
+            state.snackbar_error = false;
+          }, 4000);
+          break;
+      }
+      state.loading = false;
+    }
+  },
+  actions: {
+    REFRESH_TORRENTS: context => {
+      context.state.intervals[1] = setInterval(async () => {
+        context.commit('REFRESH_TORRENTS');
+        if (context.state.network_error) {
+          context.commit('CLEAR_INTERVALS');
+        }
+      }, 2000);
+    },
+    REFRESH_SESSION_STATS: context => {
+      context.state.intervals[0] = setInterval(async () => {
+        context.commit('REFRESH_SESSION_STATS');
+      }, 1000);
+    },
+    ADD_SELECTED: (context, payload) => {
+      context.commit('ADD_SELECTED', payload);
+    },
+    REMOVE_SELECTED: (context, payload) => {
+      context.commit('REMOVE_SELECTED', payload);
+    },
+    RESET_SELECTED: context => {
+      context.commit('RESET_SELECTED');
+    },
+    PAUSE_TORRENTS: context => {
+      context.commit('PAUSE_TORRENTS');
+    },
+    RESUME_TORRENTS: context => {
+      context.commit('RESUME_TORRENTS');
+    },
+    ADD_TORRENT: (context, payload) => {
+      context.commit('ADD_TORRENT', payload);
+    },
+    REMOVE_TORRENTS: context => {
+      context.commit('REMOVE_TORRENTS');
+    },
+    LOGIN: (context, payload) => {
+      context.commit('LOGIN', payload);
+    }
+  }
+});

src/views/Dashboard.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="dashboard" @click.self="resetSelected">
+    <h1 class="subheading grey--text">Dashboard</h1>
+    <v-container class="my-4" @click.self="resetSelected">
+      <!-- justify-center here in layout to center!! -->
+      <v-flex xs12 sm6 md3 @click.self="resetSelected">
+        <v-text-field
+          flat
+          label="type to sort..."
+          height="50"
+          clearable
+          solo
+          hint="eg `size desc` + enter"
+          background-color="grey lighten-3"
+          v-model="sort_input"
+          @keyup.enter.native="sortBy"
+        ></v-text-field>
+      </v-flex>
+
+      <div v-if="torrents.length >= 1">
+        <v-card
+          ripple
+          flat
+          v-for="torrent in torrents"
+          :key="torrent.name"
+          class="pointer"
+          :class=" containsTorrent(torrent.hash) ? 'grey lighten-3' : ''"
+          @click.native="selectTorrent(torrent.hash)"
+        >
+          <v-layout row wrap :class="`pa-3 project ${torrent.state}`">
+            <v-flex xs12 sm2 md3>
+              <div class="caption grey--text">Torrent title</div>
+              <div>{{ torrent.name }}</div>
+            </v-flex>
+            <v-flex xs6 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Size</div>
+              <div>
+                {{ torrent.size.substring(0, torrent.size.indexOf(' '))}}
+                <span
+                  class="caption grey--text"
+                >{{ torrent.size.substring(torrent.size.indexOf(' ')) }}</span>
+              </div>
+            </v-flex>
+            <v-flex xs5 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Done</div>
+              <div>
+                {{ torrent.dloaded.substring(0, torrent.dloaded.indexOf(' ')) }}
+                <span
+                  class="caption grey--text"
+                >{{ torrent.dloaded.substring(torrent.dloaded.indexOf(' ')) }}</span>
+              </div>
+            </v-flex>
+            <v-flex xs6 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Download</div>
+              <div>
+                {{ torrent.dlspeed.substring(0, torrent.dlspeed.indexOf(' ')) }}
+                <span
+                  class="caption grey--text"
+                >{{ torrent.dlspeed.substring(torrent.dlspeed.indexOf(' ')) }}</span>
+              </div>
+            </v-flex>
+            <v-flex xs5 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Upload</div>
+              <div>
+                {{ torrent.upspeed.substring(0, torrent.upspeed.indexOf(' ')) }}
+                <span
+                  class="caption grey--text"
+                >{{ torrent.upspeed.substring(torrent.upspeed.indexOf(' ')) }}</span>
+              </div>
+            </v-flex>
+            <v-flex xs6 sm1 md1 class="mr-2">
+              <div class="caption grey--text">ETA</div>
+              <div>{{ torrent.eta }}</div>
+            </v-flex>
+            <v-flex xs5 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Peers</div>
+              <div>
+                {{ torrent.num_leechs }}
+                <span
+                  class="grey--text caption"
+                >/{{torrent.available_peers}}</span>
+              </div>
+            </v-flex>
+            <v-flex xs5 sm1 md1 class="mr-2">
+              <div class="caption grey--text">Seeds</div>
+              <div>
+                {{ torrent.num_seeds }}
+                <span class="grey--text caption">/{{torrent.available_seeds}}</span>
+              </div>
+            </v-flex>
+            <v-flex xs4 sm12 md1>
+              <div class="right">
+                <v-chip
+                  small
+                  :class="`${torrent.state} white--text my-2 caption`"
+                >{{ torrent.state }}</v-chip>
+              </div>
+            </v-flex>
+            <v-flex xs12 sm12 md12>
+              <v-progress-linear
+                height="3"
+                color="cyan darken-1"
+                background-color="cyan lighten-3"
+                :value="(torrent.dloaded/torrent.size)*100"
+              ></v-progress-linear>
+            </v-flex>
+          </v-layout>
+          <v-divider></v-divider>
+        </v-card>
+      </div>
+      <v-container v-else fill-height>
+        <div style="margin: 150px auto;">
+          <v-progress-circular :size="100" indeterminate color="green_accent"></v-progress-circular>
+        </div>
+      </v-container>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      sort_input: ""
+    };
+  },
+  computed: {
+    ...mapState(["torrents"])
+  },
+  methods: {
+    ...mapMutations(["SORT_TORRENTS"]),
+    sortBy() {
+      let name, reverse;
+      //search if order was presented
+      const index = this.sort_input.indexOf(" ");
+      if (index > -1) {
+        name = this.sort_input.substring(0, index);
+        let temp = this.sort_input.substring(index);
+        if (temp.indexOf("asc") > -1) {
+          reverse = false;
+        } else if (temp.indexOf("desc") > -1) {
+          reverse = true;
+        }
+      } else {
+        //no order so we assume input is propname
+        name = this.sort_input;
+        reverse = false;
+      }
+      //prop names
+      switch (name) {
+        case "title":
+        case "name":
+        case "Name":
+        case "Title":
+          name = "name";
+          break;
+        case "size":
+        case "Size":
+          name = "size";
+          break;
+        case "dlspeed":
+        case "Dlspeed":
+        case "Download":
+        case "download":
+        case "downloadspeed":
+          name = "dlspeed";
+          break;
+        case "upspeed":
+        case "upload":
+        case "Upload":
+        case "Upspeed":
+        case "uploadspeed":
+          name = "upspeed";
+          break;
+        case "leechs":
+        case "leechers":
+        case "leech":
+        case "peers":
+        case "Leechs":
+        case "Leechers":
+        case "Leech":
+        case "Peers":
+          name = "num_leechs";
+          break;
+        case "seeds":
+        case "seeders":
+        case "Seeds":
+        case "Seeders":
+          name = "num_seeds";
+          break;
+        case "remaining":
+        case "time":
+        case "Time":
+        case "ETA":
+        case "eta":
+          name = "eta";
+          break;
+        case "done":
+        case "downloaded":
+        case "dloaded":
+        case "Done":
+        case "Downloaded":
+        case "Dloaded":
+          name = "downloaded";
+          break;
+        case "state":
+        case "status":
+        case "State":
+        case "Status":
+          name = "state";
+          break;
+        default:
+          name = "name";
+          break;
+      }
+
+      this.$store.state.sort_options = { name, reverse };
+    },
+    selectTorrent(hash) {
+      if (this.containsTorrent(hash)) {
+        this.$store.dispatch("REMOVE_SELECTED", hash);
+      } else {
+        this.$store.dispatch("ADD_SELECTED", hash);
+      }
+    },
+    containsTorrent(hash) {
+      return this.$store.getters["CONTAINS_TORRENT"](hash);
+    },
+    resetSelected() {
+      this.$store.dispatch("RESET_SELECTED");
+    }
+  },
+  created: function() {
+    this.$store.dispatch("REFRESH_TORRENTS");
+  }
+};
+</script>
+
+<style>
+.project.done {
+  border-left: 4px solid #3cd1c2;
+}
+.project.busy {
+  border-left: 4px solid #ffaa2c;
+}
+.project.fail {
+  border-left: 4px solid #f83e70;
+}
+.project.paused {
+  border-left: 4px solid #cfd8dc;
+}
+.v-chip.done {
+  background: #3cd1c2;
+}
+.v-chip.busy {
+  background: #ffaa2c;
+}
+.v-chip.fail {
+  background: #f83e70;
+}
+.v-chip.paused {
+  background: #cfd8dc;
+}
+
+.pointer {
+  cursor: pointer;
+}
+</style>