doneit-web/src/app/pages/agenda/agenda.page.html

<ion-header class="ion-no-border bg-blue">
  <app-header class="bg-blue"></app-header>
</ion-header>

<ion-content id="timeline-conteiner agenda-container" class="timeline bg-blue">

  <div class="d-flex bg-blue container-wrapper">
    
    <div class="calendar-timeline bg-blue">
      <div class="calendar-wrapper">
        
        <div class="main-content">
        <!-- Toolbar -->
        <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
        <div>
          <!--  Calendar is here -->
          <div [ngSwitch]="segment">
            <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
      
              <ion-row class="ion-justify-content-between calendar-tool-tip">
                <ion-row class="ion-align-items-center">
                  <!-- Move back one screen of the slides -->
                  
                  <div (click)="back()" class="arrow">
                    <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
                  </div>
      
                  <!-- Move forward one screen of the slides -->
                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
      <!--               <div class="drop-down">
                    <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
                    <div class="drop-down-container">
                      <ul>
                        <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
                      </ul>
                    </div>
                  </div> -->
                  <!-- Move forward one screen of the slides -->
                  <div (click)="next()" class="arrow">
                    <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
                  </div>
      
                </ion-row>
                <ion-row class="ion-align-items-center">
                  <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
                  <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
                  <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
                </ion-row> 
              </ion-row> 
              
              <table class="custom-calendar-header">
                <thead>
                  <th>S</th>
                  <th>T</th>
                  <th>Q</th>
                  <th>Q</th>
                  <th>S</th>
                  <th>S</th>
                  <th>D</th>
                </thead>
              </table>
      
              <calendar  
                class="calendar-component"
                [eventSource]="eventSource"
                [calendarMode]="calendar.mode"
                [currentDate]="calendar.currentDate"
                (onEventSelected)="onEventSelected($event)"
                (onTitleChanged)="onViewTitleChanged($event)"
                (onRangeChanged)="onRangeChanged($event)"
                (onCurrentDateChanged)="onCurrentChanged($event)"
                queryMode="remote"
                startHour="6"
                endHour="20"
                step="30"
                startingDayMonth="1"
                noEventsLabel="Sem Eventos"
                allDayLabel="Todo o dia"
                [monthviewDisplayEventTemplate]="template"
              >
              </calendar>
      
              <!-- Adding a customized ng-template -->
              <ng-template #template let-view="view" let-row="row" let-col="col">
                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
                  {{ view.dates[row*7+col].label }} 
                  <div class="indicator-container">
                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
                  </div>
                </div>
              </ng-template>
            </div>
            <div class="calendar-container" *ngSwitchCase="'Pessoal'">
              <ion-row>
                <!-- Move back one screen of the slides -->
                <ion-col size="2">
                  <ion-button fill="clear" (click)="back()">
                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>
                <!-- The title of the calendar in the middle -->
                <ion-col size="8" class="ion-text-center">
                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
                </ion-col>
            
                <!-- Move forward one screen of the slides -->
                <ion-col size="2">
                  <ion-button fill="clear" (click)="next()">
                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>
              </ion-row>
            
      
              <table class="custom-calendar-header">
                <thead>
                  <th>S</th>
                  <th>T</th>
                  <th>Q</th>
                  <th>Q</th>
                  <th>S</th>
                  <th>S</th>
                  <th>D</th>
                </thead>
              </table>
      
              <calendar 
                class="calendar-component"
                [eventSource]="eventSource"
                [calendarMode]="calendar.mode"
                [currentDate]="calendar.currentDate"
                (onEventSelected)="onEventSelected($event)"
                (onTitleChanged)="onViewTitleChanged($event)"
                (onRangeChanged)="onRangeChanged($event)"
                (onCurrentDateChanged)="onCurrentChanged($event)"
                queryMode="remote"
                startHour="6"
                endHour="20"
                step="30"
                startingDayMonth="1"
                noEventsLabel="Sem Eventos"
                allDayLabel="Todo o dia"
                [monthviewDisplayEventTemplate]="template"
              >
              </calendar>
              <!-- (onTimeSelected)="onTimeSelected($event)" -->
        
              <!-- Adding a customized ng-template -->
              <ng-template #template let-view="view" let-row="row" let-col="col">
                <div [class.with-event]="view.dates[row*7+col].events.length">
                  {{view.dates[row*7+col].label}}
                  <div class="indicator-container">
                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
                  </div>
                </div>
              </ng-template> 
        
            </div>
            <div class="calendar-container" *ngSwitchCase="'Oficial'">
              <ion-row>
                <!-- Move back one screen of the slides -->
                <ion-col size="2">
                  <ion-button fill="clear" (click)="back()">
                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>
                <!-- The title of the calendar in the middle -->
                <ion-col size="8" class="ion-text-center">
                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
                </ion-col>
            
                <!-- Move forward one screen of the slides -->
                <ion-col size="2">
                  <ion-button fill="clear" (click)="next()">
                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
                  </ion-button>
                </ion-col>
              </ion-row>
              
      
              <table class="custom-calendar-header">
                <thead>
                  <th>S</th>
                  <th>T</th>
                  <th>Q</th>
                  <th>Q</th>
                  <th>S</th>
                  <th>S</th>
                  <th>D</th>
                </thead>
              </table>
              
              <calendar 
                class="calendar-component"
                [eventSource]="eventSource"
                [calendarMode]="calendar.mode"
                [currentDate]="calendar.currentDate"
                (onEventSelected)="onEventSelected($event)"
                (onTitleChanged)="onViewTitleChanged($event)"
                (onRangeChanged)="onRangeChanged($event)"
                (onCurrentDateChanged)="onCurrentChanged($event)"
                queryMode="remote"
                startHour="6"
                endHour="20"
                step="30"
                startingDayMonth="1"
                noEventsLabel="Sem Eventos"
                allDayLabel="Todo o dia"
                [monthviewDisplayEventTemplate]="template"
              >
              </calendar>
        
              <!-- Adding a customized ng-template -->
              <ng-template #template let-view="view" let-row="row" let-col="col">
                <div [class.with-event]="view.dates[row*7+col].events.length">
                  {{view.dates[row*7+col].label}}
                  <div class="indicator-container">
                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
                  </div>
                </div>
              </ng-template> 
        
            </div>
          </div>
      
          <div class="calendar-border">
            
          </div>
      
      
          <!-- Calendar currente date -->
          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
            <ion-row class="timeline-date align-center">
              <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
            </ion-row>
            <ion-row class="timeline-date align-center">
              <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
            </ion-row>
            <ion-row class="filter ion-align-items-center">
              <div class="filter-name">{{timelineFilterState}}</div>
              <!-- Icon -->
              <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
              <!-- List -->
              <ul *ngIf="showTimelineFilterState">
                <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
                <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
                <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
              </ul>
            </ion-row>
          </ion-row>
        </div>
        </div>

      </div>
      <div class="timeline-wrapper"  [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
          <!-- Progress bar -->
        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
          <ion-refresher-content>
          </ion-refresher-content>
        </ion-refresher>

        <!-- Timeline -->
        <div class="timeline-container"  *ngIf="showTimeline">
          <mwl-demo-utils-calendar-header class="timeline" 
            [(view)]="view" 
            [(viewDate)]="viewDate"
            [dayStartHour]="0"
            [dayEndHour]="23">
          </mwl-demo-utils-calendar-header>
          
          <div [ngSwitch]="view">
            <mwl-calendar-day-view
              *ngSwitchCase="'day'"
              [viewDate]="viewDate"
              [events]="events"
              (eventClicked)="eventClicked($event)"
            >
            </mwl-calendar-day-view>
          </div>
        </div>
      </div>
    </div>

    <div class="event-details  bg-blue ">
      
      <!-- New -->
      <app-new-event  *ngIf="mobileComponent.showAddNewEvent"


        [profile]="profile"
        [selectedSegment]=segment
        [selectedDate]="eventSelectedDate"
        (onAddEvent)="openAddEventDismiss($event)"
        
      ></app-new-event>
      <!-- Edit -->
      <app-edit-event  *ngIf="mobileComponent.showEditEvent"
        
        [profile]="profile"
        [selectedSegment]="segment"
        [postEvent]="postEvent"
        (cloneAllmobileComponent)="cloneAllmobileComponent($event)"

      ></app-edit-event>

      <!-- View -->
      <app-view-event *ngIf="mobileComponent.showEventDitails"
        [profile]="profile"
        [eventId]="selectedEventId"

        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
      ></app-view-event>

    </div>

  </div>
  
</ion-content>