58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load bootstrap4 %}
|
|
{% load fontawesome_5 %}
|
|
{% load guardian_tags %}
|
|
|
|
{% block 'content' %}
|
|
<div class="row justify-content-between">
|
|
<div class="col">
|
|
<h6>{% trans "stream_configuration_header" %}</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn-toolbar" role="toolbar">
|
|
<div class="btn-group" role="group">
|
|
<a href="{% url 'rtmp:stream_create' %}" type="button" class="btn btn-sm btn-outline-primary">{% fa5_icon 'plus' %} {% trans "create" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="my-4">
|
|
<div id="app">
|
|
<div v-if="isLoading">
|
|
<div class="my-4 text-center">
|
|
<div class="spinner-border" role="status">
|
|
<span class="sr-only">{% trans "loading..." %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table v-else class="table">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">{% trans "name" %}</th>
|
|
<th scope="col">{% trans "receiving" %}</th>
|
|
<th scope="col" class="text-right">{% trans "actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="stream in streams">
|
|
<th scope="row">{% verbatim %}{{ stream.name }}{% endverbatim %}</th>
|
|
<td>
|
|
<span v-if="isPublishing(stream)" class="text-success">{% fa5_icon 'check-circle' %} <span class="badge badge-success">{% verbatim %}{{ stream.publish_counter}}{% endverbatim %}</span></span>
|
|
<span v-else class="text-danger">{% fa5_icon 'times-circle' %}</span>
|
|
</td>
|
|
<td align="right">
|
|
<a v-bind:href="detailLink(stream.id)" type="button" class="btn btn-sm btn-outline-primary">{% trans "details" %}</a>
|
|
<a v-bind:href="deleteLink(stream.id)" type="button" class="btn btn-sm btn-outline-danger">{% fa5_icon 'trash' %}</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script src="{% static 'js/vue.min.js' %}"></script>
|
|
<script src="{% static 'js/axios.min.js' %}"></script>
|
|
<script src="{% static 'js/stream-list.js' %}"></script>
|
|
{% endblock %}
|