enhancement (core / viewer): still image view; demo app

dasch-swiss · Oct 4, 2018 · 4f9ce61 · 4f9ce61
1 parent 57bd31b
commit 4f9ce61
Show file tree

Hide file tree

Showing 20 changed files with 1,454 additions and 127 deletions.
diff --git a/angular.json b/angular.json
@@ -37,7 +37,9 @@
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
               "node_modules/prismjs/components/prism-csharp.min.js",
-              "node_modules/prismjs/components/prism-css.min.js"
+              "node_modules/prismjs/components/prism-css.min.js",
+              "node_modules/openseadragon/build/openseadragon/openseadragon.min.js",
+              "node_modules/svg-overlay/openseadragon-svg-overlay.js"
             ]
           },
           "configurations": {
@@ -337,4 +339,4 @@
       "styleext": "scss"
     }
   }
-}
+}
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "moment": "^2.22.2",
     "ngx-markdown": "^6.0.1",
     "node-sass": "^4.9.3",
-    "openseadragon": "^2.3.0",
+    "openseadragon": "^2.4.0",
     "rxjs": "^6.2.2",
     "svg-overlay": "github:openseadragon/svg-overlay",
     "ts-md5": "^1.2.4",

diff --git a/projects/knora/core/src/lib/declarations/api/shared/date.ts b/projects/knora/core/src/lib/declarations/api/shared/date.ts
@@ -1,5 +1,9 @@
 import { JsonObject, JsonProperty } from 'json2typescript';
 
+/**
+ * Start / End date format for Salsah or any other GUI
+ * = Zeitpunkt
+ */
 @JsonObject('DateFormatSalsah')
 export class DateFormatSalsah {
 
@@ -17,6 +21,10 @@ export class DateFormatSalsah {
 }
 
 
+/**
+ * Date format for Salsah
+ * = Period (even when there's only a start date)
+ */
 @JsonObject('DateSalsah')
 export class DateSalsah {
 
@@ -26,3 +34,51 @@ export class DateSalsah {
     @JsonProperty('end', DateFormatSalsah, true)
     public end: DateFormatSalsah = undefined;
 }
+
+/**
+ * date value, which is needed by the JSON-LD converter
+ */
+@JsonObject('DateValue')
+export class DateValue {
+
+    @JsonProperty('calendar', String)
+    public calendar: string = undefined;
+
+    @JsonProperty('id', String)
+    public id: string = undefined;
+
+    @JsonProperty('propIri', String)
+    public propIri: string = undefined;
+
+    @JsonProperty('type', String)
+    public type: string = undefined;
+
+    @JsonProperty('startDay', Number)
+    public startDay: number = undefined;
+
+    @JsonProperty('startMonth', Number)
+    public startMonth: number = undefined;
+
+    @JsonProperty('startYear', Number)
+    public startYear: number = undefined;
+
+    @JsonProperty('startEra', String)
+    public startEra: string = undefined;
+
+    @JsonProperty('endDay', Number)
+    public endDay: number = undefined;
+
+    @JsonProperty('endMonth', Number)
+    public endMonth: number = undefined;
+
+    @JsonProperty('endYear', Number)
+    public endYear: number = undefined;
+
+    @JsonProperty('endEra', String)
+    public endEra: string = undefined;
+
+    // we don't need the separator anymore!?
+    @JsonProperty('separator', String, true)
+    public separator: string = undefined;
+
+}
diff --git a/projects/knora/viewer/src/lib/property/integer-value/integer-value.component.ts b/projects/knora/viewer/src/lib/property/integer-value/integer-value.component.ts
@@ -15,6 +15,7 @@ export class IntegerValueComponent implements OnInit {
     }
 
     ngOnInit() {
+        console.log(this.valueObject);
     }
 
 }
diff --git a/projects/knora/viewer/src/lib/view/resource-view/resource-view.component.html b/projects/knora/viewer/src/lib/view/resource-view/resource-view.component.html
@@ -1,5 +1,6 @@
 <mat-card>
 
+    <!-- TODO: switch through the media type -->
     <kui-still-image></kui-still-image>
     <kui-moving-image></kui-moving-image>
     <kui-annotation></kui-annotation>
@@ -41,4 +42,4 @@ <h3>type: {{ontologyInfo?.getLabelForResourceClass(resource?.type)}}</h3>
         </mat-list>
     </div>
 
-</mat-card>
+</mat-card>
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -112,8 +112,8 @@ export class AppDemo {
         label: 'Viewer module',
         children: [
             {
-                name: 'objects',
-                label: 'Objects'
+                name: 'resources',
+                label: 'Resources'
             },
             {
                 name: 'properties',

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -34,7 +34,6 @@ import { ResourceComponent } from './knora-ui-examples/core-demo/resource/resour
 import { UsersComponent } from './knora-ui-examples/core-demo/users/users.component';
 import { SearchDemoComponent } from './knora-ui-examples/search-demo/search-demo.component';
 import { SearchResultComponent } from './knora-ui-examples/search-demo/search-result/search-result.component';
-import { ObjectsComponent } from './knora-ui-examples/viewer-demo/objects/objects.component';
 import { PropertiesComponent } from './knora-ui-examples/viewer-demo/properties/properties.component';
 import { ViewerDemoComponent } from './knora-ui-examples/viewer-demo/viewer-demo.component';
 import { ViewsComponent } from './knora-ui-examples/viewer-demo/views/views.component';
@@ -43,6 +42,7 @@ import { MainIntroComponent } from './landing-page/main-intro/main-intro.compone
 import { MaterialModule } from './material-module';
 import { TreeComponent } from './material/tree/tree.component';
 import { ExampleViewerComponent } from './partials/example-viewer/example-viewer.component';
+import { ResourcesComponent } from './knora-ui-examples/viewer-demo/resources/resources.component';
 // landing page framework components
 import { MainHeaderComponent } from './partials/main-header/main-header.component';
 import { ModuleHeaderComponent } from './partials/module-header/module-header.component';
@@ -80,11 +80,11 @@ import { KeyComponent } from './knora-ui-examples/action-demo/key/key.component'
         SearchResultComponent,
         ViewerDemoComponent,
         PropertiesComponent,
-        ObjectsComponent,
         ViewsComponent,
         AuthComponent,
         ExistingNameComponent,
-        KeyComponent
+        KeyComponent,
+        ResourcesComponent
     ],
     entryComponents: [
         // LoginFormComponent

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -1,36 +1,36 @@
-import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '@knora/authentication';
 import { AppDemo } from './app.config';
+import { ActionDemoComponent } from './knora-ui-examples/action-demo/action-demo.component';
+import { AdminImageComponent } from './knora-ui-examples/action-demo/admin-image/admin-image.component';
 import { ExistingNameComponent } from './knora-ui-examples/action-demo/existing-name/existing-name.component';
 import { KeyComponent } from './knora-ui-examples/action-demo/key/key.component';
-// / start with main-intro
-import { MainIntroComponent } from './landing-page/main-intro/main-intro.component';
-// /modules demo
-import { ModuleIndexComponent } from './partials/module-index/module-index.component';
-import { DemoIntroComponent } from './landing-page/demo-intro/demo-intro.component';
 import { ProgressIndicatorComponent } from './knora-ui-examples/action-demo/progress-indicator/progress-indicator.component';
+import { SortButtonComponent } from './knora-ui-examples/action-demo/sort-button/sort-button.component';
+import { AuthComponent } from './knora-ui-examples/authentication-demo/auth/auth.component';
+
+import { LoginComponent } from './knora-ui-examples/authentication-demo/login/login.component';
 import { CoreDemoComponent } from './knora-ui-examples/core-demo/core-demo.component';
-import { ProjectsComponent } from './knora-ui-examples/core-demo/projects/projects.component';
-import { UsersComponent } from './knora-ui-examples/core-demo/users/users.component';
-import { ListsComponent } from './knora-ui-examples/core-demo/lists/lists.component';
 import { GroupsComponent } from './knora-ui-examples/core-demo/groups/groups.component';
-import { TreeComponent } from './material/tree/tree.component';
+import { ListsComponent } from './knora-ui-examples/core-demo/lists/lists.component';
+import { ProjectsComponent } from './knora-ui-examples/core-demo/projects/projects.component';
 import { ResourceComponent } from './knora-ui-examples/core-demo/resource/resource.component';
-
-import { LoginComponent } from './knora-ui-examples/authentication-demo/login/login.component';
-import { ActionDemoComponent } from './knora-ui-examples/action-demo/action-demo.component';
-import { SortButtonComponent } from './knora-ui-examples/action-demo/sort-button/sort-button.component';
-import { AdminImageComponent } from './knora-ui-examples/action-demo/admin-image/admin-image.component';
+import { UsersComponent } from './knora-ui-examples/core-demo/users/users.component';
 
 import { SearchDemoComponent } from './knora-ui-examples/search-demo/search-demo.component';
 import { SearchResultComponent } from './knora-ui-examples/search-demo/search-result/search-result.component';
+import { PropertiesComponent } from './knora-ui-examples/viewer-demo/properties/properties.component';
+import { ResourcesComponent } from './knora-ui-examples/viewer-demo/resources/resources.component';
 
 import { ViewerDemoComponent } from './knora-ui-examples/viewer-demo/viewer-demo.component';
-import { PropertiesComponent } from './knora-ui-examples/viewer-demo/properties/properties.component';
 import { ViewsComponent } from './knora-ui-examples/viewer-demo/views/views.component';
-import { ObjectsComponent } from './knora-ui-examples/viewer-demo/objects/objects.component';
-import { AuthComponent } from './knora-ui-examples/authentication-demo/auth/auth.component';
+import { DemoIntroComponent } from './landing-page/demo-intro/demo-intro.component';
+// / start with main-intro
+import { MainIntroComponent } from './landing-page/main-intro/main-intro.component';
+import { TreeComponent } from './material/tree/tree.component';
+// /modules demo
+import { ModuleIndexComponent } from './partials/module-index/module-index.component';
 
 const appRoutes: Routes = [
     {
@@ -84,7 +84,7 @@ const appRoutes: Routes = [
             {
                 path: 'search',
                 component: SearchDemoComponent,
-                data: { partOf: AppDemo.searchModule },
+                data: {partOf: AppDemo.searchModule},
 
                 children: [
                     {
@@ -99,8 +99,8 @@ const appRoutes: Routes = [
                 data: {module: AppDemo.viewerModule},
                 children: [
                     {
-                        path: 'objects',
-                        component: ObjectsComponent,
+                        path: 'resources',
+                        component: ResourcesComponent,
                         data: {partOf: AppDemo.viewerModule}
                     },
                     {

diff --git a/src/app/knora-ui-examples/core-demo/resource/resource.component.html b/src/app/knora-ui-examples/core-demo/resource/resource.component.html
@@ -1,3 +1,8 @@
+<h4>Select a resource example:</h4>
+<p>
+    <button mat-raised-button *ngFor="let res of resources" (click)="openResource(res.iri)">{{res.name}}</button>
+</p>
+
 <!-- <salsah-message *ngIf="errorMessage">{{errorMessage}}</salsah-message> -->
 <p>{{ontologyInfo?.getLabelForResourceClass(resource?.type)}}</p>
 <p>{{resource?.label}}</p>
@@ -10,9 +15,16 @@
         <!--  array templates -->
         <!--  some types of properties (currently StillImageFileValues) are displayed in 1 template for the whole property list. -->
         <!-- TODO: Do we have to check for subproperties of hasStillImageFileValue? -->
-        <!-- <salsah-still-image-osdviewer #OSDViewer
-                                      *ngIf="prop.key == AppConfig.hasStillImageFileValue; else singleTemplates" [images]="resource?.stillImageRepresentationsToDisplay" [imageRangeStart]="0" [imageRangeEnd]="0" [imageChangeInterval]="1">
-        </salsah-still-image-osdviewer> -->
+        <br>
+        {{prop.key}}<br>
+        {{KnoraConstants.hasStillImageFileValue}}
+
+        <kui-still-image *ngIf="prop.key === KnoraConstants.hasStillImageFileValue" [images]="resource?.stillImageRepresentationsToDisplay" [imageRangeStart]="0" [imageRangeEnd]="0" [imageChangeInterval]="1">
+        </kui-still-image>
+
+
+        <mat-divider></mat-divider>
+        <mat-divider></mat-divider>
 
         <!--  single templates -->
         <!--  other types of properties are displayed in 1 template for each single property in the property list. -->
@@ -21,22 +33,41 @@
             <li *ngFor="let val of prop.value | key">
                 <span [ngSwitch]="val.value.getClassName()">
                     <p>we get the class name: {{val.value}}</p>
-                    <kui-date-value *ngSwitchCase="KnoraConstants.ReadDateValue" [valueObject]="val.value" [calendar]="true" [era]="true"></kui-date-value>
-                    <!-- <read-text-value-as-html *ngSwitchCase="KnoraConstants.ReadTextValueAsHtml" [valueObject]="val.value" [ontologyInfo]="ontologyInfo" [bindEvents]="true"></read-text-value-as-html>
-                <read-text-value-as-string *ngSwitchCase="KnoraConstants.ReadTextValueAsString" [valueObject]="val.value"></read-text-value-as-string>
-                <read-text-value-as-xml *ngSwitchCase="KnoraConstants.ReadTextValueAsXml" [valueObject]="val.value"></read-text-value-as-xml>
-                <read-date-value *ngSwitchCase="KnoraConstants.ReadDateValue" [valueObject]="val.value"></read-date-value>
-                <read-link-value *ngSwitchCase="KnoraConstants.ReadLinkValue" [valueObject]="val.value" [ontologyInfo]="ontologyInfo"></read-link-value>
-                <read-integer-value *ngSwitchCase="KnoraConstants.ReadIntegerValue" [valueObject]="val.value"></read-integer-value>
-                <read-decimal-value *ngSwitchCase="KnoraConstants.ReadDecimalValue" [valueObject]="val.value"></read-decimal-value>
-                <read-geom-value *ngSwitchCase="KnoraConstants.ReadGeomValue" [valueObject]="val.value"></read-geom-value>
-                <read-color-value *ngSwitchCase="KnoraConstants.ReadColorValue" [valueObject]="val.value"></read-color-value>
-                <read-uri-value *ngSwitchCase="KnoraConstants.ReadUriValue" [valueObject]="val.value"></read-uri-value>
-                <read-boolean-value *ngSwitchCase="KnoraConstants.ReadBooleanValue" [valueObject]="val.value"></read-boolean-value>
-                <read-interval-value *ngSwitchCase="KnoraConstants.ReadIntervalValue" [valueObject]="val.value"></read-interval-value>
-                <read-list-value *ngSwitchCase="KnoraConstants.ReadListValue" [valueObject]="val.value"></read-list-value>
-                <read-textfile-value *ngSwitchCase="KnoraConstants.TextFileValue" [valueObject]="val.value"></read-textfile-value>
-                <span *ngSwitchDefault="">Not supported {{val.value.getClassName()}}</span> -->
+                    <kui-date-value *ngSwitchCase="KnoraConstants.ReadDateValue" [valueObject]="val.value"
+                                    [calendar]="true" [era]="true"></kui-date-value>
+                    <kui-integer-value *ngSwitchCase="KnoraConstants.ReadIntegerValue"
+                                       [valueObject]="val.value"></kui-integer-value>
+                    <!--
+                    <read-text-value-as-html *ngSwitchCase="KnoraConstants.ReadTextValueAsHtml"
+                                             [valueObject]="val.value" [ontologyInfo]="ontologyInfo"
+                                             [bindEvents]="true"></read-text-value-as-html>
+                    <read-text-value-as-string *ngSwitchCase="KnoraConstants.ReadTextValueAsString"
+                                               [valueObject]="val.value"></read-text-value-as-string>
+                    <read-text-value-as-xml *ngSwitchCase="KnoraConstants.ReadTextValueAsXml"
+                                            [valueObject]="val.value"></read-text-value-as-xml>
+                    <read-date-value *ngSwitchCase="KnoraConstants.ReadDateValue"
+                                     [valueObject]="val.value"></read-date-value>
+                    <read-link-value *ngSwitchCase="KnoraConstants.ReadLinkValue" [valueObject]="val.value"
+                                     [ontologyInfo]="ontologyInfo"></read-link-value>
+                    <read-integer-value *ngSwitchCase="KnoraConstants.ReadIntegerValue"
+                                        [valueObject]="val.value"></read-integer-value>
+                    <read-decimal-value *ngSwitchCase="KnoraConstants.ReadDecimalValue"
+                                        [valueObject]="val.value"></read-decimal-value>
+                    <read-geom-value *ngSwitchCase="KnoraConstants.ReadGeomValue"
+                                     [valueObject]="val.value"></read-geom-value>
+                    <read-color-value *ngSwitchCase="KnoraConstants.ReadColorValue"
+                                      [valueObject]="val.value"></read-color-value>
+                    <read-uri-value *ngSwitchCase="KnoraConstants.ReadUriValue" [valueObject]="val.value"></read-uri-value>
+                    <read-boolean-value *ngSwitchCase="KnoraConstants.ReadBooleanValue"
+                                        [valueObject]="val.value"></read-boolean-value>
+                    <read-interval-value *ngSwitchCase="KnoraConstants.ReadIntervalValue"
+                                         [valueObject]="val.value"></read-interval-value>
+                    <read-list-value *ngSwitchCase="KnoraConstants.ReadListValue"
+                                     [valueObject]="val.value"></read-list-value>
+                    <read-textfile-value *ngSwitchCase="KnoraConstants.TextFileValue"
+                                         [valueObject]="val.value"></read-textfile-value>
+                    <span *ngSwitchDefault="">Not supported {{val.value.getClassName()}}</span>
+                    -->
                 </span>
             </li>
         </ul>
@@ -49,7 +80,8 @@
         <p>Incoming Links:</p>
         <ul>
             <li *ngFor="let incomingLinkSourceRes of resource.incomingLinks">
-                <span matTooltip="{{incomingLinkSourceRes.label}} {{ontologyInfo?.getLabelForResourceClass(incomingLinkSourceRes.type)}}">
+                <span
+                    matTooltip="{{incomingLinkSourceRes.label}} {{ontologyInfo?.getLabelForResourceClass(incomingLinkSourceRes.type)}}">
                     {{incomingLinkSourceRes.label}} {{getIncomingPropertiesFromIncomingResource(incomingLinkSourceRes)}}
                 </span>
             </li>
@@ -58,8 +90,9 @@
 
     <!-- Check if StillImageRepresentations are pointing to the current resource -->
     <!-- Event getImages: more images are requested (previous or next set) -->
-    <!-- <salsah-still-image-osdviewer #OSDViewer (getImages)="changeOffsetForStillImageRepresentations($event)"
-                                  *ngIf="resource?.incomingStillImageRepresentations?.length > 0;" [images]="resource?.stillImageRepresentationsToDisplay" [imageRangeStart]="0" [imageRangeEnd]="4" [imageChangeInterval]="5">
-    </salsah-still-image-osdviewer> -->
+    <kui-still-image *ngIf="resource?.incomingStillImageRepresentations?.length > 0;" [images]="resource?.stillImageRepresentationsToDisplay" [imageRangeStart]="0" [imageRangeEnd]="4" [imageChangeInterval]="5">
+        <!-- I removed the following method, which we should implement again:
+        <!-- (getImages)="changeOffsetForStillImageRepresentations($event)" -->
+    </kui-still-image>
 
-</mat-list>
+</mat-list>