From 6504c2f577281fb3ba95a0eeae1690b35e50b3a7 Mon Sep 17 00:00:00 2001
From: Simen van Herpt <simen.vanherpt@gmail.com>
Date: Tue, 25 Aug 2020 01:14:07 +0200
Subject: [PATCH] Messing around with the (awesome) vuetify plugin
---
frontend/package-lock.json | 300 ++++++++++++++++++-------
frontend/package.json | 9 +-
frontend/public/index.html | 2 +
frontend/src/App.vue | 40 ++--
frontend/src/assets/logo.svg | 1 +
frontend/src/components/HelloWorld.vue | 152 ++++++++++++-
frontend/src/components/Navbar.vue | 22 ++
frontend/src/components/gRPCclient.vue | 21 +-
frontend/src/main.js | 4 +-
frontend/src/plugins/vuetify.js | 7 +
frontend/vue.config.js | 5 +
11 files changed, 446 insertions(+), 117 deletions(-)
create mode 100644 frontend/src/assets/logo.svg
create mode 100644 frontend/src/components/Navbar.vue
create mode 100644 frontend/src/plugins/vuetify.js
create mode 100644 frontend/vue.config.js
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bb9478e..e567e34 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 a56d36f..e4cfca9 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 4123528..bc51465 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 b2d2142..a989801 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 0000000..145b6d1
--- /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 bf87484..8e95071 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 0000000..fc9243d
--- /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 6b16f05..8095743 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 63eb05f..a21e528 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 0000000..ec46adb
--- /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 0000000..ef6e86b
--- /dev/null
+++ b/frontend/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ "transpileDependencies": [
+ "vuetify"
+ ]
+}
\ No newline at end of file
--
GitLab