Initial changes, only content, no styling

src/app/app.module.ts

@@ -86,7 +86,7 @@ import {
 } from './wizards';
 
 // Pipes
-import { FilesizePipe, SafePipe } from './pipes';
+import { FilesizePipe, ReplayHasValuePipe, SafePipe } from './pipes';
 
 // Dialogs
 import {
@@ -169,6 +169,7 @@ const INTERCEPTORS: Provider[] = [
         ResetPasswordDialogComponent,
         ForgotUsernameDialogComponent,
         ForgotPasswordDialogComponent,
+        ReplayHasValuePipe,
     ],
     imports: [
         CommonModule,

src/app/pages/annotate/annotate.component.html

@@ -1,28 +1,60 @@
-<app-actionbar [showEditButton]="true" [element]="entity"></app-actionbar>
-
-<!-- No model ID provided: Annotation Overview -->
-<section *ngIf="!object" id="annotation-overview">
-  <div class="iframe-container entity-viewer fullheight">
-    <iframe
-      [src]="viewerUrl | safe: 'resourceUrl'"
-      style="background-color: #111"
-      allowfullscreen
-    ></iframe>
-  </div>
-</section>
-
-<!-- Model ID provided: Show viewer -->
-<div *ngIf="object" id="wrap-annotate">
-  <div id="annotation-viewer">
-    <div class="iframe-container entity-viewer">
-      <iframe [src]="viewerUrl | safe: 'resourceUrl'" allowfullscreen></iframe>
-    </div>
+<div class="container">
+  <h1>Annotate</h1>
+
+  <div class="explanation">
+    <h2>What are annotations?</h2>
+
+    <p>Annotations are multimedia containers that allow you to attach descriptions or references to points in space from
+      a
+      chosen camera perspective on 3D objects in Kompakkt. Through the selection of different perspectives on
+      consecutive
+      annotations you can generate a walk-through. Annotations can contain text, images, AV media, URLs and more. You
+      can
+      annotate your own objects with default annotations visible to everyone else. You can also create your own private
+      annotations or annotate other people’s objects by creating a collection and then annotating the objects you curate
+      into this collection. </p>
+
+    <h2>How to annotate objects in Kompakkt?</h2>
+
+    <p>You can start annotating objects when you switch to Annotate mode via the Edit menu within your own objects or
+      when
+      you access Annotate mode from the Collection’s page Edit menu.</p>
+
+    <button mat-raised-button color="primary">Interactive demo</button>
   </div>
 
-  <div id="annotation-data">
-    <div class="detail-block">
-      <h1 [innerHTML]="object.title"></h1>
-      <p [innerHTML]="object.description"></p>
-    </div>
+  <div class="annotations">
+    <h2>Your annotations</h2>
+
+    <ng-container *ngIf="!(isAuthenticated$ | async); else authenticatedBlock">
+      <p>You must be logged in to see your annotations.</p>
+    </ng-container>
+
+    <ng-template #authenticatedBlock>
+
+
+      <ng-container *ngIf="userAnnotations$ | async as annotations; else noAnnotations">
+        <ng-container *ngIf="annotations.length > 0; else noAnnotations">
+          <p>You have created annotations within the following objects and/or collections:</p>
+
+          <ng-container *ngIf="!(entitiesAndCompilations$ | replayHasValue | async)">
+              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+          </ng-container>
+
+          <div class="grid entity-grid">
+            <app-grid-element *ngFor="let item of entitiesAndCompilations$ | async" [element]="item"></app-grid-element>
+          </div>
+        </ng-container>
+      </ng-container>
+      <ng-template #noAnnotations>
+        <p>You don’t have any annotations yet. Start creating annotations by accessing your existing objects and
+          collections, or creating new ones:</p>
+
+        <button mat-raised-button color="primary">Manage profile</button>
+        <button mat-raised-button color="primary">New object</button>
+        <button mat-raised-button color="primary">New collection</button>
+      </ng-template>
+    </ng-template>
   </div>
+
 </div>

src/app/pages/annotate/annotate.component.scss

@@ -1,50 +1,8 @@
 :host {
   display: flex;
+  align-items: center;
 }
 
-#annotation-overview {
-  background-color: #eee;
-  padding: 0 2rem;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-#wrap-annotate {
-  display: grid;
-  grid-template-columns: 3.5fr 1.5fr;
-  grid-template-rows: auto;
-
-  background-color: #eee;
-  height: calc(100vh - 169px);
-  max-height: calc(100vh - 169px);
-
-  .iframe-container {
-    height: calc(100vh - 169px);
-    min-height: 40vh;
-    max-height: calc(100vh - 169px);
-  }
-
-  @media (max-width: 1024px) {
-    display: flex;
-    flex-flow: column;
-
-    height: calc(100vh - 105px);
-    max-height: calc(100vh - 105px);
-  }
-}
-
-#annotation-viewer {
-  margin-left: 36px;
-
-  @media (max-width: 1024px) {
-    margin-right: 35px;
-  }
-}
-
-#annotation-data {
-  margin: 0 35px;
-
-  @media (max-width: 1024px) {
-  }
+div.container {
+  max-width: 1024px;
 }

src/app/pages/annotate/annotate.component.ts

@@ -1,29 +1,31 @@
 import { Component, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
 
-import { IEntity, IDigitalEntity } from 'src/common';
-import { environment } from 'src/environments/environment';
-import { BackendService } from 'src/app/services';
+import { IAnnotation, ICompilation, IEntity } from 'src/common';
+import { AccountService, BackendService } from 'src/app/services';
+import { map } from 'rxjs/operators';
+import { ReplaySubject } from 'rxjs';
 
 @Component({
   selector: 'app-annotate',
   templateUrl: './annotate.component.html',
   styleUrls: ['./annotate.component.scss'],
 })
 export class AnnotateComponent implements OnInit {
-  public entity: IEntity | undefined;
-  public object: IDigitalEntity | undefined;
-  public objectID: string | undefined;
-  public viewerUrl: string;
-
+  public entitiesAndCompilations$ = new ReplaySubject<Array<IEntity | ICompilation>>(0);
   constructor(
-    private route: ActivatedRoute,
-    private backend: BackendService,
     private titleService: Title,
     private metaService: Meta,
-  ) {
-    this.viewerUrl = ``;
+    private account: AccountService,
+    private backend: BackendService,
+  ) {}
+
+  get isAuthenticated$() {
+    return this.account.isAuthenticated$;
+  }
+
+  get userAnnotations$() {
+    return this.account.user$.pipe(map(({ data }) => data.annotation as IAnnotation[]));
   }
 
   ngOnInit() {
@@ -33,35 +35,34 @@ export class AnnotateComponent implements OnInit {
       content: 'Annotate object.',
     });
 
-    this.objectID = this.route.snapshot.paramMap.get('id') || undefined;
-    const isCompilation = this.route.snapshot.paramMap.get('type') === 'compilation';
+    this.userAnnotations$.subscribe(annotations => {
+      // Multiple annotations can and will be on the same objects or collections
+      // Using reverse mapping, we can narrow down the targets
+      const items = Object.fromEntries(
+        annotations
+          .map(annotation => annotation.target.source)
+          .map(({ relatedCompilation, relatedEntity }) => {
+            {
+              const isCompilation = typeof relatedCompilation === 'string' && !!relatedCompilation;
+              const target = isCompilation ? relatedCompilation : relatedEntity;
+              return [target, isCompilation];
+            }
+          }),
+      );
 
-    const params: string[] = ['mode=annotation'];
-    if (this.objectID) {
-      params.push(isCompilation ? `compilation=${this.objectID}` : `entity=${this.objectID}`);
-    }
-
-    this.viewerUrl = `${environment.viewer_url}?${params.join('&')}`;
-
-    if (this.objectID && !isCompilation) {
-      this.backend
-        .getEntity(this.objectID)
-        .then(resultEntity => {
-          this.entity = resultEntity;
-          if (!resultEntity.relatedDigitalEntity) {
-            throw new Error('Invalid object metadata.');
-          }
-          return this.backend.getEntityMetadata(resultEntity.relatedDigitalEntity._id);
-        })
-        .then(result => {
-          this.object = result;
+      Promise.all(
+        Object.entries(items).map(async ([target, isCompilation]) => {
+          return isCompilation
+            ? await this.backend.getCompilation(target)
+            : await this.backend.getEntity(target);
+        }),
+      )
+        .then(items => {
+          return items.filter(item => !!item).map(item => item as IEntity | ICompilation);
         })
-        .catch(e => {
-          this.object = undefined;
-          console.error(e);
+        .then(items => {
+          this.entitiesAndCompilations$.next(Array.from(new Set(items)));
         });
-    }
-
-    console.log(this.viewerUrl);
+    });
   }
 }