Enable / Disable Progress Bar

- Depending on if the user has set enable or disabled it will hide or display the progress bar
- This will update when user saves settings

Author: programmingKyle

src/index.html

@@ -33,7 +33,7 @@ <h4 style="color: white; padding: 5px 0px; margin: auto 10px;">Clocker</h4>
       <div class="app-content-grid">
         <div class="top-bar-grid">
           <button id="optionsButton" class="fas fa-gear"></button>
-          <div id="progressBarContainer" class="progress-bar-container" style="margin-bottom: 10px;">
+          <div id="progressBarContainer" class="progress-bar-container" style="margin-bottom: 10px; visibility: hidden;">
             <div id="progressBar" class="progress-bar">
             </div>
             <h3 id="progressBarText" class="progress-bar-text">0%</h3>

src/progressBarHandler.js

@@ -1,11 +1,18 @@
 async function progressBar(){
+    const progressBarContainer_el = document.getElementById('progressBarContainer');
     const progressBar_el = document.getElementById('progressBar');
     const progressBarText_el = document.getElementById('progressBarText');
 
     const interval = optionsValues.progressBarSettings.interval;
     const hour = parseInt(optionsValues.progressBarSettings.hour);
     const minute = parseInt(optionsValues.progressBarSettings.minute);
 
+    if (!optionsValues.progressBarSettings.isEnabled) {
+        progressBarContainer_el.style.visibility = 'hidden';
+    } else {
+        progressBarContainer_el.style.visibility = 'visible';
+    }
+
     const total = await api.progressBarHandler({interval});
     const hoursToMinutes = hour * 60;
     const totalMinutes = hoursToMinutes + minute;