2 Commits
e5933150dd
...
c60d091c4c
2 Commits
e5933150dd
...
c60d091c4c
| Author | SHA1 | Message | Date |
|---|---|---|---|
 Andreas Demmelbauer
|
c60d091c4c | add route | 2 years ago |
|
Andreas Demmelbauer
|
060f3ad241 | more | 2 years ago |
9 changed files with 461 additions and 623 deletions
Unified View
Diff Options
-
+18 -285package-lock.json
-
+2 -0package.json
-
+6 -337src/App.vue
-
BIN
-
BIN
-
+3 -1src/main.js
-
+29 -0src/router/index.js
-
+63 -0src/views/Cancel.vue
-
+340 -0src/views/Home.vue
+ 18
- 285
package-lock.json
View File
| @@ -10,11 +10,13 @@ | |||||
| "dependencies": { | "dependencies": { | ||||
| "core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
| "vue": "^2.6.11", | "vue": "^2.6.11", | ||||
| "vue-router": "^3.6.5", | |||||
| "vuewordcloud": "^18.7.12" | "vuewordcloud": "^18.7.12" | ||||
| }, | }, | ||||
| "devDependencies": { | "devDependencies": { | ||||
| "@vue/cli-plugin-babel": "~4.5.15", | "@vue/cli-plugin-babel": "~4.5.15", | ||||
| "@vue/cli-plugin-eslint": "~4.5.15", | "@vue/cli-plugin-eslint": "~4.5.15", | ||||
| "@vue/cli-plugin-router": "~4.5.15", | |||||
| "@vue/cli-service": "~4.5.15", | "@vue/cli-service": "~4.5.15", | ||||
| "babel-eslint": "^10.1.0", | "babel-eslint": "^10.1.0", | ||||
| "eslint": "^6.7.2", | "eslint": "^6.7.2", | ||||
| @@ -2541,98 +2543,6 @@ | |||||
| "strip-ansi": "^6.0.0" | "strip-ansi": "^6.0.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/@vue/compiler-core": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz", | |||||
| "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "source-map": "^0.6.1" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/compiler-dom": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz", | |||||
| "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/shared": "3.2.39" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/compiler-sfc": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz", | |||||
| "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/compiler-dom": "3.2.39", | |||||
| "@vue/compiler-ssr": "3.2.39", | |||||
| "@vue/reactivity-transform": "3.2.39", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "magic-string": "^0.25.7", | |||||
| "postcss": "^8.1.10", | |||||
| "source-map": "^0.6.1" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/compiler-sfc/node_modules/picocolors": { | |||||
| "version": "1.0.0", | |||||
| "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", | |||||
| "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "node_modules/@vue/compiler-sfc/node_modules/postcss": { | |||||
| "version": "8.4.16", | |||||
| "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", | |||||
| "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", | |||||
| "dev": true, | |||||
| "funding": [ | |||||
| { | |||||
| "type": "opencollective", | |||||
| "url": "https://opencollective.com/postcss/" | |||||
| }, | |||||
| { | |||||
| "type": "tidelift", | |||||
| "url": "https://tidelift.com/funding/github/npm/postcss" | |||||
| } | |||||
| ], | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "nanoid": "^3.3.4", | |||||
| "picocolors": "^1.0.0", | |||||
| "source-map-js": "^1.0.2" | |||||
| }, | |||||
| "engines": { | |||||
| "node": "^10 || ^12 || >=14" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/compiler-ssr": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz", | |||||
| "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "@vue/compiler-dom": "3.2.39", | |||||
| "@vue/shared": "3.2.39" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/component-compiler-utils": { | "node_modules/@vue/component-compiler-utils": { | ||||
| "version": "3.3.0", | "version": "3.3.0", | ||||
| "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", | "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", | ||||
| @@ -2687,29 +2597,6 @@ | |||||
| "webpack": ">=4.0.0" | "webpack": ">=4.0.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/@vue/reactivity-transform": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz", | |||||
| "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "magic-string": "^0.25.7" | |||||
| } | |||||
| }, | |||||
| "node_modules/@vue/shared": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz", | |||||
| "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "node_modules/@vue/web-component-wrapper": { | "node_modules/@vue/web-component-wrapper": { | ||||
| "version": "1.3.0", | "version": "1.3.0", | ||||
| "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz", | "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz", | ||||
| @@ -6533,14 +6420,6 @@ | |||||
| "node": ">=4.0" | "node": ">=4.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/estree-walker": { | |||||
| "version": "2.0.2", | |||||
| "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", | |||||
| "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "node_modules/esutils": { | "node_modules/esutils": { | ||||
| "version": "2.0.3", | "version": "2.0.3", | ||||
| "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", | "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", | ||||
| @@ -9347,17 +9226,6 @@ | |||||
| "yallist": "^3.0.2" | "yallist": "^3.0.2" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/magic-string": { | |||||
| "version": "0.25.9", | |||||
| "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", | |||||
| "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "dependencies": { | |||||
| "sourcemap-codec": "^1.4.8" | |||||
| } | |||||
| }, | |||||
| "node_modules/make-dir": { | "node_modules/make-dir": { | ||||
| "version": "3.1.0", | "version": "3.1.0", | ||||
| "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", | "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", | ||||
| @@ -12891,14 +12759,6 @@ | |||||
| "deprecated": "See https://github.com/lydell/source-map-url#deprecated", | "deprecated": "See https://github.com/lydell/source-map-url#deprecated", | ||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "node_modules/sourcemap-codec": { | |||||
| "version": "1.4.8", | |||||
| "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", | |||||
| "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "node_modules/spdx-correct": { | "node_modules/spdx-correct": { | ||||
| "version": "3.1.1", | "version": "3.1.1", | ||||
| "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", | "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", | ||||
| @@ -14659,6 +14519,11 @@ | |||||
| "node": ">=4.0.0" | "node": ">=4.0.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/vue-router": { | |||||
| "version": "3.6.5", | |||||
| "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", | |||||
| "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" | |||||
| }, | |||||
| "node_modules/vue-style-loader": { | "node_modules/vue-style-loader": { | ||||
| "version": "4.1.3", | "version": "4.1.3", | ||||
| "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", | "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", | ||||
| @@ -17653,8 +17518,7 @@ | |||||
| "version": "4.5.19", | "version": "4.5.19", | ||||
| "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz", | "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz", | ||||
| "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==", | "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==", | ||||
| "dev": true, | |||||
| "requires": {} | |||||
| "dev": true | |||||
| }, | }, | ||||
| "@vue/cli-service": { | "@vue/cli-service": { | ||||
| "version": "4.5.19", | "version": "4.5.19", | ||||
| @@ -17740,87 +17604,6 @@ | |||||
| "strip-ansi": "^6.0.0" | "strip-ansi": "^6.0.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "@vue/compiler-core": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz", | |||||
| "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "source-map": "^0.6.1" | |||||
| } | |||||
| }, | |||||
| "@vue/compiler-dom": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz", | |||||
| "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/shared": "3.2.39" | |||||
| } | |||||
| }, | |||||
| "@vue/compiler-sfc": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz", | |||||
| "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/compiler-dom": "3.2.39", | |||||
| "@vue/compiler-ssr": "3.2.39", | |||||
| "@vue/reactivity-transform": "3.2.39", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "magic-string": "^0.25.7", | |||||
| "postcss": "^8.1.10", | |||||
| "source-map": "^0.6.1" | |||||
| }, | |||||
| "dependencies": { | |||||
| "picocolors": { | |||||
| "version": "1.0.0", | |||||
| "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", | |||||
| "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "postcss": { | |||||
| "version": "8.4.16", | |||||
| "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", | |||||
| "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "nanoid": "^3.3.4", | |||||
| "picocolors": "^1.0.0", | |||||
| "source-map-js": "^1.0.2" | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| "@vue/compiler-ssr": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz", | |||||
| "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "@vue/compiler-dom": "3.2.39", | |||||
| "@vue/shared": "3.2.39" | |||||
| } | |||||
| }, | |||||
| "@vue/component-compiler-utils": { | "@vue/component-compiler-utils": { | ||||
| "version": "3.3.0", | "version": "3.3.0", | ||||
| "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", | "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", | ||||
| @@ -17866,31 +17649,7 @@ | |||||
| "version": "1.1.2", | "version": "1.1.2", | ||||
| "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz", | "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz", | ||||
| "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==", | "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==", | ||||
| "dev": true, | |||||
| "requires": {} | |||||
| }, | |||||
| "@vue/reactivity-transform": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz", | |||||
| "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "@babel/parser": "^7.16.4", | |||||
| "@vue/compiler-core": "3.2.39", | |||||
| "@vue/shared": "3.2.39", | |||||
| "estree-walker": "^2.0.2", | |||||
| "magic-string": "^0.25.7" | |||||
| } | |||||
| }, | |||||
| "@vue/shared": { | |||||
| "version": "3.2.39", | |||||
| "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz", | |||||
| "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| "dev": true | |||||
| }, | }, | ||||
| "@vue/web-component-wrapper": { | "@vue/web-component-wrapper": { | ||||
| "version": "1.3.0", | "version": "1.3.0", | ||||
| @@ -18105,8 +17864,7 @@ | |||||
| "version": "5.3.2", | "version": "5.3.2", | ||||
| "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", | "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", | ||||
| "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", | "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", | ||||
| "dev": true, | |||||
| "requires": {} | |||||
| "dev": true | |||||
| }, | }, | ||||
| "acorn-walk": { | "acorn-walk": { | ||||
| "version": "7.2.0", | "version": "7.2.0", | ||||
| @@ -18136,15 +17894,13 @@ | |||||
| "version": "1.0.1", | "version": "1.0.1", | ||||
| "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", | "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", | ||||
| "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", | "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", | ||||
| "dev": true, | |||||
| "requires": {} | |||||
| "dev": true | |||||
| }, | }, | ||||
| "ajv-keywords": { | "ajv-keywords": { | ||||
| "version": "3.5.2", | "version": "3.5.2", | ||||
| "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", | "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", | ||||
| "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", | "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", | ||||
| "dev": true, | |||||
| "requires": {} | |||||
| "dev": true | |||||
| }, | }, | ||||
| "alphanum-sort": { | "alphanum-sort": { | ||||
| "version": "1.0.2", | "version": "1.0.2", | ||||
| @@ -20955,14 +20711,6 @@ | |||||
| "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", | "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", | ||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "estree-walker": { | |||||
| "version": "2.0.2", | |||||
| "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", | |||||
| "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "esutils": { | "esutils": { | ||||
| "version": "2.0.3", | "version": "2.0.3", | ||||
| "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", | "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", | ||||
| @@ -23135,17 +22883,6 @@ | |||||
| "yallist": "^3.0.2" | "yallist": "^3.0.2" | ||||
| } | } | ||||
| }, | }, | ||||
| "magic-string": { | |||||
| "version": "0.25.9", | |||||
| "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", | |||||
| "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true, | |||||
| "requires": { | |||||
| "sourcemap-codec": "^1.4.8" | |||||
| } | |||||
| }, | |||||
| "make-dir": { | "make-dir": { | ||||
| "version": "3.1.0", | "version": "3.1.0", | ||||
| "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", | "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", | ||||
| @@ -26077,14 +25814,6 @@ | |||||
| "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", | "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", | ||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "sourcemap-codec": { | |||||
| "version": "1.4.8", | |||||
| "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", | |||||
| "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", | |||||
| "dev": true, | |||||
| "optional": true, | |||||
| "peer": true | |||||
| }, | |||||
| "spdx-correct": { | "spdx-correct": { | ||||
| "version": "3.1.1", | "version": "3.1.1", | ||||
| "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", | "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", | ||||
| @@ -27530,6 +27259,11 @@ | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| "vue-router": { | |||||
| "version": "3.6.5", | |||||
| "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", | |||||
| "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" | |||||
| }, | |||||
| "vue-style-loader": { | "vue-style-loader": { | ||||
| "version": "4.1.3", | "version": "4.1.3", | ||||
| "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", | "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", | ||||
| @@ -27587,8 +27321,7 @@ | |||||
| "vuewordcloud": { | "vuewordcloud": { | ||||
| "version": "18.7.12", | "version": "18.7.12", | ||||
| "resolved": "https://registry.npmjs.org/vuewordcloud/-/vuewordcloud-18.7.12.tgz", | "resolved": "https://registry.npmjs.org/vuewordcloud/-/vuewordcloud-18.7.12.tgz", | ||||
| "integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA==", | |||||
| "requires": {} | |||||
| "integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA==" | |||||
| }, | }, | ||||
| "watchpack": { | "watchpack": { | ||||
| "version": "1.7.5", | "version": "1.7.5", | ||||
+ 2
- 0
package.json
View File
| @@ -10,11 +10,13 @@ | |||||
| "dependencies": { | "dependencies": { | ||||
| "core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
| "vue": "^2.6.11", | "vue": "^2.6.11", | ||||
| "vue-router": "^3.6.5", | |||||
| "vuewordcloud": "^18.7.12" | "vuewordcloud": "^18.7.12" | ||||
| }, | }, | ||||
| "devDependencies": { | "devDependencies": { | ||||
| "@vue/cli-plugin-babel": "~4.5.15", | "@vue/cli-plugin-babel": "~4.5.15", | ||||
| "@vue/cli-plugin-eslint": "~4.5.15", | "@vue/cli-plugin-eslint": "~4.5.15", | ||||
| "@vue/cli-plugin-router": "~4.5.15", | |||||
| "@vue/cli-service": "~4.5.15", | "@vue/cli-service": "~4.5.15", | ||||
| "babel-eslint": "^10.1.0", | "babel-eslint": "^10.1.0", | ||||
| "eslint": "^6.7.2", | "eslint": "^6.7.2", | ||||
+ 6
- 337
src/App.vue
View File
| @@ -1,232 +1,12 @@ | |||||
| <template> | <template> | ||||
| <div id="app"> | |||||
| <div class="selection-text">{{selectionText}}</div> | |||||
| <div class="otf" id="teilnehmen"> | |||||
| <!-- <h1 style="padding-top:1em">Party</h1> --> | |||||
| <div class="form-wrapper"> | |||||
| </div> | |||||
| <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh"> | |||||
| <div class="input-headline">Ticketreservierung</div> | |||||
| <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" /> | |||||
| <input class="input-text" v-model="name" placeholder="real name" size="1" /> | |||||
| <input class="input-text" v-model="email" placeholder="email" size="1" /> | |||||
| <!-- <label class="input-cb" for="newsletter"> | |||||
| <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed | |||||
| </label> --> | |||||
| <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" /> | |||||
| <div v-if="error">oh no something went wrong!</div> | |||||
| </form> | |||||
| <div v-if="showHelp" style="margin-bottom: 1em;"> | |||||
| *robot voice* give us your data for the reservation! | |||||
| </div> | |||||
| <div v-if="success"> | |||||
| <p style="font-size: 8vw"> | |||||
| Thanks! | |||||
| </p> | |||||
| <button @click="resetForm" class="input-btn">Noch eine Reservierung aufgeben</button> | |||||
| </div> | |||||
| <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words" | |||||
| :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }" | |||||
| font-family="'JetBrains Mono'" /> | |||||
| </div> | |||||
| <div class="details" ref="details"> | |||||
| TEXT! | |||||
| <router-view/> | |||||
| </div> | |||||
| <div | |||||
| @click="share" | |||||
| style="cursor: pointer; margin-top: 5em;" | |||||
| > | |||||
| <svg | |||||
| version="1.1" | |||||
| id="svg5225" | |||||
| xml:space="preserve" | |||||
| width="350.21805" | |||||
| height="180.67772" | |||||
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
| xmlns="http://www.w3.org/2000/svg" | |||||
| xmlns:svg="http://www.w3.org/2000/svg"><defs | |||||
| id="defs5229" /><sodipodi:namedview | |||||
| id="namedview5227" | |||||
| pagecolor="#ffffff" | |||||
| bordercolor="#999999" | |||||
| borderopacity="1" | |||||
| inkscape:showpageshadow="0" | |||||
| inkscape:pageopacity="0" | |||||
| inkscape:pagecheckerboard="0" | |||||
| inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard | |||||
| min="622.8099,381.05079" | |||||
| max="973.02795,561.72851" | |||||
| geom-min="622.8099,381.05079" | |||||
| geom-max="973.02795,561.72851" /><g | |||||
| id="g5231" | |||||
| transform="translate(-622.8099,-392.30077)"><path | |||||
| id="rect666" | |||||
| style="opacity:1;stroke-width:0;paint-order:stroke fill markers;stop-color:#000000" | |||||
| d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g | |||||
| aria-label="WILLTEILEN" | |||||
| id="text1443" | |||||
| style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px" | |||||
| transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path | |||||
| d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4358" /><path | |||||
| d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4360" /><path | |||||
| d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4362" /><path | |||||
| d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4364" /><path | |||||
| d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4366" /><path | |||||
| d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4368" /><path | |||||
| d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4370" /><path | |||||
| d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4372" /><path | |||||
| d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4374" /><path | |||||
| d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4376" /></g></g></svg> | |||||
| </div> | |||||
| </div> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import VueWordCloud from 'vuewordcloud'; | |||||
| export default { | export default { | ||||
| name: 'App', | name: 'App', | ||||
| data() { | |||||
| return { | |||||
| anzeigename: '', | |||||
| name: '', | |||||
| email: '', | |||||
| newsletter: false, | |||||
| guests: [], | |||||
| sending: false, | |||||
| showHelp: false, | |||||
| selection: null, | |||||
| selectionText: null, | |||||
| success: false, | |||||
| error: false, | |||||
| } | |||||
| }, | |||||
| components: { | |||||
| [VueWordCloud.name]: VueWordCloud, | |||||
| }, | |||||
| computed: { | |||||
| nameColors() { | |||||
| return ['DeepPink', 'Crimson', 'Blue', 'BlueViolet', 'Fuchsia', 'Navy', 'Indigo'] | |||||
| }, | |||||
| words() { | |||||
| const names = this.guests.map(guest => { | |||||
| return guest.anzeigename | |||||
| }) | |||||
| const nameLengths = names.map(name => { | |||||
| return name.length | |||||
| }) | |||||
| const maxNameLength = Math.max(...nameLengths) | |||||
| return this.guests.map(guest => { | |||||
| const nameLength = guest.anzeigename.length | |||||
| let size = maxNameLength - nameLength + 12 | |||||
| return [` ${guest.anzeigename} `, size] | |||||
| }) | |||||
| }, | |||||
| // guestlist() { | |||||
| // return this.guests.map( (g) => { | |||||
| // g.name = g.anzeigename | |||||
| // return g | |||||
| // }) | |||||
| // } | |||||
| }, | |||||
| methods: { | |||||
| async fetchGuests() { | |||||
| const response = await fetch('http://localhost:1234/guest') | |||||
| const data = await response.json() | |||||
| this.guests = data | |||||
| }, | |||||
| async onClickTheButton() { | |||||
| if (this.name.length == 0) { | |||||
| this.showHelp = true | |||||
| return false | |||||
| } | |||||
| this.showHelp = false | |||||
| this.sending = true | |||||
| let data = { | |||||
| anzeigename: this.anzeigename, | |||||
| name: this.name, | |||||
| email: this.email, | |||||
| newsletter: false, | |||||
| } | |||||
| const response = await fetch( | |||||
| 'http://localhost:1234/guest', { | |||||
| method: 'POST', | |||||
| headers: { | |||||
| 'Content-Type': 'application/json', | |||||
| }, | |||||
| body: JSON.stringify(data), | |||||
| } | |||||
| ) | |||||
| if (response.status === 200) { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = true | |||||
| this.fetchGuests() | |||||
| } else { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = true | |||||
| this.fetchGuests() | |||||
| // this.error = true | |||||
| } | |||||
| this.sending = false | |||||
| return false | |||||
| }, | |||||
| resetForm () { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = false | |||||
| }, | |||||
| async share () { | |||||
| location.href = "#"; | |||||
| location.href = "#teilnehmen"; | |||||
| try { | |||||
| await navigator.share({ url:"https://okt-28.ck.si/" }) | |||||
| } catch (err) { | |||||
| console.log(`Error: ${err}`) | |||||
| } | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.fetchGuests() | |||||
| document.addEventListener('selectionchange', () => { | |||||
| this.selection = document.getSelection() | |||||
| // console.log(this.selection) | |||||
| if (this.selection) { | |||||
| this.selectionText = this.selection.toString() | |||||
| } | |||||
| }); | |||||
| // this.$refs.details.$el | |||||
| }, | |||||
| } | } | ||||
| </script> | </script> | ||||
| @@ -251,22 +31,17 @@ | |||||
| color: #fcfa86; | color: #fcfa86; | ||||
| background: #000; | background: #000; | ||||
| } | } | ||||
| body { | body { | ||||
| background-color: rgb(167, 204, 247); | |||||
| font-family: 'JetBrains Mono', monospace; | |||||
| background-color: rgb(0, 0, 0); | |||||
| background-image: url('bg.gif'); | background-image: url('bg.gif'); | ||||
| background-size: cover; | background-size: cover; | ||||
| color: #000; | |||||
| background-position: center center; | |||||
| background-attachment: fixed; | |||||
| color: rgb(251, 251, 251); | |||||
| margin: 0 0 100px; | margin: 0 0 100px; | ||||
| } | } | ||||
| .otf { | |||||
| width: 100%; | |||||
| background-color: rgb(167, 204, 247); | |||||
| background-image: url('bg.gif'); | |||||
| background-size: cover; | |||||
| } | |||||
| #app { | #app { | ||||
| font-family: 'JetBrains Mono', monospace; | font-family: 'JetBrains Mono', monospace; | ||||
| -webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||||
| @@ -277,110 +52,4 @@ | |||||
| align-items: center; | align-items: center; | ||||
| } | } | ||||
| .otf { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| position: relative; | |||||
| } | |||||
| .input-headline { | |||||
| color: #000; | |||||
| font-size: 2.8vh; | |||||
| margin-bottom: .8vh; | |||||
| } | |||||
| .input-form { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| width: 100%; | |||||
| max-width: 800px; | |||||
| mix-blend-mode: hard-light; | |||||
| margin-top: 4vh; | |||||
| } | |||||
| .input-text, | |||||
| .input-btn, | |||||
| .input-cb { | |||||
| color: #000; | |||||
| background: #fff; | |||||
| font-size: 2.8vh; | |||||
| font-family: 'JetBrains Mono', monospace; | |||||
| border: 0; | |||||
| padding: .5em 1em; | |||||
| line-height: 1.4; | |||||
| max-width: 100%; | |||||
| } | |||||
| .input-btn { | |||||
| border-top: 2px solid rgb(0, 0, 0); | |||||
| cursor: pointer; | |||||
| } | |||||
| .input-btn:hover { | |||||
| border-top: 2px solid rgb(207, 207, 207); | |||||
| color: rgb(87, 87, 87); | |||||
| background: rgb(255, 255, 255); | |||||
| } | |||||
| .input-checkbox { | |||||
| margin: 0 1em 0 0; | |||||
| } | |||||
| @media screen and (max-width: 1000px) { | |||||
| .form-wrapper { | |||||
| margin-top: 4em; | |||||
| } | |||||
| .input-text, | |||||
| .input-btn { | |||||
| width: 100%; | |||||
| max-width: 100%; | |||||
| min-width: 0; | |||||
| text-align: center; | |||||
| } | |||||
| .input-form { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| } | |||||
| } | |||||
| .input-text { | |||||
| width: auto; | |||||
| flex-grow: 1; | |||||
| } | |||||
| .input-btn { | |||||
| color: #fff; | |||||
| background-color: #000000; | |||||
| } | |||||
| .details { | |||||
| color: #fff; | |||||
| background-color: #000; | |||||
| font-size: 10vw; | |||||
| max-width: 80em; | |||||
| margin: 3% 3% 200px; | |||||
| padding: 3%; | |||||
| } | |||||
| .selection-text { | |||||
| position: fixed; | |||||
| z-index: 9999; | |||||
| font-size: 10vh; | |||||
| line-height: 1em; | |||||
| pointer-events: none; | |||||
| color: #ec4b73; | |||||
| mix-blend-mode: multiply; | |||||
| top: 10%; | |||||
| } | |||||
| </style> | </style> | ||||
BIN
View File
BIN
View File
+ 3
- 1
src/main.js
View File
| @@ -1,8 +1,10 @@ | |||||
| import Vue from 'vue' | import Vue from 'vue' | ||||
| import App from './App.vue' | import App from './App.vue' | ||||
| import router from './router' | |||||
| Vue.config.productionTip = false | Vue.config.productionTip = false | ||||
| new Vue({ | new Vue({ | ||||
| render: h => h(App), | |||||
| router, | |||||
| render: h => h(App) | |||||
| }).$mount('#app') | }).$mount('#app') | ||||
+ 29
- 0
src/router/index.js
View File
| @@ -0,0 +1,29 @@ | |||||
| import Vue from 'vue' | |||||
| import VueRouter from 'vue-router' | |||||
| import Home from '../views/Home.vue' | |||||
| Vue.use(VueRouter) | |||||
| const routes = [ | |||||
| { | |||||
| path: '/', | |||||
| name: 'Home', | |||||
| component: Home | |||||
| }, | |||||
| { | |||||
| path: '/cancel/:token', | |||||
| name: 'Cancel', | |||||
| // route level code-splitting | |||||
| // this generates a separate chunk (about.[hash].js) for this route | |||||
| // which is lazy-loaded when the route is visited. | |||||
| component: () => import(/* webpackChunkName: "about" */ '../views/Cancel.vue') | |||||
| } | |||||
| ] | |||||
| const router = new VueRouter({ | |||||
| mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes | |||||
| }) | |||||
| export default router | |||||
+ 63
- 0
src/views/Cancel.vue
View File
| @@ -0,0 +1,63 @@ | |||||
| <template> | |||||
| <div class="cancel"> | |||||
| <h1 v-if="!success">cancelling reservation {{$route.params.token}} ...</h1> | |||||
| <h1 v-else> | |||||
| Your reservation got cancelled.<br> | |||||
| thanks for letting us know! | |||||
| </h1> | |||||
| <div v-if="error"> | |||||
| <h2> | |||||
| Oh no! sth went wrong. | |||||
| </h2> | |||||
| <p> | |||||
| {{error.detail}} | |||||
| </p> | |||||
| <p> | |||||
| please send us an email with your reservation token <span class="color: #0ff">{{$route.params.token}}</span>, so we can have a look at it:<br> | |||||
| reservation@ck.si | |||||
| </p> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'Cancel', | |||||
| data() { | |||||
| return { | |||||
| success: false, | |||||
| error: false, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| async cancel() { | |||||
| let data = { | |||||
| token: this.$route.params.token | |||||
| } | |||||
| const response = await fetch( | |||||
| `http://localhost:1234/api/guest/cancel`, { | |||||
| method: 'POST', | |||||
| headers: { 'Content-Type': 'application/json' }, | |||||
| body: JSON.stringify(data), | |||||
| } | |||||
| ) | |||||
| if (response.status === 200) { | |||||
| this.success = true | |||||
| } else { | |||||
| this.error = await response.json() | |||||
| } | |||||
| } | |||||
| }, | |||||
| mounted () { | |||||
| this.cancel() | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style> | |||||
| </style> | |||||
+ 340
- 0
src/views/Home.vue
View File
| @@ -0,0 +1,340 @@ | |||||
| <template> | |||||
| <div id="app"> | |||||
| <div class="selection-text">{{selectionText}}</div> | |||||
| <div class="otf" id="teilnehmen"> | |||||
| <!-- <h1 style="padding-top:1em">Party</h1> --> | |||||
| <div class="form-wrapper"> | |||||
| </div> | |||||
| <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh"> | |||||
| <div class="input-headline">reservation</div> | |||||
| <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" /> | |||||
| <input class="input-text" v-model="name" placeholder="real name" size="1" /> | |||||
| <input class="input-text" v-model="email" placeholder="email" size="1" /> | |||||
| <!-- <label class="input-cb" for="newsletter"> | |||||
| <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed | |||||
| </label> --> | |||||
| <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" /> | |||||
| <div v-if="error">oh no something went wrong!</div> | |||||
| </form> | |||||
| <div v-if="showHelp" style="margin-bottom: 1em;"> | |||||
| *robot voice* give us your data for the reservation! | |||||
| </div> | |||||
| <div v-if="success"> | |||||
| <p style="font-size: 8vw"> | |||||
| Thanks! | |||||
| </p> | |||||
| <button @click="resetForm" class="input-btn">✓ see you there!</button> | |||||
| </div> | |||||
| <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words" | |||||
| :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }" | |||||
| font-family="'JetBrains Mono'" /> | |||||
| </div> | |||||
| <!-- <div class="details" ref="details"> | |||||
| TEXT! | |||||
| </div> --> | |||||
| <div | |||||
| @click="share" | |||||
| style="cursor: pointer; margin-top: 5em;" | |||||
| > | |||||
| <svg | |||||
| style="fill: #fff" | |||||
| version="1.1" | |||||
| id="svg5225" | |||||
| xml:space="preserve" | |||||
| width="350.21805" | |||||
| height="180.67772" | |||||
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
| xmlns="http://www.w3.org/2000/svg" | |||||
| xmlns:svg="http://www.w3.org/2000/svg"><defs | |||||
| id="defs5229" /><sodipodi:namedview | |||||
| id="namedview5227" | |||||
| pagecolor="#ffffff" | |||||
| bordercolor="#999999" | |||||
| borderopacity="1" | |||||
| inkscape:showpageshadow="0" | |||||
| inkscape:pageopacity="0" | |||||
| inkscape:pagecheckerboard="0" | |||||
| inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard | |||||
| min="622.8099,381.05079" | |||||
| max="973.02795,561.72851" | |||||
| geom-min="622.8099,381.05079" | |||||
| geom-max="973.02795,561.72851" /><g | |||||
| id="g5231" | |||||
| transform="translate(-622.8099,-392.30077)"><path | |||||
| id="rect666" | |||||
| style="opacity:1;stroke-width:0;paint-order:stroke fill markers;" | |||||
| d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g | |||||
| aria-label="WILLTEILEN" | |||||
| id="text1443" | |||||
| style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px" | |||||
| transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path | |||||
| d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4358" /><path | |||||
| d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4360" /><path | |||||
| d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4362" /><path | |||||
| d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4364" /><path | |||||
| d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4366" /><path | |||||
| d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4368" /><path | |||||
| d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4370" /><path | |||||
| d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4372" /><path | |||||
| d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4374" /><path | |||||
| d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z" | |||||
| style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold, Bold'" | |||||
| id="path4376" /></g></g></svg> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import VueWordCloud from 'vuewordcloud'; | |||||
| export default { | |||||
| name: 'App', | |||||
| data() { | |||||
| return { | |||||
| anzeigename: '', | |||||
| name: '', | |||||
| email: '', | |||||
| newsletter: false, | |||||
| guests: [], | |||||
| sending: false, | |||||
| showHelp: false, | |||||
| selection: null, | |||||
| selectionText: null, | |||||
| success: false, | |||||
| error: false, | |||||
| } | |||||
| }, | |||||
| components: { | |||||
| [VueWordCloud.name]: VueWordCloud, | |||||
| }, | |||||
| computed: { | |||||
| nameColors() { | |||||
| return ['DeepPink', 'Crimson', 'Blue', 'BlueViolet', 'Fuchsia', 'Navy', 'Indigo'] | |||||
| }, | |||||
| words() { | |||||
| const names = this.guests.map(guest => { | |||||
| return guest.anzeigename | |||||
| }) | |||||
| const nameLengths = names.map(name => { | |||||
| return name.length | |||||
| }) | |||||
| const maxNameLength = Math.max(...nameLengths) | |||||
| return this.guests.map(guest => { | |||||
| const nameLength = guest.anzeigename.length | |||||
| let size = maxNameLength - nameLength + 12 | |||||
| return [` ${guest.anzeigename} `, size] | |||||
| }) | |||||
| }, | |||||
| // guestlist() { | |||||
| // return this.guests.map( (g) => { | |||||
| // g.name = g.anzeigename | |||||
| // return g | |||||
| // }) | |||||
| // } | |||||
| }, | |||||
| methods: { | |||||
| async fetchGuests() { | |||||
| const response = await fetch('/api/guest') | |||||
| const data = await response.json() | |||||
| this.guests = data | |||||
| }, | |||||
| async onClickTheButton() { | |||||
| if (this.name.length == 0) { | |||||
| this.showHelp = true | |||||
| return false | |||||
| } | |||||
| this.showHelp = false | |||||
| this.sending = true | |||||
| let data = { | |||||
| anzeigename: this.anzeigename, | |||||
| name: this.name, | |||||
| email: this.email, | |||||
| newsletter: false, | |||||
| } | |||||
| const response = await fetch( | |||||
| '/api/guest', { | |||||
| method: 'POST', | |||||
| headers: { | |||||
| 'Content-Type': 'application/json', | |||||
| }, | |||||
| body: JSON.stringify(data), | |||||
| } | |||||
| ) | |||||
| if (response.status === 200) { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = true | |||||
| this.fetchGuests() | |||||
| } else { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = true | |||||
| this.fetchGuests() | |||||
| // this.error = true | |||||
| } | |||||
| this.sending = false | |||||
| return false | |||||
| }, | |||||
| resetForm () { | |||||
| this.anzeigename = '' | |||||
| this.name = '' | |||||
| this.email = '' | |||||
| this.success = false | |||||
| }, | |||||
| async share () { | |||||
| location.href = "#"; | |||||
| location.href = "#teilnehmen"; | |||||
| try { | |||||
| await navigator.share({ url:"https://reservation.ck.si/" }) | |||||
| } catch (err) { | |||||
| console.log(`Error: ${err}`) | |||||
| } | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.fetchGuests() | |||||
| document.addEventListener('selectionchange', () => { | |||||
| this.selection = document.getSelection() | |||||
| // console.log(this.selection) | |||||
| if (this.selection) { | |||||
| this.selectionText = this.selection.toString() | |||||
| } | |||||
| }); | |||||
| // this.$refs.details.$el | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style> | |||||
| .otf { | |||||
| width: 100%; | |||||
| /* background-color: rgb(167, 204, 247); */ | |||||
| /* background-image: url('bg.gif'); */ | |||||
| background-size: cover; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| position: relative; | |||||
| } | |||||
| .input-headline { | |||||
| color: rgb(255, 255, 255); | |||||
| font-size: 2.8vh; | |||||
| margin-bottom: .8vh; | |||||
| } | |||||
| .input-form { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| width: 100%; | |||||
| max-width: 800px; | |||||
| mix-blend-mode: exclusion; | |||||
| margin-top: 4vh; | |||||
| z-index: 9; | |||||
| position: relative; | |||||
| } | |||||
| .input-text, | |||||
| .input-btn, | |||||
| .input-cb { | |||||
| color: #000; | |||||
| background: #fff; | |||||
| font-size: 2.8vh; | |||||
| font-family: 'JetBrains Mono', monospace; | |||||
| border: 0; | |||||
| padding: .5em 1em; | |||||
| line-height: 1.4; | |||||
| max-width: 100%; | |||||
| } | |||||
| .input-btn { | |||||
| color: #fff; | |||||
| background-color: #1e3a8e; | |||||
| border-top: 2px solid rgb(0, 0, 0); | |||||
| cursor: pointer; | |||||
| } | |||||
| .input-btn:hover { | |||||
| color: rgb(87, 87, 87); | |||||
| background: rgb(255, 255, 255); | |||||
| border-top: 2px solid rgb(207, 207, 207); | |||||
| } | |||||
| .input-checkbox { | |||||
| margin: 0 1em 0 0; | |||||
| } | |||||
| @media screen and (max-width: 1000px) { | |||||
| .form-wrapper { | |||||
| margin-top: 4em; | |||||
| } | |||||
| .input-text, | |||||
| .input-btn { | |||||
| width: 100%; | |||||
| max-width: 100%; | |||||
| min-width: 0; | |||||
| text-align: center; | |||||
| } | |||||
| /* .input-form { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| } */ | |||||
| } | |||||
| .input-text { | |||||
| width: auto; | |||||
| flex-grow: 1; | |||||
| } | |||||
| .details { | |||||
| color: #fff; | |||||
| background-color: #000; | |||||
| font-size: 10vw; | |||||
| max-width: 80em; | |||||
| margin: 3% 3% 200px; | |||||
| padding: 3%; | |||||
| } | |||||
| .selection-text { | |||||
| position: fixed; | |||||
| z-index: 9999; | |||||
| font-size: 10vh; | |||||
| line-height: 1em; | |||||
| pointer-events: none; | |||||
| color: #ec4b73; | |||||
| mix-blend-mode: multiply; | |||||
| top: 10%; | |||||
| } | |||||
| </style> | |||||