feat: calendar plugin

src/app/modules/settings/page/calendar-sync-settings.html

@@ -0,0 +1,120 @@
+<!--
+  ~ Copyright (C) 2021 StApps
+  ~  This program is free software: you can redistribute it and/or modify it
+  ~  under the terms of the GNU General Public License as published by the Free
+  ~  Software Foundation, version 3.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>{{
+      'settings.calendar.title' | translate
+    }}</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    <ion-list lines="none">
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>{{
+            'settings.calendar.sync.title' | translate
+          }}</ion-label>
+        </ion-item-divider>
+        <ion-item>
+          <ion-toggle
+            [disabled]="isWeb"
+            [checked]="syncEnabled"
+            (ionChange)="
+              setSetting({
+                sync: $event.detail.checked
+              });
+              syncCalendar($event.detail.checked)
+            "
+          >
+          </ion-toggle>
+          <ion-label>{{
+            'settings.calendar.sync.syncWithCalendar' | translate
+          }}</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-toggle
+            [disabled]="isWeb"
+            [checked]="notificationsEnabled"
+            (ionChange)="
+              setSetting({
+                notifications: $event.detail.checked
+              })
+            "
+          >
+          </ion-toggle>
+          <ion-label>{{
+            'settings.calendar.sync.eventNotifications' | translate
+          }}</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-button
+            [disabled]="isWeb || !syncEnabled"
+            fill="clear"
+            (click)="syncCalendar(true)"
+          >
+            <ion-label>Sync Now</ion-label>
+            <ion-icon slot="end" name="sync"></ion-icon>
+          </ion-button>
+        </ion-item>
+        <ion-item *ngIf="isWeb">
+          <ion-label color="medium"
+            ><i>{{
+              'settings.calendar.sync.unavailableWeb' | translate
+            }}</i></ion-label
+          >
+        </ion-item>
+      </ion-item-group>
+
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>{{
+            'settings.calendar.export.title' | translate
+          }}</ion-label>
+        </ion-item-divider>
+        <ion-item>
+          <ion-button fill="clear" (click)="export()">
+            <ion-label>{{
+              'settings.calendar.export.exportEvents' | translate
+            }}</ion-label>
+            <ion-icon slot="end" name="download"></ion-icon>
+          </ion-button>
+        </ion-item>
+        <ion-item>
+          <ion-button fill="clear" (click)="backup()">
+            <ion-label>{{
+              'settings.calendar.export.backup' | translate
+            }}</ion-label>
+            <ion-icon slot="end" name="save"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" (click)="restoreInput.click()">
+            <ion-label>{{
+              'settings.calendar.export.restore' | translate
+            }}</ion-label>
+            <ion-icon slot="end" name="refresh"></ion-icon>
+          </ion-button>
+          <!--suppress CheckEmptyScriptTag -->
+          <input
+            class="ion-hide"
+            type="file"
+            accept="application/json"
+            #restoreInput
+            (change)="restore($event)"
+          />
+        </ion-item>
+      </ion-item-group>
+    </ion-list>
+  </ion-card-content>
+</ion-card>