report-issue/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js" defer></script>
  <script src="servicenow.js" defer></script>
  <script src="webex.js" defer></script>
  <script src="index.js" defer></script>
  <script src="alpine.js" defer></script>

  <title>Report Issue</title>
  <link rel="icon" href="./assets/logo.png">
  <link href="style.css" rel="stylesheet">
</head>

<body x-data="dataModel" :class="theme || ''" x-cloak>
  <main>
    <div class="logo left"></div>
    <section x-show="step === 'start'">
      <h1>How was your experience?</h1>
      <div class="choices">
        <button class="choice" @click="answer(step, 'awesome')">🎉 Awesome!</button>
        <button class="choice" @click="answer(step, 'ok')">😐 OK</button>
        <button class="choice" @click="answer(step, 'notgood')">😡 Not good</button>
      </div>
    </section>
    <section
      x-show="step === 'whatwaswrong'"
      x-transition:leave="fadeup"
      x-transition:enter="fadein"
    >
      <div>
        <h1>What went wrong?</h1>
        <div class="choices">
          <button
            class="choice icon audio"
            @click="answer(step, 'audiovideo')"
          >Audio / video quality</button>
          <button
            class="choice icon room"
            @click="answer(step, 'room')"
          >Something in the room</button>
          <button
            class="choice icon other"
            @click="answer(step, 'other')"
          >Other</button>
        </div>
      </div>
    </section>
    <section
      x-show="step === 'moreinfo'"
      x-transition:enter="fadein"
      x-transition:leave="fadeup"
    >
      <div>
        <textarea x-model="answers.comments" placeholder="Describe the problem"></textarea>
      </div>
      <div>
        <input class="name" x-model="answers.name" placeholder="Your name here" />
      </div>
      <div>
        <button @click="back" x-show="step === 'moreinfo'">Back</button>
        <button
          @click="submit()"
          :class="busy ? 'busy' : ''"
          :disabled="busy"
          x-text="busy ? 'Send' : 'Send'"
          class="submit"
        ></button>
      </div>
    </section>
    <section
      x-show="step === 'done'"
      x-transition:leave="fadeup"
      x-transition:enter="fadein"
    >
      <div class="error" x-show="createIncident && !incidentNumber">Sorry! Something went wrong when creating a ServiceNow incident.</div>

      <div x-show="incidentNumber">
        <div class="done"></div>
        <h1>Issue reported</h1>
        <div x-show="createIncident">Thanks for your feedback.
          <p/>A ServiceNow incident has been created.
          <p/>Incident number: <b x-text="incidentNumber"></b>
        </div>
      </div>

      <h1 x-show="!createIncident">Thanks for your feedback!</h1>
    </section>
  </main>

  <div class="qr-dialog" x-show="showQr" @click="showQr = false">
    <div id="qr-code"></div>
    <div>Tap to close</div>
  </div>
  <footer>
    <img src="./assets/qrlogo.png" class="qr-logo"/>
    <a @click="showQr = true">Report with phone instead</a>
  </footer>
</body>

</html>