Replace spinners with native js variant

Author: stnkl

data/index.css

@@ -99,7 +99,7 @@ input, textarea {
 	margin: 0px 4px;
 }
 .form-control {
-	border-width: 0px;
+	border-width: 0px !important;
 }
 .form-check {
 	margin-top: 20px;
@@ -156,3 +156,41 @@ body .form-range::-moz-range-progress {
 	max-width: 450px;
 	margin: auto;
 }
+.spinner {
+	padding: 10px 0px;
+}
+.spinner .btn-spinner {
+    padding: 0px 5px;
+    font-size: 19px;
+	font-weight: bold;
+    cursor: pointer;
+    user-select: none;
+	vertical-align: middle;
+}
+.spinner .btn-spinner:hover {
+    color: white;
+}
+.spinner .spinner-input {
+    -moz-appearance: textfield;
+    -webkit-appearance: none;
+    width: 100px;
+    height: 32px;
+    border: 1px solid #6E6F7A;
+    border-radius: 5px;
+    color: #000;
+    text-align: center;
+    padding: 0.375rem 0.75rem;
+	line-height: 1.5;
+}
+.spinner input::-webkit-outer-spin-button,
+.spinner input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.spinner input[type=number]{
+    -moz-appearance: textfield;
+}
+.form-spinner-label {
+	flex: 1;
+	padding-top: 4px;
+}

data/index.htm

@@ -48,16 +48,27 @@ <h5 class="offcanvas-title">Settings</h5>
         <button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
       </div>
       <div class="offcanvas-body">
+
         <h6>Startup animation</h6>
         <div class="form-check form-switch">
           <input type="checkbox" class="form-check-input" id="useStartupAnimation" data-bs-toggle="collapse" data-bs-target="#useStartupAnimationCollapse" aria-controls="useStartupAnimationCollapse">
           <label class="form-check-label" for="useStartupAnimation">Enabled</label>
         </div>
         <div id="useStartupAnimationCollapse" class="collapse">
-          <label id="startupAnimationLabel" for="startupAnimation" class="form-label">Animation</label>
+          <label for="startupAnimation" class="form-label">Animation</label>
           <select class="form-select" id="startupAnimation"></select>
         </div>
 
+        <h6>Time</h6>
+        <div class="spinner d-flex">
+          <label for="timeZone" class="form-spinner-label">Time zone (GMT)</label>
+          <input id="timeZone" class="form-control" type="number" min="-23" max="23" step="1" value="0" />
+        </div>
+        <div class="form-check form-switch">
+          <input type="checkbox" class="form-check-input" id="summerTime">
+          <label class="form-check-label" for="summerTime">Summer time</label>
+        </div>
+
         <h6>Alarm</h6>
         <div class="form-check form-switch">
           <input type="checkbox" class="form-check-input" id="alarmEnabled" data-bs-toggle="collapse" data-bs-target="#alarmEnabledCollapse" aria-controls="alarmEnabledCollapse">
@@ -66,8 +77,10 @@ <h6>Alarm</h6>
         <div id="alarmEnabledCollapse" class="collapse">
           <label for="alarmTime" class="form-label">Time</label>
           <input id="alarmTime" type="time" class="form-control">
-          <label for="alarmDuration" class="form-label">Duration</label>
-          <input id="alarmDuration" name="alarmDuration">
+          <div class="spinner d-flex mt-3">
+            <label for="alarmDuration" class="form-spinner-label">Duration (min)</label>
+            <input id="alarmDuration" class="form-control" type="number" min="1" max="1439" step="1" value="1" />
+          </div>
           <label for="alarmAnimation" class="form-label">Animation</label>
           <select class="form-select" id="alarmAnimation"></select>
           <label for="postAlarmAnimation" class="form-label">Animation (timer finished)</label>
@@ -80,22 +93,20 @@ <h6>Sunset</h6>
           <label class="form-check-label" for="sunsetEnabled">Enabled</label>
         </div>
         <div id="sunsetEnabledCollapse" class="collapse">
-          <label for="sunsetDuration" class="form-label">Duration</label>
-          <input id="sunsetDuration" name="sunsetDuration">
-          <label for="sunsetOffset" class="form-label">Offset</label>
-          <input id="sunsetOffset" name="sunsetOffset">
+          <div class="spinner d-flex">
+            <label for="sunsetDuration" class="form-spinner-label">Duration (min)</label>
+            <input id="sunsetDuration" class="form-control" type="number" min="1" max="1439" step="1" value="1" />
+          </div>
+          <div class="spinner d-flex">
+            <label for="sunsetOffset" class="form-spinner-label">Offset (min)</label>
+            <input id="sunsetOffset" class="form-control" type="number" min="-1439" max="1439" step="1" value="0" />
+          </div>
           <label for="sunsetAnimation" class="form-label">Animation</label>
           <select class="form-select" id="sunsetAnimation"></select>
           <label for="longitude" class="form-label">Longitude</label>
           <input type="text" class="form-control" id="longitude" name="longitude">
           <label for="latitude" class="form-label">Latitude</label>
           <input type="text" class="form-control" id="latitude" name="latitude">
-          <label for="timeZone" class="form-label">Time zone</label>
-          <input id="timeZone" name="timeZone">
-          <div class="form-check form-switch">
-            <input type="checkbox" class="form-check-input" id="summerTime">
-            <label class="form-check-label" for="summerTime">Summer time</label>
-          </div>
         </div>
       </div>
 
@@ -128,9 +139,7 @@ <h6>Sunset</h6>
       <div id="${colorPickerId}" class="text-center collapse"></div>
     </script>
 
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/3.1.2/jquery.bootstrap-touchspin.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
     <script src="index.js"></script>
   </body>

data/index.js

@@ -1,10 +1,10 @@
 let connection;
-let ws_queue;
-let ws_cooldown_timer;
+let queue;
+let cooldownTimer;
 
 function openWebsocketConnection() {
-  const ws_uri =  'ws://' + (location.hostname ? location.hostname : 'localhost') + ':81/';
-  connection = new WebSocket(ws_uri, ['arduino']);
+  const uri = 'ws://' + (location.hostname ? location.hostname : 'localhost') + ':81/';
+  connection = new WebSocket(uri, ['arduino']);
   connection.binaryType = 'arraybuffer';
   connection.onopen = function (e) {
     document.getElementById('navbarTitle').innerHTML = 'FastLEDHub';
@@ -23,6 +23,45 @@ function openWebsocketConnection() {
   };
 }
 
+function setupSpinners() {
+  const spinners = document.getElementsByClassName('spinner');
+  [].forEach.call(spinners, (spinnerDiv) => {
+      const inputElement = spinnerDiv.getElementsByTagName('input')[0];
+      inputElement.classList.add('spinner-input');
+
+      const buttonDec = document.createElement("span");
+      buttonDec.classList.add('btn-spinner', 'btn-spinner-dec');
+      buttonDec.innerHTML = '−';
+      buttonDec.addEventListener('click', (ev) => {
+          const attrMin = inputElement.getAttribute('min');
+          const attrStep = inputElement.getAttribute('step');
+          const value = Number(inputElement.value);
+          const step = attrStep ? Number(attrStep) : 1;
+          const newValue = value - step;
+          if (value !== newValue) {
+              inputElement.value = attrMin ? Math.max(Number(attrMin), newValue) : newValue;
+          }
+      });
+
+      const buttonInc = document.createElement("span");
+      buttonInc.classList.add('btn-spinner', 'btn-spinner-inc');
+      buttonInc.innerHTML = '+';
+      buttonInc.addEventListener('click', (ev) => {
+          const attrMin = inputElement.getAttribute('max');
+          const attrStep = inputElement.getAttribute('step');
+          const value = Number(inputElement.value);
+          const step = attrStep ? Number(attrStep) : 1;
+          const newValue = value + step;
+          if (value !== newValue) {
+              inputElement.value = attrMin ? Math.min(Number(attrMin), newValue) : newValue;
+          }
+      });
+
+      inputElement.insertAdjacentElement('beforebegin', buttonDec);
+      inputElement.insertAdjacentElement('afterend', buttonInc);
+  });
+}
+
 function displayConnectedState(connected) {
   document.getElementById('settingsButton').style.display = connected ? 'block' : 'none';
   document.getElementById('controlsWrapper').style.display = connected ? 'block' : 'none';
@@ -168,27 +207,27 @@ function sendConfig() {
 }
 
 function sendBytes(bytes) {
-  ws_queue = bytes;
+  queue = bytes;
 
-  if (ws_cooldown_timer)
+  if (cooldownTimer)
     return;
 
   sendBytesQueue()
-  ws_cooldown_timer = setTimeout(() => {
-    ws_cooldown_timer = null;
+  cooldownTimer = setTimeout(() => {
+    cooldownTimer = null;
     sendBytesQueue();
   }, 15);
 }
 
 function sendBytesQueue() {
-  if (!ws_queue || connection.readyState != 1)
+  if (!queue || connection.readyState != 1)
     return;
 
-  const data = Uint8Array.from(ws_queue);
+  const data = Uint8Array.from(queue);
   connection.send(data.buffer);
   console.log('Sent bytes: ' + data);
 
-  ws_queue = null;
+  queue = null;
 }
 
 function sendText(text) {
@@ -204,12 +243,9 @@ function sendText(text) {
 window.onload = () => {
   openWebsocketConnection();
 
+  setupSpinners();
+
   settingsOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
     sendConfig();
   });
-
-  $('#alarmDuration').TouchSpin({ min: 1, max: 1439, postfix: 'minutes' });
-  $('#timeZone').TouchSpin({ min: -23, max: 23, prefix: 'GMT+' });
-  $('#sunsetDuration').TouchSpin({ min: 1, max: 1439, postfix: 'minutes' });
-  $('#sunsetOffset').TouchSpin({ min: -1439, max: 1439, postfix: 'minutes' });
 };