Merge branch 'master' of https://github.com/aceleradora-TW/HemoHeroes

app/assets/javascripts/components/modal.js

@@ -2,12 +2,12 @@ var Modal = function(){
 
   return {
     open: function(){
-      const modal = document.getElementById('modal');
+      const modal = document.getElementsByClassName('js-modal')[0];
       modal.style.display = "block";
     },
 
     close: function(){
-      const modal = document.getElementById('modal');
+      const modal = document.getElementsByClassName('js-modal')[0];
       modal.style.display = "none";
     }
   }

app/assets/javascripts/hospital_necessities.js

@@ -1,3 +1,15 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
+
+
+function myFunction(){
+
+  var aPositiveInput = document.getElementById("a_positive_input");
+  if(aPositiveInput.value == "-" || aPositiveInput.value == "+"){
+    alert("Por favor, utilize apenas números maiores que 0!");
+    aPositiveInput.value = null;
+  }
+
+  // document.onkeypress = function(evt) {
+  //   if ()
+  // }
+
+}

app/assets/javascripts/hospital_register.js

@@ -8,7 +8,53 @@ ready(function(){
     };
 
     var validateForm = function(){
-      validateFormService.validateName('js-validateName');
+      var inputName = document.getElementsByClassName('js-validateName')[0];
+      var inputEmail = document.getElementsByClassName('js-validateEmail')[0];
+      var inputCNPJ = document.getElementsByClassName('js-validateCNPJ')[0];
+      var inputCEP = document.getElementsByClassName('js-validateCEP')[0];
+      var inputDistrict = document.getElementsByClassName('js-validateDistrict')[0];
+      var inputStreet = document.getElementsByClassName('js-validateStreet')[0];
+      var inputCity = document.getElementsByClassName('js-validateCity')[0];
+      var inputNumber = document.getElementsByClassName('js-validateNumber')[0];
+      var inputState = document.getElementsByClassName('js-validateState')[0];
+
+
+      inputName.addEventListener('keyup', function(){
+        validateFormService.validateName('js-validateName');
+      })
+
+      inputEmail.addEventListener('keyup', function(){
+        validateFormService.validateEmail('js-validateEmail');
+      })
+
+      inputCNPJ.addEventListener('keyup', function(){
+        validateFormService.validateCNPJ('js-validateCNPJ');
+      })
+
+      inputCEP.addEventListener('keyup', function(){
+        validateFormService.validateCEP('js-validateCEP');
+      })
+
+      inputDistrict.addEventListener('keyup', function(){
+        validateFormService.validateDistrict('js-validateDistrict');
+      })
+
+      inputStreet.addEventListener('keyup', function(){
+        validateFormService.validateStreet('js-validateStreet');
+      })
+
+      inputNumber.addEventListener('keyup', function(){
+        validateFormService.validateNumber('js-validateNumber');
+      })
+
+      inputCity.addEventListener('keyup', function(){
+        validateFormService.validateCity('js-validateCity');
+      })
+
+      inputState.addEventListener('keyup', function(){
+        validateFormService.validateState('js-validateState');
+      })
+
     };
 
     var animateModal = function(){

app/assets/javascripts/services/validate_form_service.js

@@ -3,35 +3,113 @@ var validateFormService = (function(){
 
   return {
     validateName: function(selector){
-      var valueName = document.getElementsByClassName(selector);
+      var valueName = document.getElementsByClassName(selector)[0].value;
+      console.log(valueName);
+
+      if (valueName == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
-      console.log(valueName)
 
-      var errorName = document.getElementById('errorName');
-      //    console.log("chegou aqui");
-      if (valueName == "") {
-        errorName.style.display = "block";
+    validateEmail: function(selector){
+      var valueEmail = document.getElementsByClassName(selector)[0].value;
+      console.log(valueEmail);
+
+      if (valueEmail == "") {
+        console.log("chegou aqui")
         alert('Preencha o campo com seu nome');
-        valueName.focus();
         return false;
       }
-    }
-  }
-})()
+    },
+
+
+
+    validateCNPJ: function(selector){
+      var valueCNPJ = document.getElementsByClassName(selector)[0].value;
+      console.log(valueCNPJ);
+
+      if (valueCNPJ == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
+
+
+    validateCEP: function(selector){
+      var valueCEP = document.getElementsByClassName(selector)[0].value;
+      console.log(valueCEP);
+
+      if (valueCEP == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
+    validateDistrict: function(selector){
+      var valueDistrict = document.getElementsByClassName(selector)[0].value;
+      console.log(valueDistrict);
 
+      if (valueDistrict == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
 
+    validateStreet: function(selector){
+      var valueStreet = document.getElementsByClassName(selector)[0].value;
+      console.log(valueStreet);
 
+      if (valueStreet == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
 
+    validateNumber: function(selector){
+      var valueNumber = document.getElementsByClassName(selector)[0].value;
+      console.log(valueNumber);
 
+      if (valueNumber == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
+    validateCity: function(selector){
+      var valueCity = document.getElementsByClassName(selector)[0].value;
+      console.log(valueCity);
 
+      if (valueCity == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    },
 
+    validateState: function(selector){
+      var valueState = document.getElementsByClassName(selector)[0].value;
+      console.log(valueState);
 
+      if (valueState == "") {
+        console.log("chegou aqui")
+        alert('Preencha o campo com seu nome');
+        return false;
+      }
+    }
 
 
+  }
+})()
 
 
 

app/assets/stylesheets/components/Modal.scss

@@ -2,63 +2,76 @@
 
 .Modal {
   $border-color: #c1c1c1;
+  $overlay-background-color: rgba(0, 0, 0, 0.66);
 
-  border: 1px solid $border-color;
-  border-radius: 5px;
   display: none;
-  margin: 30vh auto 0;
-  max-width: 550px;
-  overflow: hidden;
 
   &::after {
-    background: rgba(0, 0, 0, 0.66);
+    background: $overlay-background-color;
     content: ' ';
     height: 100%;
     left: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
-    z-index: -1;
+    z-index: 1;
+  }
+
+  &-content {
+    border: 1px solid $border-color;
+    border-radius: 5px;
+    max-width: 550px;
+    z-index: 2;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
 
   &-header {
     background-color: #6495ED;
-    padding: 15px;
     overflow: auto;
+    padding: 15px;
   }
 
-  &-step {
+  &-stepBox {
     background: #ffffff;
-    margin: 12px 0 0 15px;
     border-radius: 100%;
     float: left;
     text-align: center;
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
     vertical-align: middle;
+    display: table;
   }
 
-  &-stepText {
+  &-step {
     font-size: 18px;
     font-weight: 800;
-    padding: 6px 0 0 0;
     text-align: center;
-    width: 30px;
-    height: 30px;
+    display: table-cell;
+    vertical-align: middle;
   }
 
-  &-title {
-    font-size: 24px;
+  &-titleBox {
+    margin: 10px;
+    float: left;
+    text-align: center;
+    display: table;
+
+  }
+
+  &-title{
     color: $brand-color;
-    padding-right: 50px;
-    margin-top: 19px;
-    height: 0px;
+    font-size: 24px;
+    vertical-align: middle;
+    display: table-cell;
   }
 
   &-body {
     background-color: $body-color;
-    padding: 15px;
     overflow: auto;
+    padding: 15px;
   }
 
   &-subTitle {
@@ -67,34 +80,34 @@
   }
 
   &-typesRequest {
-    margin: 1%;
     float: left;
+    margin: 1%;
 
     & li {
       font-size: 14px;
       font-weight: bolder;
-      padding-top: 2px;
       margin: 5px;
+      padding-top: 2px;
     }
 
   }
 
-  &-confirmation{
-    padding: 0 15px;
-    margin-top: 15px;
+  &-confirmation {
     border-left: 1px solid $border-color;
     float: right;
+    margin-top: 15px;
+    padding: 0 15px;
     @include mobile {
       border-top: 1px solid $border-color;
-      border-left: none;
+      border-left: 0;
     }
   }
 
   &-buttons {
     margin: 12px 0 0 10px;
 
 
-    & .Button{
+    & .Button {
       margin: 0 10px;
     }