app-MAIL-temp/templates/phone/phone_reservation.html

{% extends "default.html" %}

{% set active_page = "phone" %}
{% block title %}Phone reservation {{ phone_number.number }}{% endblock %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      Your number is
      <div class="d-flex mt-3">
        <h2>{{ phone_number.number }}</h2>
        <div class="ml-3">
          <button data-clipboard-text="{{ phone_number.number }}"
                  class="clipboard btn btn-outline-primary btn-sm"
                  type="button">
            <i class="fe fe-clipboard"></i>
          </button>
        </div>
      </div>
      {% if now > reservation.end %}

        was ended {{ reservation.end.humanize() }}
      {% else %}
        will be released {{ reservation.end.humanize() }}
      {% endif %}
    </div>
  </div>
  <div class="card">
    <div class="card-body" id="message-app">
      <h2 class="mb-2">Received Messages</h2>
      <div v-if="loading">Loading ...</div>
      <div v-else>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">From</th>
              <th scope="col">Time</th>
              <th scope="col">Message</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="message in messages">
              <td>[[ message.from_number ]]</td>
              <td>[[ message.created_at ]]</td>
              <td>[[ message.body ]]</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% if now < reservation.end %}

    <div class="card">
      <div class="card-body">
        When the number is released, you can't reclaim it.
        <form method="post" class="mt-3">
          <input type="hidden" name="form-name" value="release">
          <button class="btn btn-outline-danger">Release the number</button>
        </form>
      </div>
    </div>
  {% endif %}
{% endblock %}
{% block script %}

  <script>
    var app = new Vue({
      el: '#message-app',
      delimiters: ["[[", "]]"], // necessary to avoid conflict with jinja
      data: {
        messages: [],
        loading: true,
      },
      async mounted() {
        await this.loadMessage();

        // refresh every 5 seconds
        this.intervalId = window.setInterval(this.loadMessage, 5000)
      },
      methods: {
        loadMessage: async function () {
          let that = this;
          console.log("load messages");

          let res = await fetch(`/api/phone/reservations/{{reservation.id}}`, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
                '{{HEADER_ALLOW_API_COOKIES}}': 'allow'
            }
          });
          if (res.ok) {
            let json = await res.json();
            that.messages = json.messages;
            that.loading = false;
            if (res.ended) {
              console.log("clear interval")
              window.clearInterval(that.intervalId);
            }
          }
        }
      }
    })
  </script>
{% endblock %}