Uplne nove verze

templates/index.html.ep

 % layout 'default';
 % title 'Piratské vysílání';
-<div id="streams">
-</div>
+
+<table id="Streams"
+    data-detail-view="true"
+    data-detail-view-icon="false"
+    data-detail-view-by-click="true"
+    data-detail-formatter="streamInfo"
+    data-detail-filter="streamInfoAllowed"
+    data-row-style="rowStyle"
+    data-url="/streams">
+  <thead>
+    <tr>
+      <th data-field="id" data-width="30" data-formatter="statusFormatter"></th>
+      <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>
+
 <script>
-function load_streams() {
- $( "#streams" ).load( "/streams" );
+var expandedRows = 0;
+
+$('#Streams').bootstrapTable({
+    onExpandRow:   function () { ++expandedRows },
+    onCollapseRow: function () { --expandedRows },
+    onClickRow: function (row) {
+        if ( row.is_live ) {
+            window.location.href = '/play/' + row.key;
         }
-load_streams();
-setInterval(load_streams, 5000);
+    },
+});
+
+function streamInfoAllowed(index, row) {
+    return row.is_live ? 0 : 1;
+}
+
+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 '';
+    }
+}
+
+setInterval(
+    function() {
+        if ( expandedRows == 0 ) {
+            $('#Streams').bootstrapTable('refresh', {silent: true})
+        }
+    },
+    5000
+);
+
+
 </script>