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