list songs

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

WEB/package-lock.json

@@ -1169,6 +1169,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular2-uuid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/angular2-uuid/-/angular2-uuid-1.1.1.tgz",
+      "integrity": "sha1-cvA81TK39AAy6x7PufhFc4S+lW4="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -3784,25 +3789,29 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true,
           "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3812,13 +3821,15 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true,
           "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3828,37 +3839,43 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true,
           "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true,
           "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true,
           "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3867,25 +3884,29 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3894,13 +3915,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3916,7 +3939,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3930,13 +3954,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3945,7 +3971,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3954,7 +3981,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3964,19 +3992,22 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true,
           "optional": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -3985,13 +4016,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4000,13 +4033,15 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true,
           "optional": true
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4016,7 +4051,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4025,7 +4061,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4034,13 +4071,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4051,7 +4090,8 @@
         },
         "node-pre-gyp": {
           "version": "0.10.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4069,7 +4109,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4079,13 +4120,15 @@
         },
         "npm-bundled": {
           "version": "1.0.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4095,7 +4138,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4107,19 +4151,22 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true,
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4128,19 +4175,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4150,19 +4200,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4174,7 +4227,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": false,
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -4182,7 +4236,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4197,7 +4252,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4206,43 +4262,50 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "dev": true,
           "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.6.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4253,7 +4316,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4262,7 +4326,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4271,13 +4336,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4292,13 +4359,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4307,13 +4376,15 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true,
           "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": false,
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
           "dev": true,
           "optional": true
         }
@@ -6682,6 +6753,14 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "odata-v4-ng": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/odata-v4-ng/-/odata-v4-ng-1.1.0.tgz",
+      "integrity": "sha512-aG/W/zDhFjlZlVrx89RImreVjadSRp7x2e9bFQhA91Rndsl4kl4jWkGIY7N+5CiAK8Met3sbpIAJnGv5+jkxvA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

WEB/package.json

@@ -25,7 +25,9 @@
     "@fortawesome/angular-fontawesome": "^0.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "angular2-uuid": "^1.1.1",
     "core-js": "^2.5.4",
+    "odata-v4-ng": "^1.1.0",
     "rxjs": "^6.3.3",
     "zone.js": "~0.8.26"
   },

WEB/src/app/app.component.spec.ts

@@ -1,35 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'wgenerator'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('wgenerator');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to wgenerator!');
-  });
-});

WEB/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { ODataModule } from 'odata-v4-ng';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -20,6 +21,7 @@ import { SongComponent } from './components/song/song.component';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    ODataModule,
 
     MatCardModule,
     MatTableModule,

WEB/src/app/components/song/song.component.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="mat-elevation-z8">
   <mat-card-header>
     <div mat-card-avatar>
       <button mat-icon-button [routerLink]="['/songs']" >

WEB/src/app/components/song/song.component.less

@@ -1,5 +1,6 @@
 .mat-card {
   width: 500px;
+  border-radius: 8px;
 }
 
 .mat-card-title {

WEB/src/app/components/song/song.component.ts

@@ -1,8 +1,8 @@
 import { DownloadService } from './../../data/download.service';
 import { Component, OnInit } from '@angular/core';
-import { SongDetailModel } from 'src/app/models/song-list-detail.model';
 import { ActivatedRoute } from '@angular/router';
 import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
+import { Song } from 'src/app/models/song.model';
 
 @Component({
   selector: 'app-song',
@@ -10,7 +10,7 @@ import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./song.component.less']
 })
 export class SongComponent implements OnInit {
-  public song: SongDetailModel;
+  public song: Song;
   public faArrow = faLongArrowAltLeft;
 
   constructor(
@@ -19,14 +19,13 @@ export class SongComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.data.subscribe((data: { song: SongDetailModel }) => {
+    this.route.data.subscribe((data: { song: Song }) => {
       this.song = data.song;
     });
   }
 
   public onClickDownload(): void {
-    const id = this.song.Id;
+    const id = this.song.ID;
-    const withKey = this.song.HasKeyFile;
+    this.downloadService.get(id, false);
-    this.downloadService.get(id, withKey);
   }
 }

WEB/src/app/components/songs/songs.component.ts

@@ -1,6 +1,6 @@
+import { Song } from './../../models/song.model';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { SongListModel } from 'src/app/models/song-list.model';
 
 @Component({
   selector: 'app-songs',
@@ -8,12 +8,12 @@ import { SongListModel } from 'src/app/models/song-list.model';
   styleUrls: ['./songs.component.less']
 })
 export class SongsComponent implements OnInit {
-  public songs: SongListModel;
+  public songs: Song[];
 
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.data.subscribe((data: { songs: SongListModel }) => {
+    this.route.data.subscribe((data: { songs: Song[] }) => {
       this.songs = data.songs;
     });
   }

WEB/src/app/components/songs/table/table.component.html

@@ -1,31 +1,43 @@
-<table *ngIf="songs.SongList" mat-table [dataSource]="songs.SongList" class="mat-elevation-z8">
+<div class="page-container mat-elevation-z8">
+  <div class="table-container">
+    <table
+      *ngIf="songs"
+      mat-table
+      [dataSource]="songs"
+      class="mat-elevation-z8"
+    >
+      <ng-container matColumnDef="Number">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element">{{ element.Number }}</td>
+      </ng-container>
 
-  <ng-container matColumnDef="Id">
+      <ng-container matColumnDef="Name">
-    <th mat-header-cell *matHeaderCellDef>#</th>
+        <th mat-header-cell *matHeaderCellDef>Titel</th>
-    <td mat-cell *matCellDef="let element">{{element.Id}}</td>
+        <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
-  </ng-container>
+      </ng-container>
 
-  <ng-container matColumnDef="Name">
+      <ng-container matColumnDef="Key">
-    <th mat-header-cell *matHeaderCellDef>Titel</th>
+        <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let element">{{element.Name}}</td>
+        <td mat-cell *matCellDef="let element">{{ element.Key }}</td>
-  </ng-container>
+      </ng-container>
 
-  <ng-container matColumnDef="Key">
+      <ng-container matColumnDef="SongType">
-    <th mat-header-cell *matHeaderCellDef></th>
+        <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let element">{{element.Key}}</td>
+        <td mat-cell *matCellDef="let element">{{ element.SongType }}</td>
-  </ng-container>
+      </ng-container>
 
-  <ng-container matColumnDef="Type">
+      <ng-container matColumnDef="Tempo">
-    <th mat-header-cell *matHeaderCellDef></th>
+        <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let element">{{element.Type}}</td>
+        <td mat-cell *matCellDef="let element">{{ element.Tempo }}</td>
-  </ng-container>
+      </ng-container>
 
-  <ng-container matColumnDef="Velocity">
+      <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
-    <th mat-header-cell *matHeaderCellDef></th>
+      <tr
-    <td mat-cell *matCellDef="let element">{{element.Velocity}}</td>
+        mat-row
-  </ng-container>
+        *matRowDef="let row; columns: columns"
-
+        [routerLink]="['/songs', row.ID]"
-  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+        routerLinkActive="router-link-active"
-  <tr mat-row *matRowDef="let row; columns: columns;" [routerLink]="['/songs', row.Id]" routerLinkActive="router-link-active" ></tr>
+      ></tr>
-
+    </table>
-</table>
+  </div>
+</div>

WEB/src/app/components/songs/table/table.component.less

@@ -1,4 +1,15 @@
 table {
   width: 100%;
+  border-radius: 8px;
+
+}
+.page-container {
+  height: 400px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+.table-container {
+  height: 100%;
+  overflow: auto;
 }
 

WEB/src/app/components/songs/table/table.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { SongListModel } from 'src/app/models/song-list.model';
+import { Song } from 'src/app/models/song.model';
 
 @Component({
   selector: 'app-table',
@@ -7,13 +7,13 @@ import { SongListModel } from 'src/app/models/song-list.model';
   styleUrls: ['./table.component.less']
 })
 export class TableComponent implements OnInit {
-  @Input() public songs: SongListModel;
+  @Input() public songs: Song[];
   public columns = [
-    'Id',
+    'Number',
     'Name',
     'Key',
-    'Type',
+    'SongType',
-    'Velocity',
+    'Tempo',
   ];
 
   constructor() { }

WEB/src/app/data/download.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DownloadService } from './download.service';
-
-describe('DownloadService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: DownloadService = TestBed.get(DownloadService);
-    expect(service).toBeTruthy();
-  });
-});

WEB/src/app/data/download.service.ts

@@ -1,6 +1,6 @@
+import { base } from './urls';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { urlSongFiles } from './urls';
 
 
 @Injectable({
@@ -11,7 +11,7 @@ export class DownloadService {
 
   public get(id: number, withKey: boolean) {
     return this.httpClient
-      .get(urlSongFiles + '/' + id + '?withKey=' + withKey, {
+      .get(base + '/' + id + '?withKey=' + withKey, {
         responseType: 'blob' as 'json'
       })
       .subscribe(

WEB/src/app/data/odata.service.ts

@@ -0,0 +1,29 @@
+import { ODataService, ODataQuery } from 'odata-v4-ng';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { base } from './urls';
+
+export class OdataService {
+  private url: string;
+  constructor(private odataService: ODataService, private entity: string) {
+    this.url = base + '/odata/';
+  }
+
+  public list<TResponse>(): Observable<TResponse[]> {
+    const query = new ODataQuery(this.odataService, this.url).entitySet(
+      this.entity
+    );
+    const get = query.get().pipe(map(_ => _.toPropertyValue<TResponse[]>()));
+
+    return get;
+  }
+
+  public get<TResponse>(id: number): Observable<TResponse> {
+    const query = new ODataQuery(this.odataService, this.url)
+      .entitySet(this.entity)
+      .entityKey(id);
+    const get = query.get().pipe(map(_ => _.toEntity<TResponse>()));
+
+    return get;
+  }
+}

WEB/src/app/data/song-resolver.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SongResolverService } from './song-resolver.service';
-
-describe('SongResolverService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: SongResolverService = TestBed.get(SongResolverService);
-    expect(service).toBeTruthy();
-  });
-});

WEB/src/app/data/song-resolver.service.ts

@@ -2,19 +2,19 @@ import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { urlSongs } from './urls';
+import { Song } from '../models/song.model';
-import { SongDetailModel } from '../models/song-list-detail.model';
+import { SongsService } from './songs.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class SongResolverService implements Resolve<SongDetailModel> {
+export class SongResolverService implements Resolve<Song> {
 
-  constructor(private httpClient: HttpClient) { }
+  constructor(private songsService: SongsService) { }
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SongDetailModel> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Song> {
     const id = route.params.id;
-    const get$ = this.httpClient.get<SongDetailModel>(urlSongs + '/' + id);
+    const get$ = this.songsService.get<Song>(id);
     return get$;
   }
 }

WEB/src/app/data/songs-resolver.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SongsResolverService } from './songs-resolver.service';
-
-describe('SongsResolverService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: SongsResolverService = TestBed.get(SongsResolverService);
-    expect(service).toBeTruthy();
-  });
-});

WEB/src/app/data/songs-resolver.service.ts

@@ -1,19 +1,18 @@
+import { Song } from './../models/song.model';
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { SongListModel } from '../models/song-list.model';
 import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { SongsService } from './songs.service';
-import { urlSongs } from './urls';
 
 @Injectable({
   providedIn: 'root'
 })
-export class SongsResolverService implements Resolve<SongListModel> {
+export class SongsResolverService implements Resolve<Song[]> {
 
-  constructor(private httpClient: HttpClient) { }
+  constructor(private songsService: SongsService) { }
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SongListModel> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Song[]> {
-    const get$ = this.httpClient.get<SongListModel>(urlSongs);
+    const get$ = this.songsService.list<Song>();
     return get$;
   }
 }

WEB/src/app/data/songs.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { ODataService } from 'odata-v4-ng';
+import { OdataService } from './odata.service';
+@Injectable({
+  providedIn: 'root'
+})
+export class SongsService extends OdataService {
+  constructor(odataService: ODataService) {
+    super(odataService, 'songs');
+  }
+}

WEB/src/app/data/urls.ts

@@ -1,4 +1 @@
-const base = 'http://test.benjamin-ifland.de/api/';
+export const base = 'http://test.benjamin-ifland.de/';
-
-export const urlSongs = base + 'songs';
-export const urlSongFiles = base + 'songFiles';

WEB/src/app/models/song-id.model.ts

@@ -1,3 +0,0 @@
-export interface SongId {
-  Id: number;
-}

WEB/src/app/models/song-list-detail.model.ts

@@ -1,9 +0,0 @@
-export interface SongDetailModel {
-  Text: string;
-  HasKeyFile: boolean;
-  Id: number;
-  Name: string;
-  Key: string;
-  Type: string;
-  Velocity?: number;
-}

WEB/src/app/models/song-list-item.model.ts

@@ -1,7 +0,0 @@
-export interface SongListItemModel {
-  Id: number;
-  Name: string;
-  Key: string;
-  Type: string;
-  Velocity?: number;
-}

WEB/src/app/models/song-list.model.ts

@@ -1,7 +0,0 @@
-import { SongListItemModel } from './song-list-item.model';
-
-export interface SongListModel {
-  Page: number;
-  Pages: number;
-  SongList: SongListItemModel[];
-}

WEB/src/app/models/song.model.ts

@@ -0,0 +1,11 @@
+export interface Song {
+  ID: number;
+  Number: number;
+  Name: string;
+  Text: string;
+  Comments: string;
+  Key: string;
+  Tempo: number;
+  SongType: string;
+  Final: boolean;
+}