clean create event page, stop video, event list box

src/app/app-routing.module.ts

@@ -292,6 +292,10 @@ const routes = [
   },
   {
     path: 'popup-question',
+    loadChildren: () => import('./modals/popup-question/popup-question.module').then( m => m.PopupQuestionPageModule)
+  },
+  {
+    path: 'swiper',
     loadChildren: () => import('./shared/swiper/swiper.module').then( m => m.SwiperPageModule)
   }
 

src/app/interceptors/token.interceptors.ts

@@ -8,11 +8,11 @@ import {
   HTTP_INTERCEPTORS,
   HttpClient,
 } from "@angular/common/http";
-import { AuthService } from '../services/auth.service';
 import { Observable, throwError, BehaviorSubject, of } from "rxjs";
 import { catchError, filter, take, switchMap, tap } from "rxjs/operators";
 import { SessionStore } from '../store/session.service';
 import { environment } from "src/environments/environment";
+import { Router } from "@angular/router";
 
 @Injectable()
 export class TokenInterceptor implements HttpInterceptor {
@@ -21,7 +21,7 @@ export class TokenInterceptor implements HttpInterceptor {
     null
   );
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private router: Router,) { }
 
 
   intercept(
@@ -90,7 +90,18 @@ export class TokenInterceptor implements HttpInterceptor {
 
         }),
         catchError((error) => {
-         /*  this.logoutUser(); */
+          SessionStore.user.Authorization = "";
+          SessionStore.user.RefreshToken = "";
+          SessionStore.setInativity(false)
+          /*  SessionStore.setUrlBeforeInactivity(this.router.url); */
+
+          if (environment.production) {
+            window.location.pathname = '/auth'
+          } else {
+            /* const pathBeforeGoOut = window.location.pathname */
+            this.router.navigateByUrl('/auth', { replaceUrl: true });
+
+          }
           return of(false);
         })
       );

src/app/pages/agenda/agenda.page.html

@@ -258,9 +258,9 @@
                       </div>
                       <div class="schedule-details">
                         <div class="description">
-                          <p class="m-0">{{event.event.Subject}}</p>
+                          <p class="m-0" [innerHTML]="event.event.Subject"></p>
                         </div>
-                        <div class="location">{{event.event.Location}}</div>
+                        <div class="location" [innerHTML]="event.event.Location"></div>
                         <div class="font-13 calendar-owner"*ngIf="eventService.getCalendarOwnNameByCalendarId(event.event.CalendarId) == 'Meu calendario'">{{SessionStore.user.FullName}} </div>
                         <ng-template #other_content>{{eventService.getCalendarOwnNameByCalendarId(event.event.CalendarId)}}</ng-template>
                       </div>

src/app/pages/publications/view-publications/view-publications.module.ts

@@ -10,6 +10,7 @@ import { ViewPublicationsPage } from './view-publications.page';
 
 import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';
 import { ShowMorePageModule } from 'src/app/shared/publication/view-publications/show-more/show-more.module'
+import { VisibilityDirective } from 'src/app/services/directives/visibility1.directive';
 export class LazyLoadImageHooks extends IntersectionObserverHooks {
 setup(attributes: Attributes) {
   attributes.offset = 10;
@@ -31,7 +32,7 @@ setup(attributes: Attributes) {
     ShowMorePageModule,
   ],
   exports: [ViewPublicationsPage],
-  declarations: [ViewPublicationsPage],
+  declarations: [ViewPublicationsPage, VisibilityDirective],
   providers: [{provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks}]
 })
 export class ViewPublicationsPageModule {}

src/app/pages/publications/view-publications/view-publications.page.html

@@ -51,13 +51,30 @@
                   <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
                     [lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
 
-                  <video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
+                  <video [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                     webkit-playsinline="webkit-playsinline">
                     <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
                   </video>
 
                 </div>
               </swiper-slide>
+
+              <div class="swiper-button-next"
+                style="
+                  position: absolute;
+                  background: red;
+                  top: 50%;
+                ">
+                <div>arrow-left</div>
+              </div>
+              <div class="slides-per-view"
+              style="
+                position: absolute;
+                background: red;
+                top: 50%;
+              ">
+                <div>arrow-rights</div>
+              </div>
             </swiper-container>
               <!-- <div *ngIf="publication.FileExtension == 'mp4'"
               (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" class="post-video">

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -291,3 +291,11 @@ swiper-slide video {
   justify-content: center;
   background: black;
 }
+
+
+.swiper-container::part(button-next) {
+  display: none !important;
+  .swiper-button-next {
+    display: none !important;
+  }
+}

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -68,6 +68,14 @@ export class ViewPublicationsPage implements OnInit {
     private publicationVideoManagerService: PublicationVideoManagerService) {
 
 
+      /* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
+
+
+      setTimeout(() => {
+
+        console.log(this.VideoManager.nativeElement)
+      }, 2000)
+
     this.createPublicationList()
 
     this.getFromDB();
@@ -109,6 +117,15 @@ export class ViewPublicationsPage implements OnInit {
     console.log(this.publicationFolderService.publicationList[this.folderId])
   }
 
+
+  onVisibilityChange = (e: boolean) => {
+
+    console.log("nice to have", e)
+    if(!e) {
+      /* this.stopVideo() */
+    }
+  }
+
   ngOnChanges() {
 
     if (typeof (this.folderId) == 'object') {

src/app/services/DomSanitizer.service.ts

@@ -24,13 +24,54 @@ export class DomSanitizerService {
   }
 
   private encodeSpecialCharacters(input: string): string {
+    const specialCharactersMap: Record<string, string> = {
+      '!': '&#33;',
+      '@': '&#64;',
+      '#': '&#35;',
+      '$': '&#36;',
+      '%': '&#37;',
+      '^': '&#94;',
+      '&': '&#38;',
+      '*': '&#42;',
+      '(': '&#40;',
+      ')': '&#41;',
+      '-': '&#45;',
+      '_': '&#95;',
+      '+': '&#43;',
+      '=': '&#61;',
+      '{': '&#123;',
+      '}': '&#125;',
+      '|': '&#124;',
+      '\\': '&#92;',
+      ':': '&#58;',
+      ';': '&#59;',
+      '"': '&#34;',
+      "'": '&#39;',
+      '<': '&#60;',
+      '>': '&#62;',
+      ',': '&#44;',
+      '.': '&#46;',
+      '?': '&#63;',
+      '/': '&#47;',
+      'ã': '&atilde;', // ã
+      'ç': '&ccedil;', // ç
+      'Â': '&Acirc;',  // Â
+      'â': '&acirc;',  // â
+      'Ã': '&Atilde;', // Ã
+    };
+  
+    return input.replace(/[!@#$%^&*()-_+=\{\}|\\:;"'<>,.?/ãçÂâÃ]/g, match => specialCharactersMap[match] || match);
+  }
+  
+
+  // private encodeSpecialCharacters(input: string): string {
     // You can use a library like DOMPurify to encode special characters
-    return DOMPurify.sanitize(input);
+   // return DOMPurify.sanitize(input);
 
     // If you don't want to use an external library, you can manually encode
     // Here's a simple example, you may need to extend this based on your requirements
     /* return input.replace(/</g, '&lt;').replace(/>/g, '&gt;'); */
-  }
+ // } 
 
   /*  sanitizeInput(input: string): string {
      return this.sanitizer.sanitize(SecurityContext.HTML, input);

src/app/services/directives/visibility.directive.ts

@@ -15,6 +15,9 @@ export class VisibilityDirective {
       threshold: 0.5 // Adjust as needed
     };
 
+
+    console.log(this.elementRef.nativeElement.parentElement, "=1=")
+
     this.intersectionObserver = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {

src/app/services/directives/visibility1.directive.spec.ts

@@ -0,0 +1,8 @@
+import { VisibilityDirective } from './visibility.directive';
+
+describe('VisibilityDirective', () => {
+  it('should create an instance', () => {
+    const directive = new VisibilityDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/services/directives/visibility1.directive.ts

@@ -0,0 +1,36 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appVisibility]'
+})
+export class VisibilityDirective {
+
+  intersectionObserver: IntersectionObserver;
+  @Input() appVisibility: (arg: any) => void;
+
+  constructor(private elementRef: ElementRef) {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5 // Adjust as needed
+    };
+
+
+    console.log(this.elementRef.nativeElement.parentElement, "=1=")
+
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.appVisibility(true);
+        } else {
+          this.elementRef.nativeElement.pause()
+          // Pause video when not visible
+          this.appVisibility(false); // You can implement pause logic here
+        }
+      });
+    }, options);
+
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
+
+}

src/app/shared/agenda/new-event/new-event.page.html

@@ -16,7 +16,7 @@
   <div class="main-content">
 
     <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
-      <ion-input autocomplete="on" autocorrect="on" spellcheck="true" type="text"  placeholder="Assunto*" [(ngModel)]="postEvent.Subject"></ion-input>
+      <ion-input autocomplete="on" autocorrect="on" spellcheck="true"  placeholder="Assunto*" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>
 
     <div *ngIf="Form && validateFrom" >

src/app/shared/agenda/new-event/new-event.page.ts

@@ -36,6 +36,8 @@ import { Subject } from 'rxjs';
 import { TaskService } from 'src/app/services/task.service'
 import { ContactsService } from 'src/app/services/contacts.service';
 import { DomSanitizerService } from 'src/app/services/DomSanitizer.service';
+import { ChangeProfileService } from 'src/app/services/change-profile.service';
+
 const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
   parse: {
     dateInput: "YYYY-MMMM-DD HH:mm"
@@ -102,8 +104,6 @@ export class NewEventPage implements OnInit {
 
   documents: SearchList[] = [];
 
-  // minDate: string;
-
   loggeduser: LoginUserRespose;
   @ViewChild('picker') picker: any;
   @ViewChild('fim') fim: any;
@@ -148,7 +148,8 @@ export class NewEventPage implements OnInit {
     private processeService: ProcessesService,
     public TaskService: TaskService,
     private contactsService: ContactsService,
-    private domSanitazerService: DomSanitizerService
+    private domSanitazerService: DomSanitizerService,
+    private changeProfileService: ChangeProfileService,
   ) {
     this.dateAdapter.setLocale('pt');
     this.loggeduser = SessionStore.user;
@@ -158,6 +159,10 @@ export class NewEventPage implements OnInit {
 
   ngOnInit() {
 
+    this.changeProfileService.registerCallback(() => {
+      this.initializeData()
+    })
+
     if (!this.CalendarName) {
       if (this.eventService.calendarNamesAry.includes('Meu calendario')) {
         this.CalendarName = 'Meu calendario';
@@ -172,50 +177,7 @@ export class NewEventPage implements OnInit {
       this.eventBody = { BodyType: "1", Text: "" };
       this.postEvent.Body = this.eventBody;
 
-      if (this.selectedSegment != "Combinada") {
+      this.initializeData()
-        this.postEvent = {
-          EventId: '',
-          Subject: '',
-          Body: this.eventBody,
-          Location: '',
-          CalendarId: '',
-          CalendarName: 'Oficial',
-          StartDate: this.autoStartTime,
-          EndDate: this.autoEndTime,
-          EventType: 'Reunião',
-          Attendees: this.attendees || null,
-          IsMeeting: false,
-          IsRecurring: false,
-          AppointmentState: 0,
-          TimeZone: '',
-          Organizer: '',
-          Category: 'Reunião',
-          HasAttachments: false,
-          EventRecurrence: { Type: '-1', LastOccurrence: this.autoEndTime },
-        };
-      }
-      else {
-        this.postEvent = {
-          EventId: '',
-          Subject: '',
-          Body: this.eventBody,
-          Location: '',
-          CalendarId: '',
-          CalendarName: 'Oficial',
-          StartDate: this.autoStartTime,
-          EndDate: this.autoEndTime,
-          EventType: 'Reunião',
-          Attendees: this.attendees || null,
-          IsMeeting: false,
-          IsRecurring: false,
-          AppointmentState: 0,
-          TimeZone: '',
-          Organizer: '',
-          Category: 'Reunião',
-          HasAttachments: false,
-          EventRecurrence: { Type: '-1', LastOccurrence: this.autoEndTime },
-        }
-      }
 
       if (this.postEvent.Attendees != null) {
         this.postEvent.Attendees.forEach(e => {
@@ -245,6 +207,53 @@ export class NewEventPage implements OnInit {
 
   }
 
+  initializeData() {
+    if (this.selectedSegment != "Combinada") {
+      this.postEvent = {
+        EventId: '',
+        Subject: '',
+        Body: this.eventBody,
+        Location: '',
+        CalendarId: '',
+        CalendarName: 'Oficial',
+        StartDate: this.autoStartTime,
+        EndDate: this.autoEndTime,
+        EventType: 'Reunião',
+        Attendees: this.attendees || null,
+        IsMeeting: false,
+        IsRecurring: false,
+        AppointmentState: 0,
+        TimeZone: '',
+        Organizer: '',
+        Category: 'Reunião',
+        HasAttachments: false,
+        EventRecurrence: { Type: '-1', LastOccurrence: this.autoEndTime },
+      };
+    }
+    else {
+      this.postEvent = {
+        EventId: '',
+        Subject: '',
+        Body: this.eventBody,
+        Location: '',
+        CalendarId: '',
+        CalendarName: 'Oficial',
+        StartDate: this.autoStartTime,
+        EndDate: this.autoEndTime,
+        EventType: 'Reunião',
+        Attendees: this.attendees || null,
+        IsMeeting: false,
+        IsRecurring: false,
+        AppointmentState: 0,
+        TimeZone: '',
+        Organizer: '',
+        Category: 'Reunião',
+        HasAttachments: false,
+        EventRecurrence: { Type: '-1', LastOccurrence: this.autoEndTime },
+      }
+    }
+  }
+
   setDefaultTime() {
     this.postEvent.StartDate = this.roundTimeQuarterHour(this.CalendarDate);
     this.postEvent.EndDate = this.roundTimeQuarterHourPlus15(this.postEvent.StartDate);

src/app/shared/agenda/view-event/view-event.page.html

@@ -13,7 +13,7 @@
           </button>
         </div>
         <div class="middle" (click)="openOptions()">
-          <p class="title">{{loadedEvent.Subject}}</p>
+          <p class="title" [innerHTML]="loadedEvent.Subject"></p>
         </div>
 
         <div class="div-icon d-flex align-base">
@@ -54,7 +54,7 @@
     <div class="upper-content">
       <div class="content-location">
 
-        <span class="date">{{loadedEvent.Location}}</span>
+        <span class="date" [innerHTML]="loadedEvent.Location"></span>
 
         <div *ngIf="loadedEvent.Organizer">
 

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -199,7 +199,7 @@ export class NewPublicationPage implements OnInit {
         multiple: true,
       });
     result.files.forEach(async element => {
-      if(this.checkFileType.checkFileType(element.mimeType) == 'image') {
+      if(this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
         this.convertBlobToBase64(element.blob).then((value) => {
 
           console.log(element.mimeType)

src/app/shared/publication/view-publications/view-publications.page.html

@@ -35,7 +35,7 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="main-container px-20" *ngIf="publicationFolderService.FolderDetails[folderId]">
+  <div class="main-container px-20" *ngIf="publicationFolderService.FolderDetails[folderId]" >
     <p class="item-content-detail">{{publicationFolderService.FolderDetails[folderId].Detail}}</p>
 
 
@@ -56,6 +56,24 @@
 
             </div>
           </swiper-slide>
+
+          <div class="swiper-button-next"
+          style="
+            position: absolute;
+            background: red;
+            top: 50%;
+          ">
+          <div>arrow-left</div>
+        </div>
+        <div class="slides-per-view"
+        style="
+          position: absolute;
+          background: red;
+          top: 50%;
+          right: 0px;
+        ">
+          <div>arrow-rights</div>
+        </div>s
         </swiper-container>
 
         <div class="post-content">

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -60,6 +60,15 @@ export class ViewPublicationsPage implements OnInit {
     private publicationVideoManagerService: PublicationVideoManagerService
   ) {
 
+
+    setTimeout(() => {
+      document.querySelector("swiper-container").shadowRoot.querySelector(".swiper-button-next").innerHTML = "ok"
+      alert("ok")
+      // console.log("this.VideoManager", this.VideoManager, document.querySelector('.VideoManager'))
+      /* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
+    }, 15000)
+
+    // this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement)
     this.createPublicationList()
 
   }
@@ -69,7 +78,7 @@ export class ViewPublicationsPage implements OnInit {
 
     console.log("nice to have", e)
     if(!e) {
-      //this.stopVideo()
+      /* this.stopVideo() */
     }
   }
   ngOnInit() {

src/app/shared/swiper/swiper-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SwiperPage } from './swiper.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SwiperPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SwiperPageRoutingModule {}

src/app/shared/swiper/swiper.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SwiperPageRoutingModule } from './swiper-routing.module';
+
+import { SwiperPage } from './swiper.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SwiperPageRoutingModule
+  ],
+  declarations: [SwiperPage]
+})
+export class SwiperPageModule {}

src/app/shared/swiper/swiper.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>swiper</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/shared/swiper/swiper.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SwiperPage } from './swiper.page';
+
+describe('SwiperPage', () => {
+  let component: SwiperPage;
+  let fixture: ComponentFixture<SwiperPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SwiperPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SwiperPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/swiper/swiper.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-swiper',
+  templateUrl: './swiper.page.html',
+  styleUrls: ['./swiper.page.scss'],
+})
+export class SwiperPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/global.scss

@@ -779,7 +779,7 @@ app-header-no-search  .ion-toolbar{
     --header-bottom-line-background-image: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
 
     --title-text-color: rgb(0, 0, 0);
-    --subtitle-text-color: #000
+    --subtitle-text-color: #000;
 
 
 

src/theme/variables.scss

@@ -118,6 +118,11 @@ $app-theme: mat-light-theme(
 
 
   --ion-color-primary-contrast: black;
+
+
+  --swiper-theme-color: #ffb703;
+  --swiper-navigation-color: #ffb703;
+  --swiper-pagination-color: #ffb703;
 }
 
 // dark-mode