rename frontend to web and update contributing guide (#2509)

* rename frontend to web and update contributing guide

* rename this time

* fix build

* restructure rust code

* update documentation

* update descriptions

* Update CONTRIBUTING.md

Co-authored-by: J H <2364004+Blu-J@users.noreply.github.com>

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>
Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>
Co-authored-by: J H <2364004+Blu-J@users.noreply.github.com>

web/projects/ui/src/app/modals/backup-select/backup-select.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { BackupSelectPage } from './backup-select.page'
+import { FormsModule } from '@angular/forms'
+
+@NgModule({
+  declarations: [BackupSelectPage],
+  imports: [CommonModule, IonicModule, FormsModule],
+  exports: [BackupSelectPage],
+})
+export class BackupSelectPageModule {}

web/projects/ui/src/app/modals/backup-select/backup-select.page.html

@@ -0,0 +1,57 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Select Services to Back Up</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ng-container *ngIf="pkgs.length; else empty">
+    <ion-item-group>
+      <ion-item-divider>
+        <ion-buttons slot="end" style="padding-bottom: 6px">
+          <ion-button fill="clear" (click)="toggleSelectAll()">
+            <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
+          </ion-button>
+        </ion-buttons>
+      </ion-item-divider>
+      <ion-item *ngFor="let pkg of pkgs">
+        <ion-avatar slot="start">
+          <img alt="" [src]="pkg.icon" />
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ pkg.title }}</h2>
+        </ion-label>
+        <ion-checkbox
+          slot="end"
+          [(ngModel)]="pkg.checked"
+          (ionChange)="handleChange()"
+          [disabled]="pkg.disabled"
+        ></ion-checkbox>
+      </ion-item>
+    </ion-item-group>
+  </ng-container>
+  <ng-template #empty>
+    <h2 class="center">No services installed!</h2>
+  </ng-template>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button
+        [disabled]="!hasSelection"
+        fill="solid"
+        color="primary"
+        (click)="dismiss(true)"
+        class="enter-click btn-128"
+      >
+        Back Up Selected
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

web/projects/ui/src/app/modals/backup-select/backup-select.page.scss

@@ -0,0 +1,5 @@
+.center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

web/projects/ui/src/app/modals/backup-select/backup-select.page.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { map, take } from 'rxjs/operators'
+import { DataModel, PackageState } from 'src/app/services/patch-db/data-model'
+import { PatchDB } from 'patch-db-client'
+import { firstValueFrom } from 'rxjs'
+
+@Component({
+  selector: 'backup-select',
+  templateUrl: './backup-select.page.html',
+  styleUrls: ['./backup-select.page.scss'],
+})
+export class BackupSelectPage {
+  hasSelection = false
+  selectAll = false
+  pkgs: {
+    id: string
+    title: string
+    icon: string
+    disabled: boolean
+    checked: boolean
+  }[] = []
+
+  constructor(
+    private readonly modalCtrl: ModalController,
+    private readonly patch: PatchDB<DataModel>,
+  ) {}
+
+  async ngOnInit() {
+    this.pkgs = await firstValueFrom(
+      this.patch.watch$('package-data').pipe(
+        map(pkgs => {
+          return Object.values(pkgs)
+            .map(pkg => {
+              const { id, title } = pkg.manifest
+              return {
+                id,
+                title,
+                icon: pkg['static-files'].icon,
+                disabled: pkg.state !== PackageState.Installed,
+                checked: pkg.state === PackageState.Installed,
+              }
+            })
+            .sort((a, b) =>
+              b.title.toLowerCase() > a.title.toLowerCase() ? -1 : 1,
+            )
+        }),
+      ),
+    )
+  }
+
+  dismiss(success = false) {
+    if (success) {
+      const ids = this.pkgs.filter(p => p.checked).map(p => p.id)
+      this.modalCtrl.dismiss(ids)
+    } else {
+      this.modalCtrl.dismiss()
+    }
+  }
+
+  handleChange() {
+    this.hasSelection = this.pkgs.some(p => p.checked)
+  }
+
+  toggleSelectAll() {
+    this.pkgs.forEach(pkg => (pkg.checked = this.selectAll))
+    this.selectAll = !this.selectAll
+  }
+}