M3 calculations + some interactive updates

modules/gas-calculation.js

@@ -0,0 +1,43 @@
+const DataPoint = require('../models/dataPoint');
+
+const gasCalculations = {
+  total(req, res) {
+    DataPoint.aggregate([
+      {
+        $project: {
+          Bag_Height: "$Bag_Height",
+        }
+      },
+      {
+        $match: {
+          Bag_Height: {
+            $lte: 240,
+            $gte: 20
+          }
+        }
+      }
+    ], (err, results) => {
+      totalData = {
+        used: 0,
+        generated: 0
+      }
+      let last = 0;
+      results.forEach(function(result) {
+        totalGas = 2.82 * 2.34 * (result.Bag_Height / 100);
+        if(last === 0) {
+          last = totalGas;
+        } else if(totalGas > last) {
+          totalData.generated += totalGas - last;
+        } else if(totalGas < last) {
+          console.log(last - totalGas)
+          totalData.used += last - totalGas;
+        }
+        last = totalGas;
+      })
+      res.send(totalData)
+    })
+
+  }
+}
+
+module.exports = gasCalculations;

routes/api.js

@@ -6,6 +6,7 @@ const DataPoint = require('../models/dataPoint');
 const StatusPoint = require('../models/statusPoint');
 const router = express.Router();
 const usageCalculation = require('../modules/usage-calculation');
+const gasCalculation = require('../modules/gas-calculation');
 const config = require('../modules/config');
 
 router.get('/range', (req, res, next) => {
@@ -145,6 +146,10 @@ router.get('/status', (req, res, next) => {
   }
 });
 
+router.get('/status/gas', (req, res, next) => {
+  gasCalculation.total(req, res);
+});
+
 router.get('/status/range/:range', (req, res, next) => {
   if (req.param('api_key') && req.param('api_key') == process.env.API_KEY) {
     const range = req.params.range;

src/js/modules/interactive-dashboard.js

@@ -1,71 +1,84 @@
-/* ALL IMPORTANT CONFIG DATA
------------------------------------------------- */
-const config = {
-  allMaps: [],
-  actualMap: document.getElementsByTagName('map')[0],
-  allAreas: false,
-  areaCoords: [],
-  vector: false,
-  timer: false
-};
+// /* ALL IMPORTANT CONFIG DATA
+// ------------------------------------------------ */
+// const config = {
+//   allMaps: [],
+//   actualMap: document.getElementsByTagName('map')[0],
+//   allAreas: null,
+//   areaCoords: [],
+//   vector: null,
+// };
+//
+// /* RECALCULATION FUNCTIONALITY
+// ------------------------------------------------ */
+// const RecalculateImageMap = {
+//   init() {
+//     /* AUTOMATICALLY UPDATE COORDINATES ON RESIZED WINDOW
+//     ------------------------------------------------ */
+//     window.addEventListener('resize', ImageMapSetup.init);
+//     if (!config.actualMap.newSize) {
+//       RecalculateImageMap.start();
+//     }
+//   },
+//   start() {
+//     console.log(config.areaCoords.length)
+//     if(config.areaCoords.length >= 3) {
+//       console.log('fired')
+//       config.areaCoords.splice(3,6)
+//     }
+//     config.allAreas = config.actualMap.getElementsByTagName('area');
+//     config.vector = document.getElementById('interactive_vector');
+//     /* ALL COORDINATES TO ARRAY
+//     ------------------------------------------------ */
+//     for (let i = 0; i < config.allAreas.length; i++) {
+//       const coords = config.allAreas[i].coords;
+//       config.areaCoords.push(coords.replace(/ *, */g, ',').replace(/ +/g, ','));
+//     }
+//     RecalculateImageMap.resize();
+//   },
+//   resize() {
+//     /* FOR EACH AREA => RESIZE THE COORDINATES
+//     ------------------------------------------------ */
+//     config.areaCoords.forEach(function(area, i) {
+//       config.allAreas[i].coords = RecalculateImageMap.scale(area);
+//     });
+//   },
+//   scale(area) {
+//     const allValues = area.split(',');
+//     /* CHECK FOR DIFFERENCE IN SCREENSIZE
+//     ------------------------------------------------ */
+//     let totalScale = config.vector.width / config.vector.naturalWidth;
+//     let newArea = [];
+//     /* CHANGE EACH COORDINATE BASED ON THE NEW SCALE (DIFFERENCE SINCE LAST WIDTH)
+//     ------------------------------------------------ */
+//     allValues.map(function(coordinate) {
+//       let result = Math.round(Number(coordinate) * totalScale);
+//       newArea.push(result);
+//     });
+//     return newArea;
+//   }
+// };
+//
+// /* INITIALIZE RESIZING
+// ------------------------------------------------ */
+// const ImageMapSetup = {
+//   init() {
+//     ImageMapSetup.start(config.actualMap);
+//   },
+//   start(element) {
+//     if (element) {
+//       RecalculateImageMap.init(element);
+//       config.allMaps.push(element);
+//     }
+//   }
+// };
+//
+// ImageMapSetup.init();
 
-/* RECALCULATION FUNCTIONALITY
------------------------------------------------- */
-const RecalculateImageMap = {
-  init() {
-    /* AUTOMATICALLY UPDATE COORDINATES ON RESIZED WINDOW
-    ------------------------------------------------ */
-    window.addEventListener('resize', ImageMapSetup.init);
-    if (!config.actualMap.newSize) {
-      RecalculateImageMap.start();
-    }
-  },
-  start() {
-    config.allAreas = config.actualMap.getElementsByTagName('area');
-    config.vector = document.getElementById('interactive_vector');
-    /* ALL COORDINATES TO ARRAY
-    ------------------------------------------------ */
-    for (let i = 0; i < config.allAreas.length; i++) {
-      const coords = config.allAreas[i].coords;
-      config.areaCoords.push(coords.replace(/ *, */g, ',').replace(/ +/g, ','));
-    }
-    RecalculateImageMap.resize();
-  },
-  resize() {
-    /* FOR EACH AREA => RESIZE THE COORDINATES
-    ------------------------------------------------ */
-    config.areaCoords.forEach(function(area, i) {
-      config.allAreas[i].coords = RecalculateImageMap.scale(area);
-    });
-  },
-  scale(area) {
-    const allValues = area.split(',');
-    /* CHECK FOR DIFFERENCE IN SCREENSIZE
-    ------------------------------------------------ */
-    let totalScale = config.vector.width / config.vector.naturalWidth;
-    let newArea = [];
-    /* CHANGE EACH COORDINATE BASED ON THE NEW SCALE (DIFFERENCE SINCE LAST WIDTH)
-    ------------------------------------------------ */
-    allValues.map(function(coordinate) {
-      let result = Math.round(Number(coordinate) * totalScale);
-      newArea.push(result);
-    });
-    return newArea;
-  }
-};
+const tank_2 = document.getElementById('Tank2');
+console.log(tank_2);
 
-/* INITIALIZE RESIZING
------------------------------------------------- */
-const ImageMapSetup = {
-  init() {
-    ImageMapSetup.start(config.actualMap);
-  },
-  start(element) {
-    if (element) {
-      RecalculateImageMap.init(element);
-      config.allMaps.push(element);
-    }
-  }
-};
+tank_2.addEventListener("mouseover", showInfo)
 
-ImageMapSetup.init();
+function showInfo() {
+  console.log('hover');
+}

src/scss/04-cells/dashboard.scss

@@ -59,8 +59,25 @@
     position: absolute;
     width: 100vw;
     padding: 1em;
-    img {
-      max-width: 100%;
+    text-align: center;
+    svg {
+      max-width: 60em;
     }
   }
 }
+
+#Tank2, #Tank1 {
+  transition: .5s;
+}
+
+#Tank2:hover, #Tank1:hover {
+  transition: .5s;
+  transform: translateY(-30px);
+}
+
+.infoPanel {
+  position: absolute;
+  padding: 1em;
+  background-color: #4d548a;
+  max-width: 8em;
+}