styled toggle button and Added alert service

src/app/pages/cal-modal/cal-modal.page.html

@@ -48,7 +48,7 @@
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-label>Selecione o tipo de evento</ion-label>
+    <ion-label>Tipo de evento</ion-label>
     <ion-select  [(ngModel)]="postEvent.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>

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

@@ -20,10 +20,11 @@
         </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-->
+      <!--ADDED HTML --><span class="mdgpr" (click)="showAlert()">MDGPR</span><span class="pr">PR</span><!--END-->
     </div>
   </label>
 

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

@@ -153,7 +153,7 @@
     .switch {
       position: relative;
       display: inline-block;
-      width: 110px;
+      width: 90px;
       height: 34px;
       float: right;
       margin-right: 37px;
@@ -168,7 +168,8 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: #e16817;
+      background-color: #ffffff;
+      border: 1px solid #e16817;
       -webkit-transition: .4s;
       transition: .4s;
     }
@@ -180,14 +181,14 @@
       width: 26px;
       left: 4px;
       bottom: 4px;
-      background-color: #e16817;
+      background-color: #ffffff;
       -webkit-transition: .4s;
       transition: .4s;
     }
     
     input:checked + .slider {
-      background-color: #ffffff;
-      border: 1px solid #e16817;
+      background-color: #e16817;
+      border: 1px solid #ffffff;
     }
     
     input:focus + .slider {
@@ -204,12 +205,19 @@
     .pr
     {
       display: none;
-      text-align: left;
+      text-align: left !important;
+      
+      color: white;
+      left: 23px !important; 
+    }
+    .mdgpr
+    {
+      left: 58px !important;
+      color: #e16817;
     }
     
     .pr, .mdgpr
     {
-      color: white;
       position: absolute;
       transform: translate(-50%,-50%);
       top: 50%;
@@ -219,18 +227,23 @@
     }
     
     input:checked+ .slider .pr
-    {display: block;}
+    {display: block;
+    }
     
     input:checked + .slider .mdgpr
     {display: none;
-      color: white;}
+      color: white;
+    }
     
     /*--------- END --------*/
     
     /* Rounded sliders */
     .slider.round {
       border-radius: 34px;
+      
     }
     
     .slider.round:before {
-      border-radius: 50%;}
+      border-radius: 50%;
+      border: 1px solid #e16817;
+    }

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

@@ -5,6 +5,7 @@ import { EventsService } from 'src/app/services/events.service';
 import { Router } from '@angular/router';
 import { ActivatedRoute, NavigationEnd } from '@angular/router';
 import { formatDate } from '@angular/common';
+import { AlertService } from 'src/app/services/alert.service';
 
 
 @Component({
@@ -37,7 +38,10 @@ export class EventsPage implements OnInit {
 
   showLoader: boolean = true;
 
-  constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }
+  constructor(private eventService: EventsService, 
+    private router: Router, 
+    public activatedRoute: ActivatedRoute,
+    private alertController: AlertService) { }
 
   ngOnInit() {
     //Inicializar segment
@@ -108,5 +112,9 @@ export class EventsPage implements OnInit {
     this.router.navigate(['/home/events']);
   }
 
+  showAlert(){
+    this.alertController.presentAlert("Funcionalidade em desenvolvimento!");
+  }
+
 }
 

src/app/services/alert.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+  let service: AlertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AlertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/alert.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AlertService {
+
+  constructor(public alertController: AlertController) { }
+
+  async presentAlert(message:string) {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Mensagem do sistema',
+      message: message,
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
+}