forked from EVOgeek/Vmeda.Online
98 lines
5.8 KiB
HTML
98 lines
5.8 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title>{{ 'addon.calendar.calendarevents' | translate }}</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
|
|
<ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
|
|
</ion-button>
|
|
<core-context-menu>
|
|
<core-context-menu-item [hidden]="!notificationsEnabled" [priority]="600"
|
|
[content]="'core.settings.settings' | translate" (action)="openSettings()" iconAction="fas-cogs">
|
|
</core-context-menu-item>
|
|
<core-context-menu-item [hidden]="!eventsLoaded || !hasOffline || !isOnline" [priority]="400"
|
|
[content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
|
|
[iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
|
|
</core-context-menu>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content>
|
|
<core-split-view>
|
|
<ion-refresher slot="fixed" [disabled]="!eventsLoaded" (ionRefresh)="doRefresh($event.target)">
|
|
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
|
</ion-refresher>
|
|
<core-loading [hideUntil]="eventsLoaded">
|
|
<!-- There is data to be synchronized -->
|
|
<ion-card class="core-warning-card" *ngIf="hasOffline">
|
|
<ion-item>
|
|
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
|
|
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}</ion-label>
|
|
</ion-item>
|
|
</ion-card>
|
|
|
|
<core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar"
|
|
[message]="'addon.calendar.noevents' | translate">
|
|
</core-empty-box>
|
|
|
|
<ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
|
|
<ng-container *ngFor="let event of filteredEvents">
|
|
<ion-item-divider *ngIf="event.showDate">
|
|
<ion-label>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</ion-label>
|
|
</ion-item-divider>
|
|
<ion-item class="addon-calendar-event ion-text-wrap" [title]="event.name" (click)="gotoEvent(event.id)"
|
|
[attr.aria-current]="event.id == eventId ? 'page' : 'false'"
|
|
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
|
|
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" slot="start" class="core-module-icon" alt=""
|
|
role="presentation">
|
|
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
|
|
aria-hidden="true">
|
|
</ion-icon>
|
|
<ion-label>
|
|
<h2>
|
|
<!-- Add the icon title so accessibility tools read it. -->
|
|
<span class="sr-only">
|
|
{{ 'addon.calendar.type' + event.formattedType | translate }}
|
|
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
|
|
</span>
|
|
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
|
|
[contextInstanceId]="event.contextInstanceId">
|
|
</core-format-text>
|
|
</h2>
|
|
<p>
|
|
{{ event.timestart * 1000 | coreFormatDate: "strftimetime" }}
|
|
<span *ngIf="event.timeduration && event.endsSameDay">
|
|
- {{ (event.timestart + event.timeduration) * 1000 | coreFormatDate: "strftimetime" }}
|
|
</span>
|
|
<span *ngIf="event.timeduration && !event.endsSameDay">
|
|
- {{ (event.timestart + event.timeduration) * 1000 | coreFormatDate: "strftimedatetimeshort" }}
|
|
</span>
|
|
</p>
|
|
</ion-label>
|
|
<ion-note *ngIf="event.offline && !event.deleted" slot="end">
|
|
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
|
|
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
|
|
</ion-note>
|
|
<ion-note *ngIf="event.deleted" slot="end">
|
|
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
|
|
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
|
|
</ion-note>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ion-list>
|
|
|
|
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)" [error]="loadMoreError">
|
|
</core-infinite-loading>
|
|
</core-loading>
|
|
|
|
<!-- Create a calendar event. -->
|
|
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canCreate">
|
|
<ion-fab-button (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
|
|
<ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab>
|
|
</core-split-view>
|
|
</ion-content>
|