Fix issue #54

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "eslint.enable": false,
+    "tslint.enable": false
+}

react-frontend/src/actions/alarms.js

@@ -0,0 +1,48 @@
+
+export let overflowAlarm = (currentWaterLevel, currentTankId) => {
+  const dangerousWaterLevel = 98;
+  const audio = new Audio('/sounds/zapsplat_science_fiction_alarm_big_warning_meltdown_wailing_deep_tone_fast_40027');
+    /* sound source: https://www.zapsplat.com/music/big-science-fiction-alarm-siren-warning-of-meltdown-or-catastrophe-wailing-deep-tone-fast/
+       license: https://www.zapsplat.com/license-type/standard-license/ */
+
+  const startAudioAlarm = () => {
+    audio.play();
+    audio.loop = true;
+  };
+
+  const stopAudioAlarm = () => {
+    audio.pause();
+    audio.currentTime = 0;
+  };
+
+  const addStopAlarmButton = () => {
+    let currentTank = document.getElementById(`${currentTankId}`);
+    const stopAlarmButton = document.createElement('button');
+    stopAlarmButton.className = 'alarm-button';
+    stopAlarmButton.style.display = 'flex';
+    stopAlarmButton.style.justifyContent = 'center';
+    stopAlarmButton.style.alignItems = 'center';
+    stopAlarmButton.addEventListener('click', stopAlarm);
+    currentTank.appendChild(stopAlarmButton);
+  };
+
+  const removeStopAlarmButton = (clickedButton) => {
+    clickedButton.parentNode.removeChild(clickedButton);
+  };
+
+  const stopAlarm = (event) => {
+    stopAudioAlarm();
+    removeStopAlarmButton(event.target);
+  };
+
+  // when water level becomes dangerous triggers the alarm
+  const checkWaterLevel = () => {
+    if (currentWaterLevel >= dangerousWaterLevel) {
+      startAudioAlarm();
+      addStopAlarmButton();
+    }
+  };
+
+  const repeatWaterLevelCheck = setInterval(checkWaterLevel, 1000);
+  repeatWaterLevelCheck();
+};

react-frontend/src/actions/tankActions.js

@@ -11,3 +11,4 @@ export const fetchTanks = () => {
     ]
   };
 };
+

react-frontend/src/pages/Home.js

@@ -1,8 +1,11 @@
-import React, { Component } from "react";
-import { TankCircle, TankWaterValue } from "../components/Tank";
-import { Sticker } from "../components/Sticker";
-import { connect } from "react-redux";
-import { fetchTanks } from "../actions/tankActions";
+
+import React, { Component } from 'react'
+import {TankCircle, TankWaterValue} from '../components/Tank';
+import {Sticker} from '../components/Sticker'
+import { connect } from 'react-redux';
+import { fetchTanks } from '../actions/tankActions';
+import {overflowAlarm} from '../actions/alarms';
+
 
 class Home extends Component {
   componentWillMount() {
@@ -38,8 +41,10 @@ class Home extends Component {
                       <span className="tank-title">Tank{tank.id}</span>
                     </div>
                   </center>
+                  {overflowAlarm(tank.value, tank.id)}
                 </div>
               </div>
+
             ))}
           </div>
         </div>