Initial changes, only content, no styling

Kompakkt · Aug 17, 2023 · 7c00896 · 7c00896
1 parent 5897e7a
commit 7c00896
Show file tree

Hide file tree

Showing 9 changed files with 295 additions and 672 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 // External dependencies
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouteReuseStrategy } from '@angular/router';
@@ -42,39 +42,39 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 // Components
 import {
-  AuthDialogComponent,
-  EntityDetailComponent,
+  ActionbarComponent,
   AddressComponent,
+  AnimatedImageComponent,
+  AuthDialogComponent,
+  CompilationDetailComponent,
+  DetailEntityComponent,
+  DetailInstitutionComponent,
+  DetailPersonComponent,
   EntityComponent,
-  InstitutionComponent,
-  PersonComponent,
+  EntityDetailComponent,
   FooterComponent,
+  GridElementComponent,
+  InstitutionComponent,
   NavbarComponent,
+  PersonComponent,
   SidenavListComponent,
   UploadComponent,
-  ActionbarComponent,
-  AnimatedImageComponent,
-  CompilationDetailComponent,
-  GridElementComponent,
-  DetailEntityComponent,
-  DetailPersonComponent,
-  DetailInstitutionComponent,
 } from './components';
 
 // Pages
 import {
+  AboutComponent,
+  AdminPageComponent,
   AnnotateComponent,
   CollaborateComponent,
+  ContactComponent,
   DetailPageComponent,
   ExploreComponent,
   HomeComponent,
+  NotFoundComponent,
+  PrivacyComponent,
   ProfilePageComponent,
   ProfilePageHelpComponent,
-  AdminPageComponent,
-  AboutComponent,
-  ContactComponent,
-  PrivacyComponent,
-  NotFoundComponent,
 } from './pages';
 
 // Wizards
@@ -85,20 +85,20 @@ import {
 } from './wizards';
 
 // Pipes
-import { FilesizePipe, SafePipe } from './pipes';
+import { FilesizePipe, ReplayHasValuePipe, SafePipe } from './pipes';
 
 // Dialogs
 import {
   ConfirmationDialogComponent,
-  RegisterDialogComponent,
-  EntitySettingsDialogComponent,
-  GroupMemberDialogComponent,
+  EditEntityDialogComponent,
   EntityRightsDialogComponent,
-  ExploreEntityDialogComponent,
-  UploadApplicationDialogComponent,
+  EntitySettingsDialogComponent,
   ExploreCompilationDialogComponent,
-  EditEntityDialogComponent,
+  ExploreEntityDialogComponent,
+  GroupMemberDialogComponent,
   PasswordProtectedDialogComponent,
+  RegisterDialogComponent,
+  UploadApplicationDialogComponent,
 } from './dialogs';
 import { ResetPasswordDialogComponent } from './dialogs/reset-password-dialog/reset-password-dialog.component';
 import { ForgotUsernameDialogComponent } from './dialogs/forgot-username-dialog/forgot-username-dialog.component';
@@ -118,93 +118,94 @@ const INTERCEPTORS: Provider[] = [
 ].map(useClass => ({ provide: HTTP_INTERCEPTORS, multi: true, useClass }));
 
 @NgModule({
-    declarations: [
-        AppComponent,
-        NavbarComponent,
-        HomeComponent,
-        SidenavListComponent,
-        AuthDialogComponent,
-        UploadComponent,
-        AddEntityWizardComponent,
-        AddCompilationWizardComponent,
-        FooterComponent,
-        ContactComponent,
-        PrivacyComponent,
-        EntityDetailComponent,
-        SafePipe,
-        PersonComponent,
-        InstitutionComponent,
-        EntityComponent,
-        AddressComponent,
-        ProfilePageComponent,
-        AddGroupWizardComponent,
-        ConfirmationDialogComponent,
-        ExploreComponent,
-        RegisterDialogComponent,
-        EntitySettingsDialogComponent,
-        GroupMemberDialogComponent,
-        EntityRightsDialogComponent,
-        AnnotateComponent,
-        CollaborateComponent,
-        AboutComponent,
-        ExploreEntityDialogComponent,
-        UploadApplicationDialogComponent,
-        ProfilePageHelpComponent,
-        ActionbarComponent,
-        AnimatedImageComponent,
-        ExploreCompilationDialogComponent,
-        EditEntityDialogComponent,
-        AdminPageComponent,
-        CompilationDetailComponent,
-        DetailPageComponent,
-        GridElementComponent,
-        PasswordProtectedDialogComponent,
-        NotFoundComponent,
-        DetailEntityComponent,
-        DetailPersonComponent,
-        DetailInstitutionComponent,
-        FilesizePipe,
-        ResetPasswordDialogComponent,
-        ForgotUsernameDialogComponent,
-        ForgotPasswordDialogComponent,
-    ],
-    imports: [
-        CommonModule,
-        BrowserModule,
-        AppRoutingModule,
-        DragDropModule,
-        MatAutocompleteModule,
-        MatSidenavModule,
-        MatToolbarModule,
-        MatButtonModule,
-        MatIconModule,
-        MatListModule,
-        MatMenuModule,
-        MatDialogModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatSnackBarModule,
-        MatGridListModule,
-        MatCardModule,
-        MatStepperModule,
-        MatSlideToggleModule,
-        MatTableModule,
-        MatTabsModule,
-        MatChipsModule,
-        MatCheckboxModule,
-        MatRadioModule,
-        MatExpansionModule,
-        MatSelectModule,
-        MatOptionModule,
-        MatTooltipModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        FormsModule,
-        BrowserAnimationsModule,
-        HttpClientModule,
-        ReactiveFormsModule,
-    ],
-    providers: [{ provide: RouteReuseStrategy, useClass: RouteReuse }, ...INTERCEPTORS],
-    bootstrap: [AppComponent]
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    HomeComponent,
+    SidenavListComponent,
+    AuthDialogComponent,
+    UploadComponent,
+    AddEntityWizardComponent,
+    AddCompilationWizardComponent,
+    FooterComponent,
+    ContactComponent,
+    PrivacyComponent,
+    EntityDetailComponent,
+    SafePipe,
+    PersonComponent,
+    InstitutionComponent,
+    EntityComponent,
+    AddressComponent,
+    ProfilePageComponent,
+    AddGroupWizardComponent,
+    ConfirmationDialogComponent,
+    ExploreComponent,
+    RegisterDialogComponent,
+    EntitySettingsDialogComponent,
+    GroupMemberDialogComponent,
+    EntityRightsDialogComponent,
+    AnnotateComponent,
+    CollaborateComponent,
+    AboutComponent,
+    ExploreEntityDialogComponent,
+    UploadApplicationDialogComponent,
+    ProfilePageHelpComponent,
+    ActionbarComponent,
+    AnimatedImageComponent,
+    ExploreCompilationDialogComponent,
+    EditEntityDialogComponent,
+    AdminPageComponent,
+    CompilationDetailComponent,
+    DetailPageComponent,
+    GridElementComponent,
+    PasswordProtectedDialogComponent,
+    NotFoundComponent,
+    DetailEntityComponent,
+    DetailPersonComponent,
+    DetailInstitutionComponent,
+    FilesizePipe,
+    ResetPasswordDialogComponent,
+    ForgotUsernameDialogComponent,
+    ForgotPasswordDialogComponent,
+    ReplayHasValuePipe,
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    AppRoutingModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSnackBarModule,
+    MatGridListModule,
+    MatCardModule,
+    MatStepperModule,
+    MatSlideToggleModule,
+    MatTableModule,
+    MatTabsModule,
+    MatChipsModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    MatExpansionModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    FormsModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+  ],
+  providers: [{ provide: RouteReuseStrategy, useClass: RouteReuse }, ...INTERCEPTORS],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/pages/annotate/annotate.component.html b/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>