Added device paging support to the mobile site.
Ylian Saint-Hilaire committed
Aug 31, 2022 at 22:20 UTC
7296206aa60146fdc71f8455014dd3697f1afce7
3 files changed
+51
-1
public/images/left-30.png
Binary files /dev/null and b/public/images/left-30.png differ
public/images/right-30.png
Binary files /dev/null and b/public/images/right-30.png differ
views/default-mobile.handlebars
+51
-1
@@ -648,6 +648,22 @@
648
height: 400px;
649
position: relative;
650
}
651
+
652
+ .viewSelector10 {
653
+ margin-left: 2px;
654
+ margin-top: 2px;
655
+ background: url(../images/views.png) -476px 0px;
656
+ height: 28px;
657
+ width: 28px;
658
+ }
659
+
660
+ .viewSelector11 {
661
+ margin-left: 2px;
662
+ margin-top: 2px;
663
+ background: url(../images/views.png) -504px 0px;
664
+ height: 28px;
665
+ width: 28px;
666
+ }
667
</style>
668
</head>
669
<body id="body" onload="if (typeof(startup) !== 'undefined') startup();" style="overflow-y:hidden;margin:0;padding:0;border:0;font-size:13px;font-family:\'Trebuchet MS\', Arial, Helvetica, sans-serif">
@@ -663,6 +679,9 @@
679
<strong><font style="font-size:12px;font-family:Arial,Helvetica,sans-serif;text-shadow: 1px 1px 2px #000;">{{{title2}}}</font></strong>
680
</div>
681
</div>
682
+ <div id="devViewPageState" class=noselect style="position:absolute;right:160px;top:10px;height:30px;line-height:30px;color:#c8c8c8;font-size:16px;display:none"></div>
683
+ <img id="devViewPageButton2" class=noselect style="position:absolute;right:130px;top:10px;cursor:pointer;display:none" onclick=onDeviceViewPageChange(2) src="/images/left-30.png" width=20 height=30 />
684
+ <img id="devViewPageButton3" class=noselect style="position:absolute;right:100px;top:10px;cursor:pointer;display:none" onclick=onDeviceViewPageChange(3) src="/images/right-30.png" width=20 height=30 />
685
<div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="position:absolute;right:50px;top:0px;font-size:28px;width:50px;height:50px;cursor:pointer;display:none" title="Click to view current notifications"><div id="notificationCount2" style="padding-top:8px">0</div></div>
686
<img id="topMenuIcon" class=noselect style="position:absolute;right:0;top:10px;color:#c8c8c8;font-size:44px;margin-right:8px;cursor:pointer;display:none" onclick=topMenu() src="/images/3bars-30.png" width=30 height=30 />
687
</div>
@@ -1228,7 +1247,6 @@
1247
var authCookie = '{{{authCookie}}}';
1248
var authRelayCookie = '{{{authRelayCookie}}}';
1249
var logoutControls = JSON.parse(decodeURIComponent('{{{logoutControls}}}'));
1231
- console.log(logoutControls);
1250
var authCookieRenewTimer = null;
1251
var webRelayPort = parseInt('{{{webRelayPort}}}');
1252
var webRelayDns = '{{{webRelayDns}}}';
@@ -1260,6 +1278,7 @@
1278
var xterm = null;
1279
var xtermfit = null;
1280
var xtermResizeTimer = null;
1281
+ var devicePagingState = null;
1282
1283
// Console Message Display Timers
1284
var p11DeskConsoleMsgTimer = null;
@@ -1348,6 +1367,8 @@
1367
if (prevState == 2) { setTimeout(serverPoll, 5000); } else { QH('p0span', "Unable to connect web socket"); }
1368
// Clean up here
1369
if (authCookieRenewTimer != null) { clearInterval(authCookieRenewTimer); authCookieRenewTimer = null; }
1370
+ devicePagingState = null;
1371
+ updateDevicePageState();
1372
} else if (state == 2) {
1373
// Fetch list of meshes, nodes, files
1374
meshserver.send({ action: 'usergroups' });
@@ -1512,6 +1533,10 @@
1533
// Change the reference to the current node
1534
if (currentNode != null) { currentNode = getNodeFromId(currentNode._id); if (currentNode != null) { gotoDevice(currentNode._id, xxcurrentView, true); } else { go(2); } }
1535
1536
+ // Update device paging
1537
+ devicePagingState = (message.totalcount == null) ? null : { total: message.totalcount, skip: message.skip, limit: message.limit };
1538
+ updateDevicePageState();
1539
+
1540
//onSortSelectChange();
1541
//onSearchInputChanged();
1542
mainUpdate(4);
@@ -2715,6 +2740,31 @@
2740
onSearchInputChanged();
2741
}
2742
2743
+ function updateDevicePageState() {
2744
+ if ((devicePagingState == null) || (devicePagingState.total <= devicePagingState.limit)) {
2745
+ QV('devViewPageState', false);
2746
+ QV('devViewPageButton2', false);
2747
+ QV('devViewPageButton3', false);
2748
+ } else {
2749
+ var currentPage = Math.floor((devicePagingState.skip + devicePagingState.limit) / devicePagingState.limit);
2750
+ var maxPage = Math.ceil(devicePagingState.total / devicePagingState.limit);
2751
+ QV('devViewPageState', true);
2752
+ QV('devViewPageButton2', true);
2753
+ QV('devViewPageButton3', true);
2754
+ QH('devViewPageState', currentPage + '/' + maxPage);
2755
+ }
2756
+ }
2757
+
2758
+ function onDeviceViewPageChange(i) {
2759
+ if (devicePagingState == null) return;
2760
+ var currentPage = (Math.floor((devicePagingState.skip + devicePagingState.limit) / devicePagingState.limit));
2761
+ var maxPage = Math.ceil(devicePagingState.total / devicePagingState.limit);
2762
+ switch (i) {
2763
+ case 2: { if (currentPage > 1) meshserver.send({ action: 'nodes', skip: (currentPage - 2) * devicePagingState.limit }); break; } // Goto previous page
2764
+ case 3: { if (currentPage < maxPage) meshserver.send({ action: 'nodes', skip: currentPage * devicePagingState.limit }); break; } // Goto next page
2765
+ }
2766
+ }
2767
+
2768
function onDeviceSearchChanged(e) {
2769
setTimeout(function () { onSearchInputChanged(); }, 10);
2770
}