Skip to content

Commit ab7f8a8

Browse files
erenvbnerenvbn
committed
HTML: DSCS: Various Fixes
1 parent c1d9fd6 commit ab7f8a8

File tree

2 files changed

+62
-55
lines changed

2 files changed

+62
-55
lines changed

‎Pages/Index.cshtml

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,24 @@
2020

2121
<!-- Brand -->
2222
<div class="fs-3 text-light navbar-brand">
23-
<a class="navbar-brand" href="#" onclick="refreshPage()">Device Monitoring</a>
23+
<img src="~/img/favicon.png" alt="sparse-logo" width="65px" height="75px">
24+
<a class="navbar-brand custom-navbar-brand" href="#" onclick="refreshPage()">Device Monitoring</a>
2425
</div>
2526

2627
<!-- Device Status Navbar -->
2728
<div class="d-flex flex-row text-light justify-content-end align-items-center flex-wrap">
2829
<div class="fs-5 me-4 mb-2">
29-
<span class="text-success fw-bold">Online: </span>
30+
<span class="text-success fw-bold">Available: </span>
3031
<span class="badge bg-success">@Model.Devices.Count(d => d.DeviceActiveStatus == Models.DeviceActiveStatus.ONLINE)</span>
3132
</div>
3233

3334
<div class="fs-5 me-4 mb-2">
34-
<span class="text-danger fw-bold">Offline: </span>
35+
<span class="text-danger fw-bold">Unavailable: </span>
3536
<span class="badge bg-danger">@Model.Devices.Count(d => d.DeviceActiveStatus == Models.DeviceActiveStatus.OFFLINE)</span>
3637
</div>
3738

3839
<div class="fs-5 me-4 mb-2">
39-
<span class="text-warning fw-bold">Unknown: </span>
40+
<span class="text-warning fw-bold">In Progress: </span>
4041
<span class="badge bg-warning">@Model.Devices.Count(d => d.DeviceActiveStatus == Models.DeviceActiveStatus.UNKNOWN)</span>
4142
</div>
4243

@@ -49,7 +50,7 @@
4950
</nav>
5051
</div>
5152

52-
<div id="streamNotif">Stream is copied.</div>
53+
<div id="streamNotif">Copied</div>
5354

5455
<div data-simplebar>
5556
<div class="d-flex flex-row justify-content-between p-2 ms-2 me-2">
@@ -62,11 +63,11 @@
6263
onkeyup="filterPageTagify" />
6364
<button class="btn btn-outline-warning bg-gray p-2" onclick="checkVisibleFilteredDevices()">
6465
<i class="fa-regular fa-square-check fa-lg"></i>
65-
Check Visible Devices
66+
Select All
6667
</button>
6768
<button class="btn btn-outline-warning bg-gray p-2" onclick="resetCameras()">
6869
<i class="fa-regular fa-square-minus fa-lg"></i>
69-
Uncheck Visible Devices
70+
Unselect All
7071
</button>
7172
</div>
7273
<div>
@@ -282,15 +283,15 @@
282283
@* Getting Model.Devices *@
283284
@foreach (var dev in @Model.Devices.OrderBy(d => d.DeviceActiveStatus))
284285
{
285-
@* Creating Container as a row double cam *@
286+
@* Creating Container as a row cam *@
286287
<div class="col-sm-12 col-md-9 col-lg-6 col-xl-4 p-1" data-card="container">
287288

288289
@* Creating a CameraCard*@
289290
<div class="card d-flex flex-row justify-content-between" data-card="cameraContainer">
290291
<div class="card-body">
291292
<div>
292293
@* Thumbnail *@
293-
<div class="d-flex flex- justify-content-between">
294+
<div class="d-flex justify-content-between">
294295
@{
295296
var imagePathRelative = $"./thumbnails/{dev.UUID}/stream_0__1.jpeg";
296297
}
@@ -300,7 +301,7 @@
300301
style='width:270px !important; height:152px !important;'>
301302

302303
@* Creating Camera Image in a Column*@
303-
<div class="d-flex flex-column justify-content-between align-items-end">
304+
<div class="d-flex flex-column ">
304305
<div class="form-check align-self-end">
305306
<input type="checkbox" class="btn-check" id="checkbox_@dev.UUID">
306307
<label class="form-check-label font-weight-bold text-dark btn btn-outline-warning" for="checkbox_@dev.UUID">
@@ -412,39 +413,42 @@
412413
<div class="col-lg-4 fw-semibold text-muted">Date Time Type</div>
413414
<div class="col-lg-8" dataFilter>@dev.DateTimeType</div>
414415
</div>
415-
}
416416

417-
@*DaylightSavings*@
418-
<div class="row">
419-
<div class="col-lg-4 fw-semibold text-muted">Daylight Savings</div>
420-
<div class="col-lg-8" dataFilter>@dev.DaylightSavings</div>
421-
</div>
417+
@if (dev.DateTimeType == "NTP")
418+
{
419+
@*DaylightSavings*@
420+
<div class="row">
421+
<div class="col-lg-4 fw-semibold text-muted">Daylight Savings</div>
422+
<div class="col-lg-8" dataFilter>@dev.DaylightSavings</div>
423+
</div>
422424

423-
@*TimeZone*@
424-
@if (!string.IsNullOrEmpty(dev.TimeZone))
425-
{
426-
<div class="row">
427-
<div class="col-lg-4 fw-semibold text-muted">Time Zone</div>
428-
<div class="col-lg-8" dataFilter>@dev.TimeZone</div>
429-
</div>
430-
}
425+
@*TimeZone*@
426+
@if (!string.IsNullOrEmpty(dev.TimeZone))
427+
{
428+
<div class="row">
429+
<div class="col-lg-4 fw-semibold text-muted">Time Zone</div>
430+
<div class="col-lg-8" dataFilter>@dev.TimeZone</div>
431+
</div>
432+
}
431433

432-
@*UTCDateTime*@
433-
@if (dev.UTCDateTime > 0)
434-
{
435-
<div class="row">
436-
<div class="col-lg-4 fw-semibold text-muted">UTC Date Time</div>
437-
<div class="col-lg-8" dataFilter>@DateTimeOffset.FromUnixTimeMilliseconds(dev.UTCDateTime)</div>
438-
</div>
439-
}
434+
@*UTCDateTime*@
435+
@if (dev.UTCDateTime > 0)
436+
{
437+
<div class="row">
438+
<div class="col-lg-4 fw-semibold text-muted">UTC Date Time</div>
439+
<div class="col-lg-8" dataFilter>@DateTimeOffset.FromUnixTimeMilliseconds(dev.UTCDateTime)</div>
440+
</div>
441+
}
440442

441-
@*LocalDateTime*@
442-
@if (dev.LocalDateTime > 0)
443-
{
444-
<div class="row">
445-
<div class="col-lg-4 fw-semibold text-muted">LocalDateTime</div>
446-
<div class="col-lg-8" dataFilter>@DateTimeOffset.FromUnixTimeMilliseconds(dev.LocalDateTime)</div>
447-
</div>
443+
@*LocalDateTime*@
444+
@if (dev.LocalDateTime > 0)
445+
{
446+
<div class="row">
447+
<div class="col-lg-4 fw-semibold text-muted">LocalDateTime</div>
448+
<div class="col-lg-8" dataFilter>@DateTimeOffset.FromUnixTimeMilliseconds(dev.LocalDateTime)</div>
449+
</div>
450+
}
451+
}
448452
}
449453

450454
@*Notes*@
@@ -482,46 +486,46 @@
482486
@*DeviceStreams*@
483487
@if (dev.Streams.Count > 0)
484488
{
485-
<hr class="m-0" />
489+
<hr class="m-0 mb-1 mt-1" />
486490
<div class="container">
487491
@for (int i = 0; i < dev.Streams.Count; i++)
488492
{
489493
<div class="row">
490494
<div class="row">
491-
<div class="col-lg-2 fw-bold text-muted">Stream@(i)</div>
492-
<div class="col-lg-10">@(dev.Streams[i]?.Name ?? "")</div>
495+
<div class="col-lg-4 fw-bold text-muted">Stream@(i)</div>
496+
<div class="col-lg-8 fw-bold text-muted text-decoration-underline">@(dev.Streams[i]?.Name ?? "")</div>
493497
</div>
494498
<div class="row">
495-
<div class="col-lg-2">CodecType</div>
496-
<div class="col-lg-10">@(dev.Streams[i]?.CodecType ?? "")</div>
499+
<div class="col-lg-4">CodecType</div>
500+
<div class="col-lg-8">@(dev.Streams[i]?.CodecType ?? "")</div>
497501
</div>
498502
<div class="row">
499-
<div class="col-lg-2">Resolution</div>
500-
<div class="col-lg-10">[@(dev.Streams[i]?.Resolution.Width ?? 0) x @(dev.Streams[i]?.Resolution.Height ?? 0)]</div>
503+
<div class="col-lg-4">Resolution</div>
504+
<div class="col-lg-8">[@(dev.Streams[i]?.Resolution.Width ?? 0) x @(dev.Streams[i]?.Resolution.Height ?? 0)]</div>
501505
</div>
502506
<div class="row">
503-
<div class="col-lg-2">URI</div>
507+
<div class="col-lg-4">URI</div>
504508
@try
505509
{
506510
@switch (dev.Streams[i].Status)
507511
{
508512
case Models.StreamStatus.OK:
509-
<div class="col-lg-10">
513+
<div class="col-lg-8">
510514
<a class="btn btn-sm badge bg-success" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;"
511515
data-toggle="tooltip" title="<img src='./thumbnails/@(dev.UUID)/stream_@(i)__1.jpeg' class='img-thumbnail' style='width:100% !important; height:auto !important;'>">
512516
@dev.Streams[i].URI
513517
</a>
514518
</div>
515519
break;
516520
case Models.StreamStatus.ERROR:
517-
<div class="col-lg-10">
521+
<div class="col-lg-8">
518522
<a class="btn btn-sm badge bg-danger" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;">
519523
@dev.Streams[i].URI
520524
</a>
521525
</div>
522526
break;
523527
default:
524-
<div class="col-lg-10">
528+
<div class="col-lg-8">
525529
<a class="btn btn-sm badge bg-warning" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;">
526530
@dev.Streams[i].URI
527531
</a>

‎wwwroot/css/index.css

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@ body {
22
background-color: #3f4549;
33
}
44

5+
.custom-navbar-brand {
6+
font-size: 24px;
7+
font-weight: bold;
8+
color: #ffffff; /* Change the color as needed */
9+
}
10+
511
[data-card="cameraContainer"] {
612
width: 100%;
713
box-sizing: border-box;
814
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
915
background-color: #fff;
10-
border-radius: 0.5rem;
11-
padding: 1rem;
12-
margin: 1rem;
1316
transition: box-shadow 0.3s ease, border-radius 0.3s ease,
1417
background-color 0.3s ease;
1518
}
@@ -78,7 +81,7 @@ body::-webkit-scrollbar-track {
7881
}
7982

8083
@-webkit-keyframes fadein {
81-
from {bottom: 0; opacity: 0;}
84+
from {bottom: 0; opacity: 0;}
8285
to {bottom: 30px; opacity: 1;}
8386
}
8487

@@ -88,7 +91,7 @@ body::-webkit-scrollbar-track {
8891
}
8992

9093
@-webkit-keyframes fadeout {
91-
from {bottom: 30px; opacity: 1;}
94+
from {bottom: 30px; opacity: 1;}
9295
to {bottom: 0; opacity: 0;}
9396
}
9497

0 commit comments

Comments
 (0)