0.2.5 initial commit

Makefile incomplete

ui/src/app/pages/notifications/notifications.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule, Routes } from '@angular/router'
+import { NotificationsPage } from './notifications.page'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NotificationsPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    PwaBackComponentModule,
+    BadgeMenuComponentModule,
+  ],
+  declarations: [NotificationsPage],
+})
+export class NotificationsPageModule { }

ui/src/app/pages/notifications/notifications.page.html

@@ -0,0 +1,64 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>Notifications</ion-title>
+    <ion-buttons slot="end">
+      <badge-menu-button></badge-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content pullingIcon="lines" refreshingSpinner="lines"></ion-refresher-content>
+  </ion-refresher>
+
+  <ion-item *ngIf="error" style="margin-bottom: 16px;">
+    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
+  </ion-item>
+
+  <ion-spinner *ngIf="loading" class="center" name="lines" color="warning"></ion-spinner>
+
+  <ion-item-group *ngIf="!notifications.length && !loading">
+    <ion-item>
+      <ion-label class="ion-text-wrap">
+        <h2>
+          <ion-text color="medium">Notifications about Embassy and services will appear here.</ion-text>
+        </h2>
+      </ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group style="margin-bottom: 16px;">
+    <ion-item-sliding *ngFor="let not of notifications; let i = index">
+      <ion-item-options side="end">
+        <ion-item-option color="danger" (click)="remove(not.id, i)">
+          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+        </ion-item-option>
+      </ion-item-options>
+      <ion-item>
+        <ion-label class="ion-text-wrap">
+          <h2>
+            <ion-text [color]="getColor(not)"><b>{{ not.title }}</b></ion-text>
+          </h2>
+          <h2 class="notification-message">{{ not.message }}</h2>
+          <p>{{ not.createdAt | date: 'short' }}</p>
+          <p>
+            <a style="text-decoration: none;"
+              [routerLink]="['/services', 'installed', not.appId]">{{ not.appId }}</a>
+            <span> - </span>
+            Code: {{ not.code }}
+          </p>
+        </ion-label>
+      </ion-item>
+    </ion-item-sliding>
+  </ion-item-group>
+
+  <ion-infinite-scroll [disabled]="!needInfinite" (ionInfinite)="doInfinite($event)">
+    <ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>

ui/src/app/pages/notifications/notifications.page.scss

@@ -0,0 +1,3 @@
+.notification-message {
+  margin: 10px 0 12px 0;
+}

ui/src/app/pages/notifications/notifications.page.ts

@@ -0,0 +1,98 @@
+import { Component } from '@angular/core'
+import { ServerModel, S9Notification } from 'src/app/models/server-model'
+import { ApiService } from 'src/app/services/api/api.service'
+import { pauseFor } from 'src/app/util/misc.util'
+import { LoaderService } from 'src/app/services/loader.service'
+
+@Component({
+  selector: 'notifications',
+  templateUrl: 'notifications.page.html',
+  styleUrls: ['notifications.page.scss'],
+})
+export class NotificationsPage {
+  error = ''
+  loading = true
+  notifications: S9Notification[] = []
+  page = 1
+  needInfinite = false
+  readonly perPage = 20
+
+  constructor (
+    private readonly serverModel: ServerModel,
+    private readonly apiService: ApiService,
+    private readonly loader: LoaderService,
+  ) { }
+
+  async ngOnInit () {
+    const [notifications] = await Promise.all([
+      this.getNotifications(),
+      pauseFor(600),
+    ])
+    this.notifications = notifications
+    this.serverModel.update({ badge: 0 })
+    this.loading = false
+  }
+
+  async doRefresh (e: any) {
+    this.page = 1
+    await Promise.all([
+      this.getNotifications(),
+      pauseFor(600),
+    ])
+    e.target.complete()
+  }
+
+  async doInfinite (e: any) {
+    const notifications = await this.getNotifications()
+    this.notifications = this.notifications.concat(notifications)
+    e.target.complete()
+  }
+
+  async getNotifications (): Promise<S9Notification[]> {
+    let notifications: S9Notification[] = []
+    try {
+      notifications = await this.apiService.getNotifications(this.page, this.perPage)
+      this.needInfinite = notifications.length >= this.perPage
+      this.page++
+      this.error = ''
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      return notifications
+    }
+  }
+
+  getColor (notification: S9Notification): string {
+    const char = notification.code.charAt(0)
+    switch (char) {
+      case '0':
+        return 'primary'
+      case '1':
+        return 'success'
+      case '2':
+        return 'warning'
+      case '3':
+        return 'danger'
+      default:
+        return ''
+    }
+  }
+
+  async remove (notificationId: string, index: number): Promise<void> {
+    this.loader.of({
+      message: 'Deleting...',
+      spinner: 'lines',
+      cssClass: 'loader',
+    }).displayDuringP(
+      this.apiService.deleteNotification(notificationId).then(() => {
+        this.notifications.splice(index, 1)
+        this.error = ''
+      }),
+    ).catch(e => {
+      console.error(e)
+      this.error = e.message
+    })
+  }
+}
+