Added a selector to switch what info is showing on the GPU page

assets/coffee/gpu.coffee

@@ -1,13 +1,39 @@
 si = require('systeminformation')
 
 window.onload = () ->
+  # Set the option selector to trigger an info grab on element change
+  document.getElementById('gpuSelector').addEventListener('change', () ->
+    updateGpuInfo(@value)
+  )
+
+  # Load GPUs into the selector
+  loadGpus()
+
+  # Run the updateGpuInfo function with the default value of 0
+  updateGpuInfo()
+
+loadGpus = () ->
   si.graphics()
     .then((data) ->
-      document.getElementById('gpuInfo').innerText = data.controllers[0].model
+      i = 0
-      document.getElementById('gpuVendor').innerText = data.controllers[0].vendor
+      while i < data.controllers.length
-      document.getElementById('gpuVendorId').innerText = data.controllers[0].vendorId
+        optionElem = document.createElement('option')
-      document.getElementById('gpuVram').innerText = data.controllers[0].vram + 'MB'
+        optionElem.innerText = data.controllers[i].model
-      document.getElementById('gpuBus').innerText = data.controllers[0].bus
+        optionElem.setAttribute 'value', i
+        document.getElementById('gpuSelector').appendChild optionElem
+        i++
+    ).catch((error) ->
+      console.error(error)
+    )
+
+updateGpuInfo = (gpuId = 0) ->
+  si.graphics()
+    .then((data) ->
+      document.getElementById('gpuInfo').innerText = data.controllers[gpuId].model
+      document.getElementById('gpuVendor').innerText = data.controllers[gpuId].vendor
+      document.getElementById('gpuVendorId').innerText = data.controllers[gpuId].vendorId
+      document.getElementById('gpuVram').innerText = data.controllers[gpuId].vram + 'MB'
+      document.getElementById('gpuBus').innerText = data.controllers[gpuId].bus
       console.log(data)
     ).catch((error) ->
       console.error(error)

assets/twig/gpu.twig

@@ -9,6 +9,7 @@
 <header class="row">
   <div class="columns twelve u-text-center">
     <h1>GPU Info</h1>
+    <select id="gpuSelector"></select>
   </div>
 </header>