Nove templaty

templates/live.html.ep

+% layout 'default';
+% title 'Živé vysílání';
+
+<div class="container pt-2 lg:pb-2 ">
+<table id="Streams"
+    class="table table--bordered"
+    data-row-style="rowStyle"
+    data-url="/api/streams?live=true">
+  <thead>
+    <tr>
+      <th data-field="name" data-width="70" data-width-unit="%">Stream</th>
+      <th data-field="publish_user_name" data-width="30" data-width-unit="%">Vysílá</th>
+    </tr>
+  </thead>
+</table>
+</div>
+
+<script>
+
+$('#Streams').bootstrapTable({
+    onClickRow: function (row) {
+        window.location.href = '/play/' + row.key;
+    },
+    formatNoMatches: function() { return '<p class="text-4xl">Aktuálně neprobíhá žádné živé vysílání</p>' },
+});
+
+setInterval(
+    function() {
+        $('#Streams').bootstrapTable('refresh', {silent: true})
+    },
+    5000
+);
+
+</script>

templates/streams.html.ep

+% layout 'default';
+% title 'Seznam streamů';
+
+<h1 class="container container--default pt-4 lg:pb-4 bg-grey-300 text-grey-100 head-alt-base">Seznam streamů<h1>
+
+<div class="container pt-2 lg:pb-2 ">
+<table id="Streams"
+    class="table table--bordered"
+    data-detail-view="true"
+    data-detail-view-icon="false"
+    data-detail-view-by-click="true"
+    data-detail-formatter="streamInfo"
+    data-row-style="rowStyle"
+    data-url="/api/streams">
+  <thead>
+    <tr>
+      <th data-field="name" data-width="100" data-width-unit="%">Stream</th>
+      <th data-field="id" data-width="30" data-formatter="statusFormatter"></th>
+    </tr>
+  </thead>
+</table>
+</div>
+
+<script>
+$('#Streams').bootstrapTable({});
+
+function streamInfo(index, row, element) {
+   $.ajax({
+       url: '/streams/' + row.id,
+       type: 'get',
+       success: function(response){
+           element.html(response)
+       }
+   });
+}
+
+function rowStyle(row, index) {
+    var classes = ''
+
+    if ( row.is_live ) {
+        classes = 'Live'
+    }
+
+    return { classes: classes }
+}
+
+function statusFormatter(value, row) {
+    if (row.is_live ) {
+        return '<i class="fa fa-play-circle"></i>';
+    }
+    else if (row.is_writeable ) {
+        return '<i class="fa fa-video"></i>';
+    }
+    else {
+        return '';
+    }
+}
+
+</script>