Latest changes for interactive view

modules/gas-calculation.js

@@ -1,7 +1,12 @@
+// Load all datapoints
 const DataPoint = require('../models/dataPoint');
 
+// Object with methods for needed calculations
 const gasCalculations = {
   total(req, res) {
+    /* Get all instances with a bagheight higher than 20 and lower than 220
+       Has to be lower than 220 because of the fact that the bag can't get higher than
+       220cm. Not lower than 20cm because then the bag can't be filled anymore */
     DataPoint.aggregate([
       {
         $project: {
@@ -11,7 +16,7 @@ const gasCalculations = {
       {
         $match: {
           Bag_Height: {
-            $lte: 240,
+            $lte: 220,
             $gte: 20
           }
         }

src/js/modules/interactive-dashboard.js

@@ -1,84 +1,63 @@
-// /* 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();
+const elements = {
+  tank1: document.getElementById('TANK1'),
+  tank2: document.getElementById('TANK2'),
+  digester: document.getElementById('DIGESTER'),
+  filter: document.getElementById('FILTER'),
+  pomp: document.getElementById('POMP'),
+  bubbles: [
+    document.getElementById('Bubble1'),
+    document.getElementById('Bubble2'),
+    document.getElementById('Bubble3'),
+    document.getElementById('Bubble4')
+  ]
+};
 
-const tank_2 = document.getElementById('Tank2');
-console.log(tank_2);
+const app = {
+  init() {
+    elements.tank1.addEventListener("click", info.firstTank);
+    elements.tank2.addEventListener("click", info.secondTank);
+    elements.digester.addEventListener("click", info.digesterTank);
+    elements.filter.addEventListener("click", info.filterTank);
+    elements.pomp.addEventListener("click", info.pomp);
+    app.getData();
+    animate.bubble();
+  },
+  getData() {
+    console.log('getting data');
+  }
+}
+
+const info = {
+  firstTank() {
+    console.log('first tank')
+  },
+  secondTank() {
+
+  },
+  digesterTank() {
 
-tank_2.addEventListener("mouseover", showInfo)
+  },
+  filterTank() {
 
-function showInfo() {
-  console.log('hover');
+  },
+  pomp() {
+
+  }
+};
+
+const animate = {
+  bubble() {
+    setInterval(function() {
+      elements.bubbles.forEach(function(bubble) {
+        if(bubble.getAttribute('r') == 3.75) {
+          bubble.setAttribute("transition", '6');
+          bubble.setAttribute("r", 6);
+        } else {
+          bubble.setAttribute("r", 3.75);
+        }
+      })
+    }, 1250)
+  }
 }
+
+app.init()

src/scss/04-cells/dashboard.scss

@@ -54,30 +54,31 @@
 }
 
 .interactive-dashboard {
-  padding: 1em;
+  background:
+  main {
+    padding: 0;
+  }
   .interactive {
     position: absolute;
     width: 100vw;
     padding: 1em;
     text-align: center;
     svg {
-      max-width: 60em;
+      max-width: 70em;
     }
   }
 }
 
-#Tank2, #Tank1 {
+.move_up {
   transition: .5s;
 }
 
-#Tank2:hover, #Tank1:hover {
+.move_up:hover {
   transition: .5s;
-  transform: translateY(-30px);
+  transform: scale(1.02);
+  cursor: pointer;
 }
 
-.infoPanel {
-  position: absolute;
-  padding: 1em;
-  background-color: #4d548a;
-  max-width: 8em;
+#Bubble3 {
+  width: 20em!important
 }