Browse Source

First deploy version with simple history view

master
parent
commit
dd53ef85c6
Signed by: Christian van Onzenoodt <christian.van-onzenoodt@uni-ulm.de> GPG Key ID: 7B2E632FDC852341
10 changed files with 484 additions and 69 deletions
  1. 1
    0
      .gitignore
  2. 276
    5
      package-lock.json
  3. 2
    0
      package.json
  4. 0
    1
      src/.tern-port
  5. 59
    23
      src/App.vue
  6. 47
    0
      src/components/Favorites.vue
  7. 82
    34
      src/components/TrackHistory.vue
  8. 5
    0
      src/main.js
  9. 11
    5
      src/router.js
  10. 1
    1
      src/store.js

+ 1
- 0
.gitignore View File

@@ -1,3 +1,4 @@
1
+.tern-port
1 2
 
2 3
 # Created by https://www.gitignore.io/api/emacs,vuejs
3 4
 # Edit at https://www.gitignore.io/?templates=emacs,vuejs

+ 276
- 5
package-lock.json View File

@@ -2799,8 +2799,7 @@
2799 2799
     "commander": {
2800 2800
       "version": "2.17.1",
2801 2801
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
2802
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
2803
-      "dev": true
2802
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
2804 2803
     },
2805 2804
     "commondir": {
2806 2805
       "version": "1.0.1",
@@ -3373,6 +3372,270 @@
3373 3372
       "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
3374 3373
       "dev": true
3375 3374
     },
3375
+    "d3": {
3376
+      "version": "5.7.0",
3377
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.7.0.tgz",
3378
+      "integrity": "sha512-8KEIfx+dFm8PlbJN9PI0suazrZ41QcaAufsKE9PRcqYPWLngHIyWJZX96n6IQKePGgeSu0l7rtlueSSNq8Zc3g==",
3379
+      "requires": {
3380
+        "d3-array": "1",
3381
+        "d3-axis": "1",
3382
+        "d3-brush": "1",
3383
+        "d3-chord": "1",
3384
+        "d3-collection": "1",
3385
+        "d3-color": "1",
3386
+        "d3-contour": "1",
3387
+        "d3-dispatch": "1",
3388
+        "d3-drag": "1",
3389
+        "d3-dsv": "1",
3390
+        "d3-ease": "1",
3391
+        "d3-fetch": "1",
3392
+        "d3-force": "1",
3393
+        "d3-format": "1",
3394
+        "d3-geo": "1",
3395
+        "d3-hierarchy": "1",
3396
+        "d3-interpolate": "1",
3397
+        "d3-path": "1",
3398
+        "d3-polygon": "1",
3399
+        "d3-quadtree": "1",
3400
+        "d3-random": "1",
3401
+        "d3-scale": "2",
3402
+        "d3-scale-chromatic": "1",
3403
+        "d3-selection": "1",
3404
+        "d3-shape": "1",
3405
+        "d3-time": "1",
3406
+        "d3-time-format": "2",
3407
+        "d3-timer": "1",
3408
+        "d3-transition": "1",
3409
+        "d3-voronoi": "1",
3410
+        "d3-zoom": "1"
3411
+      }
3412
+    },
3413
+    "d3-array": {
3414
+      "version": "1.2.4",
3415
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
3416
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
3417
+    },
3418
+    "d3-axis": {
3419
+      "version": "1.0.12",
3420
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
3421
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
3422
+    },
3423
+    "d3-brush": {
3424
+      "version": "1.0.6",
3425
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.6.tgz",
3426
+      "integrity": "sha512-lGSiF5SoSqO5/mYGD5FAeGKKS62JdA1EV7HPrU2b5rTX4qEJJtpjaGLJngjnkewQy7UnGstnFd3168wpf5z76w==",
3427
+      "requires": {
3428
+        "d3-dispatch": "1",
3429
+        "d3-drag": "1",
3430
+        "d3-interpolate": "1",
3431
+        "d3-selection": "1",
3432
+        "d3-transition": "1"
3433
+      }
3434
+    },
3435
+    "d3-chord": {
3436
+      "version": "1.0.6",
3437
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
3438
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
3439
+      "requires": {
3440
+        "d3-array": "1",
3441
+        "d3-path": "1"
3442
+      }
3443
+    },
3444
+    "d3-collection": {
3445
+      "version": "1.0.7",
3446
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
3447
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
3448
+    },
3449
+    "d3-color": {
3450
+      "version": "1.2.3",
3451
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.3.tgz",
3452
+      "integrity": "sha512-x37qq3ChOTLd26hnps36lexMRhNXEtVxZ4B25rL0DVdDsGQIJGB18S7y9XDwlDD6MD/ZBzITCf4JjGMM10TZkw=="
3453
+    },
3454
+    "d3-contour": {
3455
+      "version": "1.3.2",
3456
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
3457
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
3458
+      "requires": {
3459
+        "d3-array": "^1.1.1"
3460
+      }
3461
+    },
3462
+    "d3-dispatch": {
3463
+      "version": "1.0.5",
3464
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.5.tgz",
3465
+      "integrity": "sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g=="
3466
+    },
3467
+    "d3-drag": {
3468
+      "version": "1.2.3",
3469
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.3.tgz",
3470
+      "integrity": "sha512-8S3HWCAg+ilzjJsNtWW1Mutl74Nmzhb9yU6igspilaJzeZVFktmY6oO9xOh5TDk+BM2KrNFjttZNoJJmDnkjkg==",
3471
+      "requires": {
3472
+        "d3-dispatch": "1",
3473
+        "d3-selection": "1"
3474
+      }
3475
+    },
3476
+    "d3-dsv": {
3477
+      "version": "1.0.10",
3478
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.10.tgz",
3479
+      "integrity": "sha512-vqklfpxmtO2ZER3fq/B33R/BIz3A1PV0FaZRuFM8w6jLo7sUX1BZDh73fPlr0s327rzq4H6EN1q9U+eCBCSN8g==",
3480
+      "requires": {
3481
+        "commander": "2",
3482
+        "iconv-lite": "0.4",
3483
+        "rw": "1"
3484
+      }
3485
+    },
3486
+    "d3-ease": {
3487
+      "version": "1.0.5",
3488
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz",
3489
+      "integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ=="
3490
+    },
3491
+    "d3-fetch": {
3492
+      "version": "1.1.2",
3493
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
3494
+      "integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
3495
+      "requires": {
3496
+        "d3-dsv": "1"
3497
+      }
3498
+    },
3499
+    "d3-force": {
3500
+      "version": "1.1.2",
3501
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.2.tgz",
3502
+      "integrity": "sha512-p1vcHAUF1qH7yR+e8ip7Bs61AHjLeKkIn8Z2gzwU2lwEf2wkSpWdjXG0axudTHsVFnYGlMkFaEsVy2l8tAg1Gw==",
3503
+      "requires": {
3504
+        "d3-collection": "1",
3505
+        "d3-dispatch": "1",
3506
+        "d3-quadtree": "1",
3507
+        "d3-timer": "1"
3508
+      }
3509
+    },
3510
+    "d3-format": {
3511
+      "version": "1.3.2",
3512
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.2.tgz",
3513
+      "integrity": "sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ=="
3514
+    },
3515
+    "d3-geo": {
3516
+      "version": "1.11.3",
3517
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.3.tgz",
3518
+      "integrity": "sha512-n30yN9qSKREvV2fxcrhmHUdXP9TNH7ZZj3C/qnaoU0cVf/Ea85+yT7HY7i8ySPwkwjCNYtmKqQFTvLFngfkItQ==",
3519
+      "requires": {
3520
+        "d3-array": "1"
3521
+      }
3522
+    },
3523
+    "d3-hierarchy": {
3524
+      "version": "1.1.8",
3525
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz",
3526
+      "integrity": "sha512-L+GHMSZNwTpiq4rt9GEsNcpLa4M96lXMR8M/nMG9p5hBE0jy6C+3hWtyZMenPQdwla249iJy7Nx0uKt3n+u9+w=="
3527
+    },
3528
+    "d3-interpolate": {
3529
+      "version": "1.3.2",
3530
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
3531
+      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
3532
+      "requires": {
3533
+        "d3-color": "1"
3534
+      }
3535
+    },
3536
+    "d3-path": {
3537
+      "version": "1.0.7",
3538
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz",
3539
+      "integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
3540
+    },
3541
+    "d3-polygon": {
3542
+      "version": "1.0.5",
3543
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.5.tgz",
3544
+      "integrity": "sha512-RHhh1ZUJZfhgoqzWWuRhzQJvO7LavchhitSTHGu9oj6uuLFzYZVeBzaWTQ2qSO6bz2w55RMoOCf0MsLCDB6e0w=="
3545
+    },
3546
+    "d3-quadtree": {
3547
+      "version": "1.0.5",
3548
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.5.tgz",
3549
+      "integrity": "sha512-U2tjwDFbZ75JRAg8A+cqMvqPg1G3BE7UTJn3h8DHjY/pnsAfWdbJKgyfcy7zKjqGtLAmI0q8aDSeG1TVIKRaHQ=="
3550
+    },
3551
+    "d3-random": {
3552
+      "version": "1.1.2",
3553
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
3554
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
3555
+    },
3556
+    "d3-scale": {
3557
+      "version": "2.1.2",
3558
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.2.tgz",
3559
+      "integrity": "sha512-bESpd64ylaKzCDzvULcmHKZTlzA/6DGSVwx7QSDj/EnX9cpSevsdiwdHFYI9ouo9tNBbV3v5xztHS2uFeOzh8Q==",
3560
+      "requires": {
3561
+        "d3-array": "^1.2.0",
3562
+        "d3-collection": "1",
3563
+        "d3-format": "1",
3564
+        "d3-interpolate": "1",
3565
+        "d3-time": "1",
3566
+        "d3-time-format": "2"
3567
+      }
3568
+    },
3569
+    "d3-scale-chromatic": {
3570
+      "version": "1.3.3",
3571
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.3.3.tgz",
3572
+      "integrity": "sha512-BWTipif1CimXcYfT02LKjAyItX5gKiwxuPRgr4xM58JwlLocWbjPLI7aMEjkcoOQXMkYsmNsvv3d2yl/OKuHHw==",
3573
+      "requires": {
3574
+        "d3-color": "1",
3575
+        "d3-interpolate": "1"
3576
+      }
3577
+    },
3578
+    "d3-selection": {
3579
+      "version": "1.3.2",
3580
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.2.tgz",
3581
+      "integrity": "sha512-OoXdv1nZ7h2aKMVg3kaUFbLLK5jXUFAMLD/Tu5JA96mjf8f2a9ZUESGY+C36t8R1WFeWk/e55hy54Ml2I62CRQ=="
3582
+    },
3583
+    "d3-shape": {
3584
+      "version": "1.2.2",
3585
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.2.tgz",
3586
+      "integrity": "sha512-hUGEozlKecFZ2bOSNt7ENex+4Tk9uc/m0TtTEHBvitCBxUNjhzm5hS2GrrVRD/ae4IylSmxGeqX5tWC2rASMlQ==",
3587
+      "requires": {
3588
+        "d3-path": "1"
3589
+      }
3590
+    },
3591
+    "d3-time": {
3592
+      "version": "1.0.10",
3593
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.10.tgz",
3594
+      "integrity": "sha512-hF+NTLCaJHF/JqHN5hE8HVGAXPStEq6/omumPE/SxyHVrR7/qQxusFDo0t0c/44+sCGHthC7yNGFZIEgju0P8g=="
3595
+    },
3596
+    "d3-time-format": {
3597
+      "version": "2.1.3",
3598
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz",
3599
+      "integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==",
3600
+      "requires": {
3601
+        "d3-time": "1"
3602
+      }
3603
+    },
3604
+    "d3-timer": {
3605
+      "version": "1.0.9",
3606
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.9.tgz",
3607
+      "integrity": "sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg=="
3608
+    },
3609
+    "d3-transition": {
3610
+      "version": "1.1.3",
3611
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.3.tgz",
3612
+      "integrity": "sha512-tEvo3qOXL6pZ1EzcXxFcPNxC/Ygivu5NoBY6mbzidATAeML86da+JfVIUzon3dNM6UX6zjDx+xbYDmMVtTSjuA==",
3613
+      "requires": {
3614
+        "d3-color": "1",
3615
+        "d3-dispatch": "1",
3616
+        "d3-ease": "1",
3617
+        "d3-interpolate": "1",
3618
+        "d3-selection": "^1.1.0",
3619
+        "d3-timer": "1"
3620
+      }
3621
+    },
3622
+    "d3-voronoi": {
3623
+      "version": "1.1.4",
3624
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
3625
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
3626
+    },
3627
+    "d3-zoom": {
3628
+      "version": "1.7.3",
3629
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.3.tgz",
3630
+      "integrity": "sha512-xEBSwFx5Z9T3/VrwDkMt+mr0HCzv7XjpGURJ8lWmIC8wxe32L39eWHIasEe/e7Ox8MPU4p1hvH8PKN2olLzIBg==",
3631
+      "requires": {
3632
+        "d3-dispatch": "1",
3633
+        "d3-drag": "1",
3634
+        "d3-interpolate": "1",
3635
+        "d3-selection": "1",
3636
+        "d3-transition": "1"
3637
+      }
3638
+    },
3376 3639
     "dashdash": {
3377 3640
       "version": "1.14.1",
3378 3641
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6260,7 +6523,6 @@
6260 6523
       "version": "0.4.24",
6261 6524
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
6262 6525
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
6263
-      "dev": true,
6264 6526
       "requires": {
6265 6527
         "safer-buffer": ">= 2.1.2 < 3"
6266 6528
       }
@@ -10142,6 +10404,11 @@
10142 10404
         "aproba": "^1.1.1"
10143 10405
       }
10144 10406
     },
10407
+    "rw": {
10408
+      "version": "1.3.3",
10409
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
10410
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
10411
+    },
10145 10412
     "rx-lite": {
10146 10413
       "version": "4.0.8",
10147 10414
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -10184,8 +10451,7 @@
10184 10451
     "safer-buffer": {
10185 10452
       "version": "2.1.2",
10186 10453
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
10187
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
10188
-      "dev": true
10454
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
10189 10455
     },
10190 10456
     "sass-graph": {
10191 10457
       "version": "2.2.4",
@@ -12263,6 +12529,11 @@
12263 12529
         "vue-style-loader": "^4.1.0"
12264 12530
       }
12265 12531
     },
12532
+    "vue-material": {
12533
+      "version": "1.0.0-beta-10.2",
12534
+      "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-10.2.tgz",
12535
+      "integrity": "sha512-DXOUXm6M8zbeJ6LPvP1h/0EhXmCkxNGz2dM/0q4w+lsT9uTaos+YDrwQvJBJcxil3fEw6oHCfhG/peWks+8v7Q=="
12536
+    },
12266 12537
     "vue-router": {
12267 12538
       "version": "3.0.2",
12268 12539
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",

+ 2
- 0
package.json View File

@@ -8,7 +8,9 @@
8 8
     "lint": "vue-cli-service lint"
9 9
   },
10 10
   "dependencies": {
11
+    "d3": "^5.7.0",
11 12
     "vue": "^2.5.17",
13
+    "vue-material": "^1.0.0-beta-10.2",
12 14
     "vue-router": "^3.0.1",
13 15
     "vue-socket.io": "^3.0.4",
14 16
     "vuex": "^3.0.1"

+ 0
- 1
src/.tern-port View File

@@ -1 +0,0 @@
1
-54430

+ 59
- 23
src/App.vue View File

@@ -1,29 +1,65 @@
1 1
 <template>
2
-  <div id="app">
3
-    <div id="nav">
4
-      <router-link to="/">Home</router-link> |
5
-      <router-link to="/history">History</router-link>
6
-    </div>
7
-    <router-view/>
8
-  </div>
2
+<div class="page-container">
3
+  <md-app>
4
+    <md-app-toolbar class="md-primary">
5
+      <span class="md-title">{{ currentRoute }}</span>
6
+    </md-app-toolbar>
7
+
8
+    <md-app-drawer md-permanent="full">
9
+      <md-toolbar class="md-transparent" md-elevation="0">
10
+        Navigation
11
+      </md-toolbar>
12
+
13
+      <md-list>
14
+        <md-list-item @click="history">
15
+          <md-icon>history</md-icon>
16
+          <span class="md-list-item-text">History</span>
17
+        </md-list-item>
18
+
19
+        <md-list-item @click="favorites">
20
+          <md-icon>favorite</md-icon>
21
+          <span class="md-list-item-text">Favorites</span>
22
+        </md-list-item>
23
+      </md-list>
24
+    </md-app-drawer>
25
+
26
+    <md-app-content>
27
+      <router-view/>
28
+    </md-app-content>
29
+  </md-app>
30
+</div>
9 31
 </template>
10 32
 
11
-<style lang="scss">
12
-#app {
13
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
14
-  -webkit-font-smoothing: antialiased;
15
-  -moz-osx-font-smoothing: grayscale;
16
-  text-align: center;
17
-  color: #2c3e50;
33
+<script>
34
+export default {
35
+  name: 'App',
36
+  mounted() {
37
+    this.$store.dispatch('loadHistory');
38
+  },
39
+  data() {
40
+    return {
41
+      currentRoute: this.$router.currentRoute.name,
42
+    };
43
+  },
44
+  methods: {
45
+    history() { this.$router.push('/'); },
46
+    favorites() { this.$router.push('/favorites'); },
47
+  },
48
+  watch: {
49
+    $route(to) {
50
+      this.currentRoute = to.name;
51
+    },
52
+  },
53
+};
54
+</script>
55
+
56
+<style lang="scss" scoped>
57
+.md-app {
58
+    min-height: 100vh;
18 59
 }
19
-#nav {
20
-  padding: 30px;
21
-  a {
22
-    font-weight: bold;
23
-    color: #2c3e50;
24
-    &.router-link-exact-active {
25
-      color: #42b983;
26
-    }
27
-  }
60
+
61
+.md-drawer {
62
+    width: 230px;
63
+    max-width: calc(100vw - 125px);
28 64
 }
29 65
 </style>

+ 47
- 0
src/components/Favorites.vue View File

@@ -0,0 +1,47 @@
1
+<template>
2
+<div>
3
+  <div>
4
+    Favourites
5
+    // artist
6
+    // track
7
+    // album
8
+    // playlist
9
+    // device
10
+    // adjustable timeframe
11
+  </div>
12
+  <Bar :data="names" />
13
+</div>
14
+</template>
15
+
16
+<script>
17
+import { mapState } from 'vuex';
18
+import Bar from './d3/Bar.vue';
19
+
20
+const NAMES = [
21
+  { name: 'Sarah', value: 2502 },
22
+  { name: 'Emma', value: 2005 },
23
+  { name: 'Laura', value: 1968 },
24
+  { name: 'Chloé', value: 1863 },
25
+  { name: 'Marie', value: 1810 },
26
+  { name: 'Emily', value: 1637 },
27
+  { name: 'Léa', value: 1592 },
28
+  { name: 'Camille', value: 1572 },
29
+  { name: 'Anna', value: 1433 },
30
+  { name: 'Manon', value: 1403 },
31
+];
32
+
33
+export default {
34
+  name: 'Favorites',
35
+  components: {
36
+    Bar,
37
+  },
38
+  data() {
39
+    return {
40
+      names: NAMES,
41
+    };
42
+  },
43
+  computed: mapState({
44
+    trackHistory: state => state.trackHistory,
45
+  }),
46
+};
47
+</script>

+ 82
- 34
src/components/TrackHistory.vue View File

@@ -1,42 +1,90 @@
1 1
 <template>
2
-<div>
3
-  <button type="button" @click="emitEvent">Emit Event</button>
4
-  <table id="history">
5
-    <tr>
6
-      <th>ID</th>
7
-      <th>Repeat</th>
8
-      <th>Shuffle</th>
9
-      <th>Timestamp</th>
10
-    </tr>
11
-    <tr v-for="track in trackHistory" :key="track.id">
12
-      <td>{{ track.item_id }}</td>
13
-      <td>{{ track.repeat_state }}</td>
14
-      <td>{{ track.shuffle_state }}</td>
15
-      <td>{{ track.timestamp }}</td>
16
-    </tr>
17
-  </table>
18
-</div>
2
+<md-table v-model="trackHistory" md-fixed-header md-height="100%" class="history-table">
3
+  <md-table-row slot="md-table-row" slot-scope="{ item }">
4
+    <md-table-cell>
5
+      <div class="cover">
6
+        <img v-bind:src=item.item.album.image_url />
7
+      </div>
8
+    </md-table-cell>
9
+
10
+    <md-table-cell md-label="Track">
11
+      {{ item.item.name }}
12
+    </md-table-cell>
13
+
14
+    <md-table-cell md-label="Album">
15
+      {{ item.item.album.name }}
16
+    </md-table-cell>
17
+
18
+    <md-table-cell md-label="Artist(s)">
19
+      {{ item.item.artists.map(artist => artist.name).join("/ ") }}
20
+    </md-table-cell>
21
+
22
+    <md-table-cell md-label="Device">
23
+      <div v-if="item.device.device_type == 'Smartphone'">
24
+        <md-icon>smartphone</md-icon>
25
+        <span class="icon-label">{{ item.device.name }}</span>
26
+      </div>
27
+      <div v-if="item.device.device_type == 'Computer'">
28
+        <md-icon>computer</md-icon>
29
+        <span class="icon-label">{{ item.device.name }}</span>
30
+      </div>
31
+      <div v-if="item.device.device_type == 'Speaker'">
32
+        <md-icon>speaker</md-icon>
33
+        <span class="icon-label">{{ item.device.name }}</span>
34
+      </div>
35
+    </md-table-cell>
36
+
37
+    <md-table-cell md-label="Context">
38
+      <div v-if="item.context.type == 'playlist'">
39
+        <md-icon>playlist_play</md-icon>
40
+        <span class="icon-label">{{ item.context.playlist.name }}</span>
41
+      </div>
42
+
43
+      <div v-if="item.context.type == 'album'">
44
+        <md-icon>album</md-icon>
45
+      </div>
46
+
47
+      <div v-if="item.context.type == 'artist'">
48
+        <md-icon>person</md-icon>
49
+      </div>
50
+    </md-table-cell>
51
+
52
+    <md-table-cell md-label="Played at">
53
+      {{  new Date(item.spotify_timestamp).toLocaleString("de-DE", { timeZone: "Europe/Berlin" }) }}
54
+    </md-table-cell>
55
+  </md-table-row>
56
+</md-table>
19 57
 </template>
20 58
 
21 59
 <script>
22
-import Vue from 'vue';
23
-
24
-export default Vue.component('TrackHistory', {
25
-  mounted() {
26
-    this.$store.dispatch('loadHistory');
27
-  },
28
-  methods: {
29
-    emitEvent() {
30
-      this.$socket.emit('history', 'foo');
31
-    },
32
-  },
33
-  computed: {
34
-    trackHistory() {
35
-      return this.$store.state.trackHistory;
36
-    },
37
-  },
38
-});
60
+import { mapState } from 'vuex';
61
+
62
+export default {
63
+  name: 'TrackHistory',
64
+  computed: mapState({
65
+    trackHistory: state => state.trackHistory,
66
+  }),
67
+};
39 68
 </script>
40 69
 
41 70
 <style scoped lang="scss">
71
+.cover {
72
+    height: 50px;
73
+    width: 50px;
74
+
75
+    img {
76
+        max-width: 100%;
77
+        height: auto;
78
+    }
79
+}
80
+
81
+.history-table {
82
+    i.md-icon {
83
+        display: inline;
84
+    }
85
+
86
+    span.icon-label {
87
+        padding-left: 5px;
88
+    }
89
+}
42 90
 </style>

+ 5
- 0
src/main.js View File

@@ -1,11 +1,16 @@
1 1
 import Vue from 'vue';
2 2
 import VueSocketIO from 'vue-socket.io';
3
+import VueMaterial from 'vue-material';
3 4
 import App from './App.vue';
4 5
 import router from './router';
5 6
 import store from './store';
7
+import 'vue-material/dist/vue-material.min.css';
8
+import 'vue-material/dist/theme/default.css';
6 9
 
7 10
 Vue.config.productionTip = false;
8 11
 
12
+Vue.use(VueMaterial);
13
+
9 14
 Vue.use(new VueSocketIO({
10 15
   debug: true,
11 16
   connection: 'http://localhost:5000',

+ 11
- 5
src/router.js View File

@@ -2,6 +2,7 @@ import Vue from 'vue';
2 2
 import Router from 'vue-router';
3 3
 import Home from './components/Home.vue';
4 4
 import TrackHistory from './components/TrackHistory.vue';
5
+import Favorites from './components/Favorites.vue';
5 6
 
6 7
 Vue.use(Router);
7 8
 
@@ -11,13 +12,18 @@ export default new Router({
11 12
   routes: [
12 13
     {
13 14
       path: '/',
14
-      name: 'home',
15
-      component: Home,
15
+      name: 'History',
16
+      component: TrackHistory,
16 17
     },
17 18
     {
18
-      path: '/history',
19
-      name: 'history',
20
-      component: TrackHistory,
19
+      path: '/favorites',
20
+      name: 'Favorites',
21
+      component: Favorites,
22
+    },
23
+    {
24
+      path: '/foo',
25
+      name: 'Home',
26
+      component: Home,
21 27
     },
22 28
   ],
23 29
 });

+ 1
- 1
src/store.js View File

@@ -12,7 +12,7 @@ export default new Vuex.Store({
12 12
       Vue.set(state, 'trackHistory', history);
13 13
     },
14 14
     addTrack(state, track) {
15
-      state.trackHistory.push(track);
15
+      state.trackHistory.unshift(track);
16 16
     },
17 17
   },
18 18
   actions: {

Loading…
Cancel
Save