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

125 lines
2.9 KiB
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 %}