crbtc.org/pages/suggest.vue

<script setup>
  useHead({
    title: 'Suggestions - Capital Region Bitcoin Network',
    meta: [
      { 
        name: 'description', 
        content: `Do you have any advice or proposals to improve the meetup, fill 
          out the form below and we will try to create a better experience.` 
      },      
    ],
  })

  const mail = useMail()

  const info = reactive({
    name: undefined,
    message: undefined,
    poll: undefined,
    test: undefined,
    sent: false
  })

  async function onSubmit () {

    let workshop = ""

    switch (info.poll) {
      case "node":
        workshop = "Setting up a full node"
        break;
      case "wallets":
        workshop = "Software/Hardware wallet comparisons"
        break;
      case "business":
        workshop = "Accepting Bitcoin for businesses"
        break;
      case "lightning":
        workshop = "What is the lightning network"
        break;
      case "shopping":
        workshop = "Places to use Bitcoin"
        break;
      default:
        workshop = "undefined";
    } 

    /*
    if (info.poll === "node") {
      workshop = "Setting up a full node"
    } else if (info.poll === "wallets") {
      workshop = "Software/Hardware wallet comparisons"
    } else if (info.poll === "business") {
      workshop = "Accepting Bitcoin for businesses"
    } else if (info.poll === "lightning") {
      workshop = "What is the lightning network"
    } else if (info.poll === "shopping") {
      workshop = "Places to use Bitcoin"
    } else {
      workshop = "undefined"
    }
    */
    
    let details = `
${ info.name } has sent a suggestion.

Next Workshop: ${ workshop }

${ info.message }
    `

    if (info.test === undefined) {
      mail.send({
        from: 'suggest@crbtc.org',
        subject: 'Suggestions for Meetup',
        text: details,
      })

      info.sent = true
    }
  }
</script>

<template>
  <div class="suggest">
    <h1>Meetup Suggestions</h1>
    <p>Do you have any advice or proposals to improve the meetup, fill out 
      the form below and we will try to create a better experience.</p>

    <form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
      <div class="group">
        <label for="name">Name</label>
        <input name="name" v-model="info.name" type="text" placeholder="Your name" required="true" />
      </div>

      <!--
      <div class="group">
        <label for="email">Email <sub>(optional)</sub></label>
        <input name="email" v-model="info.email" type="email" placeholder="Email address" required="true" />
      </div>
      -->

      <div class="group message">
        <label for="message">Message</label>
        <textarea name="message" v-model="info.message" placeholder="Suggestion..." ></textarea>
      </div>

      <div class="group poll">
        <label>Next Workshop</label>

        <div class="group">
          <input id="node" value="node" v-model="info.poll" type="radio" checked />
          <label for="node">Setting up a full node</label>
          <div class="check"></div>
        </div>

        <div class="group">
          <input id="wallets" value="wallets" v-model="info.poll" type="radio" />
          <label for="wallets" >Software/Hardware wallet comparisons</label>
          <div class="check"></div>
        </div>

        <div class="group">
          <input id="business" value="business" v-model="info.poll" type="radio" />
          <label for="business">Accepting Bitcoin for businesses</label>
          <div class="check"></div>
        </div>

        <div class="group">
          <input id="lightning" value="lightning" v-model="info.poll" type="radio" />
          <label for="lightning">What is the lightning network</label>
          <div class="check"></div>
        </div>

        <div class="group">
          <input id="shopping" value="shopping" v-model="info.poll" type="radio" />
          <label for="shopping">Places to use Bitcoin</label>
          <div class="check"></div>
        </div>

      </div>

      <button type="submit" >Submit</button>
    </form>

    <p v-if="info.sent" class="success">Your suggestion has been submitted. Thank you for supporting the Capital Region Bitcoin Network.</p>
    
  </div>
</template>