diff --git a/frontend/package-lock.json b/frontend/package-lock.json index bb9478e6cf1bb6a6346b21e687e6f214ba8d4a1c..e567e34e1753ff79f84afd8e50e371a2be1400c1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1877,17 +1877,6 @@ "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "dev": true }, - "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", - "dev": true, - "optional": true, - "requires": { - "@types/color-name": "^1.1.1", - "color-convert": "^2.0.1" - } - }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -1914,34 +1903,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, "find-cache-dir": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", @@ -1963,13 +1924,6 @@ "path-exists": "^4.0.0" } }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -2034,16 +1988,6 @@ "minipass": "^3.1.1" } }, - "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -2060,21 +2004,6 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.0.0-beta.5", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz", - "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==", - "dev": true, - "optional": true, - "requires": { - "@types/mini-css-extract-plugin": "^0.9.1", - "chalk": "^3.0.0", - "hash-sum": "^2.0.0", - "loader-utils": "^1.2.3", - "merge-source-map": "^1.1.0", - "source-map": "^0.6.1" - } } } }, @@ -2502,7 +2431,6 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", "dev": true, - "optional": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -2873,8 +2801,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", - "dev": true, - "optional": true + "dev": true }, "bluebird": { "version": "3.7.2", @@ -3402,7 +3329,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz", "integrity": "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==", "dev": true, - "optional": true, "requires": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -3419,7 +3345,6 @@ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "dev": true, - "optional": true, "requires": { "fill-range": "^7.0.1" } @@ -3429,7 +3354,6 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "dev": true, - "optional": true, "requires": { "to-regex-range": "^5.0.1" } @@ -3438,15 +3362,13 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "optional": true + "dev": true }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, - "optional": true, "requires": { "is-number": "^7.0.0" } @@ -3654,6 +3576,17 @@ "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", "dev": true }, + "clone-deep": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", + "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", + "dev": true, + "requires": { + "is-plain-object": "^2.0.4", + "kind-of": "^6.0.2", + "shallow-clone": "^3.0.0" + } + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -6781,6 +6714,12 @@ } } }, + "interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -6856,7 +6795,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -8193,6 +8131,29 @@ "boolbase": "~1.0.0" } }, + "null-loader": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-3.0.0.tgz", + "integrity": "sha512-hf5sNLl8xdRho4UPBOOeoIwT3WhjYcMUQm0zj44EhD6UscMAz72o2udpoDFBgykucdEDGIcd6SXbc/G6zssbzw==", + "dev": true, + "requires": { + "loader-utils": "^1.2.3", + "schema-utils": "^1.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", @@ -8702,8 +8663,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", - "dev": true, - "optional": true + "dev": true }, "pify": { "version": "4.0.1", @@ -9710,11 +9670,19 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz", "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==", "dev": true, - "optional": true, "requires": { "picomatch": "^2.2.1" } }, + "rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=", + "dev": true, + "requires": { + "resolve": "^1.1.6" + } + }, "regenerate": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", @@ -10059,6 +10027,36 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sass": { + "version": "1.26.10", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz", + "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, + "sass-loader": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz", + "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==", + "dev": true, + "requires": { + "clone-deep": "^4.0.1", + "loader-utils": "^1.2.3", + "neo-async": "^2.6.1", + "schema-utils": "^2.6.1", + "semver": "^6.3.0" + }, + "dependencies": { + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -10274,6 +10272,15 @@ "safe-buffer": "^5.0.1" } }, + "shallow-clone": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", + "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==", + "dev": true, + "requires": { + "kind-of": "^6.0.2" + } + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -10295,6 +10302,17 @@ "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==", "dev": true }, + "shelljs": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz", + "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==", + "dev": true, + "requires": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + } + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -11594,6 +11612,25 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" }, + "vue-cli-plugin-vuetify": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.7.tgz", + "integrity": "sha512-4riK5bzyvkZ4CxpQk/Vl6z8n8tmJUhuxh+k8xc/MZRdCt9RxAm3G4SxcEweroqKGXg+CRRfhqysaEQVtd4D40Q==", + "dev": true, + "requires": { + "null-loader": "^3.0.0", + "semver": "^7.1.2", + "shelljs": "^0.8.3" + }, + "dependencies": { + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + } + } + }, "vue-eslint-parser": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz", @@ -11647,6 +11684,86 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.0.0-beta.5", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz", + "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==", + "dev": true, + "optional": true, + "requires": { + "@types/mini-css-extract-plugin": "^0.9.1", + "chalk": "^3.0.0", + "hash-sum": "^2.0.0", + "loader-utils": "^1.2.3", + "merge-source-map": "^1.1.0", + "source-map": "^0.6.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "optional": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true + }, + "supports-color": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", @@ -11681,6 +11798,21 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuetify": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.9.tgz", + "integrity": "sha512-E5K9flTvS21tCkHgqDBMl0BY/Rld4SLUaJpQ+sQdL8/2uPcWmWLrdumn4SI8LBFojE0UP1GSaH4zKuxLL36fYg==" + }, + "vuetify-loader": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.6.0.tgz", + "integrity": "sha512-1bx3YeZ712dT1+QMX+XSFlP0O5k5O5Ui9ysBBmUZ9bWkAEHWZJQI9soI+qG5qmeFxUC0L9QYMCIKP0hOL/pf3Q==", + "dev": true, + "requires": { + "file-loader": "^4.0.0", + "loader-utils": "^1.2.0" + } + }, "watchpack": { "version": "1.7.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index a56d36f8104c3f9122cd5f55a3ce0f13851abd6c..e4cfca95b24ed4cb23424b02210bb2c87ac5ac0a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,8 @@ "google-protobuf": "^3.6.1", "grpc": "^1.24.3", "grpc-web": "^1.0.0", - "vue": "^2.6.11" + "vue": "^2.6.11", + "vuetify": "^2.2.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", @@ -22,7 +23,11 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", - "vue-template-compiler": "^2.6.11" + "sass": "^1.19.0", + "sass-loader": "^8.0.0", + "vue-cli-plugin-vuetify": "~2.0.7", + "vue-template-compiler": "^2.6.11", + "vuetify-loader": "^1.3.0" }, "eslintConfig": { "root": true, diff --git a/frontend/public/index.html b/frontend/public/index.html index 41235286563508e0feb4c451a34b598ef822ec21..bc5146586471e7374928fe4ad371074d9d1dcfeb 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -6,6 +6,8 @@ <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> </head> <body> <noscript> diff --git a/frontend/src/App.vue b/frontend/src/App.vue index b2d214244c29fb0b8fc9a298137481f3dc3eeac9..a98980141316d1b8fefb01dc09f38d99c6719c5b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,29 +1,27 @@ -<template> - <div id="app"> - <HelloWorld/> - <gRPCclient/> - </div> +<template> + <v-app class= "grey lighten-2"> + + <Navbar/> + <v-main class="grey lighten-2" align="center"> + <gRPCclient /> + + </v-main> + </v-app> </template> <script> -import HelloWorld from './components/HelloWorld.vue' -import gRPCclient from './components/gRPCclient.vue' +import Navbar from './components/Navbar'; +import gRPCclient from './components/gRPCclient' export default { name: 'App', + components: { - HelloWorld, + Navbar, gRPCclient - } -} -</script> + }, -<style> -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; -} -</style> + data: () => ({ + // + }), +}; +</script> diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..145b6d13089c81fcb16f68ad8f976e389dcd77e3 --- /dev/null +++ b/frontend/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> diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue index bf87484a1ec291a24473808e9f9102c742fa4149..8e9507112721585155b2b48617b60bdc6f254012 100644 --- a/frontend/src/components/HelloWorld.vue +++ b/frontend/src/components/HelloWorld.vue @@ -1,5 +1,151 @@ <template> - <div class="hello"> - <p>Component 1</p> - </div> + <v-container> + <v-row class="text-center"> + <v-col cols="12"> + <v-img + :src="require('../assets/logo.svg')" + class="my-3" + contain + height="200" + /> + </v-col> + + <v-col class="mb-4"> + <h1 class="display-2 font-weight-bold mb-3"> + Welcome to Vuetify + </h1> + + <p class="subheading font-weight-regular"> + For help and collaboration with other Vuetify developers, + <br>please join our online + <a + href="https://community.vuetifyjs.com" + target="_blank" + >Discord Community</a> + </p> + </v-col> + + <v-col + class="mb-5" + cols="12" + > + <h2 class="headline font-weight-bold mb-3"> + What's next? + </h2> + + <v-row justify="center"> + <a + v-for="(next, i) in whatsNext" + :key="i" + :href="next.href" + class="subheading mx-3" + target="_blank" + > + {{ next.text }} + </a> + </v-row> + </v-col> + + <v-col + class="mb-5" + cols="12" + > + <h2 class="headline font-weight-bold mb-3"> + Important Links + </h2> + + <v-row justify="center"> + <a + v-for="(link, i) in importantLinks" + :key="i" + :href="link.href" + class="subheading mx-3" + target="_blank" + > + {{ link.text }} + </a> + </v-row> + </v-col> + + <v-col + class="mb-5" + cols="12" + > + <h2 class="headline font-weight-bold mb-3"> + Ecosystem + </h2> + + <v-row justify="center"> + <a + v-for="(eco, i) in ecosystem" + :key="i" + :href="eco.href" + class="subheading mx-3" + target="_blank" + > + {{ eco.text }} + </a> + </v-row> + </v-col> + </v-row> + </v-container> </template> + +<script> + export default { + name: 'HelloWorld', + + data: () => ({ + ecosystem: [ + { + text: 'vuetify-loader', + href: 'https://github.com/vuetifyjs/vuetify-loader', + }, + { + text: 'github', + href: 'https://github.com/vuetifyjs/vuetify', + }, + { + text: 'awesome-vuetify', + href: 'https://github.com/vuetifyjs/awesome-vuetify', + }, + ], + importantLinks: [ + { + text: 'Documentation', + href: 'https://vuetifyjs.com', + }, + { + text: 'Chat', + href: 'https://community.vuetifyjs.com', + }, + { + text: 'Made with Vuetify', + href: 'https://madewithvuejs.com/vuetify', + }, + { + text: 'Twitter', + href: 'https://twitter.com/vuetifyjs', + }, + { + text: 'Articles', + href: 'https://medium.com/vuetify', + }, + ], + whatsNext: [ + { + text: 'Explore components', + href: 'https://vuetifyjs.com/components/api-explorer', + }, + { + text: 'Select a layout', + href: 'https://vuetifyjs.com/getting-started/pre-made-layouts', + }, + { + text: 'Frequently Asked Questions', + href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions', + }, + ], + }), + } +</script> diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue new file mode 100644 index 0000000000000000000000000000000000000000..fc9243df8969b525acadb4ad961ba6812117db24 --- /dev/null +++ b/frontend/src/components/Navbar.vue @@ -0,0 +1,22 @@ +<template> + <nav> + <v-app-bar app> + <v-toolbar-title class = "black--text"> + <span>PROV</span> + <span class="font-weight-light">ee</span> + </v-toolbar-title> + <v-spacer></v-spacer> + <v-btn class ="mr-2" color="grey lighten-4" href="https://git.science.uu.nl/vig/provee" target="_blank"> + <span>PROVee repository</span> + <v-icon right>mdi-open-in-new</v-icon> + </v-btn> + </v-app-bar> + </nav> + +</template> + +<script> +export default { + +} +</script> \ No newline at end of file diff --git a/frontend/src/components/gRPCclient.vue b/frontend/src/components/gRPCclient.vue index 6b16f0574517d4460071c422c71b89c5e6d47074..809574340b6e994db5b0feacd652c93d0dbd53ae 100644 --- a/frontend/src/components/gRPCclient.vue +++ b/frontend/src/components/gRPCclient.vue @@ -1,7 +1,8 @@ /*eslint-disable*/ <template> <div> - <h1>Check the developer console for the messages</h1> + <h1 class = "my-10">Check the developer console for the messages</h1> + <v-btn v-on:click="requestPoint">Request new point</v-btn> </div> </template> @@ -11,22 +12,27 @@ const { PointClient } = require("../generated/point_grpc_web_pb.js"); export default { name: "gRPCclient", + data(){ + return{ + client: null, + request: null + } + }, created: function () { - var client = new PointClient( + this.client = new PointClient( "http://" + window.location.hostname + ":8080", null, null ); - var request = new voidNoParam(); - client.readPoint(request, {}, this.unaryResponseHandler); - + this.request = new voidNoParam(); + this.requestPoint(); // server streaming call var streamRequest = new voidNoParam(); var count = 10; console.log("Will send " + count); - var stream = client.readPointsStream(streamRequest, {}); + var stream = this.client.readPointsStream(streamRequest, {}); stream.on("data", (response) => { console.log(this.pointToString(response)); }); @@ -38,6 +44,9 @@ export default { }); }, methods: { + requestPoint: function(){ + this.client.readPoint(this.request, {}, this.unaryResponseHandler); + }, unaryResponseHandler: function (err, response) { if (err) { console.log( diff --git a/frontend/src/main.js b/frontend/src/main.js index 63eb05f711c8cb5cda45128882fa69c351f105fb..a21e5283943fe1374fe9cb374835aa60fdeb3458 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,8 +1,10 @@ import Vue from 'vue' import App from './App.vue' +import vuetify from './plugins/vuetify'; Vue.config.productionTip = false new Vue({ - render: h => h(App), + vuetify, + render: h => h(App) }).$mount('#app') diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js new file mode 100644 index 0000000000000000000000000000000000000000..ec46adba2aaa77b49b11610f823693e1525fac91 --- /dev/null +++ b/frontend/src/plugins/vuetify.js @@ -0,0 +1,7 @@ +import Vue from 'vue'; +import Vuetify from 'vuetify/lib'; + +Vue.use(Vuetify); + +export default new Vuetify({ +}); diff --git a/frontend/vue.config.js b/frontend/vue.config.js new file mode 100644 index 0000000000000000000000000000000000000000..ef6e86b246abc49a30b8763abba79e6bb9e8cf4e --- /dev/null +++ b/frontend/vue.config.js @@ -0,0 +1,5 @@ +module.exports = { + "transpileDependencies": [ + "vuetify" + ] +} \ No newline at end of file