summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/kbn_assets/app.css37
-rw-r--r--web/kbn_assets/app.js79
-rw-r--r--web/kbn_templates/index.j229
-rw-r--r--web/kbn_templates/modems.j22
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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 20:43:00 +0000