4 files changed, 55 insertions, 23 deletions

diff --git a/web/kbn_assets/app.css b/web/kbn_assets/app.css
index 8eec2f1..6b3bc11 100644
--- a/web/kbn_assets/app.css
+++ b/web/kbn_assets/app.css
@@ -209,4 +209,14 @@ a.camzone {
     right: 8px;
     text-overflow: ellipsis;
     overflow: hidden;
+}
+
+.cams_list_group {}
+.cams_list_group .list-group-item:first-child {
+    border-top-width: 0;
+    border-radius: 0;
+}
+.cams_list_group .list-group-item .icon-right {
+    position: relative;
+    top: -1px;
 }
\ No newline at end of file
diff --git a/web/kbn_assets/app.js b/web/kbn_assets/app.js
index 0be801d..62e2575 100644
--- a/web/kbn_assets/app.js
+++ b/web/kbn_assets/app.js
@@ -103,22 +103,22 @@ function removeClass(el, name) {
 
 function indexInit() {
     // language selector
-    var langSelect = document.getElementById('lang');
+    const langSelect = document.getElementById('lang');
     langSelect.addEventListener('change', function() {
-        var selectedLang = this.value;
+        const selectedLang = this.value;
         document.cookie = "lang=" + selectedLang + ";path=/";
         window.location.reload();
     });
 
     // camera blocks
-    var blocks = ['zones', 'list'];
-    for (var i = 0; i < blocks.length; i++) {
-        var button = ge('cam_'+blocks[i]+'_btn');
+    let blocks = ['zones', 'list'];
+    for (let i = 0; i < blocks.length; i++) {
+        const button = ge('cam_'+blocks[i]+'_btn');
         button.addEventListener('click', function(e) {
-            var selected = e.target.getAttribute('data-id');
-            for (var j = 0; j < blocks.length; j++) {
-                var button = ge('cam_'+blocks[j]+'_btn');
-                var content = ge('cam_'+blocks[j]);
+            const selected = e.target.getAttribute('data-id');
+            for (let j = 0; j < blocks.length; j++) {
+                const button = ge('cam_'+blocks[j]+'_btn');
+                const content = ge('cam_'+blocks[j]);
                 if (blocks[j] === selected) {
                     addClass(button, 'active');
                     content.style.display = '';
@@ -127,6 +127,13 @@ function indexInit() {
                     content.style.display = 'none';
                 }
             }
+
+            if (window.history !== undefined) {
+                let uri = '/main.cgi'
+                if (selected !== blocks[0])
+                    uri += '?tab=' + encodeURIComponent(selected)
+                window.history.replaceState(null, '', uri)
+            }
         });
     }
 }
diff --git a/web/kbn_templates/cams.j2 b/web/kbn_templates/cams.j2
index 6459f90..361b86a 100644
--- a/web/kbn_templates/cams.j2
+++ b/web/kbn_templates/cams.j2
@@ -1,13 +1,19 @@
 {% extends "base.j2" %}
 {% block content %}
-{{ breadcrumbs([{'text': "cams"|lang}]) }}
 
-{#<nav>#}
-{#    <div class="nav nav-tabs" id="nav-tab">#}
-{#        <a href="/cams/{{ camera_param ? camera_param~"/" : "" }}" class="text-decoration-none"><button class="nav-link{% if tab == 'low' %} active{% endif %}" type="button">Low-res</button></a>#}
-{#        <a href="/cams/{{ camera_param ? camera_param~"/" : "" }}?high=1" class="text-decoration-none"><button class="nav-link{% if tab == 'high' %} active{% endif %}" type="button">High-res</button></a>#}
-{#    </div>#}
-{#</nav>#}
+{% if mode.type == 'all' %}
+    {{ breadcrumbs([{'text': "cams"|lang}]) }}
+{% elif mode.type == 'zone' %}
+    {{ breadcrumbs([
+        {'link': '/cams.cgi', 'text': "cams"|lang},
+        {'text': mode.zone|lang('ipcam_zones')}
+    ]) }}
+{% elif mode.type == 'single' %}
+    {{ breadcrumbs([
+        {'link': '/cams.cgi', 'text': "cams"|lang},
+        {'text': mode.cam|lang('ipcam')}
+    ]) }}
+{% endif %}
 
 <div id="videos" class="camfeeds"></div>
 
diff --git a/web/kbn_templates/index.j2 b/web/kbn_templates/index.j2
index 7f69823..9d683e0 100644
--- a/web/kbn_templates/index.j2
+++ b/web/kbn_templates/index.j2
@@ -37,24 +37,33 @@
 
     <nav class="mt-4">
         <div class="nav nav-tabs" id="nav-tab">
-            <button class="nav-link active" type="button" id="cam_zones_btn" data-id="zones">{{ "cams_by_zone"|lang }}</button>
-            <button class="nav-link" type="button" id="cam_list_btn" data-id="list">{{ "cams_list"|lang }}</button>
+            {% for tab in tabs %}
+                <button class="nav-link{% if tab == tab_selected %} active{% endif %}" type="button" id="cam_{{ tab }}_btn" data-id="{{ tab }}">{{ ("cams_by_"~tab)|lang }}</button>
+            {% endfor %}
         </div>
     </nav>
 
-    <div class="camzones" id="cam_zones">
+    <div class="camzones" id="cam_zones"{% if tab_selected != 'zones' %} style="display: none"{% endif %}>
         {% for zone in camzones %}
             <a href="/cams.cgi?zone={{ zone }}" class="camzone">
                 <div class="camzone_text">{{ zone|lang('ipcam_zones') }}</div>
             </a>
         {% endfor %}
     </div>
-    <ul class="list-group list-group-flush" id="cam_list" style="display: none">
+
+    <div class="list-group cams_list_group" id="cam_list"{% if tab_selected != 'list' %} style="display: none"{% endif %}>
         {% for id in allcams %}
-            <li class="list-group-item"><a href="/cams.cgi?id={{ id }}">{{ id|lang('ipcam') }}</a></li>
+        <a href="/cams.cgi?id={{ id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+            {{ id|lang('ipcam') }}
+            <span class="icon-right">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671"/>
+                </svg>
+            </span> <!-- Bootstrap Icon -->
+        </a>
         {% endfor %}
-{#        <li class="list-group-item"><a href="/cams/stat/">Статистика</a></li>#}
-    </ul>
+    </div>
+
 </div>
 {% endblock %}