Add battery informations

src/index.css

@@ -52,6 +52,61 @@ hr {
     font-weight: bold;
 }
 
+#app .subtitle {
+    font-size: 1em;
+    font-weight: bold;
+}
+
+#app .subtitle #cycleNumber,
+#app .subtitle #condition {
+  cursor: pointer;
+  z-index: 1;
+}
+
+
+#app .subtitle .normal {
+  color: lightgreen;
+}
+
+#app .subtitle .warning {
+  color: yellow;
+}
+
+#app .subtitle .danger {
+  color: red;
+}
+
+#app .info {
+  position: absolute;
+  background: #333;
+  padding: 1em;
+  border-radius: 8px;
+  font-weight: normal;
+  width: 100%;
+  min-height: 30%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .3s ease-in;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#app .info .close {
+  text-align: right;
+  color: #3F8EFC;
+  cursor: pointer;
+}
+
+#app .info.active {
+  opacity: 1;
+  transition: opacity .3s ease-in;
+  pointer-events: auto;
+  z-index: 2;
+}
+
 #app .link {
     color: #3F8EFC;
     font-size: 1em;
@@ -74,6 +129,7 @@ hr {
 
 #settings #slider {
     padding: 1em .6em;
+    z-index: 0
 }
 
 #settings #slider-cont {

src/index.html

@@ -20,7 +20,20 @@
     <div class="title">Current:
       <span id="currentBattery"></span>
     </div>
-    <hr/>
+    <div class="subtitle">Cycle:
+      <span id="cycleNumber"></span>
+    </div>
+    <div class="subtitle">Remaining:
+      <span id="remaining"></span>
+    </div>
+    <div class="subtitle">Condition:
+      <span id="condition"></span>
+    </div>
+    <div class="info">
+      <div class="infoContent"></div>
+      <span class="close">Close</span>
+    </div>
+    <hr />
 
     <div id="settings">
       <div class="title">Limits</div>
@@ -37,15 +50,15 @@
           <span id="max-value"></span>
         </div>
       </div>
-      <br/>
+      <br />
       <small>Set at which battery level Volta should notify you</small>
     </div>
-    <hr/>
+    <hr />
 
     <div class="title">Start on boot
       <input type="checkbox" id="launch">
     </div>
-    <hr/>
+    <hr />
     <div class="title link" id="close">Close Window</div>
     <div class="title link" id="quit">Quit App</div>
 

src/index.js

@@ -7,8 +7,11 @@ const darkMode = require('dark-mode')
 
 let rangeSlider
 let autoLaunch
+let batteryCondition
+let cycle
 
 document.addEventListener('DOMContentLoaded', () => {
+
   document.getElementById('quit').addEventListener('click', () => {
     ipcRenderer.send('quit')
   })
@@ -23,6 +26,48 @@ document.addEventListener('DOMContentLoaded', () => {
       document.querySelector('#app').classList.add('light')
     }
   })
+
+  document.querySelector('.close').addEventListener('click', function() {
+    document.querySelector('.info').classList.toggle('active')
+  })
+
+  document.getElementById('condition').addEventListener('click', function() {
+    let infoContent = document.querySelector('.infoContent')
+
+    document.querySelector('.info').classList.toggle('active')
+
+    switch(batteryCondition) {
+      case(1):
+        infoContent.innerText = 'The battery is functioning normally.'
+        break;
+      case(2):
+        infoContent.innerText = 'The battery is functioning normally but holds less charge than it did when it was new. You should monitor the health of the battery periodically.'
+        break;
+      case(3):
+        infoContent.innerText = 'The battery is functioning normally but holds significantly less charge than it did when it was new. You can safely continue using your computer, but if its lowered charging capacity is affecting your experience.'
+        break;
+      case(4):
+        infoContent.innerText = 'The battery isn’t functioning normally. You can safely use your Mac only when it\'s connected to an appropriate power adapter.'
+    }
+  })
+
+  document.getElementById('cycleNumber').addEventListener('click', function() {
+    let infoContent = document.querySelector('.infoContent')
+
+    document.querySelector('.info').classList.toggle('active')
+
+    // TODO: write sentencees with a sense.
+    switch(cycle) {
+      case(1):
+        infoContent.innerText = 'Your battery is healthy and in the first part of it\'s life.'
+        break;
+      case(2):
+        infoContent.innerText = 'Your battery is now in the second part of it\'s life. The maximum limit for all modern Macbooks is 1000 cycles.'
+        break;
+      case(3):
+        infoContent.innerText = 'According to Apple, all Macbook models since 2008/2009 have a cycle limit of 1000. After this limit, your battery is considered consumed.'
+    }
+  })
 })
 
 function iniSlider() {
@@ -68,3 +113,53 @@ ipcRenderer.on('launch', (event, checked) => {
 ipcRenderer.on('battery', (event, value) => {
   document.getElementById('currentBattery').innerText = `${value}%`
 })
+
+ipcRenderer.on('cycleNumber', (event, value) => {
+  let cycleElement = document.getElementById('cycleNumber')
+  cycleElement.innerText = `${value}`
+
+  if (parseInt(value) < 500) {
+    cycleElement.classList.add('normal')
+    cycle = 1
+  } else if (value >= 500 && value < 1000) {
+    cycleElement.classList.add('warning')
+    cycle = 2
+  } else if (value >= 1000) {
+    cycleElement.classList.add('danger')
+    cycle = 3
+  }
+
+  // https://support.apple.com/en-us/HT201585 600 is the average value of all models
+  // 1000 is the max cycle number of the best laptop, so over 1000 is for all models too much
+})
+
+ipcRenderer.on('remaining', (event, value) => {
+  if (value == '') {
+    value = 'calculating...'
+  }
+  document.getElementById('remaining').innerText = `${value}`
+})
+
+ipcRenderer.on('condition', (event, value) => {
+  let conditionElement = document.getElementById('condition')
+  let infoElement = document.querySelector('infocondition')
+  conditionElement.innerText = `${value}`
+
+  switch(value.trim()) {
+    case("Normal"):
+      conditionElement.classList.add('normal')
+      batteryCondition = 1
+      break;
+    case("Replace Soon"):
+      conditionElement.classList.add('warning')
+      batteryCondition = 2
+      break;
+    case("Replace Now"):
+      conditionElement.classList.add('danger')
+      batteryCondition = 3
+      break;
+    case("Service Battery"):
+      conditionElement.classList.add('danger')
+      batteryCondition = 4
+  }
+})

src/main.js

@@ -60,7 +60,7 @@ const createTray = () => {
   tray.on('click', toggleWindow)
 }
 
-nativeTheme.on('updated', function () {
+nativeTheme.on('updated', function() {
   tray.destroy()
   createTray()
   window.reload()
@@ -150,7 +150,7 @@ function sendMax() {
 
 let level = '--';
 setInterval(() => {
-  exec('pmset -g batt | egrep "([0-9]+\%)" -o', function (err, stdout, stderr) {
+  exec('pmset -g batt | egrep "([0-9]+\%)" -o', function(err, stdout, stderr) {
     if (err) {
       console.log(error.stack)
       console.log('Error code: ' + error.code)
@@ -168,5 +168,38 @@ setInterval(() => {
   else if (level >= limits.max) sendMax()
   else numMax = numMin = 0
 
+  exec("system_profiler SPPowerDataType | grep 'Cycle Count' | awk '{print $3}'", function(err, stdout, stderr) {
+    let cycleNumber
+    if (err) {
+      console.log(err.stack)
+      console.log('Error code: ' + err.code)
+      console.log('Signal received: ' + err.signal)
+    }
+    cycleNumber = stdout
+    window.webContents.send('cycleNumber', cycleNumber)
+  })
+
+  exec("pmset -g batt | awk '{print $5}' | grep :", function(err, stdout, stderr) {
+    let remaining = '--'
+    if (err) {
+      console.log(err.stack)
+      console.log('Error code: ' + err.code)
+      console.log('Signal received: ' + err.signal)
+    }
+    remaining = stdout
+    window.webContents.send('remaining', remaining)
+  })
+
+  exec("system_profiler SPPowerDataType | grep Condition | awk '{print $2}'", function(err, stdout, stderr) {
+    let condition
+    if (err) {
+      console.log(err.stack)
+      console.log('Error code: ' + err.code)
+      console.log('Signal received: ' + err.signal)
+    }
+    condition = stdout
+    window.webContents.send('condition', condition)
+  })
+
   window.webContents.send('battery', level)
 }, 3000)