Added toggle button and edited event-detail view

src/app/pages/events/event-detail/event-detail.page.html

@@ -29,11 +29,19 @@
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Calendário</ion-label>
-      <ion-input [(ngModel)]='loadedEvent.CalendarName'></ion-input>
+      <ion-select placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+        <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+        <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+      </ion-select>
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Tipo do evento</ion-label>
-      <ion-input [(ngModel)]='loadedEvent.EventType'></ion-input>
+      <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+        <ion-select-option value="Reunião">Reunião</ion-select-option>
+        <ion-select-option value="Viagem">Viagem</ion-select-option>
+        <ion-select-option value="Conferência">Conferência</ion-select-option>
+        <ion-select-option value="Encontro">Encontro</ion-select-option>
+      </ion-select>
     </ion-item>
     <ion-item>
       <ion-label>Data Início</ion-label>
@@ -147,7 +155,7 @@
 <ion-footer class="ion-no-border">
   <div class="event-detail-buttons">
     <!-- <ion-button shape="round" fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button> -->
-    <ion-button shape="round" class="ion-button-right" (click)="Save()">Gravar</ion-button>
+    <ion-button shape="round" (click)="Save()">Gravar</ion-button>
   </div>
 </ion-footer>
 

src/app/pages/events/event-detail/event-detail.page.scss

@@ -64,15 +64,10 @@ ion-card{
   margin: 10px auto;
 }
 .event-detail-buttons ion-button{
-  width: 45%;
-  margin-bottom: 15px;
-}
-.ion-button-left{
-  float: left;
-  background: none;
-}
-.ion-button-right{
-  float: right;
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+  margin-bottom: 25px;
 }
 .ion-icon-delete{
   font-size: 22px;

src/app/pages/events/events.page.html

@@ -20,6 +20,13 @@
         </ion-label>
       </ion-item>
     </ion-title>
+    <!-- customized TOGGLE button -->
+    <label class="switch"><input type="checkbox" id="togBtn">
+      <div class="slider round">
+      <!--ADDED HTML --><span class="mdgpr">MDGPR</span><span class="pr">PR</span><!--END-->
+    </div>
+  </label>
+
   </ion-toolbar> 
 </ion-header>
 

src/app/pages/events/events.page.scss

@@ -146,4 +146,91 @@
       color: #666666;
       font-size: 20px;
     }
-    
+
+
+
+
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 110px;
+      height: 34px;
+      float: right;
+      margin-right: 37px;
+    }
+    
+    .switch input {display:none;}
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #e16817;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: #e16817;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #ffffff;
+      border: 1px solid #e16817;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(55px);
+      -ms-transform: translateX(55px);
+      transform: translateX(55px);
+    }
+    
+    /*------ ADDED CSS ---------*/
+    .pr
+    {
+      display: none;
+      text-align: left;
+    }
+    
+    .pr, .mdgpr
+    {
+      color: white;
+      position: absolute;
+      transform: translate(-50%,-50%);
+      top: 50%;
+      left: 50%;
+      font-size: 10px;
+      font-family: Verdana, sans-serif;
+    }
+    
+    input:checked+ .slider .pr
+    {display: block;}
+    
+    input:checked + .slider .mdgpr
+    {display: none;
+      color: white;}
+    
+    /*--------- END --------*/
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;}

src/app/pages/events/events.page.ts

@@ -33,6 +33,8 @@ export class EventsPage implements OnInit {
   officialeventsList: Event[];
   personaleventsList: Event[];
 
+  customText = false;
+
   showLoader: boolean = true;
 
   constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }