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",
            }
          });
          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 %}