|
- <template>
- <div id="okt-28">
- <div class="selection-text">{{selectionText}}</div>
- <div class="otf" id="teilnehmen">
- <!-- <h1 style="padding-top:1em">Party</h1> -->
- <div class="form-wrapper">
- </div>
- <template v-if="status && status.open">
- <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 ? 'sending ...' : 'reserve')" :disabled="(sending ? true : false)" />
- <div v-if="error">
- oh no something went wrong!<br>
- {{errorReason.detail}}
- </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: 6vw">
- Thanks!
- </p>
- <button @click="resetForm" class="input-btn">✓ see you there!</button>
- </div>
- </template>
- <template v-if="status && !status.open">
- {{status.reason}}
- </template>
-
- <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
- v-if="canShare"
- @click="share"
- style="cursor: pointer; margin-top: 5em;"
- >
- <svg class="share" fill="#fff" version="1.1" viewBox="0 0 350.22 180.68" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-622.81 -392.3)"><path d="m659.49 392.3v16.427h-16.299v19.182h-20.385v50.605h21.942v18.918h17.175v19.63h55.254l-37.054 55.916h30.57l37.054-55.916h190.84v-16.06h15.991v-18.048h18.443v-50.605h-19.999v-20.05h-16.867v-19.998zm6.9343 23.419h263.37v19.998h19.999v41.866h-18.443v16.06h-263.37v-19.63h-21.942v-41.866h20.385z" stroke-width="0" style="paint-order:stroke fill markers"/><g transform="matrix(.42673 0 0 .42673 457.43 276.68)" aria-label="WILLTEILEN"><path d="m590.71 451.07h-21.891l-6.5625-29.859q-0.46875-1.875-1.5-7.4531-0.98437-5.5781-1.4531-9.3281-0.375 3.0469-1.2188 7.5938-0.84375 4.5-1.6875 8.2969-0.79688 3.7969-6.7969 30.75h-21.891l-16.969-68.531h17.859l7.4531 34.359q2.5312 11.391 3.4688 18.141 0.60937-4.7812 2.1562-12.984 1.5938-8.2031 2.9531-13.594l6.0469-25.922h17.156l5.8594 25.922q1.5 6.2344 3.0469 14.391 1.5469 8.1562 2.0625 12.188 0.60937-5.2031 3.3281-18.047l7.5938-34.453h17.859z"/><path d="m616.44 451.07v-68.531h18.609v68.531z"/><path d="m649.86 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m705.74 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m791.85 451.07h-18.516v-53.391h-16.734v-15.141h51.938v15.141h-16.688z"/><path d="m859.02 451.07h-40.688v-68.531h40.688v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m871.02 451.07v-68.531h18.609v68.531z"/><path d="m904.44 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m1001 451.07h-40.687v-68.531h40.687v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m1078.3 451.07h-24.281l-25.031-48.281h-0.4218q0.8906 11.391 0.8906 17.391v30.891h-16.406v-68.531h24.188l24.938 47.625h0.2813q-0.6563-10.359-0.6563-16.641v-30.984h16.5z"/></g></g></svg>
- </div>
- <a
- v-else
- href="mailto:?subject=invitation%20-%20oct%2028&body=%40SWK%0D%0Areservation%20required%3A%20reservation.ck.si "
- style="cursor: pointer; margin-top: 5em;"
- >
- <svg class="share" fill="#fff" version="1.1" viewBox="0 0 350.22 180.68" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-622.81 -392.3)"><path d="m659.49 392.3v16.427h-16.299v19.182h-20.385v50.605h21.942v18.918h17.175v19.63h55.254l-37.054 55.916h30.57l37.054-55.916h190.84v-16.06h15.991v-18.048h18.443v-50.605h-19.999v-20.05h-16.867v-19.998zm6.9343 23.419h263.37v19.998h19.999v41.866h-18.443v16.06h-263.37v-19.63h-21.942v-41.866h20.385z" stroke-width="0" style="paint-order:stroke fill markers"/><g transform="matrix(.42673 0 0 .42673 457.43 276.68)" aria-label="WILLTEILEN"><path d="m590.71 451.07h-21.891l-6.5625-29.859q-0.46875-1.875-1.5-7.4531-0.98437-5.5781-1.4531-9.3281-0.375 3.0469-1.2188 7.5938-0.84375 4.5-1.6875 8.2969-0.79688 3.7969-6.7969 30.75h-21.891l-16.969-68.531h17.859l7.4531 34.359q2.5312 11.391 3.4688 18.141 0.60937-4.7812 2.1562-12.984 1.5938-8.2031 2.9531-13.594l6.0469-25.922h17.156l5.8594 25.922q1.5 6.2344 3.0469 14.391 1.5469 8.1562 2.0625 12.188 0.60937-5.2031 3.3281-18.047l7.5938-34.453h17.859z"/><path d="m616.44 451.07v-68.531h18.609v68.531z"/><path d="m649.86 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m705.74 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m791.85 451.07h-18.516v-53.391h-16.734v-15.141h51.938v15.141h-16.688z"/><path d="m859.02 451.07h-40.688v-68.531h40.688v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m871.02 451.07v-68.531h18.609v68.531z"/><path d="m904.44 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m1001 451.07h-40.687v-68.531h40.687v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m1078.3 451.07h-24.281l-25.031-48.281h-0.4218q0.8906 11.391 0.8906 17.391v30.891h-16.406v-68.531h24.188l24.938 47.625h0.2813q-0.6563-10.359-0.6563-16.641v-30.984h16.5z"/></g></g></svg>
- </a>
- </div>
- </template>
-
- <script>
- import VueWordCloud from 'vuewordcloud';
- export default {
- name: 'Invitation',
- data() {
- return {
- anzeigename: '',
- name: '',
- email: '',
- status: null,
- newsletter: false,
- guests: [],
- sending: false,
- showHelp: false,
- selection: null,
- selectionText: null,
- success: false,
- error: false,
- errorReason: null,
- }
- },
- 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
- // })
- // }
- canShare () {
- return !!navigator.share
- }
- },
- methods: {
- async fetchStatus() {
- const response = await fetch(`${process.env.VUE_APP_API_URL}status`)
- const data = await response.json()
- this.status = data
- },
- async fetchGuests() {
- const response = await fetch(`${process.env.VUE_APP_API_URL}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(
- `${process.env.VUE_APP_API_URL}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.success = false
- this.fetchGuests()
- this.error = true
- this.errorReason = await response.json()
- }
- this.sending = false
- return false
- },
- resetForm () {
- this.anzeigename = ''
- this.name = ''
- this.email = ''
- this.success = false
- },
- async share () {
- location.href = "#";
- try {
- await navigator.share({ url:"https://reservation.ck.si/" })
- } catch (err) {
- console.log(`Error: ${err}`)
- }
- }
- },
- mounted() {
- this.fetchStatus()
- 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>
-
-
- body {
- 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: 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;
- 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: #fff;
- background: #3260eb;
- }
-
- .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%;
- }
-
- .share {
- max-width: 30em;
- width: 80%;
- mix-blend-mode: soft-light;
- }
- .share:hover {
- mix-blend-mode: difference;
- }
-
- .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>
|