Skip to content

Commit

Permalink
2.4.3
Browse files Browse the repository at this point in the history 
- redesign loader to use additoinal small modal window
- fixed path in auth.php
- fixed parsing html entities by json while using error reporting
- updated show/hide logic
- fixed bug with choosing device clearing out after fetching parameters
- release 2.4.3
  • Loading branch information
@PJanisio
PJanisio committed Jul 2, 2024
1 parent 0692bb5 commit 0d50c8b
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 92 deletions.
7 changes: 7 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,13 @@
.changed-value {
color: green;
}
#monitoringControls {
display: none;
}
#deviceControl.border {
border: 1px solid #ccc;
padding: 10px;
}
@keyframes pulse {
0% { transform: scale(0.75); }
50% { transform: scale(1.25); }
Expand Down
71 changes: 51 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Sonoff - ewelink device monitoring</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/styles.css?v=5">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
Expand Down Expand Up @@ -36,7 +36,7 @@ <h1 class="text-center w-100" id="animatedTitle">
<div id="loader-text" class="mt-2">Connecting and fetching data...</div>
</div>
<div class="mb-3">
<label for="deviceId" class="form-label">Device ID or Name:</label>
<label for="deviceId" class="form-label">Choosing device:</label>
<select id="deviceId" name="deviceId" class="form-control"></select>
</div>
<div id="parameters" class="mb-3" style="display: none;">
Expand All @@ -52,39 +52,39 @@ <h2 class="text-decoration-underline">Select Parameters to Monitor <span>&#9660;
</div>
<button id="startMonitoring" class="btn btn-success mt-2" style="display: none;">Start Monitoring</button>
</div>
<div id="monitoringControls" class="mb-3">
<div id="monitoringControls" class="mb-3" style="display: none;">
<div class="form-group">
<label for="requestInterval" class="form-label">Request Interval (seconds):</label>
<input type="number" id="requestInterval" name="requestInterval" class="form-control" value="5">
</div>
<button id="stopMonitoring" class="btn btn-danger mt-2" style="display: none;">Stop Monitoring</button>
</div>
<!-- Update Device Control Section -->
<div id="deviceControl" class="mb-3" style="display: none;">
<h2>Device Control</h2>
<div id="deviceControl" class="mb-3 border p-3" style="display: none;">
<h2>Device Control</h2>
<div id="multiChannelToggles">
<!-- Dynamic Toggle Switches will be added here -->
<!-- Dynamic Toggle Switches will be added here -->
</div>
<div class="d-flex justify-content-start mt-2">
<button id="advancedControl" class="btn btn-warning me-2">Advanced Control</button>
<button id="stopMonitoring" class="btn btn-danger">Stop Monitoring</button>
</div>
<button id="advancedControl" class="btn btn-warning mt-2">Advanced Control</button>
</div>

<div id="deviceData" class="mb-3">
<div id="deviceData" class="mb-3" style="display: none;">
<h2>Live Data</h2>
<pre id="liveData" class="border p-3"></pre>
</div>
<div id="heartbeat" class="mb-3">
<div id="heartbeat" class="mb-3" style="display: none;">
<h2>Heartbeat <span id="ws-icon" class="ws-icon ws-offline"></span></h2>
<pre id="heartbeatLog" class="border p-3"></pre>
</div>
<div id="websocketsStats" class="mb-3">
<div id="websocketsStats" class="mb-3" style="display: none;">
<h2>Websockets Stats</h2>
<pre id="answerTimeLog" class="border p-3"></pre>
</div>
<div id="httpStats" class="mb-3" style="display: none;">
<h2>HTTP Stats</h2>
<pre id="answerTimeLogHttp" class="border p-3"></pre>
</div>
<div id="changesLog" class="mb-3">
<div id="changesLog" class="mb-3" style="display: none;">
<h2>Changes Log</h2>
<div id="changesContainer" class="log-container"></div>
</div>
Expand All @@ -102,12 +102,6 @@ <h5 class="modal-title" id="advancedControlModalLabel">Advanced Control</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modal-loader" class="mt-2">
<div class="progress" style="height: 30px;">
<div id="modal-loader-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
</div>
<div id="modal-loader-text" class="mt-2">Connecting and fetching data...</div>
</div>
<p class="text-danger">Please carefully choose parameters and values for change, in case of error you could have to pair device again and in worst case your device can be broken.</p>
<form id="advancedControlForm">
<div class="row" id="advancedControlFormContent">
Expand All @@ -122,6 +116,43 @@ <h5 class="modal-title" id="advancedControlModalLabel">Advanced Control</h5>
</div>
</div>
</div>

<!-- Modal for Progress -->
<div class="modal fade" id="progressModal" tabindex="-1" aria-labelledby="progressModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="progressModalLabel">Working...</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="progress" style="height: 30px;">
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
</div>
<div id="progressText" class="mt-2">Initializing...</div>
</div>
</div>
</div>
</div>

<!-- Small Modal for Advanced Control Progress -->
<div class="modal fade" id="modalProgressModal" tabindex="-1" aria-labelledby="modalProgressModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalProgressModalLabel">Working...</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="progress" style="height: 30px;">
<div id="modal-loader-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
</div>
<div id="modal-loader-text" class="mt-2">Initializing...</div>
</div>
</div>
</div>
</div>

<script src="js/scripts.js?v=<?php echo time(); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
Expand Down
Loading

0 comments on commit 0d50c8b

Please sign in to comment.