water tank auto

by Jithin Raj P R

HTML

<div class="switchWrap">
  <span class="switchWrap_text">Water pump status</span>
  <label class="rocker rocker-small">
    <input type="checkbox">
    <span class="switch-left">ON</span>
    <span class="switch-right">OFF</span>
  </label>

</div>

<div class="tank tank_bottom"  tank-underground>
    <div class="tank_bottom-inpipe"></div>
    <div class="tank_bottom-outpipe"></div>
    <div class="water" style="height: 30%;"></div>
</div>

<div class="tank" tank-top>
    <div class="tank_sensor">
        <div class="tank_sensor-line"></div>
        <div class="tank_sensor-weight"></div>
        <div class="tank_sensor-float" style="top:calc(30% - 10px);"></div>
        <div class="tank_sensor-weight tank_sensor-weightBottom"></div>
    </div>
    <div class="water" style="height: 70%;"></div>
</div>

<div class="labels">
  <div class="forFunctions">
    <div class="waterOutlest">
      <div class="text">Water from Outlet</div>
      <div class="wrap">
        <input type="checkbox" water-outlet />
        <div class="outer">
        </div>
        <div class="inner">
        </div>
      </div>
    </div>
    <div class="waterOutlest">
      <div class="text">Use water from house</div>
      <div class="wrap">
        <input type="checkbox"  house-use />
        <div class="outer">
        </div>
        <div class="inner">
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

html {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  font-size: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin:0;
  padding:0;
}


/* Switch starts here */
.switchWrap{
  display:flex;
  flex-direction:column;
  &_text{
    padding-top:10px;
  }
}

.rocker {
  display: inline-block;
  position: relative;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid #eee;
  
  &-small {
    font-size: 0.75em; /* Sizes the switch */
    margin: 1em;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    border: 0.5em solid #eee;
    border-bottom: 0;
  }

  & input {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

.switch{
  &-left,
  &-right {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 3em;
    transition: 0.2s;
    
    &::before {
      content: "";
      position: absolute;
      width: 0.4em;
      height: 2.45em;
      bottom: -0.45em;
      background-color: #ccc;
      transform: skewY(-65deg);
    }
  }
  
  &-left {
    height: 2.4em;
    width: 2.75em;
    left: 0.85em;
    bottom: 0.4em;
    background-color: #ddd;
    transform: rotate(15deg) skewX(15deg);
    
    &::before {
      left: -0.4em;
    }
  }

  &-right {
    right: 0.5em;
    bottom: 0;
    background-color: #bd5757;
    color: #fff;
    
    &::before {
      right: -0.375em;
      background-color: transparent;
      transform: skewY(65deg);
    }
  }
}

.rocker {
  input:checked{
    & + .switch-left {
      background-color: #0084d0;
      color: #fff;
      bottom: 0px;
      left: 0.5em;
      height: 2.5em;
      width: 3em;
      transform: rotate(0deg) skewX(0deg);

      &::before {
        background-color: transparent;
    ...

JavaScript

const waterPump = {
    init(){
        const [waterStore,waterUse,tankTop,tankBottom] = ['[water-outlet]','[house-use]','[tank-top]','[tank-underground]'];
        waterUse.length && this.waterTank(waterStore, waterUse, tankTop, tankBottom);
    },
    
    
    waterTank(waterStore,waterUse,tankTop,tankBottom){

      class waterFill {
        constructor(triggerIt = 'empty', waterToUse, tank) {
          this.tank = tank;
          this.triggerIt = triggerIt;
          this.waterToUse = waterToUse;
          this.water = Number.parseInt(document.querySelector(`[tank-top] .water`).style.height);
          
        }
        
        waterFlow(){
        	let water = this.water
          
          const waterFlowDirection = (max, water) => () => {
              if(water === max) return water
              else water = water + 1;
              document.querySelector(`[tank-top] .water`).style.height = `${water}%`;
          };
          if(this.triggerIt == 'fill')  this.waterToUse = setInterval(waterFlowDirection(100, water), 100);
          else clearInterval(this.waterToUse);
          return `${this.waterToUse}%`;
        }
        
        waterFlowStop(){
        }
        
      } 
      
    	const houseTank = function(event,todo,tank){
      	let waterToUse = document.querySelector(`${tank} .water`).style.height;
        		waterToUse = Number.parseInt(waterToUse);
        let	water;
        		
            
      	if (event.currentTarget.checked) {
        		const waterCheck = new waterFill(todo, waterToUse, tank);
            water = waterCheck.waterFlow();
            
        }else{
        		const waterStop = new waterFill('stop', waterToUse, tank);
            water = waterStop.waterFlow();
        }
        
        document.querySelector(`${tank} .water`).style.height = water;
      }
      
      document.querySelector(waterUse).addEventListener('change', (event) => houseTank(event,'empty',tankTop));
      
     ...