redplanet
/
reservation.ck.si
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add route

master
Andreas Demmelbauer 3 years ago
parent
060f3ad241
commit
c60d091c4c
7 changed files with 448 additions and 619 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -285
      package-lock.json
  2. +1
    -0
      package.json
  3. +5
    -333
      src/App.vue
  4. +3
    -1
      src/main.js
  5. +29
    -0
      src/router/index.js
  6. +63
    -0
      src/views/Cancel.vue
  7. +340
    -0
      src/views/Home.vue

+ 7
- 285
package-lock.json View File

@@ -16,6 +16,7 @@
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
@@ -2542,98 +2543,6 @@
"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": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -2688,29 +2597,6 @@
"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": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -6534,14 +6420,6 @@
"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": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -9348,17 +9226,6 @@
"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": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -12892,14 +12759,6 @@
"deprecated": "See https://github.com/lydell/source-map-url#deprecated",
"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": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -17659,8 +17518,7 @@
"version": "4.5.19",
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz",
"integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==",
"dev": true,
"requires": {}
"dev": true
},
"@vue/cli-service": {
"version": "4.5.19",
@@ -17746,87 +17604,6 @@
"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": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -17872,31 +17649,7 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
"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": {
"version": "1.3.0",
@@ -18111,8 +17864,7 @@
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"dev": true,
"requires": {}
"dev": true
},
"acorn-walk": {
"version": "7.2.0",
@@ -18142,15 +17894,13 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
"dev": true,
"requires": {}
"dev": true
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true,
"requires": {}
"dev": true
},
"alphanum-sort": {
"version": "1.0.2",
@@ -20961,14 +20711,6 @@
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"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": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -23141,17 +22883,6 @@
"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": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -26083,14 +25814,6 @@
"integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
"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": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -27598,8 +27321,7 @@
"vuewordcloud": {
"version": "18.7.12",
"resolved": "https://registry.npmjs.org/vuewordcloud/-/vuewordcloud-18.7.12.tgz",
"integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA==",
"requires": {}
"integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA=="
},
"watchpack": {
"version": "1.7.5",


+ 1
- 0
package.json View File

@@ -16,6 +16,7 @@
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",


+ 5
- 333
src/App.vue View File

@@ -1,228 +1,12 @@
<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>
<router-view/>

</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>

@@ -248,22 +32,16 @@
background: #000;
}
body {
background-color: rgb(167, 204, 247);
font-family: 'JetBrains Mono', monospace;
background-color: rgb(0, 0, 0);
background-image: url('bg.gif');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: #000;
color: rgb(251, 251, 251);
margin: 0 0 100px;
}

.otf {
width: 100%;
/* background-color: rgb(167, 204, 247); */
/* background-image: url('bg.gif'); */
background-size: cover;
}

#app {
font-family: 'JetBrains Mono', monospace;
-webkit-font-smoothing: antialiased;
@@ -274,110 +52,4 @@
align-items: center;
}

.otf {
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>

+ 3
- 1
src/main.js View File

@@ -1,8 +1,10 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
router,
render: h => h(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>

Write Preview
Loading…
Cancel
Save