lws: wip

4 files changed, 117 insertions, 30 deletions

diff --git a/web/kbn_assets/app.css b/web/kbn_assets/app.css
index 1a4697a..ee0aa3e 100644
--- a/web/kbn_assets/app.css
+++ b/web/kbn_assets/app.css
@@ -173,3 +173,40 @@
 .camfeeds.is_mobile > .video-container {
     max-width: 100%;
 }
+
+
+/* index page */
+.camzones {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 5px -5px 0;
+}
+.camzones::after {
+    content: "";
+    flex: 0 0 50%;
+}
+a.camzone {
+    display: block;
+    text-decoration: none;
+    color: var(--bs-dark);
+    flex: 0 0 calc(50% - 10px);
+    height: 100px;
+    box-sizing: border-box;
+    padding: 10px;
+    margin: 5px;
+    /*border: 1px solid #ccc;*/
+    background: #f0f2f4;
+    border-radius: 4px;
+    word-wrap: break-word;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: relative;
+}
+.camzone_text {
+    position: absolute;
+    bottom: 5px;
+    left: 8px;
+    right: 8px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/web/kbn_assets/app.js b/web/kbn_assets/app.js
index d575a5a..6081681 100644
--- a/web/kbn_assets/app.js
+++ b/web/kbn_assets/app.js
@@ -1,7 +1,6 @@
-(function() {
 var RE_WHITESPACE = /[\t\r\n\f]/g
 
-window.ajax = {
+var ajax = {
     get: function(url, data) {
         if (typeof data == 'object') {
             var index = 0;
@@ -38,35 +37,37 @@ window.ajax = {
     }
 };
 
-window.extend = function(a, b) {
+function extend(a, b) {
     return Object.assign(a, b);
 }
 
-window.ge = function(id) {
+function ge(id) {
     return document.getElementById(id);
 }
 
-var ua = navigator.userAgent.toLowerCase();
-window.browserInfo = {
-    version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
-    //opera: /opera/i.test(ua),
-    msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
-    mozilla: /firefox/i.test(ua),
-    android: /android/i.test(ua),
-    mac: /mac/i.test(ua),
-    samsungBrowser: /samsungbrowser/i.test(ua),
-    chrome: /chrome/i.test(ua),
-    safari: /safari/i.test(ua),
-    mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
-    operaMini: /opera mini/i.test(ua),
-    ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
-};
+(function() {
+    var ua = navigator.userAgent.toLowerCase();
+    window.browserInfo = {
+        version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
+        //opera: /opera/i.test(ua),
+        msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
+        mozilla: /firefox/i.test(ua),
+        android: /android/i.test(ua),
+        mac: /mac/i.test(ua),
+        samsungBrowser: /samsungbrowser/i.test(ua),
+        chrome: /chrome/i.test(ua),
+        safari: /safari/i.test(ua),
+        mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
+        operaMini: /opera mini/i.test(ua),
+        ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
+    };
+})();
 
-window.isTouchDevice = function() {
+function isTouchDevice() {
     return 'ontouchstart' in window || navigator.msMaxTouchPoints;
 }
 
-window.hasClass = function(el, name) {
+function hasClass(el, name) {
     if (!el)
         throw new Error('hasClass: invalid element')
 
@@ -80,7 +81,7 @@ window.hasClass = function(el, name) {
     }
 }
 
-window.addClass = function(el, name) {
+function addClass(el, name) {
     if (!hasClass(el, name)) {
         el.className = (el.className ? el.className + ' ' : '') + name;
         return true
@@ -88,6 +89,39 @@ window.addClass = function(el, name) {
     return false
 }
 
+function removeClass(el, name) {
+    if (!el)
+        throw new Error('removeClass: invalid element')
+
+    if (Array.isArray(name)) {
+        for (var i = 0; i < name.length; i++)
+            removeClass(el, name[i]);
+        return;
+    }
+    el.className = ((el.className || '').replace((new RegExp('(\\s|^)' + name + '(\\s|$)')), ' ')).trim()
+}
+
+function indexInit() {
+    var blocks = ['zones', 'all'];
+    for (var i = 0; i < blocks.length; i++) {
+        var 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]);
+                if (blocks[j] === selected) {
+                    addClass(button, 'active');
+                    content.style.display = '';
+                } else {
+                    removeClass(button, 'active');
+                    content.style.display = 'none';
+                }
+            }
+        });
+    }
+}
+
 window.Cameras = {
     hlsOptions: null,
     h265webjsOptions: null,
@@ -316,7 +350,6 @@ window.Cameras = {
         return video.canPlayType('application/vnd.apple.mpegurl');
     },
 };
-})();
 
 
 class ModemStatusUpdater {
diff --git a/web/kbn_templates/index.j2 b/web/kbn_templates/index.j2
index c356326..cdf3026 100644
--- a/web/kbn_templates/index.j2
+++ b/web/kbn_templates/index.j2
@@ -28,12 +28,29 @@
         <li class="list-group-item"><a href="/sensors.cgi">Датчики</a> (<a href="{{ sensors_grafana_url }}">Grafana</a>)</li>
     </ul>
 
-    <h6 class="mt-4"><a href="/cams/"><b>Все камеры</b></a> (<a href="/cams/?high=1">HQ</a>)</h6>
-    <ul class="list-group list-group-flush">
-        {% for id, name in cameras %}
-        <li class="list-group-item"><a href="/cams/{{ id }}/">{{ name }}</a> (<a href="/cams/{{ id }}/?high=1">HQ</a>)</li>
+    <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">По зонам</button>
+            <button class="nav-link" type="button" id="cam_all_btn" data-id="all">Все камеры</button>
+        </div>
+    </nav>
+
+    <div class="camzones" id="cam_zones">
+        {% for zone in camzones %}
+            <a href="/cams.cgi?zone={{ zone }}" class="camzone">
+                <div class="camzone_text">{{ zone|lang('ipcam_zones') }}</div>
+            </a>
         {% endfor %}
-        <li class="list-group-item"><a href="/cams/stat/">Статистика</a></li>
+    </div>
+    <ul class="list-group list-group-flush" id="cam_all" style="display: none">
+        {% for id in allcams %}
+            <li class="list-group-item"><a href="/cams.cgi?id={{ id }}">{{ id|lang('ipcam') }}</a></li>
+        {% endfor %}
+{#        <li class="list-group-item"><a href="/cams/stat/">Статистика</a></li>#}
     </ul>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block js %}
+indexInit();
+{% endblock %}
diff --git a/web/kbn_templates/modems.j2 b/web/kbn_templates/modems.j2
index 06339f8..9defec3 100644
--- a/web/kbn_templates/modems.j2
+++ b/web/kbn_templates/modems.j2
@@ -12,5 +12,5 @@
 {% endblock %}
 
 {% block js %}
-ModemStatus.init({{ modems.getkeys()|tojson }});
+ModemStatus.init({{ modems.keys()|tojson }});
 {% endblock %}