Merge branch 'fazendo-imagens-aparecerem-quando-for-feito-o-upload' into 'development'

Fazer preview das imagens aparecer após o upload

See merge request !128

pinsisApp/src/app/register-equipment/register-equipment.component.html

@@ -77,27 +77,24 @@
           <div style="display: block;">Estado:</div>
           <input type="text" name="state" [(ngModel)]="machineData.state" id="state">
         </div>
+        <img [src]="imgURL" height="200" *ngIf="imgURL" class="selected-image">
 
         <div>
-          <label class="options">
-            <div (click)="scanQRCode()">Escanear QR code</div>
-          </label>
 
           <label class="options" style="border-color: #ff0000;" id="image_upload_button">
             Adicionar Imagem <input type="file" name="image" (change)="onFileSelect($event)" style="display: none;">
           </label>
 
           <label class="options">
-            <div (click)="getLocation()">Geolocalização</div>
+            <div (click)="scanQRCode()">Escanear QR code</div>
           </label>
-        </div>
-        <div>
-          <label class="selected-image">Imagem selecionada: 
-            <p style="display: inline;" id="selected_file">{{machineData.image.name}}</p>
+
+          <label class="options">
+            <div (click)="getLocation()">Geolocalização</div>
           </label>
-          <!-- Botão submit  -->
-          <button type="submit" align="right" class="submit-button">Confirmar</button>
         </div>
+        <!-- Botão submit  -->
+        <button type="submit" class="submit-button">Confirmar</button>
       </form>
 
 

pinsisApp/src/app/register-equipment/register-equipment.component.scss

@@ -105,12 +105,15 @@ input {
     border-radius: 4px;
     cursor: pointer;
 
+    float: right;
+    margin-right: 8%;
+
     &:hover {
         text-decoration: none;
         background:$dark-purple;
     }
 	  @media only screen and (max-width: $break-small+80px) {
-      width: 80%;
+      width: 90%;
       margin-left: 5%;
       margin-right: 5%;
 	  }
@@ -120,7 +123,7 @@ input {
     color: $text-light;
     background-color: $bg-secondary;
     text-align: center;
-    font-size: 18px;
+    font-size: 20px;
     padding: 5px 20px;
 
     margin-top:20px;
@@ -145,18 +148,17 @@ input {
         background:$dark-purple;
     }
 	  @media only screen and (max-width: $break-small+80px) {
-      width: 80%;
+      width: 90%;
       margin-left: 5%;
       margin-right: 5%;
 	  }
 }
 
 .selected-image {
-  font-size: 20px;
   margin-top:20px;
-  margin-left:10px;
-  color: $dark-purple;
-  width: 63%;
+  display: block;
+  margin-left:auto;
+  margin-right:auto;
 }
 
 .label {

pinsisApp/src/app/register-equipment/register-equipment.component.ts

@@ -41,6 +41,7 @@ export class RegisterEquipmentComponent implements OnInit {
 		id: 0,
   }
 
+  imgURL: any;
 
   constructor(private machineService: MachinesService,
               private _router: Router) {
@@ -106,9 +107,6 @@ export class RegisterEquipmentComponent implements OnInit {
         x.style.borderStyle = "solid"
       }
       else { console.log("image_upload_button not found") }
-      x = document.getElementById("selected_file")
-      if (x != null) {x.style.color = "#ff0000"}
-      else { console.log("selected_file not found") }
       v = false
     }
     else {
@@ -118,9 +116,6 @@ export class RegisterEquipmentComponent implements OnInit {
         x.style.borderStyle = "none"
       }
       else { console.log("image_upload_button not found") }
-      x = document.getElementById("selected_file")
-      if (x != null) {x.style.color = "#4f425b"}
-      else { console.log("selected_file not found") }
     }
 
     if (await this.validateDate(this.machineData.date_last_maintenance)) {
@@ -250,6 +245,11 @@ export class RegisterEquipmentComponent implements OnInit {
 
     if(event.target.files.length > 0) {
 			this.machineData.image = event.target.files[0];
+      var reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0])
+      reader.onload = (_event) => {
+        this.imgURL = reader.result;
+      }
 		}
   }
 

pinsisApp/src/app/register-hospital/register-hospital.component.html

@@ -8,31 +8,10 @@
         <div class="input-text">Nome do hospital:</div>
         <input type="text" name="name" [(ngModel)]="hospitalData.name" id="name">
       </div>
-      <!--<div class="input-block">
-        <div class="input-text">Rua:</div>
-        <input type="text" name="address" [(ngModel)]="hospitalData.address" id="address">
-      </div>
-      <div class="input-block">
-        <div class="input-text">Número:</div>
-        <input type="text" name="building_number" [(ngModel)]="hospitalData.building_number" id="building_number">
-      </div>
-      <div class="input-block">
-        <div class="input-text">Bairro:</div>
-        <input type="text" name="district" [(ngModel)]="hospitalData.district" id="district">
-      </div> -->
       <div class="input-block">
         <div class="input-text">Cidade:</div>
         <input type="text" name="city" [(ngModel)]="hospitalData.city" id="city">
       </div>
-      <!--
-      <div class="input-block">
-        <div class="input-text">Estado:</div>
-        <input type="text" name="state" [(ngModel)]="hospitalData.state" id="state">
-      </div>
-      <div class="input-block">
-        <div class="input-text">Região:</div>
-        <input type="text" name="region" [(ngModel)]="hospitalData.region" id="region">
-      </div>-->
       <div class="input-block">
         <div class="input-text">Latitude:</div>
         <input type="text" name="latitude" [(ngModel)]="hospitalData.latitude" id="latitude">
@@ -41,9 +20,7 @@
         <div class="input-text">Longitude:</div>
         <input type="text" name="longitude" [(ngModel)]="hospitalData.longitude" id="longitude">
       </div>
-      <div class="selected-image">Imagem selecionada:
-        <p style="display: inline;" id="selected_file">{{hospitalData.image.name}}</p>
-      </div>
+      <img [src]="imgURL" height="200" *ngIf="imgURL" class="selected-image">
       <label class="file-input" id="image_upload_button">
         Adicionar Imagem <input type="file" name="image" (change)="onFileSelect($event)" style="display:none;">
       </label>

pinsisApp/src/app/register-hospital/register-hospital.component.scss

@@ -96,20 +96,16 @@ input {
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
+    margin-top: 20px;
   }
 }
 
 .selected-image {
-
-  font-size: 20px;
-  display: inline-block;
-  margin-top: 20px;
-  margin-left: 20px;
-
+  display: block;
+  margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
   @media only screen and (max-width: $break-small) {
-    width: 94%;
-    margin-left: 3%;
-    margin-right: 3%;
-    margin-bottom: 10px;
+    margin-top: 20px;
   }
 }

pinsisApp/src/app/register-hospital/register-hospital.component.ts

@@ -20,6 +20,8 @@ export class RegisterHospitalComponent implements OnInit {
     imagePath: 'none',
   }
 
+  imgURL: any;
+
   constructor(private hospitalService: HospitalService,
               private _router: Router,
               public _authService: AuthService) { }
@@ -30,6 +32,11 @@ export class RegisterHospitalComponent implements OnInit {
   onFileSelect (event) {
     if(event.target.files.length > 0) {
       this.hospitalData.image = event.target.files[0];
+      var reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0])
+      reader.onload = (_event) => {
+        this.imgURL = reader.result;
+      }
     }
   }
 
@@ -57,18 +64,12 @@ export class RegisterHospitalComponent implements OnInit {
         x.style.borderStyle = "solid"
       }
       else { console.log("image_upload_button not found") }
-      x = document.getElementById("selected_file")
-      if (x != null) { x.style.color = "#ff0000" }
-      else { console.log("selected_file not found") }
       v = false
     }
     else {
       let x = document.getElementById("image_upload_button")
       if (x != null) { x.style.borderStyle = "none" }
       else { console.log("image_upload_button not found") }
-      x = document.getElementById("selected_file")
-      if (x != null) { x.style.color = "#4f425b" }
-      else { console.log("selected_file not found") }
     }
 
     if (await !this._authService.loggedIn()) {