reservation.ck.si/src/views/events/gtblank-init/GtblankInit.vue

<template>
  <div id="gtblank-init">
    <video autoplay muted loop class="video-bg">
      <source src="/gt-blank-init-bg.mp4" type="video/mp4">
    </video>


    <div class="selection-text">{{selectionText}}</div>
    <div class="otf">
      <!-- <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">gtblank-init 2022-11-11 rsvp</div>
          <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" />
          <input class="input-text" v-model="name" placeholder="full name (for orga reasons)" size="1" />
          <input class="input-text" v-model="email" placeholder="email (for self service)" size="1" />

          <input class="input-btn" type="submit" :value="(sending ? 'sending ...' : 'join')" :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"
      font-family="'JetBrains Mono'" />
      <div v-if="status && status.open" class="details" ref="details">
        official start 21:00<br>
        augasse 2-6, 1090 wien<br>
        <small>
          alte wu -> enter main entrance -> turn right to "ateliers" <br>
          <a href="https://www.openstreetmap.org/?mlat=48.23201&mlon=16.35773#map=19/48.23201/16.35773" target="_blank">location pin @ osm.org</a>
        </small>
      </div>
    </div>
    <!-- :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }" -->
  </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 ['White']
      },
      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 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
      },
    },
    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>

:root {
  cursor: url('cursor.png'), auto;
}

  #gtblank-init {
  background: #999;
  }
  .video-bg {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

  a {
    color: inherit;
    cursor: inherit;
  }
  .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: #000;
    mix-blend-mode: multiply;
    font-size: 4vh;
    margin-bottom: .8vh;
    text-align: center;
  }

  .input-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    mix-blend-mode: hard-light;
    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%;
    cursor: inherit;
  }
  .input-btn {
    color: #000;
    background-color: #01ffcf;
  }

  .input-btn:hover {
    background: #00d9b1;
  }
  .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;
  }

  .wordcloud {
    mix-blend-mode: overlay;
  }

  .details {
    color: #000;
    background-color: #fff;
    font-size: 30px;
    max-width: 80em;
    margin: 3% 3% 200px;
    padding: 3%;
    mix-blend-mode: lighten;
    box-shadow: 10px 10px 0 #000fee, -10px -10px 0 #3400ee;
}

  .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: #fff;
    mix-blend-mode: difference;
    top: 10%;
  }
</style>