reservation.ck.si/src/views/Home.vue

<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!<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: 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
      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: 'App',
    data() {
      return {
        anzeigename: '',
        name: '',
        email: '',
        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 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.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: #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>